|
|
|
@ -4,12 +4,15 @@ import ReactSelect from 'react-select';
|
|
|
|
|
import ReactAsyncSelect from 'react-select/lib/Async';
|
|
|
|
|
import colors from 'config/colors';
|
|
|
|
|
|
|
|
|
|
const styles = isSearchable => ({
|
|
|
|
|
const styles = (isSearchable, withDropdownIndicator = true) => ({
|
|
|
|
|
singleValue: base => ({
|
|
|
|
|
...base,
|
|
|
|
|
maxWidth: 'calc(100% - 10px)', // 8px padding + 2px maring-left
|
|
|
|
|
width: '100%',
|
|
|
|
|
color: colors.TEXT_SECONDARY,
|
|
|
|
|
'&:hover': {
|
|
|
|
|
cursor: 'text',
|
|
|
|
|
},
|
|
|
|
|
}),
|
|
|
|
|
control: (base, { isDisabled, isFocused }) => ({
|
|
|
|
|
...base,
|
|
|
|
@ -20,7 +23,7 @@ const styles = isSearchable => ({
|
|
|
|
|
boxShadow: isFocused ? `0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}` : 'none',
|
|
|
|
|
background: isDisabled ? colors.LANDING : colors.WHITE,
|
|
|
|
|
'&:hover': {
|
|
|
|
|
cursor: isSearchable ? 'text' : 'pointer',
|
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
},
|
|
|
|
|
}),
|
|
|
|
|
indicatorSeparator: () => ({
|
|
|
|
@ -28,7 +31,7 @@ const styles = isSearchable => ({
|
|
|
|
|
}),
|
|
|
|
|
dropdownIndicator: (base, { isDisabled }) => ({
|
|
|
|
|
...base,
|
|
|
|
|
display: isSearchable || isDisabled ? 'none' : 'block',
|
|
|
|
|
display: !withDropdownIndicator || isDisabled ? 'none' : 'block',
|
|
|
|
|
color: colors.TEXT_SECONDARY,
|
|
|
|
|
path: '',
|
|
|
|
|
'&:hover': {
|
|
|
|
|