feature: add placement prop in Select
This commit is contained in:
parent
7e76173a06
commit
9245ab7a3a
|
@ -27,6 +27,7 @@ const ValueWrapper = styled.div`
|
||||||
width: 95%;
|
width: 95%;
|
||||||
padding: 13px;
|
padding: 13px;
|
||||||
opacity: ${props => (props.hasValue ? '1' : '0.2')};
|
opacity: ${props => (props.hasValue ? '1' : '0.2')};
|
||||||
|
text-transform: capitalize;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SelectMenuButtonWrapper = styled.button`
|
const SelectMenuButtonWrapper = styled.button`
|
||||||
|
@ -45,7 +46,9 @@ const SelectMenuButton = styled.button`
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 1px solid ${props => props.theme.colors.text};
|
border: 1px solid ${props => props.theme.colors.text};
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
box-shadow: ${props => `0px 0px 10px 0px ${props.theme.colors.selectButtonShadow}`};
|
box-shadow: ${props => `0px 0px 10px 0px ${
|
||||||
|
props.theme.colors.selectButtonShadow
|
||||||
|
}, 0px 0px 10px 0px ${props.theme.colors.selectButtonShadow} inset`};
|
||||||
`;
|
`;
|
||||||
/* eslint-enable max-len */
|
/* eslint-enable max-len */
|
||||||
|
|
||||||
|
@ -59,7 +62,7 @@ const OptionsWrapper = styled.div`
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
bottom: ${props => `-${props.optionsAmount * 60}px`};
|
${props => `${props.placement}: ${`-${props.optionsAmount * 60}px`}`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Option = styled.button`
|
const Option = styled.button`
|
||||||
|
@ -69,6 +72,7 @@ const Option = styled.button`
|
||||||
background-color: ${props => props.theme.colors.inputBackground};
|
background-color: ${props => props.theme.colors.inputBackground};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
text-transform: capitalize;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: ${props => props.theme.colors.background};
|
background-color: ${props => props.theme.colors.background};
|
||||||
|
@ -80,6 +84,7 @@ type Props = {
|
||||||
options: { value: string, label: string }[],
|
options: { value: string, label: string }[],
|
||||||
placeholder?: string,
|
placeholder?: string,
|
||||||
onChange: string => void,
|
onChange: string => void,
|
||||||
|
placement?: 'top' | 'bottom',
|
||||||
};
|
};
|
||||||
type State = {
|
type State = {
|
||||||
isOpen: boolean,
|
isOpen: boolean,
|
||||||
|
@ -92,6 +97,7 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
placeholder: '',
|
placeholder: '',
|
||||||
|
placement: 'bottom',
|
||||||
};
|
};
|
||||||
|
|
||||||
onSelect = (value: string) => {
|
onSelect = (value: string) => {
|
||||||
|
@ -112,8 +118,21 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
if (option) return option.label;
|
if (option) return option.label;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
getSelectIcon = () => {
|
||||||
|
const { placement } = this.props;
|
||||||
|
const { isOpen } = this.state;
|
||||||
|
|
||||||
|
if (placement === 'bottom') {
|
||||||
|
return isOpen ? ChevronUp : ChevronDown;
|
||||||
|
}
|
||||||
|
|
||||||
|
return isOpen ? ChevronDown : ChevronUp;
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { value, options, placeholder } = this.props;
|
const {
|
||||||
|
value, options, placeholder, placement,
|
||||||
|
} = this.props;
|
||||||
const { isOpen } = this.state;
|
const { isOpen } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -123,16 +142,20 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
</ValueWrapper>
|
</ValueWrapper>
|
||||||
<SelectMenuButtonWrapper>
|
<SelectMenuButtonWrapper>
|
||||||
<SelectMenuButton>
|
<SelectMenuButton>
|
||||||
<Icon src={isOpen ? ChevronUp : ChevronDown} />
|
<Icon src={this.getSelectIcon()} />
|
||||||
</SelectMenuButton>
|
</SelectMenuButton>
|
||||||
</SelectMenuButtonWrapper>
|
</SelectMenuButtonWrapper>
|
||||||
{isOpen && (
|
{isOpen && (
|
||||||
<OptionsWrapper
|
<OptionsWrapper
|
||||||
id='select-options-wrapper'
|
id='select-options-wrapper'
|
||||||
optionsAmount={options.length}
|
optionsAmount={options.length}
|
||||||
|
placement={placement}
|
||||||
>
|
>
|
||||||
{options.map(({ label, value: optionValue }) => (
|
{options.map(({ label, value: optionValue }) => (
|
||||||
<Option onClick={() => this.onSelect(optionValue)}>
|
<Option
|
||||||
|
key={label + optionValue}
|
||||||
|
onClick={() => this.onSelect(optionValue)}
|
||||||
|
>
|
||||||
<TextComponent value={label} />
|
<TextComponent value={label} />
|
||||||
</Option>
|
</Option>
|
||||||
))}
|
))}
|
||||||
|
|
Loading…
Reference in New Issue