This commit is contained in:
2025-08-25 20:24:23 +08:00
parent 30106e0129
commit 0ae8d7a709
1044 changed files with 321581 additions and 0 deletions

View File

@@ -0,0 +1,257 @@
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [3.3.0](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@3.2.2...decap-cms-widget-select@3.3.0) (2025-06-26)
**Note:** Version bump only for package decap-cms-widget-select
## [3.2.2](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@3.2.1...decap-cms-widget-select@3.2.2) (2024-08-13)
### Reverts
- Revert "Update dependencies (#7264)" ([22d483a](https://github.com/decaporg/decap-cms/commit/22d483a5b0c654071ae05735ac4f49abdc13d38c)), closes [#7264](https://github.com/decaporg/decap-cms/issues/7264)
## [3.2.1](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@3.2.0...decap-cms-widget-select@3.2.1) (2024-08-13)
**Note:** Version bump only for package decap-cms-widget-select
# [3.2.0](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@3.1.1...decap-cms-widget-select@3.2.0) (2024-08-07)
### Bug Fixes
- **select-widget:** select widget not able to select number value `0` ([#7254](https://github.com/decaporg/decap-cms/issues/7254)) ([804b3aa](https://github.com/decaporg/decap-cms/commit/804b3aa47f8f2084fa7629d44275c40646185805)), closes [#6515](https://github.com/decaporg/decap-cms/issues/6515)
## [3.1.1](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@3.1.0-beta.1...decap-cms-widget-select@3.1.1) (2024-03-21)
**Note:** Version bump only for package decap-cms-widget-select
# [3.1.0](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@3.1.0-beta.1...decap-cms-widget-select@3.1.0) (2024-02-01)
**Note:** Version bump only for package decap-cms-widget-select
# [3.1.0-beta.1](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@3.1.0-beta.0...decap-cms-widget-select@3.1.0-beta.1) (2024-01-31)
**Note:** Version bump only for package decap-cms-widget-select
# [3.1.0-beta.0](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@3.1.0...decap-cms-widget-select@3.1.0-beta.0) (2023-10-20)
### Reverts
- Revert "chore(release): publish" ([b89fc89](https://github.com/decaporg/decap-cms/commit/b89fc894dfbb5f4136b2e5427fd25a29378a58c6))
## [3.0.1](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@3.0.0...decap-cms-widget-select@3.0.1) (2023-08-25)
### Bug Fixes
- update peer dependencies ([#6886](https://github.com/decaporg/decap-cms/issues/6886)) ([e580ce5](https://github.com/decaporg/decap-cms/commit/e580ce52ce5f80fa040e8fbcab7fed0744f4f695))
# [3.0.0](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@2.9.0...decap-cms-widget-select@3.0.0) (2023-08-18)
**Note:** Version bump only for package decap-cms-widget-select
# [2.9.0](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@2.9.0-beta.0...decap-cms-widget-select@2.9.0) (2023-08-18)
**Note:** Version bump only for package decap-cms-widget-select
# 2.9.0-beta.0 (2023-08-18)
### Features
- rename packages ([#6863](https://github.com/decaporg/decap-cms/issues/6863)) ([d515e7b](https://github.com/decaporg/decap-cms/commit/d515e7bd33216a775d96887b08c4f7b1962941bb))
## [2.8.3-beta.0](https://github.com/decaporg/decap-cms/compare/decap-cms-widget-select@2.8.2...decap-cms-widget-select@2.8.3-beta.0) (2023-07-27)
**Note:** Version bump only for package decap-cms-widget-select
## [2.8.2](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.8.1...decap-cms-widget-select@2.8.2) (2021-05-23)
### Bug Fixes
- **deps:** update dependency react-select to v4 ([#5417](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/5417)) ([03362ef](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/03362ef5ab87c6fe5c964da5c5a18099b73a3fc6))
## [2.8.1](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.8.0...decap-cms-widget-select@2.8.1) (2021-05-19)
### Bug Fixes
- **deps:** update react-select to v3 ([#5394](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/5394)) ([03be13c](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/03be13c1e87b318fd10ae6f6ab54cd2634fb9662))
# [2.8.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.7.4...decap-cms-widget-select@2.8.0) (2021-05-04)
### Features
- added react 17 as peer dependency in packages ([#5316](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/5316)) ([9e42380](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/9e423805707321396eec137f5b732a5b07a0dd3f))
## [2.7.4](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.7.3...decap-cms-widget-select@2.7.4) (2021-02-23)
**Note:** Version bump only for package decap-cms-widget-select
## [2.7.3](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.7.2...decap-cms-widget-select@2.7.3) (2021-02-10)
**Note:** Version bump only for package decap-cms-widget-select
## [2.7.2](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.7.1...decap-cms-widget-select@2.7.2) (2020-11-26)
### Bug Fixes
- **widget-select:** allow number value type ([#4599](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/4599)) ([9741a79](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/9741a79e4922553b69e1536d4e53f5fde45d30e1))
## [2.7.1](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.7.0...decap-cms-widget-select@2.7.1) (2020-11-08)
**Note:** Version bump only for package decap-cms-widget-select
# [2.7.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.6.4...decap-cms-widget-select@2.7.0) (2020-10-20)
### Features
- **widget-list:** add min max configuration ([#4394](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/4394)) ([5fdfe40](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/5fdfe40dd29e9e22c9ae7d6219bc057f7ea7280b))
## [2.6.4](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.6.3...decap-cms-widget-select@2.6.4) (2020-09-15)
**Note:** Version bump only for package decap-cms-widget-select
## 2.6.3 (2020-09-08)
### Reverts
- Revert "chore(release): publish" ([828bb16](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/828bb16415b8c22a34caa19c50c38b24ffe9ceae))
## 2.6.2 (2020-08-20)
### Reverts
- Revert "chore(release): publish" ([8262487](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/82624879ccbcb16610090041db28f00714d924c8))
## 2.6.1 (2020-07-27)
### Reverts
- Revert "chore(release): publish" ([118d50a](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/118d50a7a70295f25073e564b5161aa2b9883056))
# [2.6.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.5.1...decap-cms-widget-select@2.6.0) (2020-06-18)
### Features
- add widgets schema validation ([#3841](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/3841)) ([2b46608](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/2b46608f86d22c8ad34f75e396be7c34462d9e99))
## [2.5.1](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.5.0...decap-cms-widget-select@2.5.1) (2020-02-06)
### Bug Fixes
- **widget-select:** fix exactCount error message ([#3177](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/3177)) ([46f7763](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/46f7763ccd1445b758006770252cc911b12de15d))
# [2.5.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.4.3...decap-cms-widget-select@2.5.0) (2020-02-01)
### Bug Fixes
- **widget-select:** allow optional field to use min/max ([#3175](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/3175)) ([fc524e6](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/fc524e6c0fc0174294b42cd90d9eb23e96d15d53))
### Features
- **select-widget:** add min/max validation ([#3171](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/3171)) ([fd9e2c8](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/fd9e2c89f23d73aa08dbfa4412c4c0bae318125b))
- commit media with post ([#2851](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/2851)) ([6515dee](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/6515dee8715d8571ea19484a7dfab7cfd0cc40be))
## [2.4.3](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.4.2...decap-cms-widget-select@2.4.3) (2019-07-24)
**Note:** Version bump only for package decap-cms-widget-select
## [2.4.2](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.4.2-beta.0...decap-cms-widget-select@2.4.2) (2019-04-10)
**Note:** Version bump only for package decap-cms-widget-select
## [2.4.2-beta.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.4.1...decap-cms-widget-select@2.4.2-beta.0) (2019-04-05)
**Note:** Version bump only for package decap-cms-widget-select
## [2.4.1](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.4.1-beta.2...decap-cms-widget-select@2.4.1) (2019-03-29)
**Note:** Version bump only for package decap-cms-widget-select
## [2.4.1-beta.2](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.4.1-beta.1...decap-cms-widget-select@2.4.1-beta.2) (2019-03-28)
**Note:** Version bump only for package decap-cms-widget-select
## [2.4.1-beta.1](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.4.1-beta.0...decap-cms-widget-select@2.4.1-beta.1) (2019-03-26)
### Bug Fixes
- export on decap-cms and maps on esm ([#2244](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/2244)) ([6ffd13b](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/6ffd13b))
## [2.4.1-beta.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.4.0...decap-cms-widget-select@2.4.1-beta.0) (2019-03-25)
### Bug Fixes
- update peer dep versions ([#2234](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/2234)) ([7987091](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/7987091))
# [2.4.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.3.0...decap-cms-widget-select@2.4.0) (2019-03-22)
### Features
- add ES module builds ([#2215](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/2215)) ([d142b32](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/d142b32))
# [2.3.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.3.0-beta.0...decap-cms-widget-select@2.3.0) (2019-03-22)
**Note:** Version bump only for package decap-cms-widget-select
# [2.3.0-beta.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.2.1-beta.0...decap-cms-widget-select@2.3.0-beta.0) (2019-03-21)
### Features
- provide usable UMD builds for all packages ([#2141](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/2141)) ([82cc794](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/82cc794))
## [2.2.1-beta.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.2.0...decap-cms-widget-select@2.2.1-beta.0) (2019-03-15)
### Features
- upgrade to Emotion 10 ([#2166](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/2166)) ([ccef446](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/ccef446))
# [2.2.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.1.1...decap-cms-widget-select@2.2.0) (2019-02-26)
### Features
- **decap-cms-widget-relation:** use react-select and add support for multiple entries ([#1936](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/1936)) ([518f6fb](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/518f6fb))
## [2.1.1](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.1.0...decap-cms-widget-select@2.1.1) (2019-02-08)
**Note:** Version bump only for package decap-cms-widget-select
# [2.1.0](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.0.5...decap-cms-widget-select@2.1.0) (2018-12-04)
### Features
- **decap-cms-widget-select:** add support for multiple selection ([#1901](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/1901)) ([88bf287](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/88bf287))
## [2.0.5](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.0.4...decap-cms-widget-select@2.0.5) (2018-11-29)
### Bug Fixes
- **a11y:** correct label "for" references to fields ([#1904](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/issues/1904)) ([955f94f](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/commit/955f94f))
<a name="2.0.4"></a>
## [2.0.4](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.0.3...decap-cms-widget-select@2.0.4) (2018-08-24)
**Note:** Version bump only for package decap-cms-widget-select
<a name="2.0.3"></a>
## [2.0.3](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.0.2...decap-cms-widget-select@2.0.3) (2018-08-01)
**Note:** Version bump only for package decap-cms-widget-select
<a name="2.0.2"></a>
## [2.0.2](https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select/compare/decap-cms-widget-select@2.0.1...decap-cms-widget-select@2.0.2) (2018-07-28)
**Note:** Version bump only for package decap-cms-widget-select
<a name="2.0.1"></a>
## 2.0.1 (2018-07-26)
<a name="2.0.0"></a>
# 2.0.0 (2018-07-26)
**Note:** Version bump only for package decap-cms-widget-select

View File

@@ -0,0 +1,9 @@
# Docs coming soon!
Decap CMS was converted from a single npm package to a "monorepo" of over 20 packages.
We haven't created a README for this package yet, but you can:
1. Check out the [main readme](https://github.com/decaporg/decap-cms/#readme) or the [documentation
site](https://www.decapcms.org) for more info.
2. Reach out to the [community chat](https://decapcms.org/chat/) if you need help.
3. Help out and [write the readme yourself](https://github.com/decaporg/decap-cms/edit/main/packages/decap-cms-widget-select/README.md)!

View File

@@ -0,0 +1,35 @@
{
"name": "decap-cms-widget-select",
"description": "Selectable values widget for Decap CMS.",
"version": "3.3.0",
"homepage": "https://www.decapcms.org/docs/widgets/#select",
"repository": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-select",
"bugs": "https://github.com/decaporg/decap-cms/issues",
"module": "dist/esm/index.js",
"main": "dist/decap-cms-widget-select.js",
"license": "MIT",
"keywords": [
"decap-cms",
"widget",
"select",
"values",
"list"
],
"sideEffects": false,
"scripts": {
"develop": "npm run build:esm -- --watch",
"build": "cross-env NODE_ENV=production webpack",
"build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
},
"peerDependencies": {
"decap-cms-lib-widgets": "^3.0.0",
"decap-cms-ui-default": "^3.0.0",
"immutable": "^3.7.6",
"prop-types": "^15.7.2",
"react": "^19.1.0",
"react-immutable-proptypes": "^2.1.0"
},
"dependencies": {
"react-select": "^5.10.0"
}
}

View File

@@ -0,0 +1,142 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Map, List, fromJS } from 'immutable';
import find from 'lodash/find';
import Select from 'react-select';
import { reactSelectStyles } from 'decap-cms-ui-default';
import { validations } from 'decap-cms-lib-widgets';
function optionToString(option) {
return option && (typeof option.value === 'number' || typeof option.value === 'string')
? option.value
: null;
}
function convertToOption(raw) {
if (typeof raw === 'string') {
return { label: raw, value: raw };
}
return Map.isMap(raw) ? raw.toJS() : raw;
}
function getSelectedValue({ value, options, isMultiple }) {
if (isMultiple) {
const selectedOptions = List.isList(value) ? value.toJS() : value;
if (!selectedOptions || !Array.isArray(selectedOptions)) {
return null;
}
return selectedOptions
.map(i => options.find(o => o.value === (i.value || i)))
.filter(Boolean)
.map(convertToOption);
} else {
return find(options, ['value', value]) || null;
}
}
export default class SelectControl extends React.Component {
static propTypes = {
onChange: PropTypes.func.isRequired,
value: PropTypes.node,
forID: PropTypes.string.isRequired,
classNameWrapper: PropTypes.string.isRequired,
setActiveStyle: PropTypes.func.isRequired,
setInactiveStyle: PropTypes.func.isRequired,
field: ImmutablePropTypes.contains({
options: ImmutablePropTypes.listOf(
PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
ImmutablePropTypes.contains({
label: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
}),
]),
).isRequired,
}),
};
isValid = () => {
const { field, value, t } = this.props;
const min = field.get('min');
const max = field.get('max');
if (!field.get('multiple')) {
return { error: false };
}
const error = validations.validateMinMax(
t,
field.get('label', field.get('name')),
value,
min,
max,
);
return error ? { error } : { error: false };
};
handleChange = selectedOption => {
const { onChange, field } = this.props;
const isMultiple = field.get('multiple', false);
const isEmpty = isMultiple ? !selectedOption?.length : !selectedOption;
if (field.get('required') && isEmpty && isMultiple) {
onChange(List());
} else if (isEmpty) {
onChange(null);
} else if (isMultiple) {
const options = selectedOption.map(optionToString);
onChange(fromJS(options));
} else {
onChange(optionToString(selectedOption));
}
};
componentDidMount() {
// Manually validate PropTypes - React 19 breaking change
PropTypes.checkPropTypes(SelectControl.propTypes, this.props, 'prop', 'SelectControl');
const { field, onChange, value } = this.props;
if (field.get('required') && field.get('multiple')) {
if (value && !List.isList(value)) {
onChange(fromJS([value]));
} else if (!value) {
onChange(fromJS([]));
}
}
}
render() {
const { field, value, forID, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props;
const fieldOptions = field.get('options');
const isMultiple = field.get('multiple', false);
const isClearable = !field.get('required', true) || isMultiple;
const options = [...fieldOptions.map(convertToOption)];
const selectedValue = getSelectedValue({
options,
value,
isMultiple,
});
return (
<Select
inputId={forID}
value={selectedValue}
onChange={this.handleChange}
className={classNameWrapper}
onFocus={setActiveStyle}
onBlur={setInactiveStyle}
options={options}
styles={reactSelectStyles}
isMulti={isMultiple}
isClearable={isClearable}
placeholder=""
/>
);
}
}

View File

@@ -0,0 +1,30 @@
import PropTypes from 'prop-types';
import React from 'react';
import { List } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { WidgetPreviewContainer } from 'decap-cms-ui-default';
function ListPreview({ values }) {
return (
<ul>
{values.map((value, idx) => (
<li key={idx}>{value}</li>
))}
</ul>
);
}
function SelectPreview({ value }) {
return (
<WidgetPreviewContainer>
{value && (List.isList(value) ? <ListPreview values={value} /> : value)}
{!value && null}
</WidgetPreviewContainer>
);
}
SelectPreview.propTypes = {
value: PropTypes.oneOfType([PropTypes.string, ImmutablePropTypes.list]),
};
export default SelectPreview;

View File

@@ -0,0 +1,378 @@
import React from 'react';
import { fromJS, List } from 'immutable';
import { render, fireEvent } from '@testing-library/react';
import { DecapCmsWidgetSelect } from '../';
const SelectControl = DecapCmsWidgetSelect.controlComponent;
const options = [
{ value: 'foo', label: 'Foo' },
{ value: 'bar', label: 'Bar' },
{ value: 'baz', label: 'Baz' },
];
const stringOptions = ['foo', 'bar', 'baz'];
const numberOptions = [
{ value: 0, label: 'Foo' },
{ value: 1, label: 'Bar' },
{ value: 2, label: 'Baz' },
];
class SelectController extends React.Component {
state = {
value: this.props.defaultValue,
};
handleOnChange = jest.fn(value => {
this.setState({ value });
});
componentDidUpdate() {
this.props.onStateChange(this.state);
}
render() {
return this.props.children({
value: this.state.value,
handleOnChange: this.handleOnChange,
});
}
}
function setup({ field, defaultValue }) {
let renderArgs, ref;
const stateChangeSpy = jest.fn();
const setActiveSpy = jest.fn();
const setInactiveSpy = jest.fn();
const helpers = render(
<SelectController defaultValue={defaultValue} onStateChange={stateChangeSpy}>
{({ value, handleOnChange }) => {
renderArgs = { value, onChangeSpy: handleOnChange };
return (
<SelectControl
field={field}
value={value}
onChange={handleOnChange}
forID="basic-select"
classNameWrapper=""
setActiveStyle={setActiveSpy}
setInactiveStyle={setInactiveSpy}
ref={widgetRef => (ref = widgetRef)}
t={msg => msg}
/>
);
}}
</SelectController>,
);
const input = helpers.container.querySelector('input');
return {
...helpers,
...renderArgs,
stateChangeSpy,
setActiveSpy,
setInactiveSpy,
ref,
input,
};
}
function clickClearButton(container) {
const allSvgs = container.querySelectorAll('svg');
const clear = allSvgs[allSvgs.length - 2];
fireEvent.mouseDown(clear, {
button: 0,
});
}
describe('Select widget', () => {
it('should call onChange with correct selectedItem', () => {
const field = fromJS({ options });
const { getByText, input, onChangeSpy } = setup({ field });
fireEvent.focus(input);
fireEvent.keyDown(input, { key: 'ArrowDown' });
fireEvent.click(getByText('Foo'));
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith(options[0].value);
});
it('should call onChange with null when no item is selected', () => {
const field = fromJS({ options, required: false });
const { input, onChangeSpy } = setup({ field, defaultValue: options[0].value });
fireEvent.focus(input);
fireEvent.keyDown(input, { key: 'Delete' });
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith(null);
});
it('should call onChange with null when selection is cleared', () => {
const field = fromJS({ options, required: false });
const { onChangeSpy, container } = setup({ field, defaultValue: options[0].value });
clickClearButton(container);
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith(null);
});
it('should respect default value', () => {
const field = fromJS({ options });
const { getByText } = setup({ field, defaultValue: options[2].value });
expect(getByText('Baz')).toBeInTheDocument();
});
it('should respect default value when options are string only', () => {
const field = fromJS({ options: stringOptions });
const { getByText } = setup({
field,
defaultValue: stringOptions[2],
});
expect(getByText('baz')).toBeInTheDocument();
});
it('should call onChange with correct selectedItem when value is number 0', () => {
const field = fromJS({ options: numberOptions });
const { getByText, input, onChangeSpy } = setup({ field });
fireEvent.focus(input);
fireEvent.keyDown(input, { key: 'ArrowDown' });
fireEvent.click(getByText('Foo'));
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith(numberOptions[0].value);
});
describe('with multiple', () => {
it('should call onChange with correct selectedItem', () => {
const field = fromJS({ options, multiple: true });
const { getByText, input, onChangeSpy } = setup({ field });
fireEvent.keyDown(input, { key: 'ArrowDown' });
fireEvent.click(getByText('Foo'));
fireEvent.keyDown(input, { key: 'ArrowDown' });
fireEvent.click(getByText('Baz'));
expect(onChangeSpy).toHaveBeenCalledTimes(2);
expect(onChangeSpy).toHaveBeenCalledWith(fromJS([options[0].value]));
expect(onChangeSpy).toHaveBeenCalledWith(fromJS([options[0].value, options[2].value]));
});
it('should call onChange with correct selectedItem when item is removed', () => {
const field = fromJS({ options, multiple: true });
const { container, onChangeSpy } = setup({
field,
defaultValue: fromJS([options[1].value, options[2].value]),
});
fireEvent.click(container.querySelector('svg'), { button: 0 });
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith(fromJS([options[2].value]));
});
it('should call onChange with empty list on mount when required is true', () => {
const field = fromJS({ options, multiple: true, required: true });
const { onChangeSpy } = setup({
field,
});
expect(onChangeSpy).toHaveBeenCalledWith(List());
});
it('should not call onChange with empty list on mount when required is false', () => {
const field = fromJS({ options, multiple: true });
const { onChangeSpy } = setup({
field,
});
expect(onChangeSpy).not.toHaveBeenCalled();
});
it('should call onChange with empty list when no item is selected and required is true', () => {
const field = fromJS({ options, multiple: true });
const { input, onChangeSpy } = setup({
field,
defaultValue: fromJS([options[1].value]),
});
fireEvent.focus(input);
fireEvent.keyDown(input, { key: 'Delete' });
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith(null);
});
it('should call onChange with value in list on mount when value is not a list and required is true', () => {
const field = fromJS({ options, multiple: true, required: true });
const { onChangeSpy } = setup({
field,
defaultValue: options[1].value,
});
expect(onChangeSpy).toHaveBeenCalledWith(fromJS([options[1].value]));
});
it('should call onChange with empty list when selection is cleared and required is true', () => {
const field = fromJS({ options, multiple: true, required: true });
const { container, onChangeSpy } = setup({
field,
defaultValue: fromJS([options[1].value]),
});
clickClearButton(container);
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith(List());
});
it('should call onChange with null when selection is cleared and required is false', () => {
const field = fromJS({ options, multiple: true, required: false });
const { container, onChangeSpy } = setup({
field,
defaultValue: fromJS([options[1].value]),
});
clickClearButton(container);
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith(null);
});
it('should respect default value', () => {
const field = fromJS({ options, multiple: true });
const { getByText } = setup({
field,
defaultValue: fromJS([options[1].value, options[2].value]),
});
expect(getByText('Bar')).toBeInTheDocument();
expect(getByText('Baz')).toBeInTheDocument();
});
it('should respect default value when options are string only', () => {
const field = fromJS({ options: stringOptions, multiple: true });
const { getByText } = setup({
field,
defaultValue: fromJS([stringOptions[1], stringOptions[2]]),
});
expect(getByText('bar')).toBeInTheDocument();
expect(getByText('baz')).toBeInTheDocument();
});
it('should call onChange with correct selectedItem when values are numbers including 0', () => {
const field = fromJS({ options: numberOptions, multiple: true });
const { getByText, input, onChangeSpy } = setup({ field });
fireEvent.keyDown(input, { key: 'ArrowDown' });
fireEvent.click(getByText('Foo'));
fireEvent.keyDown(input, { key: 'ArrowDown' });
fireEvent.click(getByText('Baz'));
expect(onChangeSpy).toHaveBeenCalledTimes(2);
expect(onChangeSpy).toHaveBeenCalledWith(fromJS([numberOptions[0].value]));
expect(onChangeSpy).toHaveBeenCalledWith(
fromJS([numberOptions[0].value, numberOptions[2].value]),
);
});
});
describe('validation', () => {
function validate(setupOpts) {
const { ref } = setup(setupOpts);
const { error } = ref.isValid();
return error?.message;
}
it('should fail with less items than min allows', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 2 }),
defaultValue: fromJS([stringOptions[0]]),
};
expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeMin"`);
});
it('should fail with more items than max allows', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, max: 1 }),
defaultValue: fromJS([stringOptions[0], stringOptions[1]]),
};
expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeMax"`);
});
it('should enforce min when both min and max are set', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 2, max: 3 }),
defaultValue: fromJS([stringOptions[0]]),
};
expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeCount"`);
});
it('should enforce max when both min and max are set', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 1, max: 2 }),
defaultValue: fromJS([stringOptions[0], stringOptions[1], stringOptions[2]]),
};
expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeCount"`);
});
it('should enforce min and max when they are the same value', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 2, max: 2 }),
defaultValue: fromJS([stringOptions[0], stringOptions[1], stringOptions[2]]),
};
expect(validate(opts)).toMatchInlineSnapshot(
`"editor.editorControlPane.widget.rangeCountExact"`,
);
});
it('should pass when min is met', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 1 }),
defaultValue: fromJS([stringOptions[0]]),
};
expect(validate(opts)).toBeUndefined();
});
it('should pass when max is met', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, max: 1 }),
defaultValue: fromJS([stringOptions[0]]),
};
expect(validate(opts)).toBeUndefined();
});
it('should pass when both min and max are met', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 2, max: 3 }),
defaultValue: fromJS([stringOptions[0], stringOptions[1]]),
};
expect(validate(opts)).toBeUndefined();
});
it('should pass when both min and max are met, and are the same value', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 2, max: 2 }),
defaultValue: fromJS([stringOptions[0], stringOptions[1]]),
};
expect(validate(opts)).toBeUndefined();
});
it('should not fail on min/max if multiple is not true', () => {
const opts = {
field: fromJS({ options: stringOptions, min: 2, max: 2 }),
defaultValue: fromJS([stringOptions[0]]),
};
expect(validate(opts)).toBeUndefined();
});
it('should not fail for empty field (should work for optional field)', () => {
const opts = {
field: fromJS({ options: stringOptions, multiple: true, min: 2 }),
};
const { ref, input, getByText, container } = setup(opts);
expect(ref.isValid().error?.message).toBeUndefined();
fireEvent.keyDown(input, { key: 'ArrowDown' });
fireEvent.click(getByText('foo'));
expect(ref.isValid().error?.message).toMatchInlineSnapshot(
`"editor.editorControlPane.widget.rangeMin"`,
);
clickClearButton(container);
expect(ref.isValid().error?.message).toBeUndefined();
});
});
});

View File

@@ -0,0 +1,16 @@
import controlComponent from './SelectControl';
import previewComponent from './SelectPreview';
import schema from './schema';
function Widget(opts = {}) {
return {
name: 'select',
controlComponent,
previewComponent,
schema,
...opts,
};
}
export const DecapCmsWidgetSelect = { Widget, controlComponent, previewComponent };
export default DecapCmsWidgetSelect;

View File

@@ -0,0 +1,25 @@
export default {
properties: {
multiple: { type: 'boolean' },
min: { type: 'integer' },
max: { type: 'integer' },
options: {
type: 'array',
items: {
oneOf: [
{ type: 'string' },
{ type: 'number' },
{
type: 'object',
properties: {
label: { type: 'string' },
value: { oneOf: [{ type: 'string' }, { type: 'number' }] },
},
required: ['label', 'value'],
},
],
},
},
},
required: ['options'],
};

View File

@@ -0,0 +1,3 @@
const { getConfig } = require('../../scripts/webpack.js');
module.exports = getConfig();