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