Fix code styles
This commit is contained in:
@@ -13,8 +13,7 @@ import {
|
||||
pathEq
|
||||
} from "lodash/fp"
|
||||
|
||||
const hasOptionGroups = options =>
|
||||
options.some(option => Boolean(option.options))
|
||||
const hasOptionGroups = options => options.some(option => Boolean(option.options))
|
||||
|
||||
const customTheme = theme => ({
|
||||
...theme,
|
||||
@@ -22,30 +21,30 @@ const customTheme = theme => ({
|
||||
spacing: {
|
||||
...theme.spacing,
|
||||
baseUnit: 3,
|
||||
controlHeight: 32
|
||||
controlHeight: 32,
|
||||
},
|
||||
colors: {
|
||||
...theme.colors,
|
||||
primary: "#38b5eb",
|
||||
primary75: "rgba(56, 181, 235, 0.25)",
|
||||
primary50: "#38b5eb",
|
||||
primary25: "#38b5eb"
|
||||
}
|
||||
primary25: "#38b5eb",
|
||||
},
|
||||
})
|
||||
|
||||
const customStyles = props => ({
|
||||
control: (base, _state) => ({
|
||||
...base,
|
||||
borderColor: props.hasError ? "#FB3A2F" : base.borderColor
|
||||
borderColor: props.hasError ? "#FB3A2F" : base.borderColor,
|
||||
}),
|
||||
valueContainer: base => ({
|
||||
...base,
|
||||
padding: "4px 12px"
|
||||
padding: "4px 12px",
|
||||
}),
|
||||
input: base => ({
|
||||
...base,
|
||||
border: "0 !important",
|
||||
boxShadow: "0 !important"
|
||||
boxShadow: "0 !important",
|
||||
}),
|
||||
groupHeading: (base, _state) => ({
|
||||
...base,
|
||||
@@ -53,16 +52,14 @@ const customStyles = props => ({
|
||||
textTransform: "none",
|
||||
fontWeight: "bold",
|
||||
fontSize: "100%",
|
||||
padding: "2px 7px 4px"
|
||||
padding: "2px 7px 4px",
|
||||
}),
|
||||
option: (base, state) => ({
|
||||
...base,
|
||||
padding: hasOptionGroups(state.options)
|
||||
? "4px 7px 4px 20px"
|
||||
: "4px 7px 4px",
|
||||
padding: hasOptionGroups(state.options) ? "4px 7px 4px 20px" : "4px 7px 4px",
|
||||
backgroundColor: state.isFocused ? "#38b5eb" : "none",
|
||||
color: state.isFocused ? "white" : "hsl(0, 0%, 20%)"
|
||||
})
|
||||
color: state.isFocused ? "white" : "hsl(0, 0%, 20%)",
|
||||
}),
|
||||
})
|
||||
|
||||
const filterOption = createFilter({
|
||||
@@ -70,8 +67,8 @@ const filterOption = createFilter({
|
||||
join(" "),
|
||||
filter(value => isString(value) || isNumber(value)),
|
||||
values,
|
||||
property("data")
|
||||
)
|
||||
property("data"),
|
||||
),
|
||||
})
|
||||
|
||||
export default class Select extends Component {
|
||||
@@ -80,17 +77,14 @@ export default class Select extends Component {
|
||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
options: PropTypes.array,
|
||||
hasError: PropTypes.bool,
|
||||
onChange: PropTypes.func.isRequired
|
||||
};
|
||||
onChange: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
static findOptionByValue = (selectOptions, value) => {
|
||||
const options = flatMap(
|
||||
option => (option.options ? option.options : option),
|
||||
selectOptions
|
||||
)
|
||||
const options = flatMap(option => (option.options ? option.options : option), selectOptions)
|
||||
|
||||
return options.find(pathEq("value", value)) || null
|
||||
};
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
@@ -101,7 +95,7 @@ export default class Select extends Component {
|
||||
const { name, onChange } = this.props
|
||||
const { value } = option
|
||||
onChange({ target: { name, value } })
|
||||
};
|
||||
}
|
||||
|
||||
handleKeyDown = event => {
|
||||
if (!this.select.current) {
|
||||
@@ -111,7 +105,7 @@ export default class Select extends Component {
|
||||
if (!this.select.current.state.menuIsOpen && event.key === "Enter") {
|
||||
this.select.current.setState({ menuIsOpen: true })
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { value, ...passThroughProps } = this.props
|
||||
@@ -121,11 +115,11 @@ export default class Select extends Component {
|
||||
{...passThroughProps}
|
||||
ref={this.select}
|
||||
value={Select.findOptionByValue(this.props.options, value)}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
filterOption={filterOption}
|
||||
theme={customTheme}
|
||||
styles={customStyles(this.props)}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user