@contentful/field-editor-checkbox 1.1.12 → 1.3.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.
@@ -1 +0,0 @@
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 +0,0 @@
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
- //# sourceMappingURL=field-editor-checkbox.cjs.production.min.js.map
@@ -1 +0,0 @@
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"}
@@ -1,145 +0,0 @@
1
- import { useState, createElement, Fragment } from 'react';
2
- import { css, cx } from 'emotion';
3
- import get from 'lodash-es/get';
4
- import { PredefinedValuesError, FieldConnector } from '@contentful/field-editor-shared';
5
- import { Form, Box, Checkbox, TextLink } from '@contentful/f36-components';
6
- import tokens from '@contentful/f36-tokens';
7
- import { nanoid } from 'nanoid';
8
-
9
- var form = /*#__PURE__*/css({
10
- marginTop: tokens.spacingS
11
- });
12
- var rightToLeft = /*#__PURE__*/css({
13
- direction: 'rtl'
14
- });
15
- var invalidText = /*#__PURE__*/css({
16
- color: tokens.red500,
17
- marginLeft: tokens.spacing2Xs
18
- });
19
- var removeBtn = /*#__PURE__*/css({
20
- marginLeft: tokens.spacingL
21
- });
22
-
23
- function isEmptyListValue(value) {
24
- return value === null || value.length === 0;
25
- }
26
-
27
- function getOptions(field, id) {
28
- // Get first object that has a 'in' property
29
- var validations = get(field, ['items', 'validations'], []);
30
- var predefinedValues = validations.filter(function (validation) {
31
- return validation["in"];
32
- }).map(function (validation) {
33
- return validation["in"];
34
- });
35
- var firstPredefinedValues = predefinedValues.length > 0 ? predefinedValues[0] : [];
36
- return firstPredefinedValues.map(function (value, index) {
37
- return {
38
- // Append a random id to distinguish between checkboxes opened in two editors (e.g. slide-in)
39
- id: ['entity', field.id, field.locale, index, id].join('.'),
40
- value: value,
41
- label: value
42
- };
43
- });
44
- }
45
-
46
- var getInvalidValues = function getInvalidValues(field, values, options) {
47
- var getValueFromOptions = options.map(function (item) {
48
- return item.value;
49
- });
50
- var invalidValues = values.filter(function (value) {
51
- return !getValueFromOptions.includes(value);
52
- }).map(function (value, index) {
53
- return {
54
- id: ['entity', field.id, field.locale, index, 'invalid'].join('.'),
55
- label: value,
56
- invalid: true,
57
- value: value
58
- };
59
- });
60
- return invalidValues;
61
- };
62
-
63
- function CheckboxEditor(props) {
64
- var _useState = useState(function () {
65
- return nanoid(6);
66
- }),
67
- id = _useState[0];
68
-
69
- var field = props.field,
70
- locales = props.locales;
71
- var options = getOptions(field, id);
72
- var misconfigured = options.length === 0;
73
-
74
- if (misconfigured) {
75
- return createElement(PredefinedValuesError, null);
76
- }
77
-
78
- var direction = locales.direction[field.locale] || 'ltr';
79
- return createElement(FieldConnector, {
80
- throttle: 0,
81
- isEmptyValue: isEmptyListValue,
82
- field: field,
83
- isInitiallyDisabled: props.isInitiallyDisabled
84
- }, function (_ref) {
85
- var disabled = _ref.disabled,
86
- value = _ref.value,
87
- setValue = _ref.setValue;
88
- var values = value || [];
89
-
90
- var addValue = function addValue(value) {
91
- var newValues = [].concat(values.filter(function (item) {
92
- return item !== value;
93
- }), [value]);
94
- setValue(newValues);
95
- };
96
-
97
- var removeValue = function removeValue(value) {
98
- var newValues = values.filter(function (item) {
99
- return item !== value;
100
- });
101
- setValue(newValues);
102
- };
103
-
104
- var invalidValues = getInvalidValues(field, values, options);
105
- var mergedOptions = [].concat(options, invalidValues);
106
- return createElement(Form, {
107
- testId: "checkbox-editor",
108
- className: cx(form, direction === 'rtl' ? rightToLeft : '')
109
- }, mergedOptions.map(function (item) {
110
- return createElement(Box, {
111
- key: item.id,
112
- marginBottom: "spacingS"
113
- }, createElement(Checkbox, {
114
- key: item.id,
115
- id: item.id,
116
- isChecked: values.includes(item.value),
117
- isDisabled: disabled,
118
- value: item.value,
119
- name: field.id + "." + field.locale,
120
- onChange: function onChange(e) {
121
- if (e.target.checked) {
122
- addValue(item.value);
123
- } else {
124
- removeValue(item.value);
125
- }
126
- }
127
- }, item.label), item.invalid && createElement(Fragment, null, createElement("span", {
128
- "data-test-id": "invalid-text",
129
- className: invalidText
130
- }, "(invalid)"), createElement(TextLink, {
131
- as: "button",
132
- className: removeBtn,
133
- onClick: function onClick() {
134
- return removeValue(item.value);
135
- }
136
- }, "Remove")));
137
- }));
138
- });
139
- }
140
- CheckboxEditor.defaultProps = {
141
- isInitiallyDisabled: true
142
- };
143
-
144
- export { CheckboxEditor };
145
- //# sourceMappingURL=field-editor-checkbox.esm.js.map
@@ -1 +0,0 @@
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/dist/index.js DELETED
@@ -1,8 +0,0 @@
1
-
2
- 'use strict'
3
-
4
- if (process.env.NODE_ENV === 'production') {
5
- module.exports = require('./field-editor-checkbox.cjs.production.min.js')
6
- } else {
7
- module.exports = require('./field-editor-checkbox.cjs.development.js')
8
- }