Fix code styles

This commit is contained in:
Manuel Bouza
2019-04-11 12:44:20 +02:00
parent 81c7d0ca5d
commit ed6e2bdfdb

View File

@@ -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}
/>
)
}