1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-28 03:08:30 +00:00

Style Select

This commit is contained in:
Vasek Mlejnsky 2018-08-28 16:18:45 +02:00
parent 34e859bd77
commit 597a771882
2 changed files with 9 additions and 9 deletions

View File

@ -4,15 +4,11 @@ import Select from 'react-select';
import AsyncSelect from 'react-select/lib/Async'; import AsyncSelect from 'react-select/lib/Async';
import colors from 'config/colors'; import colors from 'config/colors';
const styles = { const styles = isSearchable => ({
singleValue: base => ({ singleValue: base => ({
...base, ...base,
color: colors.TEXT_SECONDARY, color: colors.TEXT_SECONDARY,
}), }),
container: base => ({
...base,
width: '180px',
}),
control: (base, { isDisabled }) => ({ control: (base, { isDisabled }) => ({
...base, ...base,
borderRadius: '2px', borderRadius: '2px',
@ -20,7 +16,7 @@ const styles = {
boxShadow: 'none', boxShadow: 'none',
background: isDisabled ? colors.LANDING : colors.WHITE, background: isDisabled ? colors.LANDING : colors.WHITE,
'&:hover': { '&:hover': {
cursor: 'pointer', cursor: isSearchable ? 'text' : 'pointer',
borderColor: colors.DIVIDER, borderColor: colors.DIVIDER,
}, },
}), }),
@ -29,6 +25,7 @@ const styles = {
}), }),
dropdownIndicator: base => ({ dropdownIndicator: base => ({
...base, ...base,
display: isSearchable ? 'none' : 'block',
color: colors.TEXT_SECONDARY, color: colors.TEXT_SECONDARY,
path: '', path: '',
'&:hover': { '&:hover': {
@ -61,21 +58,23 @@ const styles = {
background: colors.LANDING, background: colors.LANDING,
}, },
}), }),
}; });
const SelectWrapper = props => ( const SelectWrapper = props => (
<div> <div>
{props.isAsync && <AsyncSelect styles={styles} {...props} /> } {props.isAsync && <AsyncSelect styles={styles(props.isSearchable)} {...props} /> }
{!props.isAsync && <Select styles={styles} {...props} />} {!props.isAsync && <Select styles={styles(props.isSearchable)} {...props} />}
</div> </div>
); );
SelectWrapper.propTypes = { SelectWrapper.propTypes = {
isAsync: PropTypes.bool, isAsync: PropTypes.bool,
isSearchable: PropTypes.bool,
}; };
SelectWrapper.defaultProps = { SelectWrapper.defaultProps = {
isAsync: false, isAsync: false,
isSearchable: false,
}; };
export default SelectWrapper; export default SelectWrapper;

View File

@ -64,6 +64,7 @@ const LearnMoreText = styled.span`
const SelectWrapper = styled(Select)` const SelectWrapper = styled(Select)`
margin-right: 10px; margin-right: 10px;
width: 180px;
`; `;
const DownloadBridgeWrapper = styled.div` const DownloadBridgeWrapper = styled.div`