mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-28 03:08:30 +00:00
Style Select
This commit is contained in:
parent
34e859bd77
commit
597a771882
@ -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;
|
||||||
|
@ -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`
|
||||||
|
Loading…
Reference in New Issue
Block a user