@contentful/field-editor-dropdown 1.2.0 → 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.
- package/dist/cjs/DropdownEditor.js +87 -0
- package/dist/cjs/DropdownEditor.spec.js +232 -0
- package/dist/cjs/dropdownUtils.js +41 -0
- package/dist/cjs/index.js +23 -0
- package/dist/cjs/styles.js +14 -0
- package/dist/esm/DropdownEditor.js +38 -0
- package/dist/esm/DropdownEditor.spec.js +189 -0
- package/dist/esm/dropdownUtils.js +23 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/styles.js +4 -0
- package/dist/{DropdownEditor.d.ts → types/DropdownEditor.d.ts} +22 -22
- package/dist/types/DropdownEditor.spec.d.ts +1 -0
- package/dist/{dropdownUtils.d.ts → types/dropdownUtils.d.ts} +9 -9
- package/dist/{index.d.ts → types/index.d.ts} +2 -2
- package/dist/{styles.d.ts → types/styles.d.ts} +1 -1
- package/package.json +25 -11
- package/CHANGELOG.md +0 -194
- package/dist/field-editor-dropdown.cjs.development.js +0 -88
- package/dist/field-editor-dropdown.cjs.development.js.map +0 -1
- package/dist/field-editor-dropdown.cjs.production.min.js +0 -2
- package/dist/field-editor-dropdown.cjs.production.min.js.map +0 -1
- package/dist/field-editor-dropdown.esm.js +0 -82
- package/dist/field-editor-dropdown.esm.js.map +0 -1
- package/dist/index.js +0 -8
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "DropdownEditor", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return DropdownEditor;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _react = _interop_require_wildcard(require("react"));
|
|
12
|
+
const _f36components = require("@contentful/f36-components");
|
|
13
|
+
const _fieldeditorshared = require("@contentful/field-editor-shared");
|
|
14
|
+
const _dropdownUtils = require("./dropdownUtils");
|
|
15
|
+
const _styles = _interop_require_wildcard(require("./styles"));
|
|
16
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
17
|
+
if (typeof WeakMap !== "function") return null;
|
|
18
|
+
var cacheBabelInterop = new WeakMap();
|
|
19
|
+
var cacheNodeInterop = new WeakMap();
|
|
20
|
+
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
21
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
22
|
+
})(nodeInterop);
|
|
23
|
+
}
|
|
24
|
+
function _interop_require_wildcard(obj, nodeInterop) {
|
|
25
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
26
|
+
return obj;
|
|
27
|
+
}
|
|
28
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
29
|
+
return {
|
|
30
|
+
default: obj
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
34
|
+
if (cache && cache.has(obj)) {
|
|
35
|
+
return cache.get(obj);
|
|
36
|
+
}
|
|
37
|
+
var newObj = {};
|
|
38
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
39
|
+
for(var key in obj){
|
|
40
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
41
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
42
|
+
if (desc && (desc.get || desc.set)) {
|
|
43
|
+
Object.defineProperty(newObj, key, desc);
|
|
44
|
+
} else {
|
|
45
|
+
newObj[key] = obj[key];
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
newObj.default = obj;
|
|
50
|
+
if (cache) {
|
|
51
|
+
cache.set(obj, newObj);
|
|
52
|
+
}
|
|
53
|
+
return newObj;
|
|
54
|
+
}
|
|
55
|
+
function DropdownEditor(props) {
|
|
56
|
+
const { field , locales } = props;
|
|
57
|
+
const options = (0, _dropdownUtils.getOptions)(field);
|
|
58
|
+
const misconfigured = options.length === 0;
|
|
59
|
+
if (misconfigured) {
|
|
60
|
+
return _react.createElement(_fieldeditorshared.PredefinedValuesError, null);
|
|
61
|
+
}
|
|
62
|
+
const direction = locales.direction[field.locale] || 'ltr';
|
|
63
|
+
return _react.createElement(_fieldeditorshared.FieldConnector, {
|
|
64
|
+
throttle: 0,
|
|
65
|
+
field: field,
|
|
66
|
+
isInitiallyDisabled: props.isInitiallyDisabled
|
|
67
|
+
}, ({ value , errors , disabled , setValue })=>_react.createElement(_f36components.Select, {
|
|
68
|
+
testId: "dropdown-editor",
|
|
69
|
+
isInvalid: errors.length > 0,
|
|
70
|
+
isDisabled: disabled,
|
|
71
|
+
className: direction === 'rtl' ? _styles.rightToLeft : '',
|
|
72
|
+
isRequired: field.required,
|
|
73
|
+
value: value === undefined ? '' : String(value),
|
|
74
|
+
onChange: (e)=>{
|
|
75
|
+
const value = e.target.value;
|
|
76
|
+
setValue((0, _dropdownUtils.parseValue)(value, field.type));
|
|
77
|
+
}
|
|
78
|
+
}, _react.createElement(_f36components.Select.Option, {
|
|
79
|
+
value: ""
|
|
80
|
+
}, "Choose a value"), options.map((option)=>_react.createElement(_f36components.Select.Option, {
|
|
81
|
+
key: option.value,
|
|
82
|
+
value: String(option.value)
|
|
83
|
+
}, option.label))));
|
|
84
|
+
}
|
|
85
|
+
DropdownEditor.defaultProps = {
|
|
86
|
+
isInitiallyDisabled: true
|
|
87
|
+
};
|
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
const _react = _interop_require_wildcard(require("react"));
|
|
6
|
+
const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
|
|
7
|
+
require("@testing-library/jest-dom/extend-expect");
|
|
8
|
+
const _react1 = require("@testing-library/react");
|
|
9
|
+
const _DropdownEditor = require("./DropdownEditor");
|
|
10
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
11
|
+
if (typeof WeakMap !== "function") return null;
|
|
12
|
+
var cacheBabelInterop = new WeakMap();
|
|
13
|
+
var cacheNodeInterop = new WeakMap();
|
|
14
|
+
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
15
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
16
|
+
})(nodeInterop);
|
|
17
|
+
}
|
|
18
|
+
function _interop_require_wildcard(obj, nodeInterop) {
|
|
19
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
20
|
+
return obj;
|
|
21
|
+
}
|
|
22
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
23
|
+
return {
|
|
24
|
+
default: obj
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
28
|
+
if (cache && cache.has(obj)) {
|
|
29
|
+
return cache.get(obj);
|
|
30
|
+
}
|
|
31
|
+
var newObj = {};
|
|
32
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
33
|
+
for(var key in obj){
|
|
34
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
35
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
36
|
+
if (desc && (desc.get || desc.set)) {
|
|
37
|
+
Object.defineProperty(newObj, key, desc);
|
|
38
|
+
} else {
|
|
39
|
+
newObj[key] = obj[key];
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
newObj.default = obj;
|
|
44
|
+
if (cache) {
|
|
45
|
+
cache.set(obj, newObj);
|
|
46
|
+
}
|
|
47
|
+
return newObj;
|
|
48
|
+
}
|
|
49
|
+
(0, _react1.configure)({
|
|
50
|
+
testIdAttribute: 'data-test-id'
|
|
51
|
+
});
|
|
52
|
+
describe('DropdownEditor', ()=>{
|
|
53
|
+
afterEach(_react1.cleanup);
|
|
54
|
+
it('renders a warning if no options are present', ()=>{
|
|
55
|
+
const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((mock)=>{
|
|
56
|
+
return {
|
|
57
|
+
...mock,
|
|
58
|
+
validations: []
|
|
59
|
+
};
|
|
60
|
+
});
|
|
61
|
+
const { getByTestId , queryByTestId } = (0, _react1.render)(_react.createElement(_DropdownEditor.DropdownEditor, {
|
|
62
|
+
field: field,
|
|
63
|
+
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
|
|
64
|
+
isInitiallyDisabled: false
|
|
65
|
+
}));
|
|
66
|
+
expect(getByTestId('predefined-values-warning')).toBeInTheDocument();
|
|
67
|
+
expect(queryByTestId('dropdown-editor')).not.toBeInTheDocument();
|
|
68
|
+
});
|
|
69
|
+
it('renders option tags for predefined values', ()=>{
|
|
70
|
+
const predefined = [
|
|
71
|
+
'banana',
|
|
72
|
+
'orange',
|
|
73
|
+
'strawberry'
|
|
74
|
+
];
|
|
75
|
+
const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((mock)=>{
|
|
76
|
+
return {
|
|
77
|
+
...mock,
|
|
78
|
+
validations: [
|
|
79
|
+
{
|
|
80
|
+
in: predefined
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
};
|
|
84
|
+
});
|
|
85
|
+
const { container , getByText } = (0, _react1.render)(_react.createElement(_DropdownEditor.DropdownEditor, {
|
|
86
|
+
field: field,
|
|
87
|
+
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
|
|
88
|
+
isInitiallyDisabled: false
|
|
89
|
+
}));
|
|
90
|
+
expect(container.querySelectorAll('option')).toHaveLength(4);
|
|
91
|
+
expect(getByText('Choose a value')).toHaveValue('');
|
|
92
|
+
predefined.forEach((item)=>{
|
|
93
|
+
expect(getByText(item)).toHaveValue(item);
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
it('calls setValue if user select on default option', ()=>{
|
|
97
|
+
const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
|
|
98
|
+
jest.spyOn(field, 'setValue');
|
|
99
|
+
jest.spyOn(field, 'removeValue');
|
|
100
|
+
return {
|
|
101
|
+
...field,
|
|
102
|
+
validations: [
|
|
103
|
+
{
|
|
104
|
+
in: [
|
|
105
|
+
'initial'
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
};
|
|
110
|
+
});
|
|
111
|
+
const { getByTestId } = (0, _react1.render)(_react.createElement(_DropdownEditor.DropdownEditor, {
|
|
112
|
+
field: field,
|
|
113
|
+
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
|
|
114
|
+
isInitiallyDisabled: false
|
|
115
|
+
}));
|
|
116
|
+
const changeDropdownValue = (value)=>_react1.fireEvent.change(getByTestId('dropdown-editor'), {
|
|
117
|
+
target: {
|
|
118
|
+
value
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
expect(getByTestId('dropdown-editor')).toHaveValue('');
|
|
122
|
+
changeDropdownValue('initial');
|
|
123
|
+
expect(field.setValue).toHaveBeenCalledWith('initial');
|
|
124
|
+
expect(field.setValue).toHaveBeenCalledTimes(1);
|
|
125
|
+
});
|
|
126
|
+
it('calls removeValue if user selects default option', ()=>{
|
|
127
|
+
const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
|
|
128
|
+
jest.spyOn(field, 'removeValue');
|
|
129
|
+
return {
|
|
130
|
+
...field,
|
|
131
|
+
getValue: ()=>'initial',
|
|
132
|
+
validations: [
|
|
133
|
+
{
|
|
134
|
+
in: [
|
|
135
|
+
'initial'
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
]
|
|
139
|
+
};
|
|
140
|
+
});
|
|
141
|
+
const { getByTestId } = (0, _react1.render)(_react.createElement(_DropdownEditor.DropdownEditor, {
|
|
142
|
+
field: field,
|
|
143
|
+
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
|
|
144
|
+
isInitiallyDisabled: false
|
|
145
|
+
}));
|
|
146
|
+
const changeDropdownValue = (value)=>_react1.fireEvent.change(getByTestId('dropdown-editor'), {
|
|
147
|
+
target: {
|
|
148
|
+
value
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
expect(getByTestId('dropdown-editor')).toHaveValue('initial');
|
|
152
|
+
changeDropdownValue('');
|
|
153
|
+
expect(field.removeValue).toHaveBeenCalledTimes(1);
|
|
154
|
+
});
|
|
155
|
+
it('calls #setValue with number for Number fields', function() {
|
|
156
|
+
const predefined = [
|
|
157
|
+
1,
|
|
158
|
+
'2.71',
|
|
159
|
+
3
|
|
160
|
+
];
|
|
161
|
+
const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
|
|
162
|
+
jest.spyOn(field, 'setValue');
|
|
163
|
+
jest.spyOn(field, 'removeValue');
|
|
164
|
+
return {
|
|
165
|
+
...field,
|
|
166
|
+
type: 'Number',
|
|
167
|
+
validations: [
|
|
168
|
+
{
|
|
169
|
+
in: predefined
|
|
170
|
+
}
|
|
171
|
+
]
|
|
172
|
+
};
|
|
173
|
+
});
|
|
174
|
+
const { getByTestId } = (0, _react1.render)(_react.createElement(_DropdownEditor.DropdownEditor, {
|
|
175
|
+
field: field,
|
|
176
|
+
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
|
|
177
|
+
isInitiallyDisabled: false
|
|
178
|
+
}));
|
|
179
|
+
const $editorInput = getByTestId('dropdown-editor');
|
|
180
|
+
const changeDropdownValue = (value)=>_react1.fireEvent.change($editorInput, {
|
|
181
|
+
target: {
|
|
182
|
+
value
|
|
183
|
+
}
|
|
184
|
+
});
|
|
185
|
+
expect($editorInput).toHaveValue('');
|
|
186
|
+
changeDropdownValue('2.71');
|
|
187
|
+
expect($editorInput).toHaveValue('2.71');
|
|
188
|
+
expect(field.setValue).toHaveBeenCalledWith(2.71);
|
|
189
|
+
expect(field.setValue).toHaveBeenCalledTimes(1);
|
|
190
|
+
});
|
|
191
|
+
it('calls #setValue with number for Integer fields', function() {
|
|
192
|
+
const predefined = [
|
|
193
|
+
0,
|
|
194
|
+
1,
|
|
195
|
+
'2',
|
|
196
|
+
3
|
|
197
|
+
];
|
|
198
|
+
const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
|
|
199
|
+
jest.spyOn(field, 'setValue');
|
|
200
|
+
jest.spyOn(field, 'removeValue');
|
|
201
|
+
return {
|
|
202
|
+
...field,
|
|
203
|
+
type: 'Number',
|
|
204
|
+
validations: [
|
|
205
|
+
{
|
|
206
|
+
in: predefined
|
|
207
|
+
}
|
|
208
|
+
]
|
|
209
|
+
};
|
|
210
|
+
});
|
|
211
|
+
const { getByTestId } = (0, _react1.render)(_react.createElement(_DropdownEditor.DropdownEditor, {
|
|
212
|
+
field: field,
|
|
213
|
+
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
|
|
214
|
+
isInitiallyDisabled: false
|
|
215
|
+
}));
|
|
216
|
+
const $editorInput = getByTestId('dropdown-editor');
|
|
217
|
+
const changeDropdownValue = (value)=>_react1.fireEvent.change($editorInput, {
|
|
218
|
+
target: {
|
|
219
|
+
value
|
|
220
|
+
}
|
|
221
|
+
});
|
|
222
|
+
expect($editorInput).toHaveValue('');
|
|
223
|
+
changeDropdownValue('1');
|
|
224
|
+
expect(field.setValue).toHaveBeenCalledWith(1);
|
|
225
|
+
expect(field.setValue).toHaveBeenCalledTimes(1);
|
|
226
|
+
expect($editorInput).toHaveValue('1');
|
|
227
|
+
changeDropdownValue('0');
|
|
228
|
+
expect(field.setValue).toHaveBeenCalledWith(0);
|
|
229
|
+
expect(field.setValue).toHaveBeenCalledTimes(2);
|
|
230
|
+
expect($editorInput).toHaveValue('0');
|
|
231
|
+
});
|
|
232
|
+
});
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
parseValue: function() {
|
|
13
|
+
return parseValue;
|
|
14
|
+
},
|
|
15
|
+
getOptions: function() {
|
|
16
|
+
return getOptions;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _nanoid = require("nanoid");
|
|
20
|
+
function parseValue(value, fieldType) {
|
|
21
|
+
if (value === '') {
|
|
22
|
+
return undefined;
|
|
23
|
+
}
|
|
24
|
+
if (fieldType === 'Integer' || fieldType === 'Number') {
|
|
25
|
+
const asNumber = Number(value);
|
|
26
|
+
return isNaN(asNumber) ? undefined : asNumber;
|
|
27
|
+
}
|
|
28
|
+
return value;
|
|
29
|
+
}
|
|
30
|
+
function getOptions(field) {
|
|
31
|
+
const validations = field.validations || [];
|
|
32
|
+
const predefinedValues = validations.filter((validation)=>validation.in).map((validation)=>validation.in);
|
|
33
|
+
const firstPredefinedValues = predefinedValues.length > 0 ? predefinedValues[0] : [];
|
|
34
|
+
return firstPredefinedValues.map((value)=>({
|
|
35
|
+
id: (0, _nanoid.nanoid)(6),
|
|
36
|
+
value: parseValue(value, field.type),
|
|
37
|
+
label: String(value)
|
|
38
|
+
})).filter((item)=>{
|
|
39
|
+
return item.value !== undefined;
|
|
40
|
+
});
|
|
41
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
DropdownEditor: function() {
|
|
13
|
+
return _DropdownEditor.DropdownEditor;
|
|
14
|
+
},
|
|
15
|
+
getOptions: function() {
|
|
16
|
+
return _dropdownUtils.getOptions;
|
|
17
|
+
},
|
|
18
|
+
parseValue: function() {
|
|
19
|
+
return _dropdownUtils.parseValue;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
const _DropdownEditor = require("./DropdownEditor");
|
|
23
|
+
const _dropdownUtils = require("./dropdownUtils");
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "rightToLeft", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return rightToLeft;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _emotion = require("emotion");
|
|
12
|
+
const rightToLeft = (0, _emotion.css)({
|
|
13
|
+
direction: 'rtl'
|
|
14
|
+
});
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Select } from '@contentful/f36-components';
|
|
3
|
+
import { FieldConnector, PredefinedValuesError } from '@contentful/field-editor-shared';
|
|
4
|
+
import { getOptions, parseValue } from './dropdownUtils';
|
|
5
|
+
import * as styles from './styles';
|
|
6
|
+
export function DropdownEditor(props) {
|
|
7
|
+
const { field , locales } = props;
|
|
8
|
+
const options = getOptions(field);
|
|
9
|
+
const misconfigured = options.length === 0;
|
|
10
|
+
if (misconfigured) {
|
|
11
|
+
return React.createElement(PredefinedValuesError, null);
|
|
12
|
+
}
|
|
13
|
+
const direction = locales.direction[field.locale] || 'ltr';
|
|
14
|
+
return React.createElement(FieldConnector, {
|
|
15
|
+
throttle: 0,
|
|
16
|
+
field: field,
|
|
17
|
+
isInitiallyDisabled: props.isInitiallyDisabled
|
|
18
|
+
}, ({ value , errors , disabled , setValue })=>React.createElement(Select, {
|
|
19
|
+
testId: "dropdown-editor",
|
|
20
|
+
isInvalid: errors.length > 0,
|
|
21
|
+
isDisabled: disabled,
|
|
22
|
+
className: direction === 'rtl' ? styles.rightToLeft : '',
|
|
23
|
+
isRequired: field.required,
|
|
24
|
+
value: value === undefined ? '' : String(value),
|
|
25
|
+
onChange: (e)=>{
|
|
26
|
+
const value = e.target.value;
|
|
27
|
+
setValue(parseValue(value, field.type));
|
|
28
|
+
}
|
|
29
|
+
}, React.createElement(Select.Option, {
|
|
30
|
+
value: ""
|
|
31
|
+
}, "Choose a value"), options.map((option)=>React.createElement(Select.Option, {
|
|
32
|
+
key: option.value,
|
|
33
|
+
value: String(option.value)
|
|
34
|
+
}, option.label))));
|
|
35
|
+
}
|
|
36
|
+
DropdownEditor.defaultProps = {
|
|
37
|
+
isInitiallyDisabled: true
|
|
38
|
+
};
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-editor-test-utils';
|
|
3
|
+
import '@testing-library/jest-dom/extend-expect';
|
|
4
|
+
import { cleanup, configure, fireEvent, render } from '@testing-library/react';
|
|
5
|
+
import { DropdownEditor } from './DropdownEditor';
|
|
6
|
+
configure({
|
|
7
|
+
testIdAttribute: 'data-test-id'
|
|
8
|
+
});
|
|
9
|
+
describe('DropdownEditor', ()=>{
|
|
10
|
+
afterEach(cleanup);
|
|
11
|
+
it('renders a warning if no options are present', ()=>{
|
|
12
|
+
const [field] = createFakeFieldAPI((mock)=>{
|
|
13
|
+
return {
|
|
14
|
+
...mock,
|
|
15
|
+
validations: []
|
|
16
|
+
};
|
|
17
|
+
});
|
|
18
|
+
const { getByTestId , queryByTestId } = render(React.createElement(DropdownEditor, {
|
|
19
|
+
field: field,
|
|
20
|
+
locales: createFakeLocalesAPI(),
|
|
21
|
+
isInitiallyDisabled: false
|
|
22
|
+
}));
|
|
23
|
+
expect(getByTestId('predefined-values-warning')).toBeInTheDocument();
|
|
24
|
+
expect(queryByTestId('dropdown-editor')).not.toBeInTheDocument();
|
|
25
|
+
});
|
|
26
|
+
it('renders option tags for predefined values', ()=>{
|
|
27
|
+
const predefined = [
|
|
28
|
+
'banana',
|
|
29
|
+
'orange',
|
|
30
|
+
'strawberry'
|
|
31
|
+
];
|
|
32
|
+
const [field] = createFakeFieldAPI((mock)=>{
|
|
33
|
+
return {
|
|
34
|
+
...mock,
|
|
35
|
+
validations: [
|
|
36
|
+
{
|
|
37
|
+
in: predefined
|
|
38
|
+
}
|
|
39
|
+
]
|
|
40
|
+
};
|
|
41
|
+
});
|
|
42
|
+
const { container , getByText } = render(React.createElement(DropdownEditor, {
|
|
43
|
+
field: field,
|
|
44
|
+
locales: createFakeLocalesAPI(),
|
|
45
|
+
isInitiallyDisabled: false
|
|
46
|
+
}));
|
|
47
|
+
expect(container.querySelectorAll('option')).toHaveLength(4);
|
|
48
|
+
expect(getByText('Choose a value')).toHaveValue('');
|
|
49
|
+
predefined.forEach((item)=>{
|
|
50
|
+
expect(getByText(item)).toHaveValue(item);
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
it('calls setValue if user select on default option', ()=>{
|
|
54
|
+
const [field] = createFakeFieldAPI((field)=>{
|
|
55
|
+
jest.spyOn(field, 'setValue');
|
|
56
|
+
jest.spyOn(field, 'removeValue');
|
|
57
|
+
return {
|
|
58
|
+
...field,
|
|
59
|
+
validations: [
|
|
60
|
+
{
|
|
61
|
+
in: [
|
|
62
|
+
'initial'
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
]
|
|
66
|
+
};
|
|
67
|
+
});
|
|
68
|
+
const { getByTestId } = render(React.createElement(DropdownEditor, {
|
|
69
|
+
field: field,
|
|
70
|
+
locales: createFakeLocalesAPI(),
|
|
71
|
+
isInitiallyDisabled: false
|
|
72
|
+
}));
|
|
73
|
+
const changeDropdownValue = (value)=>fireEvent.change(getByTestId('dropdown-editor'), {
|
|
74
|
+
target: {
|
|
75
|
+
value
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
expect(getByTestId('dropdown-editor')).toHaveValue('');
|
|
79
|
+
changeDropdownValue('initial');
|
|
80
|
+
expect(field.setValue).toHaveBeenCalledWith('initial');
|
|
81
|
+
expect(field.setValue).toHaveBeenCalledTimes(1);
|
|
82
|
+
});
|
|
83
|
+
it('calls removeValue if user selects default option', ()=>{
|
|
84
|
+
const [field] = createFakeFieldAPI((field)=>{
|
|
85
|
+
jest.spyOn(field, 'removeValue');
|
|
86
|
+
return {
|
|
87
|
+
...field,
|
|
88
|
+
getValue: ()=>'initial',
|
|
89
|
+
validations: [
|
|
90
|
+
{
|
|
91
|
+
in: [
|
|
92
|
+
'initial'
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
]
|
|
96
|
+
};
|
|
97
|
+
});
|
|
98
|
+
const { getByTestId } = render(React.createElement(DropdownEditor, {
|
|
99
|
+
field: field,
|
|
100
|
+
locales: createFakeLocalesAPI(),
|
|
101
|
+
isInitiallyDisabled: false
|
|
102
|
+
}));
|
|
103
|
+
const changeDropdownValue = (value)=>fireEvent.change(getByTestId('dropdown-editor'), {
|
|
104
|
+
target: {
|
|
105
|
+
value
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
expect(getByTestId('dropdown-editor')).toHaveValue('initial');
|
|
109
|
+
changeDropdownValue('');
|
|
110
|
+
expect(field.removeValue).toHaveBeenCalledTimes(1);
|
|
111
|
+
});
|
|
112
|
+
it('calls #setValue with number for Number fields', function() {
|
|
113
|
+
const predefined = [
|
|
114
|
+
1,
|
|
115
|
+
'2.71',
|
|
116
|
+
3
|
|
117
|
+
];
|
|
118
|
+
const [field] = createFakeFieldAPI((field)=>{
|
|
119
|
+
jest.spyOn(field, 'setValue');
|
|
120
|
+
jest.spyOn(field, 'removeValue');
|
|
121
|
+
return {
|
|
122
|
+
...field,
|
|
123
|
+
type: 'Number',
|
|
124
|
+
validations: [
|
|
125
|
+
{
|
|
126
|
+
in: predefined
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
};
|
|
130
|
+
});
|
|
131
|
+
const { getByTestId } = render(React.createElement(DropdownEditor, {
|
|
132
|
+
field: field,
|
|
133
|
+
locales: createFakeLocalesAPI(),
|
|
134
|
+
isInitiallyDisabled: false
|
|
135
|
+
}));
|
|
136
|
+
const $editorInput = getByTestId('dropdown-editor');
|
|
137
|
+
const changeDropdownValue = (value)=>fireEvent.change($editorInput, {
|
|
138
|
+
target: {
|
|
139
|
+
value
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
expect($editorInput).toHaveValue('');
|
|
143
|
+
changeDropdownValue('2.71');
|
|
144
|
+
expect($editorInput).toHaveValue('2.71');
|
|
145
|
+
expect(field.setValue).toHaveBeenCalledWith(2.71);
|
|
146
|
+
expect(field.setValue).toHaveBeenCalledTimes(1);
|
|
147
|
+
});
|
|
148
|
+
it('calls #setValue with number for Integer fields', function() {
|
|
149
|
+
const predefined = [
|
|
150
|
+
0,
|
|
151
|
+
1,
|
|
152
|
+
'2',
|
|
153
|
+
3
|
|
154
|
+
];
|
|
155
|
+
const [field] = createFakeFieldAPI((field)=>{
|
|
156
|
+
jest.spyOn(field, 'setValue');
|
|
157
|
+
jest.spyOn(field, 'removeValue');
|
|
158
|
+
return {
|
|
159
|
+
...field,
|
|
160
|
+
type: 'Number',
|
|
161
|
+
validations: [
|
|
162
|
+
{
|
|
163
|
+
in: predefined
|
|
164
|
+
}
|
|
165
|
+
]
|
|
166
|
+
};
|
|
167
|
+
});
|
|
168
|
+
const { getByTestId } = render(React.createElement(DropdownEditor, {
|
|
169
|
+
field: field,
|
|
170
|
+
locales: createFakeLocalesAPI(),
|
|
171
|
+
isInitiallyDisabled: false
|
|
172
|
+
}));
|
|
173
|
+
const $editorInput = getByTestId('dropdown-editor');
|
|
174
|
+
const changeDropdownValue = (value)=>fireEvent.change($editorInput, {
|
|
175
|
+
target: {
|
|
176
|
+
value
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
expect($editorInput).toHaveValue('');
|
|
180
|
+
changeDropdownValue('1');
|
|
181
|
+
expect(field.setValue).toHaveBeenCalledWith(1);
|
|
182
|
+
expect(field.setValue).toHaveBeenCalledTimes(1);
|
|
183
|
+
expect($editorInput).toHaveValue('1');
|
|
184
|
+
changeDropdownValue('0');
|
|
185
|
+
expect(field.setValue).toHaveBeenCalledWith(0);
|
|
186
|
+
expect(field.setValue).toHaveBeenCalledTimes(2);
|
|
187
|
+
expect($editorInput).toHaveValue('0');
|
|
188
|
+
});
|
|
189
|
+
});
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { nanoid } from 'nanoid';
|
|
2
|
+
export function parseValue(value, fieldType) {
|
|
3
|
+
if (value === '') {
|
|
4
|
+
return undefined;
|
|
5
|
+
}
|
|
6
|
+
if (fieldType === 'Integer' || fieldType === 'Number') {
|
|
7
|
+
const asNumber = Number(value);
|
|
8
|
+
return isNaN(asNumber) ? undefined : asNumber;
|
|
9
|
+
}
|
|
10
|
+
return value;
|
|
11
|
+
}
|
|
12
|
+
export function getOptions(field) {
|
|
13
|
+
const validations = field.validations || [];
|
|
14
|
+
const predefinedValues = validations.filter((validation)=>validation.in).map((validation)=>validation.in);
|
|
15
|
+
const firstPredefinedValues = predefinedValues.length > 0 ? predefinedValues[0] : [];
|
|
16
|
+
return firstPredefinedValues.map((value)=>({
|
|
17
|
+
id: nanoid(6),
|
|
18
|
+
value: parseValue(value, field.type),
|
|
19
|
+
label: String(value)
|
|
20
|
+
})).filter((item)=>{
|
|
21
|
+
return item.value !== undefined;
|
|
22
|
+
});
|
|
23
|
+
}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
import { FieldAPI, LocalesAPI } from '@contentful/field-editor-shared';
|
|
3
|
-
export interface DropdownEditorProps {
|
|
4
|
-
/**
|
|
5
|
-
* is the field disabled initially
|
|
6
|
-
*/
|
|
7
|
-
isInitiallyDisabled: boolean;
|
|
8
|
-
/**
|
|
9
|
-
* sdk.field
|
|
10
|
-
*/
|
|
11
|
-
field: FieldAPI;
|
|
12
|
-
/**
|
|
13
|
-
* sdk.locales
|
|
14
|
-
*/
|
|
15
|
-
locales: LocalesAPI;
|
|
16
|
-
}
|
|
17
|
-
export declare function DropdownEditor(props: DropdownEditorProps): JSX.Element;
|
|
18
|
-
export declare namespace DropdownEditor {
|
|
19
|
-
var defaultProps: {
|
|
20
|
-
isInitiallyDisabled: boolean;
|
|
21
|
-
};
|
|
22
|
-
}
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { FieldAPI, LocalesAPI } from '@contentful/field-editor-shared';
|
|
3
|
+
export interface DropdownEditorProps {
|
|
4
|
+
/**
|
|
5
|
+
* is the field disabled initially
|
|
6
|
+
*/
|
|
7
|
+
isInitiallyDisabled: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* sdk.field
|
|
10
|
+
*/
|
|
11
|
+
field: FieldAPI;
|
|
12
|
+
/**
|
|
13
|
+
* sdk.locales
|
|
14
|
+
*/
|
|
15
|
+
locales: LocalesAPI;
|
|
16
|
+
}
|
|
17
|
+
export declare function DropdownEditor(props: DropdownEditorProps): React.JSX.Element;
|
|
18
|
+
export declare namespace DropdownEditor {
|
|
19
|
+
var defaultProps: {
|
|
20
|
+
isInitiallyDisabled: boolean;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom/extend-expect';
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { FieldAPI } from '@contentful/field-editor-shared';
|
|
2
|
-
|
|
3
|
-
id: string;
|
|
4
|
-
value: string | number | undefined;
|
|
5
|
-
label: string;
|
|
6
|
-
};
|
|
7
|
-
export declare function parseValue(value: string, fieldType: string): string | number | undefined;
|
|
8
|
-
export declare function getOptions(field: FieldAPI): DropdownOption[];
|
|
9
|
-
export {};
|
|
1
|
+
import { FieldAPI } from '@contentful/field-editor-shared';
|
|
2
|
+
type DropdownOption = {
|
|
3
|
+
id: string;
|
|
4
|
+
value: string | number | undefined;
|
|
5
|
+
label: string;
|
|
6
|
+
};
|
|
7
|
+
export declare function parseValue(value: string, fieldType: string): string | number | undefined;
|
|
8
|
+
export declare function getOptions(field: FieldAPI): DropdownOption[];
|
|
9
|
+
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { DropdownEditor } from './DropdownEditor';
|
|
2
|
-
export { getOptions, parseValue } from './dropdownUtils';
|
|
1
|
+
export { DropdownEditor } from './DropdownEditor';
|
|
2
|
+
export { getOptions, parseValue } from './dropdownUtils';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const rightToLeft: string;
|
|
1
|
+
export declare const rightToLeft: string;
|
package/package.json
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/field-editor-dropdown",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"main": "dist/index.js",
|
|
5
|
-
"module": "dist/
|
|
6
|
-
"
|
|
3
|
+
"version": "1.3.0",
|
|
4
|
+
"main": "dist/cjs/index.js",
|
|
5
|
+
"module": "dist/esm/index.js",
|
|
6
|
+
"types": "dist/types/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/types/index.d.ts",
|
|
10
|
+
"require": "./dist/cjs/index.js",
|
|
11
|
+
"default": "./dist/cjs/index.js"
|
|
12
|
+
},
|
|
13
|
+
"./package.json": "./package.json"
|
|
14
|
+
},
|
|
7
15
|
"files": [
|
|
8
16
|
"dist"
|
|
9
17
|
],
|
|
@@ -14,27 +22,33 @@
|
|
|
14
22
|
"url": "https://github.com/contentful/field-editors"
|
|
15
23
|
},
|
|
16
24
|
"scripts": {
|
|
17
|
-
"watch": "
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
25
|
+
"watch": "yarn concurrently \"yarn:watch:*\"",
|
|
26
|
+
"watch:cjs": "yarn build:cjs -w",
|
|
27
|
+
"watch:esm": "yarn build:esm -w",
|
|
28
|
+
"watch:types": "yarn build:types --watch",
|
|
29
|
+
"build": "yarn build:types && yarn build:cjs && yarn build:esm",
|
|
30
|
+
"build:types": "tsc --outDir dist/types --emitDeclarationOnly",
|
|
31
|
+
"build:cjs": "swc src --config-file ../../.swcrc -d dist/cjs -C module.type=commonjs",
|
|
32
|
+
"build:esm": "swc src --config-file ../../.swcrc -d dist/esm",
|
|
33
|
+
"test": "jest --watch",
|
|
34
|
+
"test:ci": "jest --ci --passWithNoTests",
|
|
21
35
|
"tsc": "tsc -p ./ --noEmit"
|
|
22
36
|
},
|
|
23
37
|
"dependencies": {
|
|
24
38
|
"@contentful/f36-components": "^4.0.27",
|
|
25
39
|
"@contentful/f36-tokens": "^4.0.0",
|
|
26
|
-
"@contentful/field-editor-shared": "^1.
|
|
40
|
+
"@contentful/field-editor-shared": "^1.3.0",
|
|
27
41
|
"emotion": "^10.0.0",
|
|
28
42
|
"lodash": "^4.17.15",
|
|
29
43
|
"lodash-es": "^4.17.15",
|
|
30
44
|
"nanoid": "^3.1.3"
|
|
31
45
|
},
|
|
32
46
|
"devDependencies": {
|
|
33
|
-
"@contentful/field-editor-test-utils": "^1.
|
|
47
|
+
"@contentful/field-editor-test-utils": "^1.4.0",
|
|
34
48
|
"contentful-management": "^10.0.0"
|
|
35
49
|
},
|
|
36
50
|
"peerDependencies": {
|
|
37
51
|
"react": ">=16.8.0"
|
|
38
52
|
},
|
|
39
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "543e02672a8dd4edc810f9f3568d6b69c454e1f9"
|
|
40
54
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
# Change Log
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file.
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
-
|
|
6
|
-
# [1.2.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.11...@contentful/field-editor-dropdown@1.2.0) (2023-04-19)
|
|
7
|
-
|
|
8
|
-
### Features
|
|
9
|
-
|
|
10
|
-
- upgrade cypress [TOL-1036] ([#1391](https://github.com/contentful/field-editors/issues/1391)) ([9c1aec9](https://github.com/contentful/field-editors/commit/9c1aec98aabbe464cdc3f1236c3bb1cc29b8208d))
|
|
11
|
-
|
|
12
|
-
## [1.1.11](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.10...@contentful/field-editor-dropdown@1.1.11) (2023-03-14)
|
|
13
|
-
|
|
14
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
15
|
-
|
|
16
|
-
## [1.1.10](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.9...@contentful/field-editor-dropdown@1.1.10) (2023-03-10)
|
|
17
|
-
|
|
18
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
19
|
-
|
|
20
|
-
## [1.1.9](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.8...@contentful/field-editor-dropdown@1.1.9) (2023-02-21)
|
|
21
|
-
|
|
22
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
23
|
-
|
|
24
|
-
## [1.1.8](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.7...@contentful/field-editor-dropdown@1.1.8) (2023-02-07)
|
|
25
|
-
|
|
26
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
27
|
-
|
|
28
|
-
## [1.1.7](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.6...@contentful/field-editor-dropdown@1.1.7) (2022-12-08)
|
|
29
|
-
|
|
30
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
31
|
-
|
|
32
|
-
## [1.1.6](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.5...@contentful/field-editor-dropdown@1.1.6) (2022-07-29)
|
|
33
|
-
|
|
34
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
35
|
-
|
|
36
|
-
## [1.1.5](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.4...@contentful/field-editor-dropdown@1.1.5) (2022-07-29)
|
|
37
|
-
|
|
38
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
39
|
-
|
|
40
|
-
## [1.1.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.3...@contentful/field-editor-dropdown@1.1.4) (2022-07-11)
|
|
41
|
-
|
|
42
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
43
|
-
|
|
44
|
-
## [1.1.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.2...@contentful/field-editor-dropdown@1.1.3) (2022-06-22)
|
|
45
|
-
|
|
46
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
47
|
-
|
|
48
|
-
## [1.1.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.1...@contentful/field-editor-dropdown@1.1.2) (2022-02-15)
|
|
49
|
-
|
|
50
|
-
### Bug Fixes
|
|
51
|
-
|
|
52
|
-
- bump f36 packages ([#1025](https://github.com/contentful/field-editors/issues/1025)) ([ec37a40](https://github.com/contentful/field-editors/commit/ec37a4000db7cd75c66dd9621136b2272c9feeea))
|
|
53
|
-
|
|
54
|
-
## [1.1.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.1.0...@contentful/field-editor-dropdown@1.1.1) (2022-02-14)
|
|
55
|
-
|
|
56
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
57
|
-
|
|
58
|
-
# [1.1.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.0.3...@contentful/field-editor-dropdown@1.1.0) (2022-01-11)
|
|
59
|
-
|
|
60
|
-
### Features
|
|
61
|
-
|
|
62
|
-
- bump f36 packages to stable v4 [BAU-521] ([#988](https://github.com/contentful/field-editors/issues/988)) ([419cf56](https://github.com/contentful/field-editors/commit/419cf56692179b074fcfa2743469d5265ed98429))
|
|
63
|
-
|
|
64
|
-
## [1.0.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.0.2...@contentful/field-editor-dropdown@1.0.3) (2021-12-23)
|
|
65
|
-
|
|
66
|
-
### Bug Fixes
|
|
67
|
-
|
|
68
|
-
- markdown buttons ([#968](https://github.com/contentful/field-editors/issues/968)) ([9803b98](https://github.com/contentful/field-editors/commit/9803b98c25d92df6148686ffe2749a77f7efdbb9))
|
|
69
|
-
|
|
70
|
-
## [1.0.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.0.1...@contentful/field-editor-dropdown@1.0.2) (2021-12-20)
|
|
71
|
-
|
|
72
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
73
|
-
|
|
74
|
-
## [1.0.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@1.0.0...@contentful/field-editor-dropdown@1.0.1) (2021-11-17)
|
|
75
|
-
|
|
76
|
-
### Bug Fixes
|
|
77
|
-
|
|
78
|
-
- **card-actions:** update forma 36 to fix card actions click issue ([#927](https://github.com/contentful/field-editors/issues/927)) ([3dfdef2](https://github.com/contentful/field-editors/commit/3dfdef2c2b0045f12ea94ddafca89a8e9f25e7d0))
|
|
79
|
-
|
|
80
|
-
# [1.0.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.16.0...@contentful/field-editor-dropdown@1.0.0) (2021-11-04)
|
|
81
|
-
|
|
82
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
83
|
-
|
|
84
|
-
# [0.16.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.15.1...@contentful/field-editor-dropdown@0.16.0) (2021-11-04)
|
|
85
|
-
|
|
86
|
-
### Features
|
|
87
|
-
|
|
88
|
-
- Forma v4 components adoption ([#805](https://github.com/contentful/field-editors/issues/805)) ([526bde6](https://github.com/contentful/field-editors/commit/526bde6e10e0ee3789705ec10fb31489af7ca59e))
|
|
89
|
-
|
|
90
|
-
### BREAKING CHANGES
|
|
91
|
-
|
|
92
|
-
- adopts a new Forma v4 beta
|
|
93
|
-
|
|
94
|
-
## [0.15.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.15.0...@contentful/field-editor-dropdown@0.15.1) (2021-10-14)
|
|
95
|
-
|
|
96
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
97
|
-
|
|
98
|
-
# [0.15.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.14.4...@contentful/field-editor-dropdown@0.15.0) (2021-10-06)
|
|
99
|
-
|
|
100
|
-
### Features
|
|
101
|
-
|
|
102
|
-
- [EXT-3161] bump app sdk to v4 ([#881](https://github.com/contentful/field-editors/issues/881)) ([9c4a2af](https://github.com/contentful/field-editors/commit/9c4a2af07da203d59fb5f15c3a5188ecc64b1d44))
|
|
103
|
-
|
|
104
|
-
## [0.14.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.14.3...@contentful/field-editor-dropdown@0.14.4) (2021-09-17)
|
|
105
|
-
|
|
106
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
107
|
-
|
|
108
|
-
## [0.14.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.14.2...@contentful/field-editor-dropdown@0.14.3) (2021-09-16)
|
|
109
|
-
|
|
110
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
111
|
-
|
|
112
|
-
## [0.14.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.14.1...@contentful/field-editor-dropdown@0.14.2) (2021-08-19)
|
|
113
|
-
|
|
114
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
115
|
-
|
|
116
|
-
## [0.14.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.14.0...@contentful/field-editor-dropdown@0.14.1) (2021-07-29)
|
|
117
|
-
|
|
118
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
119
|
-
|
|
120
|
-
# [0.14.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.13.6...@contentful/field-editor-dropdown@0.14.0) (2021-07-23)
|
|
121
|
-
|
|
122
|
-
### Features
|
|
123
|
-
|
|
124
|
-
- 💡 new color tokens ([#778](https://github.com/contentful/field-editors/issues/778)) ([fba548d](https://github.com/contentful/field-editors/commit/fba548de32305016df7f2685634eefb14294828f))
|
|
125
|
-
|
|
126
|
-
## [0.13.6](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.13.3...@contentful/field-editor-dropdown@0.13.6) (2021-07-06)
|
|
127
|
-
|
|
128
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
129
|
-
|
|
130
|
-
## [0.13.5](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.13.3...@contentful/field-editor-dropdown@0.13.5) (2021-07-06)
|
|
131
|
-
|
|
132
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
133
|
-
|
|
134
|
-
## [0.13.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.13.3...@contentful/field-editor-dropdown@0.13.4) (2021-06-23)
|
|
135
|
-
|
|
136
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
137
|
-
|
|
138
|
-
## [0.13.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.13.2...@contentful/field-editor-dropdown@0.13.3) (2021-06-23)
|
|
139
|
-
|
|
140
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
141
|
-
|
|
142
|
-
## [0.13.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.13.1...@contentful/field-editor-dropdown@0.13.2) (2021-06-22)
|
|
143
|
-
|
|
144
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
145
|
-
|
|
146
|
-
## [0.13.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.13.0...@contentful/field-editor-dropdown@0.13.1) (2021-03-05)
|
|
147
|
-
|
|
148
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
149
|
-
|
|
150
|
-
# [0.13.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.12.2...@contentful/field-editor-dropdown@0.13.0) (2021-02-19)
|
|
151
|
-
|
|
152
|
-
### Features
|
|
153
|
-
|
|
154
|
-
- bump min version of forma-36 ([#606](https://github.com/contentful/field-editors/issues/606)) ([fd57c7a](https://github.com/contentful/field-editors/commit/fd57c7a4312766af38c01507f17706ab22992617))
|
|
155
|
-
|
|
156
|
-
## [0.12.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.12.1...@contentful/field-editor-dropdown@0.12.2) (2021-02-09)
|
|
157
|
-
|
|
158
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
159
|
-
|
|
160
|
-
## [0.12.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.12.0...@contentful/field-editor-dropdown@0.12.1) (2021-02-01)
|
|
161
|
-
|
|
162
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
163
|
-
|
|
164
|
-
# [0.12.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.11.0...@contentful/field-editor-dropdown@0.12.0) (2021-01-20)
|
|
165
|
-
|
|
166
|
-
### Features
|
|
167
|
-
|
|
168
|
-
- 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))
|
|
169
|
-
|
|
170
|
-
# [0.11.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.10.5...@contentful/field-editor-dropdown@0.11.0) (2021-01-12)
|
|
171
|
-
|
|
172
|
-
### Features
|
|
173
|
-
|
|
174
|
-
- 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))
|
|
175
|
-
|
|
176
|
-
## [0.10.5](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.10.4...@contentful/field-editor-dropdown@0.10.5) (2020-12-16)
|
|
177
|
-
|
|
178
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
179
|
-
|
|
180
|
-
## [0.10.4](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.10.3...@contentful/field-editor-dropdown@0.10.4) (2020-11-06)
|
|
181
|
-
|
|
182
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
183
|
-
|
|
184
|
-
## [0.10.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.10.2...@contentful/field-editor-dropdown@0.10.3) (2020-11-06)
|
|
185
|
-
|
|
186
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
187
|
-
|
|
188
|
-
## [0.10.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.10.1...@contentful/field-editor-dropdown@0.10.2) (2020-10-28)
|
|
189
|
-
|
|
190
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
191
|
-
|
|
192
|
-
## [0.10.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-dropdown@0.10.0...@contentful/field-editor-dropdown@0.10.1) (2020-08-24)
|
|
193
|
-
|
|
194
|
-
**Note:** Version bump only for package @contentful/field-editor-dropdown
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var f36Components = require('@contentful/f36-components');
|
|
7
|
-
var fieldEditorShared = require('@contentful/field-editor-shared');
|
|
8
|
-
var nanoid = require('nanoid');
|
|
9
|
-
var emotion = require('emotion');
|
|
10
|
-
|
|
11
|
-
function parseValue(value, fieldType) {
|
|
12
|
-
if (value === '') {
|
|
13
|
-
return undefined;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
if (fieldType === 'Integer' || fieldType === 'Number') {
|
|
17
|
-
const asNumber = Number(value);
|
|
18
|
-
return isNaN(asNumber) ? undefined : asNumber;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
return value;
|
|
22
|
-
}
|
|
23
|
-
function getOptions(field) {
|
|
24
|
-
// Get first object that has a 'in' property
|
|
25
|
-
const validations = field.validations || [];
|
|
26
|
-
const predefinedValues = validations.filter(validation => validation.in).map(validation => validation.in);
|
|
27
|
-
const firstPredefinedValues = predefinedValues.length > 0 ? predefinedValues[0] : [];
|
|
28
|
-
return firstPredefinedValues.map(value => ({
|
|
29
|
-
id: nanoid.nanoid(6),
|
|
30
|
-
value: parseValue(value, field.type),
|
|
31
|
-
label: String(value)
|
|
32
|
-
})).filter(item => {
|
|
33
|
-
return item.value !== undefined;
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
const rightToLeft = /*#__PURE__*/emotion.css({
|
|
38
|
-
direction: 'rtl'
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
function DropdownEditor(props) {
|
|
42
|
-
const {
|
|
43
|
-
field,
|
|
44
|
-
locales
|
|
45
|
-
} = props;
|
|
46
|
-
const options = getOptions(field);
|
|
47
|
-
const misconfigured = options.length === 0;
|
|
48
|
-
|
|
49
|
-
if (misconfigured) {
|
|
50
|
-
return React.createElement(fieldEditorShared.PredefinedValuesError, null);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
const direction = locales.direction[field.locale] || 'ltr';
|
|
54
|
-
return React.createElement(fieldEditorShared.FieldConnector, {
|
|
55
|
-
throttle: 0,
|
|
56
|
-
field: field,
|
|
57
|
-
isInitiallyDisabled: props.isInitiallyDisabled
|
|
58
|
-
}, ({
|
|
59
|
-
value,
|
|
60
|
-
errors,
|
|
61
|
-
disabled,
|
|
62
|
-
setValue
|
|
63
|
-
}) => React.createElement(f36Components.Select, {
|
|
64
|
-
testId: "dropdown-editor",
|
|
65
|
-
isInvalid: errors.length > 0,
|
|
66
|
-
isDisabled: disabled,
|
|
67
|
-
className: direction === 'rtl' ? rightToLeft : '',
|
|
68
|
-
isRequired: field.required,
|
|
69
|
-
value: value === undefined ? '' : String(value),
|
|
70
|
-
onChange: e => {
|
|
71
|
-
const value = e.target.value;
|
|
72
|
-
setValue(parseValue(value, field.type));
|
|
73
|
-
}
|
|
74
|
-
}, React.createElement(f36Components.Select.Option, {
|
|
75
|
-
value: ""
|
|
76
|
-
}, "Choose a value"), options.map(option => React.createElement(f36Components.Select.Option, {
|
|
77
|
-
key: option.value,
|
|
78
|
-
value: String(option.value)
|
|
79
|
-
}, option.label))));
|
|
80
|
-
}
|
|
81
|
-
DropdownEditor.defaultProps = {
|
|
82
|
-
isInitiallyDisabled: true
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
exports.DropdownEditor = DropdownEditor;
|
|
86
|
-
exports.getOptions = getOptions;
|
|
87
|
-
exports.parseValue = parseValue;
|
|
88
|
-
//# sourceMappingURL=field-editor-dropdown.cjs.development.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-dropdown.cjs.development.js","sources":["../src/dropdownUtils.ts","../src/styles.ts","../src/DropdownEditor.tsx"],"sourcesContent":["import { FieldAPI } from '@contentful/field-editor-shared';\nimport { nanoid } from 'nanoid';\n\ntype DropdownOption = {\n id: string;\n value: string | number | undefined;\n label: string;\n};\n\nexport function parseValue(value: string, fieldType: string): string | number | undefined {\n if (value === '') {\n return undefined;\n }\n if (fieldType === 'Integer' || fieldType === 'Number') {\n const asNumber = Number(value);\n return isNaN(asNumber) ? undefined : asNumber;\n }\n return value;\n}\n\nexport function getOptions(field: FieldAPI): DropdownOption[] {\n // Get first object that has a 'in' property\n const validations = field.validations || [];\n const predefinedValues = validations\n .filter((validation) => (validation as any).in)\n .map((validation) => (validation as any).in);\n\n const firstPredefinedValues = predefinedValues.length > 0 ? predefinedValues[0] : [];\n\n return firstPredefinedValues\n .map((value: string) => ({\n id: nanoid(6),\n value: parseValue(value, field.type),\n label: String(value),\n }))\n .filter((item: { value: string | number | undefined; label: string }) => {\n return item.value !== undefined;\n });\n}\n","import { css } from 'emotion';\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n","import * as React from 'react';\n\nimport { Select } from '@contentful/f36-components';\nimport {\n FieldAPI,\n FieldConnector,\n PredefinedValuesError,\n LocalesAPI,\n} from '@contentful/field-editor-shared';\n\nimport { getOptions, parseValue } from './dropdownUtils';\nimport * as styles from './styles';\n\n\nexport interface DropdownEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\nexport function DropdownEditor(props: DropdownEditorProps) {\n const { field, locales } = props;\n\n const options = getOptions(field);\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<string | number>\n throttle={0}\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}>\n {({ value, errors, disabled, setValue }) => (\n <Select\n testId=\"dropdown-editor\"\n isInvalid={errors.length > 0}\n isDisabled={disabled}\n className={direction === 'rtl' ? styles.rightToLeft : ''}\n isRequired={field.required}\n value={value === undefined ? '' : String(value)}\n onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {\n const value = e.target.value;\n setValue(parseValue(value, field.type));\n }}>\n <Select.Option value=\"\">Choose a value</Select.Option>\n {options.map((option) => (\n <Select.Option key={option.value} value={String(option.value)}>\n {option.label}\n </Select.Option>\n ))}\n </Select>\n )}\n </FieldConnector>\n );\n}\n\nDropdownEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["parseValue","value","fieldType","undefined","asNumber","Number","isNaN","getOptions","field","validations","predefinedValues","filter","validation","in","map","firstPredefinedValues","length","id","nanoid","type","label","String","item","rightToLeft","css","direction","DropdownEditor","props","locales","options","misconfigured","React","PredefinedValuesError","locale","FieldConnector","throttle","isInitiallyDisabled","errors","disabled","setValue","Select","testId","isInvalid","isDisabled","className","styles","isRequired","required","onChange","e","target","Option","option","key","defaultProps"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@contentful/f36-components"),r=require("@contentful/field-editor-shared"),i=require("nanoid");function l(e,t){if(""!==e){if("Integer"===t||"Number"===t){const t=Number(e);return isNaN(t)?void 0:t}return e}}function n(e){const t=(e.validations||[]).filter(e=>e.in).map(e=>e.in);return(t.length>0?t[0]:[]).map(t=>({id:i.nanoid(6),value:l(t,e.type),label:String(t)})).filter(e=>void 0!==e.value)}const a=require("emotion").css({direction:"rtl"});function o(i){const{field:o,locales:s}=i,u=n(o);if(0===u.length)return e.createElement(r.PredefinedValuesError,null);const d=s.direction[o.locale]||"ltr";return e.createElement(r.FieldConnector,{throttle:0,field:o,isInitiallyDisabled:i.isInitiallyDisabled},({value:r,errors:i,disabled:n,setValue:s})=>e.createElement(t.Select,{testId:"dropdown-editor",isInvalid:i.length>0,isDisabled:n,className:"rtl"===d?a:"",isRequired:o.required,value:void 0===r?"":String(r),onChange:e=>{s(l(e.target.value,o.type))}},e.createElement(t.Select.Option,{value:""},"Choose a value"),u.map(r=>e.createElement(t.Select.Option,{key:r.value,value:String(r.value)},r.label))))}o.defaultProps={isInitiallyDisabled:!0},exports.DropdownEditor=o,exports.getOptions=n,exports.parseValue=l;
|
|
2
|
-
//# sourceMappingURL=field-editor-dropdown.cjs.production.min.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-dropdown.cjs.production.min.js","sources":["../src/dropdownUtils.ts","../src/styles.ts","../src/DropdownEditor.tsx"],"sourcesContent":["import { FieldAPI } from '@contentful/field-editor-shared';\nimport { nanoid } from 'nanoid';\n\ntype DropdownOption = {\n id: string;\n value: string | number | undefined;\n label: string;\n};\n\nexport function parseValue(value: string, fieldType: string): string | number | undefined {\n if (value === '') {\n return undefined;\n }\n if (fieldType === 'Integer' || fieldType === 'Number') {\n const asNumber = Number(value);\n return isNaN(asNumber) ? undefined : asNumber;\n }\n return value;\n}\n\nexport function getOptions(field: FieldAPI): DropdownOption[] {\n // Get first object that has a 'in' property\n const validations = field.validations || [];\n const predefinedValues = validations\n .filter((validation) => (validation as any).in)\n .map((validation) => (validation as any).in);\n\n const firstPredefinedValues = predefinedValues.length > 0 ? predefinedValues[0] : [];\n\n return firstPredefinedValues\n .map((value: string) => ({\n id: nanoid(6),\n value: parseValue(value, field.type),\n label: String(value),\n }))\n .filter((item: { value: string | number | undefined; label: string }) => {\n return item.value !== undefined;\n });\n}\n","import { css } from 'emotion';\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n","import * as React from 'react';\n\nimport { Select } from '@contentful/f36-components';\nimport {\n FieldAPI,\n FieldConnector,\n PredefinedValuesError,\n LocalesAPI,\n} from '@contentful/field-editor-shared';\n\nimport { getOptions, parseValue } from './dropdownUtils';\nimport * as styles from './styles';\n\n\nexport interface DropdownEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\nexport function DropdownEditor(props: DropdownEditorProps) {\n const { field, locales } = props;\n\n const options = getOptions(field);\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<string | number>\n throttle={0}\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}>\n {({ value, errors, disabled, setValue }) => (\n <Select\n testId=\"dropdown-editor\"\n isInvalid={errors.length > 0}\n isDisabled={disabled}\n className={direction === 'rtl' ? styles.rightToLeft : ''}\n isRequired={field.required}\n value={value === undefined ? '' : String(value)}\n onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {\n const value = e.target.value;\n setValue(parseValue(value, field.type));\n }}>\n <Select.Option value=\"\">Choose a value</Select.Option>\n {options.map((option) => (\n <Select.Option key={option.value} value={String(option.value)}>\n {option.label}\n </Select.Option>\n ))}\n </Select>\n )}\n </FieldConnector>\n );\n}\n\nDropdownEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["parseValue","value","fieldType","asNumber","Number","isNaN","undefined","getOptions","field","predefinedValues","validations","filter","validation","in","map","length","id","nanoid","type","label","String","item","rightToLeft","direction","DropdownEditor","props","locales","options","React","PredefinedValuesError","locale","FieldConnector","throttle","isInitiallyDisabled","errors","disabled","setValue","Select","testId","isInvalid","isDisabled","className","styles","isRequired","required","onChange","e","target","Option","option","key","defaultProps"],"mappings":"6MASgBA,EAAWC,EAAeC,MAC1B,KAAVD,MAGc,YAAdC,GAAyC,WAAdA,EAAwB,OAC/CC,EAAWC,OAAOH,UACjBI,MAAMF,QAAYG,EAAYH,SAEhCF,YAGOM,EAAWC,SAGnBC,GADcD,EAAME,aAAe,IAEtCC,OAAQC,GAAgBA,EAAmBC,IAC3CC,IAAKF,GAAgBA,EAAmBC,WAEbJ,EAAiBM,OAAS,EAAIN,EAAiB,GAAK,IAG/EK,IAAKb,KACJe,GAAIC,SAAO,GACXhB,MAAOD,EAAWC,EAAOO,EAAMU,MAC/BC,MAAOC,OAAOnB,MAEfU,OAAQU,QACef,IAAfe,EAAKpB,OClCX,MAAMqB,yBAAkB,CAC7BC,UAAW,iBC2BGC,EAAeC,SACvBjB,MAAEA,EAAFkB,QAASA,GAAYD,EAErBE,EAAUpB,EAAWC,MACc,IAAnBmB,EAAQZ,cAGrBa,gBAACC,oCAGJN,EAAYG,EAAQH,UAAUf,EAAMsB,SAAW,aAGnDF,gBAACG,kBACCC,SAAU,EACVxB,MAAOA,EACPyB,oBAAqBR,EAAMQ,qBAC1B,EAAGhC,MAAAA,EAAOiC,OAAAA,EAAQC,SAAAA,EAAUC,SAAAA,KAC3BR,gBAACS,UACCC,OAAO,kBACPC,UAAWL,EAAOnB,OAAS,EAC3ByB,WAAYL,EACZM,UAAyB,QAAdlB,EAAsBmB,EAAqB,GACtDC,WAAYnC,EAAMoC,SAClB3C,WAAiBK,IAAVL,EAAsB,GAAKmB,OAAOnB,GACzC4C,SAAWC,IAETV,EAASpC,EADK8C,EAAEC,OAAO9C,MACIO,EAAMU,SAEnCU,gBAACS,SAAOW,QAAO/C,MAAM,sBACpB0B,EAAQb,IAAKmC,GACZrB,gBAACS,SAAOW,QAAOE,IAAKD,EAAOhD,MAAOA,MAAOmB,OAAO6B,EAAOhD,QACpDgD,EAAO9B,UAStBK,EAAe2B,aAAe,CAC5BlB,qBAAqB"}
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import { createElement } from 'react';
|
|
2
|
-
import { Select } from '@contentful/f36-components';
|
|
3
|
-
import { PredefinedValuesError, FieldConnector } from '@contentful/field-editor-shared';
|
|
4
|
-
import { nanoid } from 'nanoid';
|
|
5
|
-
import { css } from 'emotion';
|
|
6
|
-
|
|
7
|
-
function parseValue(value, fieldType) {
|
|
8
|
-
if (value === '') {
|
|
9
|
-
return undefined;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
if (fieldType === 'Integer' || fieldType === 'Number') {
|
|
13
|
-
const asNumber = Number(value);
|
|
14
|
-
return isNaN(asNumber) ? undefined : asNumber;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
return value;
|
|
18
|
-
}
|
|
19
|
-
function getOptions(field) {
|
|
20
|
-
// Get first object that has a 'in' property
|
|
21
|
-
const validations = field.validations || [];
|
|
22
|
-
const predefinedValues = validations.filter(validation => validation.in).map(validation => validation.in);
|
|
23
|
-
const firstPredefinedValues = predefinedValues.length > 0 ? predefinedValues[0] : [];
|
|
24
|
-
return firstPredefinedValues.map(value => ({
|
|
25
|
-
id: nanoid(6),
|
|
26
|
-
value: parseValue(value, field.type),
|
|
27
|
-
label: String(value)
|
|
28
|
-
})).filter(item => {
|
|
29
|
-
return item.value !== undefined;
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const rightToLeft = /*#__PURE__*/css({
|
|
34
|
-
direction: 'rtl'
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
function DropdownEditor(props) {
|
|
38
|
-
const {
|
|
39
|
-
field,
|
|
40
|
-
locales
|
|
41
|
-
} = props;
|
|
42
|
-
const options = getOptions(field);
|
|
43
|
-
const misconfigured = options.length === 0;
|
|
44
|
-
|
|
45
|
-
if (misconfigured) {
|
|
46
|
-
return createElement(PredefinedValuesError, null);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
const direction = locales.direction[field.locale] || 'ltr';
|
|
50
|
-
return createElement(FieldConnector, {
|
|
51
|
-
throttle: 0,
|
|
52
|
-
field: field,
|
|
53
|
-
isInitiallyDisabled: props.isInitiallyDisabled
|
|
54
|
-
}, ({
|
|
55
|
-
value,
|
|
56
|
-
errors,
|
|
57
|
-
disabled,
|
|
58
|
-
setValue
|
|
59
|
-
}) => createElement(Select, {
|
|
60
|
-
testId: "dropdown-editor",
|
|
61
|
-
isInvalid: errors.length > 0,
|
|
62
|
-
isDisabled: disabled,
|
|
63
|
-
className: direction === 'rtl' ? rightToLeft : '',
|
|
64
|
-
isRequired: field.required,
|
|
65
|
-
value: value === undefined ? '' : String(value),
|
|
66
|
-
onChange: e => {
|
|
67
|
-
const value = e.target.value;
|
|
68
|
-
setValue(parseValue(value, field.type));
|
|
69
|
-
}
|
|
70
|
-
}, createElement(Select.Option, {
|
|
71
|
-
value: ""
|
|
72
|
-
}, "Choose a value"), options.map(option => createElement(Select.Option, {
|
|
73
|
-
key: option.value,
|
|
74
|
-
value: String(option.value)
|
|
75
|
-
}, option.label))));
|
|
76
|
-
}
|
|
77
|
-
DropdownEditor.defaultProps = {
|
|
78
|
-
isInitiallyDisabled: true
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
export { DropdownEditor, getOptions, parseValue };
|
|
82
|
-
//# sourceMappingURL=field-editor-dropdown.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-dropdown.esm.js","sources":["../src/dropdownUtils.ts","../src/styles.ts","../src/DropdownEditor.tsx"],"sourcesContent":["import { FieldAPI } from '@contentful/field-editor-shared';\nimport { nanoid } from 'nanoid';\n\ntype DropdownOption = {\n id: string;\n value: string | number | undefined;\n label: string;\n};\n\nexport function parseValue(value: string, fieldType: string): string | number | undefined {\n if (value === '') {\n return undefined;\n }\n if (fieldType === 'Integer' || fieldType === 'Number') {\n const asNumber = Number(value);\n return isNaN(asNumber) ? undefined : asNumber;\n }\n return value;\n}\n\nexport function getOptions(field: FieldAPI): DropdownOption[] {\n // Get first object that has a 'in' property\n const validations = field.validations || [];\n const predefinedValues = validations\n .filter((validation) => (validation as any).in)\n .map((validation) => (validation as any).in);\n\n const firstPredefinedValues = predefinedValues.length > 0 ? predefinedValues[0] : [];\n\n return firstPredefinedValues\n .map((value: string) => ({\n id: nanoid(6),\n value: parseValue(value, field.type),\n label: String(value),\n }))\n .filter((item: { value: string | number | undefined; label: string }) => {\n return item.value !== undefined;\n });\n}\n","import { css } from 'emotion';\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n","import * as React from 'react';\n\nimport { Select } from '@contentful/f36-components';\nimport {\n FieldAPI,\n FieldConnector,\n PredefinedValuesError,\n LocalesAPI,\n} from '@contentful/field-editor-shared';\n\nimport { getOptions, parseValue } from './dropdownUtils';\nimport * as styles from './styles';\n\n\nexport interface DropdownEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\nexport function DropdownEditor(props: DropdownEditorProps) {\n const { field, locales } = props;\n\n const options = getOptions(field);\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<string | number>\n throttle={0}\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}>\n {({ value, errors, disabled, setValue }) => (\n <Select\n testId=\"dropdown-editor\"\n isInvalid={errors.length > 0}\n isDisabled={disabled}\n className={direction === 'rtl' ? styles.rightToLeft : ''}\n isRequired={field.required}\n value={value === undefined ? '' : String(value)}\n onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {\n const value = e.target.value;\n setValue(parseValue(value, field.type));\n }}>\n <Select.Option value=\"\">Choose a value</Select.Option>\n {options.map((option) => (\n <Select.Option key={option.value} value={String(option.value)}>\n {option.label}\n </Select.Option>\n ))}\n </Select>\n )}\n </FieldConnector>\n );\n}\n\nDropdownEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["parseValue","value","fieldType","undefined","asNumber","Number","isNaN","getOptions","field","validations","predefinedValues","filter","validation","in","map","firstPredefinedValues","length","id","nanoid","type","label","String","item","rightToLeft","css","direction","DropdownEditor","props","locales","options","misconfigured","React","PredefinedValuesError","locale","FieldConnector","throttle","isInitiallyDisabled","errors","disabled","setValue","Select","testId","isInvalid","isDisabled","className","styles","isRequired","required","onChange","e","target","Option","option","key","defaultProps"],"mappings":";;;;;;SASgBA,WAAWC,OAAeC;AACxC,MAAID,KAAK,KAAK,EAAd,EAAkB;AAChB,WAAOE,SAAP;AACD;;AACD,MAAID,SAAS,KAAK,SAAd,IAA2BA,SAAS,KAAK,QAA7C,EAAuD;AACrD,UAAME,QAAQ,GAAGC,MAAM,CAACJ,KAAD,CAAvB;AACA,WAAOK,KAAK,CAACF,QAAD,CAAL,GAAkBD,SAAlB,GAA8BC,QAArC;AACD;;AACD,SAAOH,KAAP;AACD;SAEeM,WAAWC;AACzB;AACA,QAAMC,WAAW,GAAGD,KAAK,CAACC,WAAN,IAAqB,EAAzC;AACA,QAAMC,gBAAgB,GAAGD,WAAW,CACjCE,MADsB,CACdC,UAAD,IAAiBA,UAAkB,CAACC,EADrB,EAEtBC,GAFsB,CAEjBF,UAAD,IAAiBA,UAAkB,CAACC,EAFlB,CAAzB;AAIA,QAAME,qBAAqB,GAAGL,gBAAgB,CAACM,MAAjB,GAA0B,CAA1B,GAA8BN,gBAAgB,CAAC,CAAD,CAA9C,GAAoD,EAAlF;AAEA,SAAOK,qBAAqB,CACzBD,GADI,CACCb,KAAD,KAAoB;AACvBgB,IAAAA,EAAE,EAAEC,MAAM,CAAC,CAAD,CADa;AAEvBjB,IAAAA,KAAK,EAAED,UAAU,CAACC,KAAD,EAAQO,KAAK,CAACW,IAAd,CAFM;AAGvBC,IAAAA,KAAK,EAAEC,MAAM,CAACpB,KAAD;AAHU,GAApB,CADA,EAMJU,MANI,CAMIW,IAAD;AACN,WAAOA,IAAI,CAACrB,KAAL,KAAeE,SAAtB;AACD,GARI,CAAP;AASD;;ACpCM,MAAMoB,WAAW,gBAAGC,GAAG,CAAC;AAC7BC,EAAAA,SAAS,EAAE;AADkB,CAAD,CAAvB;;SC4BSC,eAAeC;AAC7B,QAAM;AAAEnB,IAAAA,KAAF;AAASoB,IAAAA;AAAT,MAAqBD,KAA3B;AAEA,QAAME,OAAO,GAAGtB,UAAU,CAACC,KAAD,CAA1B;AACA,QAAMsB,aAAa,GAAGD,OAAO,CAACb,MAAR,KAAmB,CAAzC;;AAEA,MAAIc,aAAJ,EAAmB;AACjB,WAAOC,aAAA,CAACC,qBAAD,MAAA,CAAP;AACD;;AAED,QAAMP,SAAS,GAAGG,OAAO,CAACH,SAAR,CAAkBjB,KAAK,CAACyB,MAAxB,KAAmC,KAArD;AAEA,SACEF,aAAA,CAACG,cAAD;AACEC,IAAAA,QAAQ,EAAE;AACV3B,IAAAA,KAAK,EAAEA;AACP4B,IAAAA,mBAAmB,EAAET,KAAK,CAACS;GAH7B,EAIG,CAAC;AAAEnC,IAAAA,KAAF;AAASoC,IAAAA,MAAT;AAAiBC,IAAAA,QAAjB;AAA2BC,IAAAA;AAA3B,GAAD,KACCR,aAAA,CAACS,MAAD;AACEC,IAAAA,MAAM,EAAC;AACPC,IAAAA,SAAS,EAAEL,MAAM,CAACrB,MAAP,GAAgB;AAC3B2B,IAAAA,UAAU,EAAEL;AACZM,IAAAA,SAAS,EAAEnB,SAAS,KAAK,KAAd,GAAsBoB,WAAtB,GAA2C;AACtDC,IAAAA,UAAU,EAAEtC,KAAK,CAACuC;AAClB9C,IAAAA,KAAK,EAAEA,KAAK,KAAKE,SAAV,GAAsB,EAAtB,GAA2BkB,MAAM,CAACpB,KAAD;AACxC+C,IAAAA,QAAQ,EAAGC,CAAD;AACR,YAAMhD,KAAK,GAAGgD,CAAC,CAACC,MAAF,CAASjD,KAAvB;AACAsC,MAAAA,QAAQ,CAACvC,UAAU,CAACC,KAAD,EAAQO,KAAK,CAACW,IAAd,CAAX,CAAR;AACD;GAVH,EAWEY,aAAA,CAACS,MAAM,CAACW,MAAR;AAAelD,IAAAA,KAAK,EAAC;GAArB,kBAAA,CAXF,EAYG4B,OAAO,CAACf,GAAR,CAAasC,MAAD,IACXrB,aAAA,CAACS,MAAM,CAACW,MAAR;AAAeE,IAAAA,GAAG,EAAED,MAAM,CAACnD;AAAOA,IAAAA,KAAK,EAAEoB,MAAM,CAAC+B,MAAM,CAACnD,KAAR;GAA/C,EACGmD,MAAM,CAAChC,KADV,CADD,CAZH,CALJ,CADF;AA2BD;AAEDM,cAAc,CAAC4B,YAAf,GAA8B;AAC5BlB,EAAAA,mBAAmB,EAAE;AADO,CAA9B;;;;"}
|