@contentful/field-editor-single-line 1.3.7 → 1.3.9
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/SingleLineEditor.js +8 -11
- package/dist/cjs/SingleLineEditor.test.js +13 -15
- package/dist/cjs/styles.js +7 -7
- package/dist/esm/SingleLineEditor.js +8 -11
- package/dist/esm/SingleLineEditor.test.js +13 -15
- package/dist/esm/styles.js +7 -7
- package/dist/types/styles.d.ts +1 -1
- package/package.json +4 -4
|
@@ -57,7 +57,7 @@ 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, locales, withCharValidation } = props;
|
|
61
61
|
if (!isSupportedFieldTypes(field.type)) {
|
|
62
62
|
throw new Error(`"${field.type}" field type is not supported by SingleLineEditor`);
|
|
63
63
|
}
|
|
@@ -80,18 +80,15 @@ function SingleLineEditor(props) {
|
|
|
80
80
|
onChange: (e)=>{
|
|
81
81
|
setValue(e.target.value);
|
|
82
82
|
}
|
|
83
|
-
}),
|
|
84
|
-
className: _styles.validationRow
|
|
85
|
-
}, _react.createElement(_fieldeditorshared.
|
|
83
|
+
}), _react.createElement("div", {
|
|
84
|
+
className: _styles.validationRow(withCharValidation)
|
|
85
|
+
}, _react.createElement(_fieldeditorshared.CharValidation, {
|
|
86
|
+
constraints: constraints,
|
|
87
|
+
enabled: withCharValidation
|
|
88
|
+
}), _react.createElement(_fieldeditorshared.CharCounter, {
|
|
86
89
|
value: value || '',
|
|
87
|
-
checkConstraint: checkConstraint
|
|
88
|
-
}), _react.createElement(_fieldeditorshared.CharValidation, {
|
|
90
|
+
checkConstraint: checkConstraint,
|
|
89
91
|
constraints: constraints
|
|
90
|
-
})), props.withCharValidation === false && _react.createElement("div", {
|
|
91
|
-
className: _styles.validationRow
|
|
92
|
-
}, _react.createElement(_fieldeditorshared.CharCounter, {
|
|
93
|
-
value: value || '',
|
|
94
|
-
checkConstraint: ()=>true
|
|
95
92
|
})));
|
|
96
93
|
});
|
|
97
94
|
}
|
|
@@ -78,14 +78,13 @@ describe('SingleLineEditor', ()=>{
|
|
|
78
78
|
}
|
|
79
79
|
};
|
|
80
80
|
});
|
|
81
|
-
const { getByTestId
|
|
81
|
+
const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
|
|
82
82
|
field: field,
|
|
83
83
|
isInitiallyDisabled: false,
|
|
84
84
|
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
|
|
85
85
|
}));
|
|
86
86
|
expect(getByTestId('cf-ui-text-input')).toHaveValue(initialValue);
|
|
87
|
-
expect(
|
|
88
|
-
expect(getByText('Maximum 256 characters')).toBeInTheDocument();
|
|
87
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent(`${initialValue.length} / 256`);
|
|
89
88
|
});
|
|
90
89
|
it('calls field.setValue when user types and calls field.removeValue when user clears the input', async ()=>{
|
|
91
90
|
const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
|
|
@@ -133,13 +132,12 @@ describe('SingleLineEditor', ()=>{
|
|
|
133
132
|
id: 'field-id'
|
|
134
133
|
};
|
|
135
134
|
});
|
|
136
|
-
const {
|
|
135
|
+
const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
|
|
137
136
|
field: field,
|
|
138
137
|
isInitiallyDisabled: false,
|
|
139
138
|
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
|
|
140
139
|
}));
|
|
141
|
-
expect(
|
|
142
|
-
expect(getByText('Maximum 256 characters')).toBeInTheDocument();
|
|
140
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 256');
|
|
143
141
|
});
|
|
144
142
|
it('shows proper validation message (Text)', ()=>{
|
|
145
143
|
const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
|
|
@@ -149,13 +147,12 @@ describe('SingleLineEditor', ()=>{
|
|
|
149
147
|
id: 'field-id'
|
|
150
148
|
};
|
|
151
149
|
});
|
|
152
|
-
const {
|
|
150
|
+
const { getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
|
|
153
151
|
field: field,
|
|
154
152
|
isInitiallyDisabled: false,
|
|
155
153
|
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
|
|
156
154
|
}));
|
|
157
|
-
expect(
|
|
158
|
-
expect(getByText('Maximum 50000 characters')).toBeInTheDocument();
|
|
155
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 50000');
|
|
159
156
|
});
|
|
160
157
|
it('shows proper min-max validation message', ()=>{
|
|
161
158
|
const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
|
|
@@ -173,12 +170,12 @@ describe('SingleLineEditor', ()=>{
|
|
|
173
170
|
id: 'field-id'
|
|
174
171
|
};
|
|
175
172
|
});
|
|
176
|
-
const { getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
|
|
173
|
+
const { getByText, getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
|
|
177
174
|
field: field,
|
|
178
175
|
isInitiallyDisabled: false,
|
|
179
176
|
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
|
|
180
177
|
}));
|
|
181
|
-
expect(
|
|
178
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 1000');
|
|
182
179
|
expect(getByText('Requires between 100 and 1000 characters')).toBeInTheDocument();
|
|
183
180
|
});
|
|
184
181
|
it('shows proper min validation message', ()=>{
|
|
@@ -196,12 +193,13 @@ describe('SingleLineEditor', ()=>{
|
|
|
196
193
|
id: 'field-id'
|
|
197
194
|
};
|
|
198
195
|
});
|
|
199
|
-
const { getByText } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
|
|
196
|
+
const { getByText, getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
|
|
200
197
|
field: field,
|
|
201
198
|
isInitiallyDisabled: false,
|
|
202
199
|
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
|
|
203
200
|
}));
|
|
204
|
-
expect(
|
|
201
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0');
|
|
202
|
+
expect(getByTestId('cf-ui-char-counter')).not.toHaveTextContent('0 / 1000');
|
|
205
203
|
expect(getByText('Requires at least 1000 characters')).toBeInTheDocument();
|
|
206
204
|
});
|
|
207
205
|
it('renders no validation message if withCharValidation is falsy', ()=>{
|
|
@@ -220,13 +218,13 @@ describe('SingleLineEditor', ()=>{
|
|
|
220
218
|
id: 'field-id'
|
|
221
219
|
};
|
|
222
220
|
});
|
|
223
|
-
const {
|
|
221
|
+
const { queryByText, getByTestId } = (0, _react1.render)(_react.createElement(_SingleLineEditor.SingleLineEditor, {
|
|
224
222
|
field: field,
|
|
225
223
|
withCharValidation: false,
|
|
226
224
|
isInitiallyDisabled: false,
|
|
227
225
|
locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
|
|
228
226
|
}));
|
|
229
|
-
expect(
|
|
227
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 1000');
|
|
230
228
|
expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
|
|
231
229
|
});
|
|
232
230
|
});
|
package/dist/cjs/styles.js
CHANGED
|
@@ -23,13 +23,13 @@ function _interop_require_default(obj) {
|
|
|
23
23
|
default: obj
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
|
-
const validationRow = (0, _emotion.css)({
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
});
|
|
26
|
+
const validationRow = (withValidation)=>(0, _emotion.css)({
|
|
27
|
+
display: 'flex',
|
|
28
|
+
justifyContent: withValidation ? 'space-between' : 'flex-end',
|
|
29
|
+
fontSize: _f36tokens.default.fontSizeM,
|
|
30
|
+
marginTop: _f36tokens.default.spacingXs,
|
|
31
|
+
color: _f36tokens.default.gray500
|
|
32
|
+
});
|
|
33
33
|
const rightToLeft = (0, _emotion.css)({
|
|
34
34
|
direction: 'rtl'
|
|
35
35
|
});
|
|
@@ -6,7 +6,7 @@ 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, locales, withCharValidation } = props;
|
|
10
10
|
if (!isSupportedFieldTypes(field.type)) {
|
|
11
11
|
throw new Error(`"${field.type}" field type is not supported by SingleLineEditor`);
|
|
12
12
|
}
|
|
@@ -29,18 +29,15 @@ export function SingleLineEditor(props) {
|
|
|
29
29
|
onChange: (e)=>{
|
|
30
30
|
setValue(e.target.value);
|
|
31
31
|
}
|
|
32
|
-
}),
|
|
33
|
-
className: styles.validationRow
|
|
34
|
-
}, React.createElement(
|
|
32
|
+
}), React.createElement("div", {
|
|
33
|
+
className: styles.validationRow(withCharValidation)
|
|
34
|
+
}, React.createElement(CharValidation, {
|
|
35
|
+
constraints: constraints,
|
|
36
|
+
enabled: withCharValidation
|
|
37
|
+
}), React.createElement(CharCounter, {
|
|
35
38
|
value: value || '',
|
|
36
|
-
checkConstraint: checkConstraint
|
|
37
|
-
}), React.createElement(CharValidation, {
|
|
39
|
+
checkConstraint: checkConstraint,
|
|
38
40
|
constraints: constraints
|
|
39
|
-
})), props.withCharValidation === false && React.createElement("div", {
|
|
40
|
-
className: styles.validationRow
|
|
41
|
-
}, React.createElement(CharCounter, {
|
|
42
|
-
value: value || '',
|
|
43
|
-
checkConstraint: ()=>true
|
|
44
41
|
})));
|
|
45
42
|
});
|
|
46
43
|
}
|
|
@@ -33,14 +33,13 @@ describe('SingleLineEditor', ()=>{
|
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
});
|
|
36
|
-
const { getByTestId
|
|
36
|
+
const { getByTestId } = render(React.createElement(SingleLineEditor, {
|
|
37
37
|
field: field,
|
|
38
38
|
isInitiallyDisabled: false,
|
|
39
39
|
locales: createFakeLocalesAPI()
|
|
40
40
|
}));
|
|
41
41
|
expect(getByTestId('cf-ui-text-input')).toHaveValue(initialValue);
|
|
42
|
-
expect(
|
|
43
|
-
expect(getByText('Maximum 256 characters')).toBeInTheDocument();
|
|
42
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent(`${initialValue.length} / 256`);
|
|
44
43
|
});
|
|
45
44
|
it('calls field.setValue when user types and calls field.removeValue when user clears the input', async ()=>{
|
|
46
45
|
const [field] = createFakeFieldAPI((field)=>{
|
|
@@ -88,13 +87,12 @@ describe('SingleLineEditor', ()=>{
|
|
|
88
87
|
id: 'field-id'
|
|
89
88
|
};
|
|
90
89
|
});
|
|
91
|
-
const {
|
|
90
|
+
const { getByTestId } = render(React.createElement(SingleLineEditor, {
|
|
92
91
|
field: field,
|
|
93
92
|
isInitiallyDisabled: false,
|
|
94
93
|
locales: createFakeLocalesAPI()
|
|
95
94
|
}));
|
|
96
|
-
expect(
|
|
97
|
-
expect(getByText('Maximum 256 characters')).toBeInTheDocument();
|
|
95
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 256');
|
|
98
96
|
});
|
|
99
97
|
it('shows proper validation message (Text)', ()=>{
|
|
100
98
|
const [field] = createFakeFieldAPI((field)=>{
|
|
@@ -104,13 +102,12 @@ describe('SingleLineEditor', ()=>{
|
|
|
104
102
|
id: 'field-id'
|
|
105
103
|
};
|
|
106
104
|
});
|
|
107
|
-
const {
|
|
105
|
+
const { getByTestId } = render(React.createElement(SingleLineEditor, {
|
|
108
106
|
field: field,
|
|
109
107
|
isInitiallyDisabled: false,
|
|
110
108
|
locales: createFakeLocalesAPI()
|
|
111
109
|
}));
|
|
112
|
-
expect(
|
|
113
|
-
expect(getByText('Maximum 50000 characters')).toBeInTheDocument();
|
|
110
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 50000');
|
|
114
111
|
});
|
|
115
112
|
it('shows proper min-max validation message', ()=>{
|
|
116
113
|
const [field] = createFakeFieldAPI((field)=>{
|
|
@@ -128,12 +125,12 @@ describe('SingleLineEditor', ()=>{
|
|
|
128
125
|
id: 'field-id'
|
|
129
126
|
};
|
|
130
127
|
});
|
|
131
|
-
const { getByText } = render(React.createElement(SingleLineEditor, {
|
|
128
|
+
const { getByText, getByTestId } = render(React.createElement(SingleLineEditor, {
|
|
132
129
|
field: field,
|
|
133
130
|
isInitiallyDisabled: false,
|
|
134
131
|
locales: createFakeLocalesAPI()
|
|
135
132
|
}));
|
|
136
|
-
expect(
|
|
133
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 1000');
|
|
137
134
|
expect(getByText('Requires between 100 and 1000 characters')).toBeInTheDocument();
|
|
138
135
|
});
|
|
139
136
|
it('shows proper min validation message', ()=>{
|
|
@@ -151,12 +148,13 @@ describe('SingleLineEditor', ()=>{
|
|
|
151
148
|
id: 'field-id'
|
|
152
149
|
};
|
|
153
150
|
});
|
|
154
|
-
const { getByText } = render(React.createElement(SingleLineEditor, {
|
|
151
|
+
const { getByText, getByTestId } = render(React.createElement(SingleLineEditor, {
|
|
155
152
|
field: field,
|
|
156
153
|
isInitiallyDisabled: false,
|
|
157
154
|
locales: createFakeLocalesAPI()
|
|
158
155
|
}));
|
|
159
|
-
expect(
|
|
156
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0');
|
|
157
|
+
expect(getByTestId('cf-ui-char-counter')).not.toHaveTextContent('0 / 1000');
|
|
160
158
|
expect(getByText('Requires at least 1000 characters')).toBeInTheDocument();
|
|
161
159
|
});
|
|
162
160
|
it('renders no validation message if withCharValidation is falsy', ()=>{
|
|
@@ -175,13 +173,13 @@ describe('SingleLineEditor', ()=>{
|
|
|
175
173
|
id: 'field-id'
|
|
176
174
|
};
|
|
177
175
|
});
|
|
178
|
-
const {
|
|
176
|
+
const { queryByText, getByTestId } = render(React.createElement(SingleLineEditor, {
|
|
179
177
|
field: field,
|
|
180
178
|
withCharValidation: false,
|
|
181
179
|
isInitiallyDisabled: false,
|
|
182
180
|
locales: createFakeLocalesAPI()
|
|
183
181
|
}));
|
|
184
|
-
expect(
|
|
182
|
+
expect(getByTestId('cf-ui-char-counter')).toHaveTextContent('0 / 1000');
|
|
185
183
|
expect(queryByText('Requires between 100 and 1000 characters')).not.toBeInTheDocument();
|
|
186
184
|
});
|
|
187
185
|
});
|
package/dist/esm/styles.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import tokens from '@contentful/f36-tokens';
|
|
2
2
|
import { css } from 'emotion';
|
|
3
|
-
export const validationRow = css({
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
});
|
|
3
|
+
export const validationRow = (withValidation)=>css({
|
|
4
|
+
display: 'flex',
|
|
5
|
+
justifyContent: withValidation ? 'space-between' : 'flex-end',
|
|
6
|
+
fontSize: tokens.fontSizeM,
|
|
7
|
+
marginTop: tokens.spacingXs,
|
|
8
|
+
color: tokens.gray500
|
|
9
|
+
});
|
|
10
10
|
export const rightToLeft = css({
|
|
11
11
|
direction: 'rtl'
|
|
12
12
|
});
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const validationRow: string;
|
|
1
|
+
export declare const validationRow: (withValidation: boolean) => string;
|
|
2
2
|
export declare const rightToLeft: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/field-editor-single-line",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.9",
|
|
4
4
|
"main": "dist/cjs/index.js",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"types": "dist/types/index.d.ts",
|
|
@@ -37,12 +37,12 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@contentful/f36-components": "^4.0.27",
|
|
39
39
|
"@contentful/f36-tokens": "^4.0.0",
|
|
40
|
-
"@contentful/field-editor-shared": "^1.4.
|
|
40
|
+
"@contentful/field-editor-shared": "^1.4.7",
|
|
41
41
|
"emotion": "^10.0.17",
|
|
42
42
|
"lodash": "^4.17.15"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@contentful/field-editor-test-utils": "^1.4.
|
|
45
|
+
"@contentful/field-editor-test-utils": "^1.4.7"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": ">=16.8.0"
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"publishConfig": {
|
|
51
51
|
"registry": "https://npm.pkg.github.com/"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "129510a558258ae7eb0c53e7845868048a465ca7"
|
|
54
54
|
}
|