@contentful/field-editor-list 1.5.5 → 1.5.7

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.
Files changed (5) hide show
  1. package/dist/cjs/ListEditor.js +17 -3
  2. package/dist/cjs/ListEditor.spec.js +28 -4
  3. package/dist/esm/ListEditor.js +17 -3
  4. package/dist/esm/ListEditor.spec.js +29 -5
  5. package/package.json +3 -3
package/dist/cjs/ListEditor.js CHANGED
@@ -62,15 +62,28 @@ function _interop_require_wildcard(obj, nodeInterop) {
62
62
  function isEmptyListValue(value) {
63
63
  return value === null || value.length === 0;
64
64
  }
65
+ const useExternalChanges = (cb, externalValue)=>{
66
+ const lastExternalValue = _react.useRef(externalValue);
67
+ _react.useEffect(()=>{
68
+ if ((0, _isEqual.default)(lastExternalValue.current, externalValue)) {
69
+ return;
70
+ }
71
+ lastExternalValue.current = externalValue;
72
+ cb((externalValue ?? []).join(', '));
73
+ }, [
74
+ cb,
75
+ externalValue
76
+ ]);
77
+ };
65
78
  function ListEditor(props) {
66
79
  const { field, locales, id } = props;
67
80
  const direction = locales.direction[field.locale] || 'ltr';
68
- return _react.createElement(_fieldeditorshared.FieldConnector, {
81
+ return /*#__PURE__*/ _react.createElement(_fieldeditorshared.FieldConnector, {
69
82
  debounce: 0,
70
83
  isEmptyValue: isEmptyListValue,
71
84
  field: field,
72
85
  isInitiallyDisabled: props.isInitiallyDisabled
73
- }, (childProps)=>_react.createElement(ListEditorInternal, {
86
+ }, (childProps)=>/*#__PURE__*/ _react.createElement(ListEditorInternal, {
74
87
  ...childProps,
75
88
  direction: direction,
76
89
  isRequired: field.required,
@@ -86,7 +99,8 @@ function ListEditorInternal({ setValue, value, errors, disabled, direction, isRe
86
99
  const valueAsString = valueAsArray.join(', ');
87
100
  setValueState(changed ? valueAsString : e.target.value);
88
101
  };
89
- return _react.createElement(_f36components.TextInput, {
102
+ useExternalChanges(setValueState, value);
103
+ return /*#__PURE__*/ _react.createElement(_f36components.TextInput, {
90
104
  id: id,
91
105
  testId: "list-editor-input",
92
106
  className: direction === 'rtl' ? _styles.rightToLeft : '',
package/dist/cjs/ListEditor.spec.js CHANGED
@@ -72,7 +72,7 @@ describe('ListEditor', ()=>{
72
72
  validations: []
73
73
  };
74
74
  });
75
- const renderResult = (0, _react1.render)(_react.createElement(_ListEditor.ListEditor, {
75
+ const renderResult = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_ListEditor.ListEditor, {
76
76
  field: field,
77
77
  locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
78
78
  isInitiallyDisabled: false
@@ -91,7 +91,7 @@ describe('ListEditor', ()=>{
91
91
  validations: []
92
92
  };
93
93
  }, initialValue);
94
- const renderResult = (0, _react1.render)(_react.createElement(_ListEditor.ListEditor, {
94
+ const renderResult = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_ListEditor.ListEditor, {
95
95
  field: field,
96
96
  locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
97
97
  isInitiallyDisabled: false
@@ -107,7 +107,7 @@ describe('ListEditor', ()=>{
107
107
  validations: []
108
108
  };
109
109
  });
110
- const renderResult = (0, _react1.render)(_react.createElement(_ListEditor.ListEditor, {
110
+ const renderResult = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_ListEditor.ListEditor, {
111
111
  field: field,
112
112
  locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
113
113
  isInitiallyDisabled: false
@@ -137,7 +137,7 @@ describe('ListEditor', ()=>{
137
137
  }, [
138
138
  'test1'
139
139
  ]);
140
- const renderResult = (0, _react1.render)(_react.createElement(_ListEditor.ListEditor, {
140
+ const renderResult = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_ListEditor.ListEditor, {
141
141
  field: field,
142
142
  locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
143
143
  isInitiallyDisabled: false
@@ -148,4 +148,28 @@ describe('ListEditor', ()=>{
148
148
  ]);
149
149
  expectInputValue(renderResult, 'test1,');
150
150
  });
151
+ it('listens to external changes', async ()=>{
152
+ const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
153
+ jest.spyOn(field, 'setValue');
154
+ return {
155
+ ...field,
156
+ validations: []
157
+ };
158
+ }, [
159
+ 'test1'
160
+ ]);
161
+ const renderResult = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_ListEditor.ListEditor, {
162
+ field: field,
163
+ locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
164
+ isInitiallyDisabled: false
165
+ }));
166
+ expectInputValue(renderResult, 'test1');
167
+ field.setValue([
168
+ 'test1',
169
+ 'test2'
170
+ ]);
171
+ await (0, _react1.waitFor)(()=>{
172
+ expectInputValue(renderResult, 'test1, test2');
173
+ });
174
+ });
151
175
  });
package/dist/esm/ListEditor.js CHANGED
@@ -6,15 +6,28 @@ import * as styles from './styles';
6
6
  function isEmptyListValue(value) {
7
7
  return value === null || value.length === 0;
8
8
  }
9
+ const useExternalChanges = (cb, externalValue)=>{
10
+ const lastExternalValue = React.useRef(externalValue);
11
+ React.useEffect(()=>{
12
+ if (isEqual(lastExternalValue.current, externalValue)) {
13
+ return;
14
+ }
15
+ lastExternalValue.current = externalValue;
16
+ cb((externalValue ?? []).join(', '));
17
+ }, [
18
+ cb,
19
+ externalValue
20
+ ]);
21
+ };
9
22
  export function ListEditor(props) {
10
23
  const { field, locales, id } = props;
11
24
  const direction = locales.direction[field.locale] || 'ltr';
12
- return React.createElement(FieldConnector, {
25
+ return /*#__PURE__*/ React.createElement(FieldConnector, {
13
26
  debounce: 0,
14
27
  isEmptyValue: isEmptyListValue,
15
28
  field: field,
16
29
  isInitiallyDisabled: props.isInitiallyDisabled
17
- }, (childProps)=>React.createElement(ListEditorInternal, {
30
+ }, (childProps)=>/*#__PURE__*/ React.createElement(ListEditorInternal, {
18
31
  ...childProps,
19
32
  direction: direction,
20
33
  isRequired: field.required,
@@ -30,7 +43,8 @@ function ListEditorInternal({ setValue, value, errors, disabled, direction, isRe
30
43
  const valueAsString = valueAsArray.join(', ');
31
44
  setValueState(changed ? valueAsString : e.target.value);
32
45
  };
33
- return React.createElement(TextInput, {
46
+ useExternalChanges(setValueState, value);
47
+ return /*#__PURE__*/ React.createElement(TextInput, {
34
48
  id: id,
35
49
  testId: "list-editor-input",
36
50
  className: direction === 'rtl' ? styles.rightToLeft : '',
package/dist/esm/ListEditor.spec.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-editor-test-utils';
3
3
  import '@testing-library/jest-dom/extend-expect';
4
- import { cleanup, configure, fireEvent, render } from '@testing-library/react';
4
+ import { cleanup, configure, fireEvent, render, waitFor } from '@testing-library/react';
5
5
  import { ListEditor } from './ListEditor';
6
6
  configure({
7
7
  testIdAttribute: 'data-test-id'
@@ -27,7 +27,7 @@ describe('ListEditor', ()=>{
27
27
  validations: []
28
28
  };
29
29
  });
30
- const renderResult = render(React.createElement(ListEditor, {
30
+ const renderResult = render(/*#__PURE__*/ React.createElement(ListEditor, {
31
31
  field: field,
32
32
  locales: createFakeLocalesAPI(),
33
33
  isInitiallyDisabled: false
@@ -46,7 +46,7 @@ describe('ListEditor', ()=>{
46
46
  validations: []
47
47
  };
48
48
  }, initialValue);
49
- const renderResult = render(React.createElement(ListEditor, {
49
+ const renderResult = render(/*#__PURE__*/ React.createElement(ListEditor, {
50
50
  field: field,
51
51
  locales: createFakeLocalesAPI(),
52
52
  isInitiallyDisabled: false
@@ -62,7 +62,7 @@ describe('ListEditor', ()=>{
62
62
  validations: []
63
63
  };
64
64
  });
65
- const renderResult = render(React.createElement(ListEditor, {
65
+ const renderResult = render(/*#__PURE__*/ React.createElement(ListEditor, {
66
66
  field: field,
67
67
  locales: createFakeLocalesAPI(),
68
68
  isInitiallyDisabled: false
@@ -92,7 +92,7 @@ describe('ListEditor', ()=>{
92
92
  }, [
93
93
  'test1'
94
94
  ]);
95
- const renderResult = render(React.createElement(ListEditor, {
95
+ const renderResult = render(/*#__PURE__*/ React.createElement(ListEditor, {
96
96
  field: field,
97
97
  locales: createFakeLocalesAPI(),
98
98
  isInitiallyDisabled: false
@@ -103,4 +103,28 @@ describe('ListEditor', ()=>{
103
103
  ]);
104
104
  expectInputValue(renderResult, 'test1,');
105
105
  });
106
+ it('listens to external changes', async ()=>{
107
+ const [field] = createFakeFieldAPI((field)=>{
108
+ jest.spyOn(field, 'setValue');
109
+ return {
110
+ ...field,
111
+ validations: []
112
+ };
113
+ }, [
114
+ 'test1'
115
+ ]);
116
+ const renderResult = render(/*#__PURE__*/ React.createElement(ListEditor, {
117
+ field: field,
118
+ locales: createFakeLocalesAPI(),
119
+ isInitiallyDisabled: false
120
+ }));
121
+ expectInputValue(renderResult, 'test1');
122
+ field.setValue([
123
+ 'test1',
124
+ 'test2'
125
+ ]);
126
+ await waitFor(()=>{
127
+ expectInputValue(renderResult, 'test1, test2');
128
+ });
129
+ });
106
130
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/field-editor-list",
3
- "version": "1.5.5",
3
+ "version": "1.5.7",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/types/index.d.ts",
@@ -37,7 +37,7 @@
37
37
  "dependencies": {
38
38
  "@contentful/f36-components": "^4.70.0",
39
39
  "@contentful/f36-tokens": "^4.0.5",
40
- "@contentful/field-editor-shared": "^2.7.0",
40
+ "@contentful/field-editor-shared": "^2.8.0",
41
41
  "emotion": "^10.0.17",
42
42
  "lodash": "^4.17.15"
43
43
  },
@@ -50,5 +50,5 @@
50
50
  "publishConfig": {
51
51
  "registry": "https://npm.pkg.github.com/"
52
52
  },
53
- "gitHead": "62868063532796d312b7002cac13f27ab3557110"
53
+ "gitHead": "a86f67a6d507eb7c8c7a38b4312380361bdbebbb"
54
54
  }