git.iko.soy/bridge
on db15cc5 help sign in
bridge/src/components/InnerLabelDropdown.js
71 lines 1.8 kB history raw
1import React from 'react'
2import PropTypes from 'prop-types';
5const InnerLabelDropdown = props => {
7 const menuVisibility = props.isOpen === true
8 ? 'visible'
9 : 'hidden';
11 const selectedClasses = props.isOpen === true
12 ? 'br-blue'
13 : 'br-gray-50';
15 return (
16 <div className={'rel table'}>
17 <div
18 className={`fix full o-0 ${menuVisibility}`}
19 onClick={props.handleClose}
20 />
22 <button
23 className={`h-10 mp-0 bg-white outline-blue sans ${props.className}`}
24 onClick={props.handleToggle}
25 disabled={props.disabled}>
26 <div className={'flex'}>
27 <div className={`ph-4 flex-center-all b-2 br-0 b-solid h-10 ${selectedClasses}`}>
28 <div className={'text-400 mr-2'}>{props.title}</div>
29 <div className={'text-600'}>{props.currentSelectionTitle}</div>
30 </div>
31 <div className={'white bg-blue s-10 flex-center-all text-sm'}>{'▼'}</div>
32 </div>
33 </button>
35 <div className={`abs flex-column bg-white t-12 l-0 w-100 ${menuVisibility}`}>
36 <div className={'pv-1 b-solid b-gray-50 b-2 bb-0'} />
38 { props.children }
40 <div className={'pv-1 b-solid b-gray-50 b-2 bt-0'} />
41 </div>
43 </div>
44 )
47InnerLabelDropdown.propTypes = {
48 disabled: PropTypes.bool,
49 isOpen: PropTypes.bool,
50 handleToggle: PropTypes.func,
51 handleClose: PropTypes.func,
52 className: PropTypes.string,
53 title: PropTypes.string,
54 children: PropTypes.node,
55 style: PropTypes.object,
56 currentSelectionTitle: PropTypes.string,
57};
60InnerLabelDropdown.defaultProps = {
61 isOpen: false,
62 className: '',
63 title: '',
64 currentSelectionTitle: '',
65 handleToggle: () => {},
66 handleClose: () => {},
67 disabled: false,
68 style: {},
69};
71export default InnerLabelDropdown