diff --git a/app/components/select.js b/app/components/select.js index 743af78..f1d2e76 100644 --- a/app/components/select.js +++ b/app/components/select.js @@ -25,7 +25,7 @@ const SelectWrapper = styled.div` const ValueWrapper = styled.div` width: 95%; - padding: 15px; + padding: 13px; opacity: ${props => (props.hasValue ? '1' : '0.2')}; `; @@ -36,7 +36,7 @@ const SelectMenuButtonWrapper = styled.button` background-color: transparent; width: 50px; height: 100%; - padding: 15px; + padding: 13px; border-left: ${props => `1px solid ${props.theme.colors.background}`}; `; /* eslint-disable max-len */ @@ -91,7 +91,7 @@ export class SelectComponent extends PureComponent { }; static defaultProps = { - placeholder: null, + placeholder: '', }; onSelect = (value: string) => { @@ -105,6 +105,13 @@ export class SelectComponent extends PureComponent { if (isOpen && event.target.id !== 'select-options-wrapper') this.setState(() => ({ isOpen: false })); }; + getSelectedLabel = (value: string) => { + const { options } = this.props; + const option = options.find(opt => opt.value === value); + + if (option) return option.label; + }; + render() { const { value, options, placeholder } = this.props; const { isOpen } = this.state; @@ -112,7 +119,7 @@ export class SelectComponent extends PureComponent { return ( this.setState(() => ({ isOpen: !isOpen }))}> - {value || placeholder} + {this.getSelectedLabel(value) || placeholder}