gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/netlify-cms-widget-select/package.json
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"
}
}

45
packages/netlify-cms-widget-select/src/SelectControl.js
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}
/>
);
}
}

56
yarn.lock
View File

@ -3047,6 +3047,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.5:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
cli-cursor@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
@ -3227,6 +3232,7 @@ common-tags@1.4.0:
common-tags@^1.8.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==
commondir@^1.0.1:
version "1.0.1"
@ -3532,6 +3538,19 @@ create-emotion-styled@^9.2.6:
dependencies:
"@emotion/is-prop-valid" "^0.6.1"
create-emotion@^9.2.12:
version "9.2.12"
resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-9.2.12.tgz#0fc8e7f92c4f8bb924b0fef6781f66b1d07cb26f"
integrity sha512-P57uOF9NL2y98Xrbl2OuiDQUZ30GVmASsv5fbsjF4Hlraip2kyAvMm+2PoYUvFFw03Fhgtxk3RqZSm2/qHL9hA==
dependencies:
"@emotion/hash" "^0.6.2"
"@emotion/memoize" "^0.6.1"
"@emotion/stylis" "^0.7.0"
"@emotion/unitless" "^0.6.2"
csstype "^2.5.2"
stylis "^3.5.0"
stylis-rule-sheet "^0.0.10"
create-emotion@^9.2.6:
version "9.2.6"
resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-9.2.6.tgz#f64cf1c64cf82fe7d22725d1d77498ddd2d39edb"
@ -4293,6 +4312,14 @@ emojis-list@^2.0.0:
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
emotion@^9.1.2:
version "9.2.12"
resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.12.tgz#53925aaa005614e65c6e43db8243c843574d1ea9"
integrity sha512-hcx7jppaI8VoXxIWEhxpDW7I+B4kq9RNzQLmsrF6LY8BGKqe2N+gFAQr0EfuFucFlPs2A9HM4+xNj4NeqEWIOQ==
dependencies:
babel-plugin-emotion "^9.2.11"
create-emotion "^9.2.12"
emotion@^9.2.6:
version "9.2.6"
resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.6.tgz#48517515e769bca6d8f7ff18425a7f133b010f22"
@ -5113,6 +5140,7 @@ follow-redirects@^1.0.0:
for-each@^0.3.3:
version "0.3.3"
resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
dependencies:
is-callable "^1.1.3"
@ -7822,6 +7850,11 @@ mem@^1.1.0:
dependencies:
mimic-fn "^1.0.0"
memoize-one@^4.0.0:
version "4.0.2"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.0.2.tgz#3fb8db695aa14ab9c0f1644e1585a8806adc1aee"
integrity sha512-ucx2DmXTeZTsS4GPPUZCbULAN7kdPT1G+H49Y34JjbQ5ESc6OGhVxKvb1iKhr9v19ZB9OtnHwNnhUnNR/7Wteg==
memory-fs@^0.4.0, memory-fs@~0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@ -8339,6 +8372,7 @@ node-notifier@^5.2.1:
node-polyglot@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/node-polyglot/-/node-polyglot-2.3.0.tgz#e97cc9354e87e648f04858647c6e3be38ad36ce1"
integrity sha512-9cF870GdUW72lCaZiaahS3PyYy3M9pRw+qYx5jMvQMww8VQ3Oz7fIVUtrPpPWtXz1+mC2GAuqmYucXCs/H/VWQ==
dependencies:
for-each "^0.3.3"
has "^1.0.3"
@ -9694,6 +9728,13 @@ react-immutable-proptypes@^2.1.0:
resolved "https://registry.yarnpkg.com/react-immutable-proptypes/-/react-immutable-proptypes-2.1.0.tgz#023d6f39bb15c97c071e9e60d00d136eac5fa0b4"
integrity sha1-Aj1vObsVyXwHHp5g0A0TbqxfoLQ=
react-input-autosize@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
integrity sha512-3+K4CD13iE4lQQ2WlF8PuV5htfmTRLH6MDnfndHM6LuBRszuXnuyIfE7nhSKt8AzRBZ50bu0sAhkNMeS5pxQQA==
dependencies:
prop-types "^15.5.8"
react-is@16.3.1:
version "16.3.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.1.tgz#ee66e6d8283224a83b3030e110056798488359ba"
@ -9727,6 +9768,7 @@ react-onclickoutside@^6.5.0:
react-polyglot@^0.2.6:
version "0.2.6"
resolved "https://registry.yarnpkg.com/react-polyglot/-/react-polyglot-0.2.6.tgz#5a7065aa82ee00a6d92a9c89447b2cc5b939986c"
integrity sha512-/V+kb6Acs/F6EzMZ6MAp6UiJnPSL9BX59hN54bFhJzbpy4tFQTxAZAmpw/mg5pk8giZ2LiiIBc4TMPKrVJNOGw==
dependencies:
prop-types "^15.5.8"
@ -9798,6 +9840,19 @@ react-scroll-sync@^0.6.0:
resolved "https://registry.yarnpkg.com/react-scroll-sync/-/react-scroll-sync-0.6.0.tgz#c87eba2cdd55ae35874277d74b034419d73df59a"
integrity sha512-Frc7pNPIEQY6rUAUwm1wW0an57Xau6X1Sag+Ra2FJT+oDBEBdh4cahrE3oGwtYHPcyWMt74q7vRKLw73cPy6aw==
react-select@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-select/-/react-select-2.1.1.tgz#762d0babd8c7c46a944db51cbb72e4ee117253f9"
integrity sha512-ukie2LJStNfJEJ7wtqA+crAfzYpkpPr86urvmJGisECwsWJob9boCM4zjmKCi5QR7G8uY9+v7ZoliJpeCz/4xw==
dependencies:
classnames "^2.2.5"
emotion "^9.1.2"
memoize-one "^4.0.0"
prop-types "^15.6.0"
raf "^3.4.0"
react-input-autosize "^2.2.1"
react-transition-group "^2.2.1"
react-sortable-hoc@^0.6.8:
version "0.6.8"
resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.6.8.tgz#b08562f570d7c41f6e393fca52879d2ebb9118e9"
@ -11347,6 +11402,7 @@ string.prototype.padend@^3.0.0:
string.prototype.trim@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz#d04de2c89e137f4d7d206f086b5ed2fae6be8cea"
integrity sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=
dependencies:
define-properties "^1.1.2"
es-abstract "^1.5.0"