hotfix: add getSelectedLabel in Select component
This commit is contained in:
parent
0423077cd7
commit
2199c987e1
|
@ -25,7 +25,7 @@ const SelectWrapper = styled.div`
|
||||||
|
|
||||||
const ValueWrapper = styled.div`
|
const ValueWrapper = styled.div`
|
||||||
width: 95%;
|
width: 95%;
|
||||||
padding: 15px;
|
padding: 13px;
|
||||||
opacity: ${props => (props.hasValue ? '1' : '0.2')};
|
opacity: ${props => (props.hasValue ? '1' : '0.2')};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -36,7 +36,7 @@ const SelectMenuButtonWrapper = styled.button`
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 15px;
|
padding: 13px;
|
||||||
border-left: ${props => `1px solid ${props.theme.colors.background}`};
|
border-left: ${props => `1px solid ${props.theme.colors.background}`};
|
||||||
`;
|
`;
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
|
@ -91,7 +91,7 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
placeholder: null,
|
placeholder: '',
|
||||||
};
|
};
|
||||||
|
|
||||||
onSelect = (value: string) => {
|
onSelect = (value: string) => {
|
||||||
|
@ -105,6 +105,13 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
if (isOpen && event.target.id !== 'select-options-wrapper') this.setState(() => ({ isOpen: false }));
|
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() {
|
render() {
|
||||||
const { value, options, placeholder } = this.props;
|
const { value, options, placeholder } = this.props;
|
||||||
const { isOpen } = this.state;
|
const { isOpen } = this.state;
|
||||||
|
@ -112,7 +119,7 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
return (
|
return (
|
||||||
<SelectWrapper onClick={() => this.setState(() => ({ isOpen: !isOpen }))}>
|
<SelectWrapper onClick={() => this.setState(() => ({ isOpen: !isOpen }))}>
|
||||||
<ValueWrapper hasValue={Boolean(value)}>
|
<ValueWrapper hasValue={Boolean(value)}>
|
||||||
{value || placeholder}
|
{this.getSelectedLabel(value) || placeholder}
|
||||||
</ValueWrapper>
|
</ValueWrapper>
|
||||||
<SelectMenuButtonWrapper>
|
<SelectMenuButtonWrapper>
|
||||||
<SelectMenuButton>
|
<SelectMenuButton>
|
||||||
|
|
Loading…
Reference in New Issue