git.iko.soy/bridge
on f660f7b help sign in
bridge/src/components/old/InnerLabelDropdown.js
115 lines 2.8 kB history raw
1import React from 'react';
2import PropTypes from 'prop-types';
4import { DropdownItem, DropdownDivider } from './Base';
6class InnerLabelDropdown extends React.Component {
7 constructor(props) {
8 super(props);
10 this.state = {
11 isOpen: false,
12 };
14 this.toggle = this.toggle.bind(this);
15 this.close = this.close.bind(this);
16 }
18 toggle() {
19 this.setState({
20 isOpen: !this.state.isOpen,
21 });
22 }
24 close() {
25 this.setState({
26 isOpen: false,
27 });
28 }
30 selectOption(opt) {
31 this.close();
32 this.props.handleUpdate(opt);
33 }
35 getOptionElems() {
36 return this.props.options.map((opt, i) => {
37 if (opt.type === 'divider') {
38 return <DropdownDivider key={`divider-${i}`} />;
39 } else {
40 return (
41 <DropdownItem
42 key={opt.title}
43 onClick={() => this.selectOption(opt.value)}>
44 {opt.title}
45 </DropdownItem>
46 );
47 }
48 });
49 }
51 render() {
52 const { props, state } = this;
54 const optionElems = this.getOptionElems();
56 const menuVisibility = state.isOpen === true ? 'visible' : 'hidden';
58 const selectedClasses = state.isOpen === true ? 'br-blue' : 'br-gray-50';
60 const fullWidthClass = props.fullWidth ? 'full-width' : '';
62 return (
63 <div className={`rel table ${fullWidthClass} ${props.className}`}>
64 <div
65 className={`fix full o-0 ${menuVisibility}`}
66 onClick={this.close}
67 />
69 <button
70 className={`h-10 mp-0 bg-white outline-blue sans ${fullWidthClass}`}
71 onClick={this.toggle}
72 disabled={props.disabled}>
73 <div className={'flex'}>
74 <div
75 className={`ph-4 flex align-center b-2 br-0 b-solid h-10 ${selectedClasses} ${fullWidthClass}`}>
76 <div className={'text-400 mr-2'}>{props.title}</div>
77 <div className={'text-600'}>{props.currentSelectionTitle}</div>
78 </div>
79 <div className={'white bg-blue s-10 flex-center-all text-sm'}>
80 {'▼'}
81 </div>
82 </div>
83 </button>
85 <div
86 className={`abs flex-column bg-white t-12 l-0 w-100 z-1 ${menuVisibility}`}>
87 <div className={'pv-1 b-solid b-gray-50 b-2 bb-0'} />
89 {optionElems}
91 <div className={'pv-1 b-solid b-gray-50 b-2 bt-0'} />
92 </div>
93 </div>
94 );
95 }
98InnerLabelDropdown.propTypes = {
99 disabled: PropTypes.bool,
100 className: PropTypes.string,
101 title: PropTypes.string,
102 style: PropTypes.object,
103 currentSelectionTitle: PropTypes.string,
104 children: PropTypes.node,
105};
107InnerLabelDropdown.defaultProps = {
108 disabled: false,
109 className: '',
110 title: '',
111 style: {},
112 currentSelectionTitle: '',
113};
115export default InnerLabelDropdown;