@contentful/field-editor-single-line 1.4.16 → 1.5.1
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.
|
@@ -57,17 +57,18 @@ function isSupportedFieldTypes(val) {
|
|
|
57
57
|
return val === 'Symbol' || val === 'Text';
|
|
58
58
|
}
|
|
59
59
|
function SingleLineEditor(props) {
|
|
60
|
-
const { field, locales } = props;
|
|
60
|
+
const { field, isDisabled, isInitiallyDisabled = true, locales, onBlur, onFocus, withCharInformation = true, withCharValidation = true } = props;
|
|
61
61
|
if (!isSupportedFieldTypes(field.type)) {
|
|
62
62
|
throw new Error(`"${field.type}" field type is not supported by SingleLineEditor`);
|
|
63
63
|
}
|
|
64
64
|
const constraints = _fieldeditorshared.ConstraintsUtils.fromFieldValidations(field.validations, field.type);
|
|
65
65
|
const checkConstraint = _fieldeditorshared.ConstraintsUtils.makeChecker(constraints);
|
|
66
66
|
const direction = locales.direction[field.locale] || 'ltr';
|
|
67
|
+
const handleCheckConstraint = withCharValidation ? checkConstraint : ()=>true;
|
|
67
68
|
return _react.createElement(_fieldeditorshared.FieldConnector, {
|
|
68
69
|
field: field,
|
|
69
|
-
isInitiallyDisabled:
|
|
70
|
-
isDisabled:
|
|
70
|
+
isInitiallyDisabled: isInitiallyDisabled,
|
|
71
|
+
isDisabled: isDisabled
|
|
71
72
|
}, ({ value, errors, disabled, setValue })=>{
|
|
72
73
|
return _react.createElement("div", {
|
|
73
74
|
"data-test-id": "single-line-editor"
|
|
@@ -77,27 +78,18 @@ function SingleLineEditor(props) {
|
|
|
77
78
|
isInvalid: errors.length > 0,
|
|
78
79
|
isDisabled: disabled,
|
|
79
80
|
value: value || '',
|
|
80
|
-
onFocus:
|
|
81
|
-
onBlur:
|
|
81
|
+
onFocus: onFocus,
|
|
82
|
+
onBlur: onBlur,
|
|
82
83
|
onChange: (e)=>{
|
|
83
84
|
setValue(e.target.value);
|
|
84
85
|
}
|
|
85
|
-
}),
|
|
86
|
+
}), withCharInformation && _react.createElement("div", {
|
|
86
87
|
className: _styles.validationRow
|
|
87
88
|
}, _react.createElement(_fieldeditorshared.CharCounter, {
|
|
88
89
|
value: value || '',
|
|
89
|
-
checkConstraint:
|
|
90
|
-
}), _react.createElement(_fieldeditorshared.CharValidation, {
|
|
90
|
+
checkConstraint: handleCheckConstraint
|
|
91
|
+
}), withCharValidation && _react.createElement(_fieldeditorshared.CharValidation, {
|
|
91
92
|
constraints: constraints
|
|
92
|
-
})), props.withCharValidation === false && _react.createElement("div", {
|
|
93
|
-
className: _styles.validationRow
|
|
94
|
-
}, _react.createElement(_fieldeditorshared.CharCounter, {
|
|
95
|
-
value: value || '',
|
|
96
|
-
checkConstraint: ()=>true
|
|
97
93
|
})));
|
|
98
94
|
});
|
|
99
95
|
}
|
|
100
|
-
SingleLineEditor.defaultProps = {
|
|
101
|
-
isInitiallyDisabled: true,
|
|
102
|
-
withCharValidation: true
|
|
103
|
-
};
|
|
@@ -229,4 +229,30 @@ describe('SingleLineEditor', ()=>{
|
|
|
229
229
|
expect(getByText('0 characters')).toBeInTheDocument();
|
|
230
230
|
expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
|
|
231
231
|
});
|
|
232
|
+
it('renders no validation message or counter if withCharInformation is false', ()=>{
|
|
233
|
+
const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
|
|
234
|
+
return {
|
|
235
|
+
...field,
|
|
236
|
+
type: 'Symbol',
|
|
237
|
+
validations: [
|
|
238
|
+
{
|
|
239
|
+
size: {
|
|
240
|
+
min: 100,
|
|
241
|
+
max: 1000
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
],
|
|
245
|
+
id: 'field-id'
|
|
246
|
+
};
|
|
247
|
+
});
|
|
248
|
+
const { queryByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
|
|
249
|
+
field: field,
|
|
250
|
+
withCharValidation: false,
|
|
251
|
+
isInitiallyDisabled: false,
|
|
252
|
+
withCharInformation: false,
|
|
253
|
+
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
|
|
254
|
+
}));
|
|
255
|
+
expect(queryByText('0 characters')).not.toBeInTheDocument();
|
|
256
|
+
expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
|
|
257
|
+
});
|
|
232
258
|
});
|
|
@@ -6,17 +6,18 @@ function isSupportedFieldTypes(val) {
|
|
|
6
6
|
return val === 'Symbol' || val === 'Text';
|
|
7
7
|
}
|
|
8
8
|
export function SingleLineEditor(props) {
|
|
9
|
-
const { field, locales } = props;
|
|
9
|
+
const { field, isDisabled, isInitiallyDisabled = true, locales, onBlur, onFocus, withCharInformation = true, withCharValidation = true } = props;
|
|
10
10
|
if (!isSupportedFieldTypes(field.type)) {
|
|
11
11
|
throw new Error(`"${field.type}" field type is not supported by SingleLineEditor`);
|
|
12
12
|
}
|
|
13
13
|
const constraints = ConstraintsUtils.fromFieldValidations(field.validations, field.type);
|
|
14
14
|
const checkConstraint = ConstraintsUtils.makeChecker(constraints);
|
|
15
15
|
const direction = locales.direction[field.locale] || 'ltr';
|
|
16
|
+
const handleCheckConstraint = withCharValidation ? checkConstraint : ()=>true;
|
|
16
17
|
return React.createElement(FieldConnector, {
|
|
17
18
|
field: field,
|
|
18
|
-
isInitiallyDisabled:
|
|
19
|
-
isDisabled:
|
|
19
|
+
isInitiallyDisabled: isInitiallyDisabled,
|
|
20
|
+
isDisabled: isDisabled
|
|
20
21
|
}, ({ value, errors, disabled, setValue })=>{
|
|
21
22
|
return React.createElement("div", {
|
|
22
23
|
"data-test-id": "single-line-editor"
|
|
@@ -26,27 +27,18 @@ export function SingleLineEditor(props) {
|
|
|
26
27
|
isInvalid: errors.length > 0,
|
|
27
28
|
isDisabled: disabled,
|
|
28
29
|
value: value || '',
|
|
29
|
-
onFocus:
|
|
30
|
-
onBlur:
|
|
30
|
+
onFocus: onFocus,
|
|
31
|
+
onBlur: onBlur,
|
|
31
32
|
onChange: (e)=>{
|
|
32
33
|
setValue(e.target.value);
|
|
33
34
|
}
|
|
34
|
-
}),
|
|
35
|
+
}), withCharInformation && React.createElement("div", {
|
|
35
36
|
className: styles.validationRow
|
|
36
37
|
}, React.createElement(CharCounter, {
|
|
37
38
|
value: value || '',
|
|
38
|
-
checkConstraint:
|
|
39
|
-
}), React.createElement(CharValidation, {
|
|
39
|
+
checkConstraint: handleCheckConstraint
|
|
40
|
+
}), withCharValidation && React.createElement(CharValidation, {
|
|
40
41
|
constraints: constraints
|
|
41
|
-
})), props.withCharValidation === false && React.createElement("div", {
|
|
42
|
-
className: styles.validationRow
|
|
43
|
-
}, React.createElement(CharCounter, {
|
|
44
|
-
value: value || '',
|
|
45
|
-
checkConstraint: ()=>true
|
|
46
42
|
})));
|
|
47
43
|
});
|
|
48
44
|
}
|
|
49
|
-
SingleLineEditor.defaultProps = {
|
|
50
|
-
isInitiallyDisabled: true,
|
|
51
|
-
withCharValidation: true
|
|
52
|
-
};
|
|
@@ -184,4 +184,30 @@ describe('SingleLineEditor', ()=>{
|
|
|
184
184
|
expect(getByText('0 characters')).toBeInTheDocument();
|
|
185
185
|
expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
|
|
186
186
|
});
|
|
187
|
+
it('renders no validation message or counter if withCharInformation is false', ()=>{
|
|
188
|
+
const [field] = createFakeFieldAPI((field)=>{
|
|
189
|
+
return {
|
|
190
|
+
...field,
|
|
191
|
+
type: 'Symbol',
|
|
192
|
+
validations: [
|
|
193
|
+
{
|
|
194
|
+
size: {
|
|
195
|
+
min: 100,
|
|
196
|
+
max: 1000
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
],
|
|
200
|
+
id: 'field-id'
|
|
201
|
+
};
|
|
202
|
+
});
|
|
203
|
+
const { queryByText } = render(React.createElement(SingleLineEditor, {
|
|
204
|
+
field: field,
|
|
205
|
+
withCharValidation: false,
|
|
206
|
+
isInitiallyDisabled: false,
|
|
207
|
+
withCharInformation: false,
|
|
208
|
+
locales: createFakeLocalesAPI()
|
|
209
|
+
}));
|
|
210
|
+
expect(queryByText('0 characters')).not.toBeInTheDocument();
|
|
211
|
+
expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
|
|
212
|
+
});
|
|
187
213
|
});
|
|
@@ -4,15 +4,19 @@ export interface SingleLineEditorProps {
|
|
|
4
4
|
/**
|
|
5
5
|
* is the field disabled initially
|
|
6
6
|
*/
|
|
7
|
-
isInitiallyDisabled
|
|
7
|
+
isInitiallyDisabled?: boolean;
|
|
8
8
|
/**
|
|
9
9
|
* is the field manually disabled
|
|
10
10
|
*/
|
|
11
11
|
isDisabled?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* whether validations should be rendered or not.
|
|
14
|
+
*/
|
|
15
|
+
withCharInformation?: boolean;
|
|
12
16
|
/**
|
|
13
17
|
* whether char validation should be shown or not
|
|
14
18
|
*/
|
|
15
|
-
withCharValidation
|
|
19
|
+
withCharValidation?: boolean;
|
|
16
20
|
/**
|
|
17
21
|
* sdk.field
|
|
18
22
|
*/
|
|
@@ -31,9 +35,3 @@ export interface SingleLineEditorProps {
|
|
|
31
35
|
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
32
36
|
}
|
|
33
37
|
export declare function SingleLineEditor(props: SingleLineEditorProps): React.JSX.Element;
|
|
34
|
-
export declare namespace SingleLineEditor {
|
|
35
|
-
var defaultProps: {
|
|
36
|
-
isInitiallyDisabled: boolean;
|
|
37
|
-
withCharValidation: boolean;
|
|
38
|
-
};
|
|
39
|
-
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/field-editor-single-line",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.1",
|
|
4
4
|
"main": "dist/cjs/index.js",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"types": "dist/types/index.d.ts",
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"publishConfig": {
|
|
51
51
|
"registry": "https://npm.pkg.github.com/"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "b8b66f938a5e85b6a1fdf21c7726205685e452fd"
|
|
54
54
|
}
|