improvement(widget-select): use react-select (#1835)

This commit is contained in:
Bartholomew
2018-11-22 02:31:51 +01:00
committed by Shawn Erquhart
parent 8f0d2d64a8
commit 812290710f
3 changed files with 93 additions and 11 deletions

View File

@ -32,5 +32,8 @@
"prop-types": "^15.5.10",
"react": "^16.4.1",
"react-immutable-proptypes": "^2.1.0"
},
"dependencies": {
"react-select": "^2.1.1"
}
}

View File

@ -2,6 +2,31 @@ import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Map } from 'immutable';
import { find } from 'lodash';
import Select from 'react-select';
import { colors } from 'netlify-cms-ui-default';
const styles = {
control: provided => ({
...provided,
border: 0,
boxShadow: 'none',
padding: '9px 0 9px 12px',
}),
option: (provided, state) => ({
...provided,
backgroundColor: state.isSelected
? `${colors.active}`
: state.isFocused
? `${colors.activeBackground}`
: 'transparent',
paddingLeft: '22px',
}),
menu: provided => ({ ...provided, right: 0 }),
container: provided => ({ ...provided, padding: '0 !important' }),
indicatorSeparator: () => ({ display: 'none' }),
dropdownIndicator: provided => ({ ...provided, color: `${colors.controlLabel}` }),
};
export default class SelectControl extends React.Component {
static propTypes = {
@ -28,8 +53,8 @@ export default class SelectControl extends React.Component {
value: '',
};
handleChange = e => {
this.props.onChange(e.target.value);
handleChange = selectedOption => {
this.props.onChange(selectedOption['value']);
};
render() {
@ -50,21 +75,19 @@ export default class SelectControl extends React.Component {
}),
];
const selectedValue = find(options, ['value', value]);
return (
<select
<Select
id={forID}
value={value || ''}
value={selectedValue}
onChange={this.handleChange}
className={classNameWrapper}
onFocus={setActiveStyle}
onBlur={setInactiveStyle}
>
{options.map((option, idx) => (
<option key={idx} value={option.value}>
{option.label}
</option>
))}
</select>
options={options}
styles={styles}
/>
);
}
}