@contentful/field-editor-list 1.0.1 → 1.0.2
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 +6 -0
- package/dist/field-editor-list.cjs.development.js +45 -24
- package/dist/field-editor-list.cjs.development.js.map +1 -1
- package/dist/field-editor-list.cjs.production.min.js +1 -1
- package/dist/field-editor-list.cjs.production.min.js.map +1 -1
- package/dist/field-editor-list.esm.js +44 -25
- package/dist/field-editor-list.esm.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
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
|
+
## [1.0.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-list@1.0.1...@contentful/field-editor-list@1.0.2) (2021-11-18)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- fix list field preventing commas after forma36 v4 ([#930](https://github.com/contentful/field-editors/issues/930)) ([01bc621](https://github.com/contentful/field-editors/commit/01bc6217d0e43ed28f8b5c013475697c159dcd73))
|
|
11
|
+
|
|
6
12
|
## [1.0.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-list@1.0.0...@contentful/field-editor-list@1.0.1) (2021-11-17)
|
|
7
13
|
|
|
8
14
|
### Bug Fixes
|
|
@@ -2,9 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
6
|
+
|
|
5
7
|
var React = require('react');
|
|
6
8
|
var fieldEditorShared = require('@contentful/field-editor-shared');
|
|
7
9
|
var emotion = require('emotion');
|
|
10
|
+
var isEqual = _interopDefault(require('lodash/isEqual'));
|
|
8
11
|
var f36Components = require('@contentful/f36-components');
|
|
9
12
|
|
|
10
13
|
var rightToLeft = /*#__PURE__*/emotion.css({
|
|
@@ -24,33 +27,51 @@ function ListEditor(props) {
|
|
|
24
27
|
isEmptyValue: isEmptyListValue,
|
|
25
28
|
field: field,
|
|
26
29
|
isInitiallyDisabled: props.isInitiallyDisabled
|
|
27
|
-
}, function (
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
30
|
+
}, function (childProps) {
|
|
31
|
+
return React.createElement(ListEditorInternal, Object.assign({}, childProps, {
|
|
32
|
+
direction: direction,
|
|
33
|
+
isRequired: field.required
|
|
34
|
+
}));
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function ListEditorInternal(_ref) {
|
|
39
|
+
var setValue = _ref.setValue,
|
|
40
|
+
value = _ref.value,
|
|
41
|
+
errors = _ref.errors,
|
|
42
|
+
disabled = _ref.disabled,
|
|
43
|
+
direction = _ref.direction,
|
|
44
|
+
isRequired = _ref.isRequired;
|
|
45
|
+
|
|
46
|
+
var _React$useState = React.useState(function () {
|
|
47
|
+
return (value || []).join(', ');
|
|
48
|
+
}),
|
|
49
|
+
valueState = _React$useState[0],
|
|
50
|
+
setValueState = _React$useState[1];
|
|
51
|
+
|
|
52
|
+
var onChange = function onChange(e) {
|
|
53
|
+
var valueAsArray = e.target.value.split(',').map(function (item) {
|
|
54
|
+
return item.trim();
|
|
55
|
+
}).filter(function (item) {
|
|
56
|
+
return item;
|
|
51
57
|
});
|
|
58
|
+
var changed = !isEqual(valueAsArray, value);
|
|
59
|
+
setValue(valueAsArray);
|
|
60
|
+
var valueAsString = valueAsArray.join(', ');
|
|
61
|
+
setValueState(changed ? valueAsString : e.target.value);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
return React.createElement(f36Components.TextInput, {
|
|
65
|
+
testId: "list-editor-input",
|
|
66
|
+
className: direction === 'rtl' ? rightToLeft : '',
|
|
67
|
+
isRequired: isRequired,
|
|
68
|
+
isInvalid: errors.length > 0,
|
|
69
|
+
isDisabled: disabled,
|
|
70
|
+
value: valueState,
|
|
71
|
+
onChange: onChange
|
|
52
72
|
});
|
|
53
73
|
}
|
|
74
|
+
|
|
54
75
|
ListEditor.defaultProps = {
|
|
55
76
|
isInitiallyDisabled: true
|
|
56
77
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-list.cjs.development.js","sources":["../src/styles.ts","../src/ListEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n","import * as React from 'react';\nimport { FieldAPI,
|
|
1
|
+
{"version":3,"file":"field-editor-list.cjs.development.js","sources":["../src/styles.ts","../src/ListEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n","import * as React from 'react';\nimport { FieldAPI, FieldConnector, LocalesAPI } from '@contentful/field-editor-shared';\nimport * as styles from './styles';\nimport isEqual from 'lodash/isEqual';\n\nimport { TextInput } from '@contentful/f36-components';\nimport { FieldConnectorChildProps } from '@contentful/field-editor-shared/dist/FieldConnector';\n\nexport interface ListEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n\n /**\n * sdk.field\n */\n field: FieldAPI;\n\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\ntype ListValue = string[];\n\nfunction isEmptyListValue(value: ListValue | null) {\n return value === null || value.length === 0;\n}\n\nexport function ListEditor(props: ListEditorProps) {\n const { field, locales } = props;\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 {(childProps) => (\n <ListEditorInternal {...childProps} direction={direction} isRequired={field.required} />\n )}\n </FieldConnector>\n );\n}\n\nfunction ListEditorInternal({\n setValue,\n value,\n errors,\n disabled,\n direction,\n isRequired,\n}: FieldConnectorChildProps<ListValue> & { direction: 'rtl' | 'ltr'; isRequired: boolean }) {\n const [valueState, setValueState] = React.useState(() => (value || []).join(', '));\n\n const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const valueAsArray = e.target.value\n .split(',')\n .map((item) => item.trim())\n .filter((item) => item);\n const changed = !isEqual(valueAsArray, value);\n setValue(valueAsArray);\n\n const valueAsString = valueAsArray.join(', ');\n setValueState(changed ? valueAsString : e.target.value);\n };\n\n return (\n <TextInput\n testId=\"list-editor-input\"\n className={direction === 'rtl' ? styles.rightToLeft : ''}\n isRequired={isRequired}\n isInvalid={errors.length > 0}\n isDisabled={disabled}\n value={valueState}\n onChange={onChange}\n />\n );\n}\n\nListEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["rightToLeft","css","direction","isEmptyListValue","value","length","ListEditor","props","field","locales","locale","React","FieldConnector","throttle","isEmptyValue","isInitiallyDisabled","childProps","ListEditorInternal","isRequired","required","setValue","errors","disabled","join","valueState","setValueState","onChange","e","valueAsArray","target","split","map","item","trim","filter","changed","isEqual","valueAsString","TextInput","testId","className","styles","isInvalid","isDisabled","defaultProps"],"mappings":";;;;;;;;;;;;AAEO,IAAMA,WAAW,gBAAGC,WAAG,CAAC;AAC7BC,EAAAA,SAAS,EAAE;AADkB,CAAD,CAAvB;;ACyBP,SAASC,gBAAT,CAA0BC,KAA1B;AACE,SAAOA,KAAK,KAAK,IAAV,IAAkBA,KAAK,CAACC,MAAN,KAAiB,CAA1C;AACD;;AAED,SAAgBC,WAAWC;AACzB,MAAQC,KAAR,GAA2BD,KAA3B,CAAQC,KAAR;AAAA,MAAeC,OAAf,GAA2BF,KAA3B,CAAeE,OAAf;AAEA,MAAMP,SAAS,GAAGO,OAAO,CAACP,SAAR,CAAkBM,KAAK,CAACE,MAAxB,KAAmC,KAArD;AAEA,SACEC,mBAAA,CAACC,gCAAD;AACEC,IAAAA,QAAQ,EAAE;AACVC,IAAAA,YAAY,EAAEX;AACdK,IAAAA,KAAK,EAAEA;AACPO,IAAAA,mBAAmB,EAAER,KAAK,CAACQ;GAJ7B,EAKG,UAACC,UAAD;AAAA,WACCL,mBAAA,CAACM,kBAAD,oBAAwBD;AAAYd,MAAAA,SAAS,EAAEA;AAAWgB,MAAAA,UAAU,EAAEV,KAAK,CAACW;MAA5E,CADD;AAAA,GALH,CADF;AAWD;;AAED,SAASF,kBAAT;MACEG,gBAAAA;MACAhB,aAAAA;MACAiB,cAAAA;MACAC,gBAAAA;MACApB,iBAAAA;MACAgB,kBAAAA;;AAEA,wBAAoCP,cAAA,CAAe;AAAA,WAAM,CAACP,KAAK,IAAI,EAAV,EAAcmB,IAAd,CAAmB,IAAnB,CAAN;AAAA,GAAf,CAApC;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,CAAD;AACf,QAAMC,YAAY,GAAGD,CAAC,CAACE,MAAF,CAASzB,KAAT,CAClB0B,KADkB,CACZ,GADY,EAElBC,GAFkB,CAEd,UAACC,IAAD;AAAA,aAAUA,IAAI,CAACC,IAAL,EAAV;AAAA,KAFc,EAGlBC,MAHkB,CAGX,UAACF,IAAD;AAAA,aAAUA,IAAV;AAAA,KAHW,CAArB;AAIA,QAAMG,OAAO,GAAG,CAACC,OAAO,CAACR,YAAD,EAAexB,KAAf,CAAxB;AACAgB,IAAAA,QAAQ,CAACQ,YAAD,CAAR;AAEA,QAAMS,aAAa,GAAGT,YAAY,CAACL,IAAb,CAAkB,IAAlB,CAAtB;AACAE,IAAAA,aAAa,CAACU,OAAO,GAAGE,aAAH,GAAmBV,CAAC,CAACE,MAAF,CAASzB,KAApC,CAAb;AACD,GAVD;;AAYA,SACEO,mBAAA,CAAC2B,uBAAD;AACEC,IAAAA,MAAM,EAAC;AACPC,IAAAA,SAAS,EAAEtC,SAAS,KAAK,KAAd,GAAsBuC,WAAtB,GAA2C;AACtDvB,IAAAA,UAAU,EAAEA;AACZwB,IAAAA,SAAS,EAAErB,MAAM,CAAChB,MAAP,GAAgB;AAC3BsC,IAAAA,UAAU,EAAErB;AACZlB,IAAAA,KAAK,EAAEoB;AACPE,IAAAA,QAAQ,EAAEA;GAPZ,CADF;AAWD;;AAEDpB,UAAU,CAACsC,YAAX,GAA0B;AACxB7B,EAAAA,mBAAmB,EAAE;AADG,CAA1B;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),i=require("@contentful/field-editor-shared"),r=require("emotion"),n=(e=require("lodash/isEqual"))&&"object"==typeof e&&"default"in e?e.default:e,l=require("@contentful/f36-components"),u=r.css({direction:"rtl"});function a(e){return null===e||0===e.length}function o(e){var r=e.field,n=e.locales.direction[r.locale]||"ltr";return t.createElement(i.FieldConnector,{throttle:0,isEmptyValue:a,field:r,isInitiallyDisabled:e.isInitiallyDisabled},(function(e){return t.createElement(s,Object.assign({},e,{direction:n,isRequired:r.required}))}))}function s(e){var i=e.setValue,r=e.value,a=e.errors,o=e.disabled,s=e.direction,d=e.isRequired,c=t.useState((function(){return(r||[]).join(", ")})),f=c[1];return t.createElement(l.TextInput,{testId:"list-editor-input",className:"rtl"===s?u:"",isRequired:d,isInvalid:a.length>0,isDisabled:o,value:c[0],onChange:function(e){var t=e.target.value.split(",").map((function(e){return e.trim()})).filter((function(e){return e})),l=!n(t,r);i(t);var u=t.join(", ");f(l?u:e.target.value)}})}o.defaultProps={isInitiallyDisabled:!0},exports.ListEditor=o;
|
|
2
2
|
//# sourceMappingURL=field-editor-list.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-list.cjs.production.min.js","sources":["../src/styles.ts","../src/ListEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n","import * as React from 'react';\nimport { FieldAPI,
|
|
1
|
+
{"version":3,"file":"field-editor-list.cjs.production.min.js","sources":["../src/styles.ts","../src/ListEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n","import * as React from 'react';\nimport { FieldAPI, FieldConnector, LocalesAPI } from '@contentful/field-editor-shared';\nimport * as styles from './styles';\nimport isEqual from 'lodash/isEqual';\n\nimport { TextInput } from '@contentful/f36-components';\nimport { FieldConnectorChildProps } from '@contentful/field-editor-shared/dist/FieldConnector';\n\nexport interface ListEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n\n /**\n * sdk.field\n */\n field: FieldAPI;\n\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\ntype ListValue = string[];\n\nfunction isEmptyListValue(value: ListValue | null) {\n return value === null || value.length === 0;\n}\n\nexport function ListEditor(props: ListEditorProps) {\n const { field, locales } = props;\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 {(childProps) => (\n <ListEditorInternal {...childProps} direction={direction} isRequired={field.required} />\n )}\n </FieldConnector>\n );\n}\n\nfunction ListEditorInternal({\n setValue,\n value,\n errors,\n disabled,\n direction,\n isRequired,\n}: FieldConnectorChildProps<ListValue> & { direction: 'rtl' | 'ltr'; isRequired: boolean }) {\n const [valueState, setValueState] = React.useState(() => (value || []).join(', '));\n\n const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const valueAsArray = e.target.value\n .split(',')\n .map((item) => item.trim())\n .filter((item) => item);\n const changed = !isEqual(valueAsArray, value);\n setValue(valueAsArray);\n\n const valueAsString = valueAsArray.join(', ');\n setValueState(changed ? valueAsString : e.target.value);\n };\n\n return (\n <TextInput\n testId=\"list-editor-input\"\n className={direction === 'rtl' ? styles.rightToLeft : ''}\n isRequired={isRequired}\n isInvalid={errors.length > 0}\n isDisabled={disabled}\n value={valueState}\n onChange={onChange}\n />\n );\n}\n\nListEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["rightToLeft","css","direction","isEmptyListValue","value","length","ListEditor","props","field","locales","locale","React","FieldConnector","throttle","isEmptyValue","isInitiallyDisabled","childProps","ListEditorInternal","isRequired","required","setValue","errors","disabled","join","setValueState","TextInput","testId","className","styles","isInvalid","isDisabled","onChange","e","valueAsArray","target","split","map","item","trim","filter","changed","isEqual","valueAsString","defaultProps"],"mappings":"sRAEaA,EAAcC,MAAI,CAC7BC,UAAW,QCwBb,SAASC,EAAiBC,UACP,OAAVA,GAAmC,IAAjBA,EAAMC,gBAGjBC,EAAWC,OACjBC,EAAmBD,EAAnBC,MAEFN,EAFqBK,EAAZE,QAEWP,UAAUM,EAAME,SAAW,aAGnDC,gBAACC,kBACCC,SAAU,EACVC,aAAcX,EACdK,MAAOA,EACPO,oBAAqBR,EAAMQ,sBAC1B,SAACC,UACAL,gBAACM,mBAAuBD,GAAYd,UAAWA,EAAWgB,WAAYV,EAAMW,eAMpF,SAASF,SACPG,IAAAA,SACAhB,IAAAA,MACAiB,IAAAA,OACAC,IAAAA,SACApB,IAAAA,UACAgB,IAAAA,aAEoCP,YAAe,kBAAOP,GAAS,IAAImB,KAAK,SAAzDC,cAejBb,gBAACc,aACCC,OAAO,oBACPC,UAAyB,QAAdzB,EAAsB0B,EAAqB,GACtDV,WAAYA,EACZW,UAAWR,EAAOhB,OAAS,EAC3ByB,WAAYR,EACZlB,WACA2B,SApBa,SAACC,OACVC,EAAeD,EAAEE,OAAO9B,MAC3B+B,MAAM,KACNC,KAAI,SAACC,UAASA,EAAKC,UACnBC,QAAO,SAACF,UAASA,KACdG,GAAWC,EAAQR,EAAc7B,GACvCgB,EAASa,OAEHS,EAAgBT,EAAaV,KAAK,MACxCC,EAAcgB,EAAUE,EAAgBV,EAAEE,OAAO9B,UAgBrDE,EAAWqC,aAAe,CACxB5B,qBAAqB"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { createElement } from 'react';
|
|
1
|
+
import { createElement, useState } from 'react';
|
|
2
2
|
import { FieldConnector } from '@contentful/field-editor-shared';
|
|
3
3
|
import { css } from 'emotion';
|
|
4
|
+
import isEqual from 'lodash-es/isEqual';
|
|
4
5
|
import { TextInput } from '@contentful/f36-components';
|
|
5
6
|
|
|
6
7
|
var rightToLeft = /*#__PURE__*/css({
|
|
@@ -20,33 +21,51 @@ function ListEditor(props) {
|
|
|
20
21
|
isEmptyValue: isEmptyListValue,
|
|
21
22
|
field: field,
|
|
22
23
|
isInitiallyDisabled: props.isInitiallyDisabled
|
|
23
|
-
}, function (
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
24
|
+
}, function (childProps) {
|
|
25
|
+
return createElement(ListEditorInternal, Object.assign({}, childProps, {
|
|
26
|
+
direction: direction,
|
|
27
|
+
isRequired: field.required
|
|
28
|
+
}));
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function ListEditorInternal(_ref) {
|
|
33
|
+
var setValue = _ref.setValue,
|
|
34
|
+
value = _ref.value,
|
|
35
|
+
errors = _ref.errors,
|
|
36
|
+
disabled = _ref.disabled,
|
|
37
|
+
direction = _ref.direction,
|
|
38
|
+
isRequired = _ref.isRequired;
|
|
39
|
+
|
|
40
|
+
var _React$useState = useState(function () {
|
|
41
|
+
return (value || []).join(', ');
|
|
42
|
+
}),
|
|
43
|
+
valueState = _React$useState[0],
|
|
44
|
+
setValueState = _React$useState[1];
|
|
45
|
+
|
|
46
|
+
var onChange = function onChange(e) {
|
|
47
|
+
var valueAsArray = e.target.value.split(',').map(function (item) {
|
|
48
|
+
return item.trim();
|
|
49
|
+
}).filter(function (item) {
|
|
50
|
+
return item;
|
|
47
51
|
});
|
|
52
|
+
var changed = !isEqual(valueAsArray, value);
|
|
53
|
+
setValue(valueAsArray);
|
|
54
|
+
var valueAsString = valueAsArray.join(', ');
|
|
55
|
+
setValueState(changed ? valueAsString : e.target.value);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
return createElement(TextInput, {
|
|
59
|
+
testId: "list-editor-input",
|
|
60
|
+
className: direction === 'rtl' ? rightToLeft : '',
|
|
61
|
+
isRequired: isRequired,
|
|
62
|
+
isInvalid: errors.length > 0,
|
|
63
|
+
isDisabled: disabled,
|
|
64
|
+
value: valueState,
|
|
65
|
+
onChange: onChange
|
|
48
66
|
});
|
|
49
67
|
}
|
|
68
|
+
|
|
50
69
|
ListEditor.defaultProps = {
|
|
51
70
|
isInitiallyDisabled: true
|
|
52
71
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-list.esm.js","sources":["../src/styles.ts","../src/ListEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n","import * as React from 'react';\nimport { FieldAPI,
|
|
1
|
+
{"version":3,"file":"field-editor-list.esm.js","sources":["../src/styles.ts","../src/ListEditor.tsx"],"sourcesContent":["import { css } from 'emotion';\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n","import * as React from 'react';\nimport { FieldAPI, FieldConnector, LocalesAPI } from '@contentful/field-editor-shared';\nimport * as styles from './styles';\nimport isEqual from 'lodash/isEqual';\n\nimport { TextInput } from '@contentful/f36-components';\nimport { FieldConnectorChildProps } from '@contentful/field-editor-shared/dist/FieldConnector';\n\nexport interface ListEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n\n /**\n * sdk.field\n */\n field: FieldAPI;\n\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\ntype ListValue = string[];\n\nfunction isEmptyListValue(value: ListValue | null) {\n return value === null || value.length === 0;\n}\n\nexport function ListEditor(props: ListEditorProps) {\n const { field, locales } = props;\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 {(childProps) => (\n <ListEditorInternal {...childProps} direction={direction} isRequired={field.required} />\n )}\n </FieldConnector>\n );\n}\n\nfunction ListEditorInternal({\n setValue,\n value,\n errors,\n disabled,\n direction,\n isRequired,\n}: FieldConnectorChildProps<ListValue> & { direction: 'rtl' | 'ltr'; isRequired: boolean }) {\n const [valueState, setValueState] = React.useState(() => (value || []).join(', '));\n\n const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const valueAsArray = e.target.value\n .split(',')\n .map((item) => item.trim())\n .filter((item) => item);\n const changed = !isEqual(valueAsArray, value);\n setValue(valueAsArray);\n\n const valueAsString = valueAsArray.join(', ');\n setValueState(changed ? valueAsString : e.target.value);\n };\n\n return (\n <TextInput\n testId=\"list-editor-input\"\n className={direction === 'rtl' ? styles.rightToLeft : ''}\n isRequired={isRequired}\n isInvalid={errors.length > 0}\n isDisabled={disabled}\n value={valueState}\n onChange={onChange}\n />\n );\n}\n\nListEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["rightToLeft","css","direction","isEmptyListValue","value","length","ListEditor","props","field","locales","locale","React","FieldConnector","throttle","isEmptyValue","isInitiallyDisabled","childProps","ListEditorInternal","isRequired","required","setValue","errors","disabled","join","valueState","setValueState","onChange","e","valueAsArray","target","split","map","item","trim","filter","changed","isEqual","valueAsString","TextInput","testId","className","styles","isInvalid","isDisabled","defaultProps"],"mappings":";;;;;;AAEO,IAAMA,WAAW,gBAAGC,GAAG,CAAC;AAC7BC,EAAAA,SAAS,EAAE;AADkB,CAAD,CAAvB;;ACyBP,SAASC,gBAAT,CAA0BC,KAA1B;AACE,SAAOA,KAAK,KAAK,IAAV,IAAkBA,KAAK,CAACC,MAAN,KAAiB,CAA1C;AACD;;AAED,SAAgBC,WAAWC;AACzB,MAAQC,KAAR,GAA2BD,KAA3B,CAAQC,KAAR;AAAA,MAAeC,OAAf,GAA2BF,KAA3B,CAAeE,OAAf;AAEA,MAAMP,SAAS,GAAGO,OAAO,CAACP,SAAR,CAAkBM,KAAK,CAACE,MAAxB,KAAmC,KAArD;AAEA,SACEC,aAAA,CAACC,cAAD;AACEC,IAAAA,QAAQ,EAAE;AACVC,IAAAA,YAAY,EAAEX;AACdK,IAAAA,KAAK,EAAEA;AACPO,IAAAA,mBAAmB,EAAER,KAAK,CAACQ;GAJ7B,EAKG,UAACC,UAAD;AAAA,WACCL,aAAA,CAACM,kBAAD,oBAAwBD;AAAYd,MAAAA,SAAS,EAAEA;AAAWgB,MAAAA,UAAU,EAAEV,KAAK,CAACW;MAA5E,CADD;AAAA,GALH,CADF;AAWD;;AAED,SAASF,kBAAT;MACEG,gBAAAA;MACAhB,aAAAA;MACAiB,cAAAA;MACAC,gBAAAA;MACApB,iBAAAA;MACAgB,kBAAAA;;AAEA,wBAAoCP,QAAA,CAAe;AAAA,WAAM,CAACP,KAAK,IAAI,EAAV,EAAcmB,IAAd,CAAmB,IAAnB,CAAN;AAAA,GAAf,CAApC;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,CAAD;AACf,QAAMC,YAAY,GAAGD,CAAC,CAACE,MAAF,CAASzB,KAAT,CAClB0B,KADkB,CACZ,GADY,EAElBC,GAFkB,CAEd,UAACC,IAAD;AAAA,aAAUA,IAAI,CAACC,IAAL,EAAV;AAAA,KAFc,EAGlBC,MAHkB,CAGX,UAACF,IAAD;AAAA,aAAUA,IAAV;AAAA,KAHW,CAArB;AAIA,QAAMG,OAAO,GAAG,CAACC,OAAO,CAACR,YAAD,EAAexB,KAAf,CAAxB;AACAgB,IAAAA,QAAQ,CAACQ,YAAD,CAAR;AAEA,QAAMS,aAAa,GAAGT,YAAY,CAACL,IAAb,CAAkB,IAAlB,CAAtB;AACAE,IAAAA,aAAa,CAACU,OAAO,GAAGE,aAAH,GAAmBV,CAAC,CAACE,MAAF,CAASzB,KAApC,CAAb;AACD,GAVD;;AAYA,SACEO,aAAA,CAAC2B,SAAD;AACEC,IAAAA,MAAM,EAAC;AACPC,IAAAA,SAAS,EAAEtC,SAAS,KAAK,KAAd,GAAsBuC,WAAtB,GAA2C;AACtDvB,IAAAA,UAAU,EAAEA;AACZwB,IAAAA,SAAS,EAAErB,MAAM,CAAChB,MAAP,GAAgB;AAC3BsC,IAAAA,UAAU,EAAErB;AACZlB,IAAAA,KAAK,EAAEoB;AACPE,IAAAA,QAAQ,EAAEA;GAPZ,CADF;AAWD;;AAEDpB,UAAU,CAACsC,YAAX,GAA0B;AACxB7B,EAAAA,mBAAmB,EAAE;AADG,CAA1B;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/field-editor-list",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/field-editor-list.esm.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "0919bd0a8c5a7e351f1247798aaf0271473807fe"
|
|
48
48
|
}
|