@contentful/field-editor-checkbox 0.15.5 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -91
- package/README.md +0 -1
- package/dist/field-editor-checkbox.cjs.development.js +12 -13
- package/dist/field-editor-checkbox.cjs.development.js.map +1 -1
- package/dist/field-editor-checkbox.cjs.production.min.js +1 -1
- package/dist/field-editor-checkbox.cjs.production.min.js.map +1 -1
- package/dist/field-editor-checkbox.esm.js +10 -11
- package/dist/field-editor-checkbox.esm.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,197 +3,128 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [0.
|
|
6
|
+
## [1.0.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@1.0.0...@contentful/field-editor-checkbox@1.0.1) (2021-11-17)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
### Bug Fixes
|
|
9
9
|
|
|
10
|
+
- **card-actions:** update forma 36 to fix card actions click issue ([#927](https://github.com/contentful/field-editors/issues/927)) ([3dfdef2](https://github.com/contentful/field-editors/commit/3dfdef2c2b0045f12ea94ddafca89a8e9f25e7d0))
|
|
10
11
|
|
|
12
|
+
# [1.0.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.16.0...@contentful/field-editor-checkbox@1.0.0) (2021-11-04)
|
|
11
13
|
|
|
14
|
+
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
12
15
|
|
|
16
|
+
# [0.16.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.15.6...@contentful/field-editor-checkbox@0.16.0) (2021-11-04)
|
|
13
17
|
|
|
14
|
-
|
|
18
|
+
### Features
|
|
15
19
|
|
|
16
|
-
|
|
20
|
+
- Forma v4 components adoption ([#805](https://github.com/contentful/field-editors/issues/805)) ([526bde6](https://github.com/contentful/field-editors/commit/526bde6e10e0ee3789705ec10fb31489af7ca59e))
|
|
17
21
|
|
|
22
|
+
### BREAKING CHANGES
|
|
18
23
|
|
|
24
|
+
- adopts a new Forma v4 beta
|
|
19
25
|
|
|
26
|
+
## [0.15.6](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.15.5...@contentful/field-editor-checkbox@0.15.6) (2021-10-14)
|
|
20
27
|
|
|
28
|
+
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
21
29
|
|
|
22
|
-
## [0.15.
|
|
30
|
+
## [0.15.5](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.15.4...@contentful/field-editor-checkbox@0.15.5) (2021-10-06)
|
|
23
31
|
|
|
24
32
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
25
33
|
|
|
34
|
+
## [0.15.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.15.3...@contentful/field-editor-checkbox@0.15.4) (2021-09-17)
|
|
26
35
|
|
|
36
|
+
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
27
37
|
|
|
38
|
+
## [0.15.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.15.2...@contentful/field-editor-checkbox@0.15.3) (2021-09-16)
|
|
28
39
|
|
|
40
|
+
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
29
41
|
|
|
30
42
|
## [0.15.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.15.1...@contentful/field-editor-checkbox@0.15.2) (2021-08-19)
|
|
31
43
|
|
|
32
44
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
33
45
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
46
|
## [0.15.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.15.0...@contentful/field-editor-checkbox@0.15.1) (2021-07-29)
|
|
39
47
|
|
|
40
48
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
41
49
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
50
|
# [0.15.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.14.0...@contentful/field-editor-checkbox@0.15.0) (2021-07-23)
|
|
47
51
|
|
|
48
|
-
|
|
49
52
|
### Features
|
|
50
53
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
- 💡 new color tokens ([#778](https://github.com/contentful/field-editors/issues/778)) ([fba548d](https://github.com/contentful/field-editors/commit/fba548de32305016df7f2685634eefb14294828f))
|
|
56
55
|
|
|
57
56
|
# [0.14.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.13.6...@contentful/field-editor-checkbox@0.14.0) (2021-07-12)
|
|
58
57
|
|
|
59
|
-
|
|
60
58
|
### Features
|
|
61
59
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
60
|
+
- fix non-unique checkbox labels for multiple editors ([#775](https://github.com/contentful/field-editors/issues/775)) ([a5e09b3](https://github.com/contentful/field-editors/commit/a5e09b3359fb48a0b6d27629905df5fccc1a1b37))
|
|
67
61
|
|
|
68
62
|
## [0.13.6](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.13.3...@contentful/field-editor-checkbox@0.13.6) (2021-07-06)
|
|
69
63
|
|
|
70
64
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
71
65
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
66
|
## [0.13.5](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.13.3...@contentful/field-editor-checkbox@0.13.5) (2021-07-06)
|
|
77
67
|
|
|
78
68
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
79
69
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
70
|
## [0.13.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.13.3...@contentful/field-editor-checkbox@0.13.4) (2021-06-23)
|
|
85
71
|
|
|
86
72
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
87
73
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
74
|
## [0.13.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.13.2...@contentful/field-editor-checkbox@0.13.3) (2021-06-23)
|
|
93
75
|
|
|
94
76
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
95
77
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
78
|
## [0.13.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.13.1...@contentful/field-editor-checkbox@0.13.2) (2021-06-22)
|
|
101
79
|
|
|
102
80
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
103
81
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
82
|
## [0.13.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.13.0...@contentful/field-editor-checkbox@0.13.1) (2021-03-05)
|
|
109
83
|
|
|
110
84
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
111
85
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
86
|
# [0.13.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.12.2...@contentful/field-editor-checkbox@0.13.0) (2021-02-19)
|
|
117
87
|
|
|
118
|
-
|
|
119
88
|
### Features
|
|
120
89
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
90
|
+
- bump min version of forma-36 ([#606](https://github.com/contentful/field-editors/issues/606)) ([fd57c7a](https://github.com/contentful/field-editors/commit/fd57c7a4312766af38c01507f17706ab22992617))
|
|
126
91
|
|
|
127
92
|
## [0.12.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.12.1...@contentful/field-editor-checkbox@0.12.2) (2021-02-09)
|
|
128
93
|
|
|
129
94
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
130
95
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
96
|
## [0.12.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.12.0...@contentful/field-editor-checkbox@0.12.1) (2021-02-01)
|
|
136
97
|
|
|
137
98
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
138
99
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
100
|
# [0.12.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.11.0...@contentful/field-editor-checkbox@0.12.0) (2021-01-20)
|
|
144
101
|
|
|
145
|
-
|
|
146
102
|
### Features
|
|
147
103
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
104
|
+
- update minimal forma-36 versions to use updated design ([#565](https://github.com/contentful/field-editors/issues/565)) ([332c734](https://github.com/contentful/field-editors/commit/332c734bfaf54f0e9773fcbb460d743b1f5459ec))
|
|
153
105
|
|
|
154
106
|
# [0.11.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.10.6...@contentful/field-editor-checkbox@0.11.0) (2021-01-12)
|
|
155
107
|
|
|
156
|
-
|
|
157
108
|
### Features
|
|
158
109
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
110
|
+
- update minimal required Forma version to the 3.73.12 ([#552](https://github.com/contentful/field-editors/issues/552)) ([2816fd9](https://github.com/contentful/field-editors/commit/2816fd960c28815faebf49a9ef8f4c4c0d91fc36))
|
|
164
111
|
|
|
165
112
|
## [0.10.6](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.10.5...@contentful/field-editor-checkbox@0.10.6) (2020-12-16)
|
|
166
113
|
|
|
167
114
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
168
115
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
116
|
## [0.10.5](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.10.4...@contentful/field-editor-checkbox@0.10.5) (2020-11-06)
|
|
174
117
|
|
|
175
118
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
176
119
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
120
|
## [0.10.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.10.3...@contentful/field-editor-checkbox@0.10.4) (2020-11-06)
|
|
182
121
|
|
|
183
122
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
184
123
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
124
|
## [0.10.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.10.2...@contentful/field-editor-checkbox@0.10.3) (2020-10-28)
|
|
190
125
|
|
|
191
126
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
192
127
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
128
|
## [0.10.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-checkbox@0.10.1...@contentful/field-editor-checkbox@0.10.2) (2020-08-24)
|
|
198
129
|
|
|
199
130
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
package/README.md
CHANGED
|
@@ -7,6 +7,5 @@ npm install @contentful/field-editor-checkbox
|
|
|
7
7
|
This package contains a React `CheckboxEditor` component that is used as a default for the `Symbol / List` field type in the Contentful web application.
|
|
8
8
|
|
|
9
9
|
```js
|
|
10
|
-
import '@contentful/forma-36-react-components/dist/styles.css';
|
|
11
10
|
import { CheckboxEditor } from '@contentful/field-editor-checkbox';
|
|
12
11
|
```
|
|
@@ -8,8 +8,8 @@ var React = require('react');
|
|
|
8
8
|
var emotion = require('emotion');
|
|
9
9
|
var get = _interopDefault(require('lodash/get'));
|
|
10
10
|
var fieldEditorShared = require('@contentful/field-editor-shared');
|
|
11
|
-
var
|
|
12
|
-
var tokens = _interopDefault(require('@contentful/
|
|
11
|
+
var f36Components = require('@contentful/f36-components');
|
|
12
|
+
var tokens = _interopDefault(require('@contentful/f36-tokens'));
|
|
13
13
|
var nanoid = require('nanoid');
|
|
14
14
|
|
|
15
15
|
var form = /*#__PURE__*/emotion.css({
|
|
@@ -109,20 +109,18 @@ function CheckboxEditor(props) {
|
|
|
109
109
|
|
|
110
110
|
var invalidValues = getInvalidValues(field, values, options);
|
|
111
111
|
var mergedOptions = [].concat(options, invalidValues);
|
|
112
|
-
return React.createElement(
|
|
112
|
+
return React.createElement(f36Components.Form, {
|
|
113
113
|
testId: "checkbox-editor",
|
|
114
|
-
spacing: "condensed",
|
|
115
114
|
className: emotion.cx(form, direction === 'rtl' ? rightToLeft : '')
|
|
116
115
|
}, mergedOptions.map(function (item) {
|
|
117
|
-
return React.createElement(
|
|
118
|
-
key: item.id
|
|
119
|
-
|
|
116
|
+
return React.createElement(f36Components.Box, {
|
|
117
|
+
key: item.id,
|
|
118
|
+
marginBottom: "spacingS"
|
|
119
|
+
}, React.createElement(f36Components.Checkbox, {
|
|
120
120
|
key: item.id,
|
|
121
|
-
labelIsLight: true,
|
|
122
121
|
id: item.id,
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
disabled: disabled,
|
|
122
|
+
isChecked: values.includes(item.value),
|
|
123
|
+
isDisabled: disabled,
|
|
126
124
|
value: item.value,
|
|
127
125
|
name: field.id + "." + field.locale,
|
|
128
126
|
onChange: function onChange(e) {
|
|
@@ -132,10 +130,11 @@ function CheckboxEditor(props) {
|
|
|
132
130
|
removeValue(item.value);
|
|
133
131
|
}
|
|
134
132
|
}
|
|
135
|
-
}), item.invalid && React.createElement(React.Fragment, null, React.createElement("span", {
|
|
133
|
+
}, item.label), item.invalid && React.createElement(React.Fragment, null, React.createElement("span", {
|
|
136
134
|
"data-test-id": "invalid-text",
|
|
137
135
|
className: invalidText
|
|
138
|
-
}, "(invalid)"), React.createElement(
|
|
136
|
+
}, "(invalid)"), React.createElement(f36Components.TextLink, {
|
|
137
|
+
as: "button",
|
|
139
138
|
className: removeBtn,
|
|
140
139
|
onClick: function onClick() {
|
|
141
140
|
return removeValue(item.value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-checkbox.cjs.development.js","sources":["../src/styles.ts","../src/CheckboxEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\nimport tokens from '@contentful/forma-36-tokens';\n\nexport const form = css({\n marginTop: tokens.spacingS,\n});\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n\nexport const invalidText = css({\n color: tokens.red500,\n marginLeft: tokens.spacing2Xs,\n});\n\nexport const removeBtn = css({\n marginLeft: tokens.spacingL,\n});\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { cx } from 'emotion';\nimport get from 'lodash/get';\nimport {\n FieldAPI,\n FieldConnector,\n LocalesAPI,\n PredefinedValuesError,\n} from '@contentful/field-editor-shared';\nimport { CheckboxField, Form, TextLink } from '@contentful/forma-36-react-components';\nimport * as styles from './styles';\nimport { nanoid } from 'nanoid';\n\nexport interface CheckboxEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\ntype ListValue = string[];\n\ntype CheckboxOption = { id: string; value: string; label: string; invalid?: boolean };\n\nfunction isEmptyListValue(value: ListValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getOptions(field: FieldAPI, id: string): CheckboxOption[] {\n // Get first object that has a 'in' property\n const validations = get(field, ['items', 'validations'], []) as Record<\n string,\n { in?: string[] }\n >[];\n\n const predefinedValues = validations\n .filter((validation) => validation.in)\n .map((validation) => validation.in);\n\n const firstPredefinedValues = (\n predefinedValues.length > 0 ? predefinedValues[0] : []\n ) as string[];\n\n return firstPredefinedValues.map((value: string, index) => ({\n // Append a random id to distinguish between checkboxes opened in two editors (e.g. slide-in)\n id: ['entity', field.id, field.locale, index, id].join('.'),\n value,\n label: value,\n }));\n}\n\nconst getInvalidValues = (\n field: FieldAPI,\n values: string[],\n options: CheckboxOption[]\n): CheckboxOption[] => {\n const getValueFromOptions = (options as CheckboxOption[]).map((item) => item.value);\n const invalidValues = values\n .filter((value) => !getValueFromOptions.includes(value))\n .map((value, index) => ({\n id: ['entity', field.id, field.locale, index, 'invalid'].join('.'),\n label: value,\n invalid: true,\n value,\n }));\n\n return invalidValues;\n};\n\nexport function CheckboxEditor(props: CheckboxEditorProps) {\n const [id] = useState(() => nanoid(6));\n const { field, locales } = props;\n\n const options = getOptions(field, id);\n const misconfigured = options.length === 0;\n\n if (misconfigured) {\n return <PredefinedValuesError />;\n }\n\n const direction = locales.direction[field.locale] || 'ltr';\n\n return (\n <FieldConnector<ListValue>\n throttle={0}\n isEmptyValue={isEmptyListValue}\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}>\n {({ disabled, value, setValue }) => {\n const values = value || [];\n\n const addValue = (value: string) => {\n const newValues = [...values.filter((item) => item !== value), value];\n setValue(newValues);\n };\n\n const removeValue = (value: string) => {\n const newValues = values.filter((item) => item !== value);\n setValue(newValues);\n };\n\n const invalidValues = getInvalidValues(field, values, options);\n const mergedOptions = [...options, ...invalidValues];\n\n return (\n <Form\n testId=\"checkbox-editor\"\n spacing=\"condensed\"\n className={cx(styles.form, direction === 'rtl' ? styles.rightToLeft : '')}>\n {mergedOptions.map((item) => (\n <div key={item.id}>\n <CheckboxField\n key={item.id}\n labelIsLight\n id={item.id}\n checked={values.includes(item.value)}\n labelText={item.label}\n disabled={disabled}\n value={item.value}\n name={`${field.id}.${field.locale}`}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.checked) {\n addValue(item.value);\n } else {\n removeValue(item.value);\n }\n }}\n />\n {item.invalid && (\n <>\n <span data-test-id=\"invalid-text\" className={styles.invalidText}>\n (invalid)\n </span>\n <TextLink className={styles.removeBtn} onClick={() => removeValue(item.value)}>\n Remove\n </TextLink>\n </>\n )}\n </div>\n ))}\n </Form>\n );\n }}\n </FieldConnector>\n );\n}\n\nCheckboxEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["form","css","marginTop","tokens","spacingS","rightToLeft","direction","invalidText","color","red500","marginLeft","spacing2Xs","removeBtn","spacingL","isEmptyListValue","value","length","getOptions","field","id","validations","get","predefinedValues","filter","validation","map","firstPredefinedValues","index","locale","join","label","getInvalidValues","values","options","getValueFromOptions","item","invalidValues","includes","invalid","CheckboxEditor","props","useState","nanoid","locales","misconfigured","React","PredefinedValuesError","FieldConnector","throttle","isEmptyValue","isInitiallyDisabled","disabled","setValue","addValue","newValues","removeValue","mergedOptions","Form","testId","spacing","className","cx","styles","key","CheckboxField","labelIsLight","checked","labelText","name","onChange","e","target","TextLink","onClick","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"field-editor-checkbox.cjs.development.js","sources":["../src/styles.ts","../src/CheckboxEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const form = css({\n marginTop: tokens.spacingS,\n});\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n\nexport const invalidText = css({\n color: tokens.red500,\n marginLeft: tokens.spacing2Xs,\n});\n\nexport const removeBtn = css({\n marginLeft: tokens.spacingL,\n});\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { cx } from 'emotion';\nimport get from 'lodash/get';\nimport {\n FieldAPI,\n FieldConnector,\n LocalesAPI,\n PredefinedValuesError,\n} from '@contentful/field-editor-shared';\nimport { Checkbox, Box } from '@contentful/f36-components';\nimport * as styles from './styles';\nimport { nanoid } from 'nanoid';\n\nimport { TextLink, Form } from '@contentful/f36-components';\n\nexport interface CheckboxEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\ntype ListValue = string[];\n\ntype CheckboxOption = { id: string; value: string; label: string; invalid?: boolean };\n\nfunction isEmptyListValue(value: ListValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getOptions(field: FieldAPI, id: string): CheckboxOption[] {\n // Get first object that has a 'in' property\n const validations = get(field, ['items', 'validations'], []) as Record<\n string,\n { in?: string[] }\n >[];\n\n const predefinedValues = validations\n .filter((validation) => validation.in)\n .map((validation) => validation.in);\n\n const firstPredefinedValues = (\n predefinedValues.length > 0 ? predefinedValues[0] : []\n ) as string[];\n\n return firstPredefinedValues.map((value: string, index) => ({\n // Append a random id to distinguish between checkboxes opened in two editors (e.g. slide-in)\n id: ['entity', field.id, field.locale, index, id].join('.'),\n value,\n label: value,\n }));\n}\n\nconst getInvalidValues = (\n field: FieldAPI,\n values: string[],\n options: CheckboxOption[]\n): CheckboxOption[] => {\n const getValueFromOptions = (options as CheckboxOption[]).map((item) => item.value);\n const invalidValues = values\n .filter((value) => !getValueFromOptions.includes(value))\n .map((value, index) => ({\n id: ['entity', field.id, field.locale, index, 'invalid'].join('.'),\n label: value,\n invalid: true,\n value,\n }));\n\n return invalidValues;\n};\n\nexport function CheckboxEditor(props: CheckboxEditorProps) {\n const [id] = useState(() => nanoid(6));\n const { field, locales } = props;\n\n const options = getOptions(field, id);\n const misconfigured = options.length === 0;\n\n if (misconfigured) {\n return <PredefinedValuesError />;\n }\n\n const direction = locales.direction[field.locale] || 'ltr';\n\n return (\n <FieldConnector<ListValue>\n throttle={0}\n isEmptyValue={isEmptyListValue}\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}>\n {({ disabled, value, setValue }) => {\n const values = value || [];\n\n const addValue = (value: string) => {\n const newValues = [...values.filter((item) => item !== value), value];\n setValue(newValues);\n };\n\n const removeValue = (value: string) => {\n const newValues = values.filter((item) => item !== value);\n setValue(newValues);\n };\n\n const invalidValues = getInvalidValues(field, values, options);\n const mergedOptions = [...options, ...invalidValues];\n\n return (\n <Form\n testId=\"checkbox-editor\"\n className={cx(styles.form, direction === 'rtl' ? styles.rightToLeft : '')}>\n {mergedOptions.map((item) => (\n <Box key={item.id} marginBottom=\"spacingS\">\n <Checkbox\n key={item.id}\n id={item.id}\n isChecked={values.includes(item.value)}\n isDisabled={disabled}\n value={item.value}\n name={`${field.id}.${field.locale}`}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.checked) {\n addValue(item.value);\n } else {\n removeValue(item.value);\n }\n }}>\n {item.label}\n </Checkbox>\n {item.invalid && (\n <>\n <span data-test-id=\"invalid-text\" className={styles.invalidText}>\n (invalid)\n </span>\n <TextLink\n as=\"button\"\n className={styles.removeBtn}\n onClick={() => removeValue(item.value)}>\n Remove\n </TextLink>\n </>\n )}\n </Box>\n ))}\n </Form>\n );\n }}\n </FieldConnector>\n );\n}\n\nCheckboxEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["form","css","marginTop","tokens","spacingS","rightToLeft","direction","invalidText","color","red500","marginLeft","spacing2Xs","removeBtn","spacingL","isEmptyListValue","value","length","getOptions","field","id","validations","get","predefinedValues","filter","validation","map","firstPredefinedValues","index","locale","join","label","getInvalidValues","values","options","getValueFromOptions","item","invalidValues","includes","invalid","CheckboxEditor","props","useState","nanoid","locales","misconfigured","React","PredefinedValuesError","FieldConnector","throttle","isEmptyValue","isInitiallyDisabled","disabled","setValue","addValue","newValues","removeValue","mergedOptions","Form","testId","className","cx","styles","Box","key","marginBottom","Checkbox","isChecked","isDisabled","name","onChange","e","target","checked","TextLink","as","onClick","defaultProps"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=require("emotion"),i=e(require("lodash/get")),r=require("@contentful/field-editor-shared"),
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=require("emotion"),i=e(require("lodash/get")),r=require("@contentful/field-editor-shared"),a=require("@contentful/f36-components"),l=e(require("@contentful/f36-tokens")),u=require("nanoid"),c=t.css({marginTop:l.spacingS}),o=t.css({direction:"rtl"}),s=t.css({color:l.red500,marginLeft:l.spacing2Xs}),d=t.css({marginLeft:l.spacingL});function f(e){return null===e||0===e.length}function m(e){var l=n.useState((function(){return u.nanoid(6)})),m=e.field,v=e.locales,p=function(e,n){var t=i(e,["items","validations"],[]).filter((function(e){return e.in})).map((function(e){return e.in}));return(t.length>0?t[0]:[]).map((function(t,i){return{id:["entity",e.id,e.locale,i,n].join("."),value:t,label:t}}))}(m,l[0]);if(0===p.length)return n.createElement(r.PredefinedValuesError,null);var g=v.direction[m.locale]||"ltr";return n.createElement(r.FieldConnector,{throttle:0,isEmptyValue:f,field:m,isInitiallyDisabled:e.isInitiallyDisabled},(function(e){var i=e.disabled,r=e.setValue,l=e.value||[],u=function(e){var n=l.filter((function(n){return n!==e}));r(n)},f=function(e,n,t){var i=t.map((function(e){return e.value}));return n.filter((function(e){return!i.includes(e)})).map((function(n,t){return{id:["entity",e.id,e.locale,t,"invalid"].join("."),label:n,invalid:!0,value:n}}))}(m,l,p),v=[].concat(p,f);return n.createElement(a.Form,{testId:"checkbox-editor",className:t.cx(c,"rtl"===g?o:"")},v.map((function(e){return n.createElement(a.Box,{key:e.id,marginBottom:"spacingS"},n.createElement(a.Checkbox,{key:e.id,id:e.id,isChecked:l.includes(e.value),isDisabled:i,value:e.value,name:m.id+"."+m.locale,onChange:function(n){var t,i;n.target.checked?(t=e.value,i=[].concat(l.filter((function(e){return e!==t})),[t]),r(i)):u(e.value)}},e.label),e.invalid&&n.createElement(n.Fragment,null,n.createElement("span",{"data-test-id":"invalid-text",className:s},"(invalid)"),n.createElement(a.TextLink,{as:"button",className:d,onClick:function(){return u(e.value)}},"Remove")))})))}))}m.defaultProps={isInitiallyDisabled:!0},exports.CheckboxEditor=m;
|
|
2
2
|
//# sourceMappingURL=field-editor-checkbox.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-checkbox.cjs.production.min.js","sources":["../src/styles.ts","../src/CheckboxEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\nimport tokens from '@contentful/
|
|
1
|
+
{"version":3,"file":"field-editor-checkbox.cjs.production.min.js","sources":["../src/styles.ts","../src/CheckboxEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const form = css({\n marginTop: tokens.spacingS,\n});\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n\nexport const invalidText = css({\n color: tokens.red500,\n marginLeft: tokens.spacing2Xs,\n});\n\nexport const removeBtn = css({\n marginLeft: tokens.spacingL,\n});\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { cx } from 'emotion';\nimport get from 'lodash/get';\nimport {\n FieldAPI,\n FieldConnector,\n LocalesAPI,\n PredefinedValuesError,\n} from '@contentful/field-editor-shared';\nimport { Checkbox, Box } from '@contentful/f36-components';\nimport * as styles from './styles';\nimport { nanoid } from 'nanoid';\n\nimport { TextLink, Form } from '@contentful/f36-components';\n\nexport interface CheckboxEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\ntype ListValue = string[];\n\ntype CheckboxOption = { id: string; value: string; label: string; invalid?: boolean };\n\nfunction isEmptyListValue(value: ListValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getOptions(field: FieldAPI, id: string): CheckboxOption[] {\n // Get first object that has a 'in' property\n const validations = get(field, ['items', 'validations'], []) as Record<\n string,\n { in?: string[] }\n >[];\n\n const predefinedValues = validations\n .filter((validation) => validation.in)\n .map((validation) => validation.in);\n\n const firstPredefinedValues = (\n predefinedValues.length > 0 ? predefinedValues[0] : []\n ) as string[];\n\n return firstPredefinedValues.map((value: string, index) => ({\n // Append a random id to distinguish between checkboxes opened in two editors (e.g. slide-in)\n id: ['entity', field.id, field.locale, index, id].join('.'),\n value,\n label: value,\n }));\n}\n\nconst getInvalidValues = (\n field: FieldAPI,\n values: string[],\n options: CheckboxOption[]\n): CheckboxOption[] => {\n const getValueFromOptions = (options as CheckboxOption[]).map((item) => item.value);\n const invalidValues = values\n .filter((value) => !getValueFromOptions.includes(value))\n .map((value, index) => ({\n id: ['entity', field.id, field.locale, index, 'invalid'].join('.'),\n label: value,\n invalid: true,\n value,\n }));\n\n return invalidValues;\n};\n\nexport function CheckboxEditor(props: CheckboxEditorProps) {\n const [id] = useState(() => nanoid(6));\n const { field, locales } = props;\n\n const options = getOptions(field, id);\n const misconfigured = options.length === 0;\n\n if (misconfigured) {\n return <PredefinedValuesError />;\n }\n\n const direction = locales.direction[field.locale] || 'ltr';\n\n return (\n <FieldConnector<ListValue>\n throttle={0}\n isEmptyValue={isEmptyListValue}\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}>\n {({ disabled, value, setValue }) => {\n const values = value || [];\n\n const addValue = (value: string) => {\n const newValues = [...values.filter((item) => item !== value), value];\n setValue(newValues);\n };\n\n const removeValue = (value: string) => {\n const newValues = values.filter((item) => item !== value);\n setValue(newValues);\n };\n\n const invalidValues = getInvalidValues(field, values, options);\n const mergedOptions = [...options, ...invalidValues];\n\n return (\n <Form\n testId=\"checkbox-editor\"\n className={cx(styles.form, direction === 'rtl' ? styles.rightToLeft : '')}>\n {mergedOptions.map((item) => (\n <Box key={item.id} marginBottom=\"spacingS\">\n <Checkbox\n key={item.id}\n id={item.id}\n isChecked={values.includes(item.value)}\n isDisabled={disabled}\n value={item.value}\n name={`${field.id}.${field.locale}`}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.checked) {\n addValue(item.value);\n } else {\n removeValue(item.value);\n }\n }}>\n {item.label}\n </Checkbox>\n {item.invalid && (\n <>\n <span data-test-id=\"invalid-text\" className={styles.invalidText}>\n (invalid)\n </span>\n <TextLink\n as=\"button\"\n className={styles.removeBtn}\n onClick={() => removeValue(item.value)}>\n Remove\n </TextLink>\n </>\n )}\n </Box>\n ))}\n </Form>\n );\n }}\n </FieldConnector>\n );\n}\n\nCheckboxEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["form","css","marginTop","tokens","spacingS","rightToLeft","direction","invalidText","color","red500","marginLeft","spacing2Xs","removeBtn","spacingL","isEmptyListValue","value","length","CheckboxEditor","props","useState","nanoid","field","locales","options","id","predefinedValues","get","filter","validation","map","index","locale","join","label","getOptions","React","PredefinedValuesError","FieldConnector","throttle","isEmptyValue","isInitiallyDisabled","disabled","setValue","values","removeValue","newValues","item","invalidValues","getValueFromOptions","includes","invalid","getInvalidValues","mergedOptions","Form","testId","className","cx","styles","Box","key","marginBottom","Checkbox","isChecked","isDisabled","name","onChange","e","target","checked","TextLink","as","onClick","defaultProps"],"mappings":"iWAGaA,EAAOC,MAAI,CACtBC,UAAWC,EAAOC,WAGPC,EAAcJ,MAAI,CAC7BK,UAAW,QAGAC,EAAcN,MAAI,CAC7BO,MAAOL,EAAOM,OACdC,WAAYP,EAAOQ,aAGRC,EAAYX,MAAI,CAC3BS,WAAYP,EAAOU,WCkBrB,SAASC,EAAiBC,UACP,OAAVA,GAAmC,IAAjBA,EAAMC,gBA4CjBC,EAAeC,SAChBC,YAAS,kBAAMC,SAAO,MAC3BC,EAAmBH,EAAnBG,MAAOC,EAAYJ,EAAZI,QAETC,EA7CR,SAAoBF,EAAiBG,OAO7BC,EALcC,EAAIL,EAAO,CAAC,QAAS,eAAgB,IAMtDM,QAAO,SAACC,UAAeA,QACvBC,KAAI,SAACD,UAAeA,eAGrBH,EAAiBT,OAAS,EAAIS,EAAiB,GAAK,IAGzBI,KAAI,SAACd,EAAee,SAAW,CAE1DN,GAAI,CAAC,SAAUH,EAAMG,GAAIH,EAAMU,OAAQD,EAAON,GAAIQ,KAAK,KACvDjB,MAAAA,EACAkB,MAAOlB,MA0BOmB,CAAWb,WACc,IAAnBE,EAAQP,cAGrBmB,gBAACC,kCAGJ9B,EAAYgB,EAAQhB,UAAUe,EAAMU,SAAW,aAGnDI,gBAACE,kBACCC,SAAU,EACVC,aAAczB,EACdO,MAAOA,EACPmB,oBAAqBtB,EAAMsB,sBAC1B,gBAAGC,IAAAA,SAAiBC,IAAAA,SACbC,IADM5B,OACY,GAOlB6B,EAAc,SAAC7B,OACb8B,EAAYF,EAAOhB,QAAO,SAACmB,UAASA,IAAS/B,KACnD2B,EAASG,IAGLE,EAlDW,SACvB1B,EACAsB,EACApB,OAEMyB,EAAuBzB,EAA6BM,KAAI,SAACiB,UAASA,EAAK/B,gBACvD4B,EACnBhB,QAAO,SAACZ,UAAWiC,EAAoBC,SAASlC,MAChDc,KAAI,SAACd,EAAOe,SAAW,CACtBN,GAAI,CAAC,SAAUH,EAAMG,GAAIH,EAAMU,OAAQD,EAAO,WAAWE,KAAK,KAC9DC,MAAOlB,EACPmC,SAAS,EACTnC,MAAAA,MAsCwBoC,CAAiB9B,EAAOsB,EAAQpB,GAChD6B,YAAoB7B,EAAYwB,UAGpCZ,gBAACkB,QACCC,OAAO,kBACPC,UAAWC,KAAGC,EAA2B,QAAdnD,EAAsBmD,EAAqB,KACrEL,EAAcvB,KAAI,SAACiB,UAClBX,gBAACuB,OAAIC,IAAKb,EAAKtB,GAAIoC,aAAa,YAC9BzB,gBAAC0B,YACCF,IAAKb,EAAKtB,GACVA,GAAIsB,EAAKtB,GACTsC,UAAWnB,EAAOM,SAASH,EAAK/B,OAChCgD,WAAYtB,EACZ1B,MAAO+B,EAAK/B,MACZiD,KAAS3C,EAAMG,OAAMH,EAAMU,OAC3BkC,SAAU,SAACC,GA1BJ,IAACnD,EACV8B,EA0BQqB,EAAEC,OAAOC,SA3BPrD,EA4BK+B,EAAK/B,MA3BpB8B,YAAgBF,EAAOhB,QAAO,SAACmB,UAASA,IAAS/B,MAAQA,IAC/D2B,EAASG,IA4BGD,EAAYE,EAAK/B,SAGpB+B,EAAKb,OAEPa,EAAKI,SACJf,gCACEA,uCAAmB,eAAeoB,UAAWE,gBAG7CtB,gBAACkC,YACCC,GAAG,SACHf,UAAWE,EACXc,QAAS,kBAAM3B,EAAYE,EAAK/B,4BActDE,EAAeuD,aAAe,CAC5BhC,qBAAqB"}
|
|
@@ -2,8 +2,8 @@ import { useState, createElement, Fragment } from 'react';
|
|
|
2
2
|
import { css, cx } from 'emotion';
|
|
3
3
|
import get from 'lodash-es/get';
|
|
4
4
|
import { PredefinedValuesError, FieldConnector } from '@contentful/field-editor-shared';
|
|
5
|
-
import { Form,
|
|
6
|
-
import tokens from '@contentful/
|
|
5
|
+
import { Form, Box, Checkbox, TextLink } from '@contentful/f36-components';
|
|
6
|
+
import tokens from '@contentful/f36-tokens';
|
|
7
7
|
import { nanoid } from 'nanoid';
|
|
8
8
|
|
|
9
9
|
var form = /*#__PURE__*/css({
|
|
@@ -105,18 +105,16 @@ function CheckboxEditor(props) {
|
|
|
105
105
|
var mergedOptions = [].concat(options, invalidValues);
|
|
106
106
|
return createElement(Form, {
|
|
107
107
|
testId: "checkbox-editor",
|
|
108
|
-
spacing: "condensed",
|
|
109
108
|
className: cx(form, direction === 'rtl' ? rightToLeft : '')
|
|
110
109
|
}, mergedOptions.map(function (item) {
|
|
111
|
-
return createElement(
|
|
112
|
-
key: item.id
|
|
113
|
-
|
|
110
|
+
return createElement(Box, {
|
|
111
|
+
key: item.id,
|
|
112
|
+
marginBottom: "spacingS"
|
|
113
|
+
}, createElement(Checkbox, {
|
|
114
114
|
key: item.id,
|
|
115
|
-
labelIsLight: true,
|
|
116
115
|
id: item.id,
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
disabled: disabled,
|
|
116
|
+
isChecked: values.includes(item.value),
|
|
117
|
+
isDisabled: disabled,
|
|
120
118
|
value: item.value,
|
|
121
119
|
name: field.id + "." + field.locale,
|
|
122
120
|
onChange: function onChange(e) {
|
|
@@ -126,10 +124,11 @@ function CheckboxEditor(props) {
|
|
|
126
124
|
removeValue(item.value);
|
|
127
125
|
}
|
|
128
126
|
}
|
|
129
|
-
}), item.invalid && createElement(Fragment, null, createElement("span", {
|
|
127
|
+
}, item.label), item.invalid && createElement(Fragment, null, createElement("span", {
|
|
130
128
|
"data-test-id": "invalid-text",
|
|
131
129
|
className: invalidText
|
|
132
130
|
}, "(invalid)"), createElement(TextLink, {
|
|
131
|
+
as: "button",
|
|
133
132
|
className: removeBtn,
|
|
134
133
|
onClick: function onClick() {
|
|
135
134
|
return removeValue(item.value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-checkbox.esm.js","sources":["../src/styles.ts","../src/CheckboxEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\nimport tokens from '@contentful/forma-36-tokens';\n\nexport const form = css({\n marginTop: tokens.spacingS,\n});\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n\nexport const invalidText = css({\n color: tokens.red500,\n marginLeft: tokens.spacing2Xs,\n});\n\nexport const removeBtn = css({\n marginLeft: tokens.spacingL,\n});\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { cx } from 'emotion';\nimport get from 'lodash/get';\nimport {\n FieldAPI,\n FieldConnector,\n LocalesAPI,\n PredefinedValuesError,\n} from '@contentful/field-editor-shared';\nimport { CheckboxField, Form, TextLink } from '@contentful/forma-36-react-components';\nimport * as styles from './styles';\nimport { nanoid } from 'nanoid';\n\nexport interface CheckboxEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\ntype ListValue = string[];\n\ntype CheckboxOption = { id: string; value: string; label: string; invalid?: boolean };\n\nfunction isEmptyListValue(value: ListValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getOptions(field: FieldAPI, id: string): CheckboxOption[] {\n // Get first object that has a 'in' property\n const validations = get(field, ['items', 'validations'], []) as Record<\n string,\n { in?: string[] }\n >[];\n\n const predefinedValues = validations\n .filter((validation) => validation.in)\n .map((validation) => validation.in);\n\n const firstPredefinedValues = (\n predefinedValues.length > 0 ? predefinedValues[0] : []\n ) as string[];\n\n return firstPredefinedValues.map((value: string, index) => ({\n // Append a random id to distinguish between checkboxes opened in two editors (e.g. slide-in)\n id: ['entity', field.id, field.locale, index, id].join('.'),\n value,\n label: value,\n }));\n}\n\nconst getInvalidValues = (\n field: FieldAPI,\n values: string[],\n options: CheckboxOption[]\n): CheckboxOption[] => {\n const getValueFromOptions = (options as CheckboxOption[]).map((item) => item.value);\n const invalidValues = values\n .filter((value) => !getValueFromOptions.includes(value))\n .map((value, index) => ({\n id: ['entity', field.id, field.locale, index, 'invalid'].join('.'),\n label: value,\n invalid: true,\n value,\n }));\n\n return invalidValues;\n};\n\nexport function CheckboxEditor(props: CheckboxEditorProps) {\n const [id] = useState(() => nanoid(6));\n const { field, locales } = props;\n\n const options = getOptions(field, id);\n const misconfigured = options.length === 0;\n\n if (misconfigured) {\n return <PredefinedValuesError />;\n }\n\n const direction = locales.direction[field.locale] || 'ltr';\n\n return (\n <FieldConnector<ListValue>\n throttle={0}\n isEmptyValue={isEmptyListValue}\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}>\n {({ disabled, value, setValue }) => {\n const values = value || [];\n\n const addValue = (value: string) => {\n const newValues = [...values.filter((item) => item !== value), value];\n setValue(newValues);\n };\n\n const removeValue = (value: string) => {\n const newValues = values.filter((item) => item !== value);\n setValue(newValues);\n };\n\n const invalidValues = getInvalidValues(field, values, options);\n const mergedOptions = [...options, ...invalidValues];\n\n return (\n <Form\n testId=\"checkbox-editor\"\n spacing=\"condensed\"\n className={cx(styles.form, direction === 'rtl' ? styles.rightToLeft : '')}>\n {mergedOptions.map((item) => (\n <div key={item.id}>\n <CheckboxField\n key={item.id}\n labelIsLight\n id={item.id}\n checked={values.includes(item.value)}\n labelText={item.label}\n disabled={disabled}\n value={item.value}\n name={`${field.id}.${field.locale}`}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.checked) {\n addValue(item.value);\n } else {\n removeValue(item.value);\n }\n }}\n />\n {item.invalid && (\n <>\n <span data-test-id=\"invalid-text\" className={styles.invalidText}>\n (invalid)\n </span>\n <TextLink className={styles.removeBtn} onClick={() => removeValue(item.value)}>\n Remove\n </TextLink>\n </>\n )}\n </div>\n ))}\n </Form>\n );\n }}\n </FieldConnector>\n );\n}\n\nCheckboxEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["form","css","marginTop","tokens","spacingS","rightToLeft","direction","invalidText","color","red500","marginLeft","spacing2Xs","removeBtn","spacingL","isEmptyListValue","value","length","getOptions","field","id","validations","get","predefinedValues","filter","validation","map","firstPredefinedValues","index","locale","join","label","getInvalidValues","values","options","getValueFromOptions","item","invalidValues","includes","invalid","CheckboxEditor","props","useState","nanoid","locales","misconfigured","React","PredefinedValuesError","FieldConnector","throttle","isEmptyValue","isInitiallyDisabled","disabled","setValue","addValue","newValues","removeValue","mergedOptions","Form","testId","spacing","className","cx","styles","key","CheckboxField","labelIsLight","checked","labelText","name","onChange","e","target","TextLink","onClick","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"field-editor-checkbox.esm.js","sources":["../src/styles.ts","../src/CheckboxEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const form = css({\n marginTop: tokens.spacingS,\n});\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n\nexport const invalidText = css({\n color: tokens.red500,\n marginLeft: tokens.spacing2Xs,\n});\n\nexport const removeBtn = css({\n marginLeft: tokens.spacingL,\n});\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { cx } from 'emotion';\nimport get from 'lodash/get';\nimport {\n FieldAPI,\n FieldConnector,\n LocalesAPI,\n PredefinedValuesError,\n} from '@contentful/field-editor-shared';\nimport { Checkbox, Box } from '@contentful/f36-components';\nimport * as styles from './styles';\nimport { nanoid } from 'nanoid';\n\nimport { TextLink, Form } from '@contentful/f36-components';\n\nexport interface CheckboxEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\ntype ListValue = string[];\n\ntype CheckboxOption = { id: string; value: string; label: string; invalid?: boolean };\n\nfunction isEmptyListValue(value: ListValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getOptions(field: FieldAPI, id: string): CheckboxOption[] {\n // Get first object that has a 'in' property\n const validations = get(field, ['items', 'validations'], []) as Record<\n string,\n { in?: string[] }\n >[];\n\n const predefinedValues = validations\n .filter((validation) => validation.in)\n .map((validation) => validation.in);\n\n const firstPredefinedValues = (\n predefinedValues.length > 0 ? predefinedValues[0] : []\n ) as string[];\n\n return firstPredefinedValues.map((value: string, index) => ({\n // Append a random id to distinguish between checkboxes opened in two editors (e.g. slide-in)\n id: ['entity', field.id, field.locale, index, id].join('.'),\n value,\n label: value,\n }));\n}\n\nconst getInvalidValues = (\n field: FieldAPI,\n values: string[],\n options: CheckboxOption[]\n): CheckboxOption[] => {\n const getValueFromOptions = (options as CheckboxOption[]).map((item) => item.value);\n const invalidValues = values\n .filter((value) => !getValueFromOptions.includes(value))\n .map((value, index) => ({\n id: ['entity', field.id, field.locale, index, 'invalid'].join('.'),\n label: value,\n invalid: true,\n value,\n }));\n\n return invalidValues;\n};\n\nexport function CheckboxEditor(props: CheckboxEditorProps) {\n const [id] = useState(() => nanoid(6));\n const { field, locales } = props;\n\n const options = getOptions(field, id);\n const misconfigured = options.length === 0;\n\n if (misconfigured) {\n return <PredefinedValuesError />;\n }\n\n const direction = locales.direction[field.locale] || 'ltr';\n\n return (\n <FieldConnector<ListValue>\n throttle={0}\n isEmptyValue={isEmptyListValue}\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}>\n {({ disabled, value, setValue }) => {\n const values = value || [];\n\n const addValue = (value: string) => {\n const newValues = [...values.filter((item) => item !== value), value];\n setValue(newValues);\n };\n\n const removeValue = (value: string) => {\n const newValues = values.filter((item) => item !== value);\n setValue(newValues);\n };\n\n const invalidValues = getInvalidValues(field, values, options);\n const mergedOptions = [...options, ...invalidValues];\n\n return (\n <Form\n testId=\"checkbox-editor\"\n className={cx(styles.form, direction === 'rtl' ? styles.rightToLeft : '')}>\n {mergedOptions.map((item) => (\n <Box key={item.id} marginBottom=\"spacingS\">\n <Checkbox\n key={item.id}\n id={item.id}\n isChecked={values.includes(item.value)}\n isDisabled={disabled}\n value={item.value}\n name={`${field.id}.${field.locale}`}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.checked) {\n addValue(item.value);\n } else {\n removeValue(item.value);\n }\n }}>\n {item.label}\n </Checkbox>\n {item.invalid && (\n <>\n <span data-test-id=\"invalid-text\" className={styles.invalidText}>\n (invalid)\n </span>\n <TextLink\n as=\"button\"\n className={styles.removeBtn}\n onClick={() => removeValue(item.value)}>\n Remove\n </TextLink>\n </>\n )}\n </Box>\n ))}\n </Form>\n );\n }}\n </FieldConnector>\n );\n}\n\nCheckboxEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["form","css","marginTop","tokens","spacingS","rightToLeft","direction","invalidText","color","red500","marginLeft","spacing2Xs","removeBtn","spacingL","isEmptyListValue","value","length","getOptions","field","id","validations","get","predefinedValues","filter","validation","map","firstPredefinedValues","index","locale","join","label","getInvalidValues","values","options","getValueFromOptions","item","invalidValues","includes","invalid","CheckboxEditor","props","useState","nanoid","locales","misconfigured","React","PredefinedValuesError","FieldConnector","throttle","isEmptyValue","isInitiallyDisabled","disabled","setValue","addValue","newValues","removeValue","mergedOptions","Form","testId","className","cx","styles","Box","key","marginBottom","Checkbox","isChecked","isDisabled","name","onChange","e","target","checked","TextLink","as","onClick","defaultProps"],"mappings":";;;;;;;;AAGO,IAAMA,IAAI,gBAAGC,GAAG,CAAC;AACtBC,EAAAA,SAAS,EAAEC,MAAM,CAACC;AADI,CAAD,CAAhB;AAIA,IAAMC,WAAW,gBAAGJ,GAAG,CAAC;AAC7BK,EAAAA,SAAS,EAAE;AADkB,CAAD,CAAvB;AAIA,IAAMC,WAAW,gBAAGN,GAAG,CAAC;AAC7BO,EAAAA,KAAK,EAAEL,MAAM,CAACM,MADe;AAE7BC,EAAAA,UAAU,EAAEP,MAAM,CAACQ;AAFU,CAAD,CAAvB;AAKA,IAAMC,SAAS,gBAAGX,GAAG,CAAC;AAC3BS,EAAAA,UAAU,EAAEP,MAAM,CAACU;AADQ,CAAD,CAArB;;ACmBP,SAASC,gBAAT,CAA0BC,KAA1B;AACE,SAAOA,KAAK,KAAK,IAAV,IAAkBA,KAAK,CAACC,MAAN,KAAiB,CAA1C;AACD;;AAED,SAASC,UAAT,CAAoBC,KAApB,EAAqCC,EAArC;AACE;AACA,MAAMC,WAAW,GAAGC,GAAG,CAACH,KAAD,EAAQ,CAAC,OAAD,EAAU,aAAV,CAAR,EAAkC,EAAlC,CAAvB;AAKA,MAAMI,gBAAgB,GAAGF,WAAW,CACjCG,MADsB,CACf,UAACC,UAAD;AAAA,WAAgBA,UAAU,MAA1B;AAAA,GADe,EAEtBC,GAFsB,CAElB,UAACD,UAAD;AAAA,WAAgBA,UAAU,MAA1B;AAAA,GAFkB,CAAzB;AAIA,MAAME,qBAAqB,GACzBJ,gBAAgB,CAACN,MAAjB,GAA0B,CAA1B,GAA8BM,gBAAgB,CAAC,CAAD,CAA9C,GAAoD,EADtD;AAIA,SAAOI,qBAAqB,CAACD,GAAtB,CAA0B,UAACV,KAAD,EAAgBY,KAAhB;AAAA,WAA2B;AAC1D;AACAR,MAAAA,EAAE,EAAE,CAAC,QAAD,EAAWD,KAAK,CAACC,EAAjB,EAAqBD,KAAK,CAACU,MAA3B,EAAmCD,KAAnC,EAA0CR,EAA1C,EAA8CU,IAA9C,CAAmD,GAAnD,CAFsD;AAG1Dd,MAAAA,KAAK,EAALA,KAH0D;AAI1De,MAAAA,KAAK,EAAEf;AAJmD,KAA3B;AAAA,GAA1B,CAAP;AAMD;;AAED,IAAMgB,gBAAgB,GAAG,SAAnBA,gBAAmB,CACvBb,KADuB,EAEvBc,MAFuB,EAGvBC,OAHuB;AAKvB,MAAMC,mBAAmB,GAAID,OAA4B,CAACR,GAA7B,CAAiC,UAACU,IAAD;AAAA,WAAUA,IAAI,CAACpB,KAAf;AAAA,GAAjC,CAA7B;AACA,MAAMqB,aAAa,GAAGJ,MAAM,CACzBT,MADmB,CACZ,UAACR,KAAD;AAAA,WAAW,CAACmB,mBAAmB,CAACG,QAApB,CAA6BtB,KAA7B,CAAZ;AAAA,GADY,EAEnBU,GAFmB,CAEf,UAACV,KAAD,EAAQY,KAAR;AAAA,WAAmB;AACtBR,MAAAA,EAAE,EAAE,CAAC,QAAD,EAAWD,KAAK,CAACC,EAAjB,EAAqBD,KAAK,CAACU,MAA3B,EAAmCD,KAAnC,EAA0C,SAA1C,EAAqDE,IAArD,CAA0D,GAA1D,CADkB;AAEtBC,MAAAA,KAAK,EAAEf,KAFe;AAGtBuB,MAAAA,OAAO,EAAE,IAHa;AAItBvB,MAAAA,KAAK,EAALA;AAJsB,KAAnB;AAAA,GAFe,CAAtB;AASA,SAAOqB,aAAP;AACD,CAhBD;;AAkBA,SAAgBG,eAAeC;AAC7B,kBAAaC,QAAQ,CAAC;AAAA,WAAMC,MAAM,CAAC,CAAD,CAAZ;AAAA,GAAD,CAArB;AAAA,MAAOvB,EAAP;;AACA,MAAQD,KAAR,GAA2BsB,KAA3B,CAAQtB,KAAR;AAAA,MAAeyB,OAAf,GAA2BH,KAA3B,CAAeG,OAAf;AAEA,MAAMV,OAAO,GAAGhB,UAAU,CAACC,KAAD,EAAQC,EAAR,CAA1B;AACA,MAAMyB,aAAa,GAAGX,OAAO,CAACjB,MAAR,KAAmB,CAAzC;;AAEA,MAAI4B,aAAJ,EAAmB;AACjB,WAAOC,aAAA,CAACC,qBAAD,MAAA,CAAP;AACD;;AAED,MAAMxC,SAAS,GAAGqC,OAAO,CAACrC,SAAR,CAAkBY,KAAK,CAACU,MAAxB,KAAmC,KAArD;AAEA,SACEiB,aAAA,CAACE,cAAD;AACEC,IAAAA,QAAQ,EAAE;AACVC,IAAAA,YAAY,EAAEnC;AACdI,IAAAA,KAAK,EAAEA;AACPgC,IAAAA,mBAAmB,EAAEV,KAAK,CAACU;GAJ7B,EAKG;QAAGC,gBAAAA;QAAUpC,aAAAA;QAAOqC,gBAAAA;AACnB,QAAMpB,MAAM,GAAGjB,KAAK,IAAI,EAAxB;;AAEA,QAAMsC,QAAQ,GAAG,SAAXA,QAAW,CAACtC,KAAD;AACf,UAAMuC,SAAS,aAAOtB,MAAM,CAACT,MAAP,CAAc,UAACY,IAAD;AAAA,eAAUA,IAAI,KAAKpB,KAAnB;AAAA,OAAd,CAAP,GAAgDA,KAAhD,EAAf;AACAqC,MAAAA,QAAQ,CAACE,SAAD,CAAR;AACD,KAHD;;AAKA,QAAMC,WAAW,GAAG,SAAdA,WAAc,CAACxC,KAAD;AAClB,UAAMuC,SAAS,GAAGtB,MAAM,CAACT,MAAP,CAAc,UAACY,IAAD;AAAA,eAAUA,IAAI,KAAKpB,KAAnB;AAAA,OAAd,CAAlB;AACAqC,MAAAA,QAAQ,CAACE,SAAD,CAAR;AACD,KAHD;;AAKA,QAAMlB,aAAa,GAAGL,gBAAgB,CAACb,KAAD,EAAQc,MAAR,EAAgBC,OAAhB,CAAtC;AACA,QAAMuB,aAAa,aAAOvB,OAAP,EAAmBG,aAAnB,CAAnB;AAEA,WACES,aAAA,CAACY,IAAD;AACEC,MAAAA,MAAM,EAAC;AACPC,MAAAA,SAAS,EAAEC,EAAE,CAACC,IAAD,EAAcvD,SAAS,KAAK,KAAd,GAAsBuD,WAAtB,GAA2C,EAAzD;KAFf,EAGGL,aAAa,CAAC/B,GAAd,CAAkB,UAACU,IAAD;AAAA,aACjBU,aAAA,CAACiB,GAAD;AAAKC,QAAAA,GAAG,EAAE5B,IAAI,CAAChB;AAAI6C,QAAAA,YAAY,EAAC;OAAhC,EACEnB,aAAA,CAACoB,QAAD;AACEF,QAAAA,GAAG,EAAE5B,IAAI,CAAChB;AACVA,QAAAA,EAAE,EAAEgB,IAAI,CAAChB;AACT+C,QAAAA,SAAS,EAAElC,MAAM,CAACK,QAAP,CAAgBF,IAAI,CAACpB,KAArB;AACXoD,QAAAA,UAAU,EAAEhB;AACZpC,QAAAA,KAAK,EAAEoB,IAAI,CAACpB;AACZqD,QAAAA,IAAI,EAAKlD,KAAK,CAACC,EAAX,SAAiBD,KAAK,CAACU;AAC3ByC,QAAAA,QAAQ,EAAE,kBAACC,CAAD;AACR,cAAIA,CAAC,CAACC,MAAF,CAASC,OAAb,EAAsB;AACpBnB,YAAAA,QAAQ,CAAClB,IAAI,CAACpB,KAAN,CAAR;AACD,WAFD,MAEO;AACLwC,YAAAA,WAAW,CAACpB,IAAI,CAACpB,KAAN,CAAX;AACD;AACF;OAbH,EAcGoB,IAAI,CAACL,KAdR,CADF,EAiBGK,IAAI,CAACG,OAAL,IACCO,aAAA,SAAA,MAAA,EACEA,aAAA,OAAA;wBAAmB;AAAec,QAAAA,SAAS,EAAEE;OAA7C,aAAA,CADF,EAIEhB,aAAA,CAAC4B,QAAD;AACEC,QAAAA,EAAE,EAAC;AACHf,QAAAA,SAAS,EAAEE;AACXc,QAAAA,OAAO,EAAE;AAAA,iBAAMpB,WAAW,CAACpB,IAAI,CAACpB,KAAN,CAAjB;AAAA;OAHX,UAAA,CAJF,CAlBJ,CADiB;AAAA,KAAlB,CAHH,CADF;AAuCD,GA5DH,CADF;AAgED;AAEDwB,cAAc,CAACqC,YAAf,GAA8B;AAC5B1B,EAAAA,mBAAmB,EAAE;AADO,CAA9B;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/field-editor-checkbox",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/field-editor-checkbox.esm.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -21,15 +21,15 @@
|
|
|
21
21
|
"tsc": "tsc -p ./ --noEmit"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@contentful/
|
|
25
|
-
"@contentful/
|
|
26
|
-
"@contentful/
|
|
24
|
+
"@contentful/f36-components": "^4.0.1-beta.2527",
|
|
25
|
+
"@contentful/f36-tokens": "^4.0.1-beta.2527",
|
|
26
|
+
"@contentful/field-editor-shared": "^1.0.1",
|
|
27
27
|
"emotion": "^10.0.17",
|
|
28
28
|
"lodash": "^4.17.15",
|
|
29
29
|
"lodash-es": "^4.17.15"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@contentful/field-editor-test-utils": "^0.
|
|
32
|
+
"@contentful/field-editor-test-utils": "^1.0.1"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": ">=16.8.0"
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "3dc7130a751de690903c572edfcdfdf3587b57bf"
|
|
48
48
|
}
|