@contentful/field-editor-checkbox 0.15.6 → 0.16.0
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 +13 -100
- 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,205 +3,118 @@
|
|
|
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
|
-
|
|
7
|
-
|
|
8
|
-
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
6
|
+
# [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)
|
|
9
7
|
|
|
8
|
+
### Features
|
|
10
9
|
|
|
10
|
+
- Forma v4 components adoption ([#805](https://github.com/contentful/field-editors/issues/805)) ([526bde6](https://github.com/contentful/field-editors/commit/526bde6e10e0ee3789705ec10fb31489af7ca59e))
|
|
11
11
|
|
|
12
|
+
### BREAKING CHANGES
|
|
12
13
|
|
|
14
|
+
- adopts a new Forma v4 beta
|
|
13
15
|
|
|
14
|
-
## [0.15.
|
|
16
|
+
## [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)
|
|
15
17
|
|
|
16
18
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
17
19
|
|
|
20
|
+
## [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)
|
|
18
21
|
|
|
19
|
-
|
|
20
|
-
|
|
22
|
+
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
21
23
|
|
|
22
24
|
## [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)
|
|
23
25
|
|
|
24
26
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
25
27
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
28
|
## [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)
|
|
31
29
|
|
|
32
30
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
33
31
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
32
|
## [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)
|
|
39
33
|
|
|
40
34
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
41
35
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
36
|
## [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)
|
|
47
37
|
|
|
48
38
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
49
39
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
40
|
# [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)
|
|
55
41
|
|
|
56
|
-
|
|
57
42
|
### Features
|
|
58
43
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
44
|
+
- 💡 new color tokens ([#778](https://github.com/contentful/field-editors/issues/778)) ([fba548d](https://github.com/contentful/field-editors/commit/fba548de32305016df7f2685634eefb14294828f))
|
|
64
45
|
|
|
65
46
|
# [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)
|
|
66
47
|
|
|
67
|
-
|
|
68
48
|
### Features
|
|
69
49
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
50
|
+
- 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))
|
|
75
51
|
|
|
76
52
|
## [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)
|
|
77
53
|
|
|
78
54
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
79
55
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
56
|
## [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)
|
|
85
57
|
|
|
86
58
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
87
59
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
60
|
## [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)
|
|
93
61
|
|
|
94
62
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
95
63
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
64
|
## [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)
|
|
101
65
|
|
|
102
66
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
103
67
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
68
|
## [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)
|
|
109
69
|
|
|
110
70
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
111
71
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
72
|
## [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)
|
|
117
73
|
|
|
118
74
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
119
75
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
76
|
# [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)
|
|
125
77
|
|
|
126
|
-
|
|
127
78
|
### Features
|
|
128
79
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
80
|
+
- bump min version of forma-36 ([#606](https://github.com/contentful/field-editors/issues/606)) ([fd57c7a](https://github.com/contentful/field-editors/commit/fd57c7a4312766af38c01507f17706ab22992617))
|
|
134
81
|
|
|
135
82
|
## [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)
|
|
136
83
|
|
|
137
84
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
138
85
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
86
|
## [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)
|
|
144
87
|
|
|
145
88
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
146
89
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
90
|
# [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)
|
|
152
91
|
|
|
153
|
-
|
|
154
92
|
### Features
|
|
155
93
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
94
|
+
- 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))
|
|
161
95
|
|
|
162
96
|
# [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)
|
|
163
97
|
|
|
164
|
-
|
|
165
98
|
### Features
|
|
166
99
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
100
|
+
- 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))
|
|
172
101
|
|
|
173
102
|
## [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)
|
|
174
103
|
|
|
175
104
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
176
105
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
106
|
## [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)
|
|
182
107
|
|
|
183
108
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
184
109
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
110
|
## [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)
|
|
190
111
|
|
|
191
112
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
192
113
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
114
|
## [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)
|
|
198
115
|
|
|
199
116
|
**Note:** Version bump only for package @contentful/field-editor-checkbox
|
|
200
117
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
118
|
## [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)
|
|
206
119
|
|
|
207
120
|
**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":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/field-editor-checkbox",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
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": "beta",
|
|
25
|
+
"@contentful/f36-tokens": "beta",
|
|
26
|
+
"@contentful/field-editor-shared": "^0.26.0",
|
|
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": "^0.19.0"
|
|
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": "f86ba28db3f34cffc0dc2580bf21297542f331c9"
|
|
48
48
|
}
|