@contentful/field-editor-tags 1.1.11 → 1.2.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/CHANGELOG.md +10 -0
- package/dist/field-editor-tags.cjs.development.js +77 -85
- package/dist/field-editor-tags.cjs.development.js.map +1 -1
- package/dist/field-editor-tags.cjs.production.min.js +1 -1
- package/dist/field-editor-tags.cjs.production.min.js.map +1 -1
- package/dist/field-editor-tags.esm.js +77 -85
- package/dist/field-editor-tags.esm.js.map +1 -1
- package/package.json +4 -14
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [1.2.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@1.1.12...@contentful/field-editor-tags@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.12](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@1.1.11...@contentful/field-editor-tags@1.1.12) (2023-03-14)
|
|
13
|
+
|
|
14
|
+
**Note:** Version bump only for package @contentful/field-editor-tags
|
|
15
|
+
|
|
6
16
|
## [1.1.11](https://github.com/contentful/field-editors/compare/@contentful/field-editor-tags@1.1.10...@contentful/field-editor-tags@1.1.11) (2023-03-10)
|
|
7
17
|
|
|
8
18
|
**Note:** Version bump only for package @contentful/field-editor-tags
|
|
@@ -6,19 +6,21 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
|
|
|
6
6
|
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var React__default = _interopDefault(React);
|
|
9
|
-
var isNumber = _interopDefault(require('lodash/isNumber'));
|
|
10
9
|
var fieldEditorShared = require('@contentful/field-editor-shared');
|
|
11
|
-
var
|
|
12
|
-
var emotion = require('emotion');
|
|
13
|
-
var tokens = _interopDefault(require('@contentful/f36-tokens'));
|
|
14
|
-
var f36Components = require('@contentful/f36-components');
|
|
10
|
+
var isNumber = _interopDefault(require('lodash/isNumber'));
|
|
15
11
|
var reactSortableHoc = require('react-sortable-hoc');
|
|
16
|
-
var
|
|
12
|
+
var f36Components = require('@contentful/f36-components');
|
|
17
13
|
var f36Icons = require('@contentful/f36-icons');
|
|
14
|
+
var tokens = _interopDefault(require('@contentful/f36-tokens'));
|
|
15
|
+
var arrayMove = _interopDefault(require('array-move'));
|
|
16
|
+
var emotion = require('emotion');
|
|
17
|
+
var noop = _interopDefault(require('lodash/noop'));
|
|
18
18
|
|
|
19
19
|
function TagsEditorConstraints(props) {
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
const {
|
|
21
|
+
constraintsType,
|
|
22
|
+
constraints
|
|
23
|
+
} = props;
|
|
22
24
|
return React__default.createElement(f36Components.Text, {
|
|
23
25
|
as: "p",
|
|
24
26
|
fontColor: "gray600",
|
|
@@ -31,7 +33,7 @@ function TagsEditorConstraints(props) {
|
|
|
31
33
|
}, constraintsType === 'min' && React__default.createElement("span", null, "Requires at least ", constraints.min, " ", constraints.min === 1 ? 'tag' : 'tags'), constraintsType === 'max' && React__default.createElement("span", null, "Requires no more than ", constraints.max, " ", constraints.max === 1 ? 'tag' : 'tags'), constraintsType === 'min-max' && constraints.max !== constraints.min && React__default.createElement("span", null, "Requires between ", constraints.min, " and ", constraints.max, " tags"), constraintsType === 'min-max' && constraints.max === constraints.min && React__default.createElement("span", null, "Requires exactly ", constraints.max, " ", constraints.max === 1 ? 'tag' : 'tags'));
|
|
32
34
|
}
|
|
33
35
|
|
|
34
|
-
|
|
36
|
+
const styles = {
|
|
35
37
|
dropContainer: /*#__PURE__*/emotion.css({
|
|
36
38
|
whiteSpace: 'nowrap',
|
|
37
39
|
display: 'flex',
|
|
@@ -65,58 +67,50 @@ var styles = {
|
|
|
65
67
|
}
|
|
66
68
|
})
|
|
67
69
|
};
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
});
|
|
95
|
-
var SortableList = /*#__PURE__*/reactSortableHoc.SortableContainer(function (props) {
|
|
96
|
-
return React__default.createElement("div", {
|
|
97
|
-
className: styles.dropContainer
|
|
98
|
-
}, props.children);
|
|
99
|
-
});
|
|
70
|
+
const SortablePillHandle = /*#__PURE__*/reactSortableHoc.SortableHandle(props => React__default.createElement("div", {
|
|
71
|
+
className: emotion.cx(styles.handle, {
|
|
72
|
+
[styles.pillDisabled]: props.isDisabled
|
|
73
|
+
})
|
|
74
|
+
}, React__default.createElement(f36Icons.DragIcon, {
|
|
75
|
+
variant: "muted"
|
|
76
|
+
})));
|
|
77
|
+
const SortablePill = /*#__PURE__*/reactSortableHoc.SortableElement(props => React__default.createElement(f36Components.Pill, {
|
|
78
|
+
testId: "tag-editor-pill",
|
|
79
|
+
className: emotion.cx(styles.pill, {
|
|
80
|
+
[styles.pillDisabled]: props.isSortablePillDisabled
|
|
81
|
+
}),
|
|
82
|
+
label: props.label,
|
|
83
|
+
onClose: () => {
|
|
84
|
+
if (!props.isSortablePillDisabled) {
|
|
85
|
+
props.onRemove(props.index);
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
onDrag: noop,
|
|
89
|
+
dragHandleComponent: React__default.createElement(SortablePillHandle, {
|
|
90
|
+
isDisabled: props.isSortablePillDisabled
|
|
91
|
+
})
|
|
92
|
+
}));
|
|
93
|
+
const SortableList = /*#__PURE__*/reactSortableHoc.SortableContainer(props => React__default.createElement("div", {
|
|
94
|
+
className: styles.dropContainer
|
|
95
|
+
}, props.children));
|
|
100
96
|
function TagsEditor(props) {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
var newItems = props.items.filter(function (_, filterIndex) {
|
|
112
|
-
return index !== filterIndex;
|
|
113
|
-
});
|
|
97
|
+
const [pendingValue, setPendingValue] = React.useState('');
|
|
98
|
+
const {
|
|
99
|
+
isDisabled,
|
|
100
|
+
items,
|
|
101
|
+
constraints,
|
|
102
|
+
constraintsType,
|
|
103
|
+
hasError
|
|
104
|
+
} = props;
|
|
105
|
+
const removeItem = React.useCallback(index => {
|
|
106
|
+
const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);
|
|
114
107
|
props.onUpdate(newItems);
|
|
115
108
|
}, [props]);
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
109
|
+
const swapItems = React.useCallback(({
|
|
110
|
+
oldIndex,
|
|
111
|
+
newIndex
|
|
112
|
+
}) => {
|
|
113
|
+
const newItems = arrayMove(props.items, oldIndex, newIndex);
|
|
120
114
|
props.onUpdate(newItems);
|
|
121
115
|
}, [props]);
|
|
122
116
|
return React__default.createElement("div", {
|
|
@@ -129,28 +123,29 @@ function TagsEditor(props) {
|
|
|
129
123
|
type: "text",
|
|
130
124
|
value: pendingValue,
|
|
131
125
|
placeholder: "Type the value and hit enter",
|
|
132
|
-
onKeyDown:
|
|
126
|
+
onKeyDown: e => {
|
|
133
127
|
if (pendingValue && e.keyCode === 13) {
|
|
134
|
-
props.onUpdate([
|
|
128
|
+
props.onUpdate([...props.items, pendingValue]);
|
|
135
129
|
setPendingValue('');
|
|
136
130
|
}
|
|
137
131
|
},
|
|
138
|
-
onChange:
|
|
132
|
+
onChange: e => {
|
|
139
133
|
setPendingValue(e.target.value);
|
|
140
134
|
}
|
|
141
135
|
}), React__default.createElement(SortableList, {
|
|
142
136
|
useDragHandle: true,
|
|
143
137
|
axis: "xy",
|
|
144
138
|
distance: 10,
|
|
145
|
-
onSortEnd:
|
|
146
|
-
|
|
147
|
-
|
|
139
|
+
onSortEnd: ({
|
|
140
|
+
oldIndex,
|
|
141
|
+
newIndex
|
|
142
|
+
}) => {
|
|
148
143
|
swapItems({
|
|
149
|
-
oldIndex
|
|
150
|
-
newIndex
|
|
144
|
+
oldIndex,
|
|
145
|
+
newIndex
|
|
151
146
|
});
|
|
152
147
|
}
|
|
153
|
-
}, items.map(
|
|
148
|
+
}, items.map((item, index) => {
|
|
154
149
|
return React__default.createElement(SortablePill, {
|
|
155
150
|
label: item,
|
|
156
151
|
index: index,
|
|
@@ -163,7 +158,7 @@ function TagsEditor(props) {
|
|
|
163
158
|
* See: https://github.com/clauderic/react-sortable-hoc/issues/612
|
|
164
159
|
*/
|
|
165
160
|
isSortablePillDisabled: isDisabled,
|
|
166
|
-
onRemove:
|
|
161
|
+
onRemove: () => {
|
|
167
162
|
removeItem(index);
|
|
168
163
|
}
|
|
169
164
|
});
|
|
@@ -194,33 +189,30 @@ function getConstraintsType(sizeConstraints) {
|
|
|
194
189
|
}
|
|
195
190
|
|
|
196
191
|
function TagsEditorContainer(props) {
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
return validation.size;
|
|
203
|
-
});
|
|
204
|
-
var constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};
|
|
205
|
-
var constraintsType = getConstraintsType(constraints);
|
|
192
|
+
const field = props.field;
|
|
193
|
+
const validations = field.validations || [];
|
|
194
|
+
const sizeValidations = validations.filter(validation => validation.size).map(validation => validation.size);
|
|
195
|
+
const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};
|
|
196
|
+
const constraintsType = getConstraintsType(constraints);
|
|
206
197
|
return React.createElement(fieldEditorShared.FieldConnector, {
|
|
207
198
|
field: field,
|
|
208
199
|
isInitiallyDisabled: props.isInitiallyDisabled,
|
|
209
200
|
isEmptyValue: isEmptyTagsValue,
|
|
210
201
|
throttle: 0
|
|
211
|
-
},
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
202
|
+
}, ({
|
|
203
|
+
disabled,
|
|
204
|
+
value,
|
|
205
|
+
errors,
|
|
206
|
+
setValue
|
|
207
|
+
}) => {
|
|
208
|
+
const items = value || [];
|
|
217
209
|
return React.createElement(TagsEditor, {
|
|
218
210
|
constraints: constraints,
|
|
219
211
|
constraintsType: constraintsType,
|
|
220
212
|
isDisabled: disabled,
|
|
221
213
|
hasError: errors.length > 0,
|
|
222
214
|
items: items,
|
|
223
|
-
onUpdate:
|
|
215
|
+
onUpdate: items => {
|
|
224
216
|
setValue(items);
|
|
225
217
|
}
|
|
226
218
|
});
|
|
@@ -230,7 +222,7 @@ TagsEditorContainer.defaultProps = {
|
|
|
230
222
|
isInitiallyDisabled: true
|
|
231
223
|
};
|
|
232
224
|
|
|
233
|
-
|
|
225
|
+
const TagsEditor$1 = TagsEditorContainer;
|
|
234
226
|
|
|
235
227
|
exports.TagsEditor = TagsEditor$1;
|
|
236
228
|
//# sourceMappingURL=field-editor-tags.cjs.development.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-tags.cjs.development.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport { Constraint, ConstraintsType } from './types';\n\nimport { Text } from '@contentful/f36-components';\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Text\n as=\"p\"\n fontColor=\"gray600\"\n marginBottom=\"none\"\n marginTop=\"spacingS\"\n className={css({\n fontStyle: 'italic',\n })}\n testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Text>\n );\n}\n","import noop from 'lodash/noop';\nimport React, { useState, useCallback } from 'react';\nimport { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\nimport arrayMove from 'array-move';\n\nimport { Pill, TextInput } from '@contentful/f36-components';\n\nimport { DragIcon } from '@contentful/f36-icons';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n pillDisabled: css({\n cursor: 'not-allowed !important',\n button: {\n cursor: 'not-allowed !important',\n // instead of changing the @contentful/f36-components package\n pointerEvents: 'none',\n },\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle((props: { isDisabled: boolean }) => (\n <div className={cx(styles.handle, { [styles.pillDisabled]: props.isDisabled })}>\n <DragIcon variant=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n isSortablePillDisabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={cx(styles.pill, { [styles.pillDisabled]: props.isSortablePillDisabled })}\n label={props.label}\n onClose={() => {\n if (!props.isSortablePillDisabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle isDisabled={props.isSortablePillDisabled} />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n isDisabled={isDisabled}\n isInvalid={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n /**\n * `isSortablePillDisabled` is needed as SortableElement\n * from react-sortable-hoc doesn't pass down the disabled prop.\n * See: https://github.com/clauderic/react-sortable-hoc/issues/612\n */\n isSortablePillDisabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\nimport isNumber from 'lodash/isNumber';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["TagsEditorConstraints","props","constraintsType","constraints","React","Text","as","fontColor","marginBottom","marginTop","className","css","fontStyle","testId","min","max","styles","dropContainer","whiteSpace","display","flexWrap","input","tokens","spacingS","spacingM","pill","marginRight","pillDisabled","cursor","button","pointerEvents","handle","lineHeight","padding","paddingRight","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","cx","isDisabled","DragIcon","variant","SortablePill","SortableElement","Pill","isSortablePillDisabled","label","onClose","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","oldIndex","newIndex","arrayMove","TextInput","isInvalid","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","disabled","isEmptyTagsValue","length","getConstraintsType","sizeConstraints","undefined","isNumber","TagsEditorContainer","field","validations","sizeValidations","validation","size","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","errors","setValue","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"field-editor-tags.cjs.development.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '@contentful/f36-components';\nimport { css } from 'emotion';\n\nimport { Constraint, ConstraintsType } from './types';\n\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Text\n as=\"p\"\n fontColor=\"gray600\"\n marginBottom=\"none\"\n marginTop=\"spacingS\"\n className={css({\n fontStyle: 'italic',\n })}\n testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Text>\n );\n}\n","import React, { useState, useCallback } from 'react';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\n\n\nimport { Pill, TextInput } from '@contentful/f36-components';\nimport { DragIcon } from '@contentful/f36-icons';\nimport tokens from '@contentful/f36-tokens';\nimport arrayMove from 'array-move';\nimport { css, cx } from 'emotion';\nimport noop from 'lodash/noop';\n\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n pillDisabled: css({\n cursor: 'not-allowed !important',\n button: {\n cursor: 'not-allowed !important',\n // instead of changing the @contentful/f36-components package\n pointerEvents: 'none',\n },\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle((props: { isDisabled: boolean }) => (\n <div className={cx(styles.handle, { [styles.pillDisabled]: props.isDisabled })}>\n <DragIcon variant=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n isSortablePillDisabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={cx(styles.pill, { [styles.pillDisabled]: props.isSortablePillDisabled })}\n label={props.label}\n onClose={() => {\n if (!props.isSortablePillDisabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle isDisabled={props.isSortablePillDisabled} />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n isDisabled={isDisabled}\n isInvalid={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n /**\n * `isSortablePillDisabled` is needed as SortableElement\n * from react-sortable-hoc doesn't pass down the disabled prop.\n * See: https://github.com/clauderic/react-sortable-hoc/issues/612\n */\n isSortablePillDisabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport isNumber from 'lodash/isNumber';\n\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["TagsEditorConstraints","props","constraintsType","constraints","React","Text","as","fontColor","marginBottom","marginTop","className","css","fontStyle","testId","min","max","styles","dropContainer","whiteSpace","display","flexWrap","input","tokens","spacingS","spacingM","pill","marginRight","pillDisabled","cursor","button","pointerEvents","handle","lineHeight","padding","paddingRight","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","cx","isDisabled","DragIcon","variant","SortablePill","SortableElement","Pill","isSortablePillDisabled","label","onClose","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","pendingValue","setPendingValue","useState","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","oldIndex","newIndex","arrayMove","TextInput","isInvalid","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","disabled","isEmptyTagsValue","length","getConstraintsType","sizeConstraints","undefined","isNumber","TagsEditorContainer","field","validations","sizeValidations","validation","size","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","errors","setValue","defaultProps"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),a=
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),a=require("@contentful/field-editor-shared"),i=e(require("lodash/isNumber")),l=require("react-sortable-hoc"),r=require("@contentful/f36-components"),s=require("@contentful/f36-icons"),o=e(require("@contentful/f36-tokens")),d=e(require("array-move")),c=require("emotion"),m=e(require("lodash/noop"));function u(e){const{constraintsType:t,constraints:a}=e;return n.createElement(r.Text,{as:"p",fontColor:"gray600",marginBottom:"none",marginTop:"spacingS",className:c.css({fontStyle:"italic"}),testId:"tag-editor-constraints"},"min"===t&&n.createElement("span",null,"Requires at least ",a.min," ",1===a.min?"tag":"tags"),"max"===t&&n.createElement("span",null,"Requires no more than ",a.max," ",1===a.max?"tag":"tags"),"min-max"===t&&a.max!==a.min&&n.createElement("span",null,"Requires between ",a.min," and ",a.max," tags"),"min-max"===t&&a.max===a.min&&n.createElement("span",null,"Requires exactly ",a.max," ",1===a.max?"tag":"tags"))}const p={dropContainer:c.css({whiteSpace:"nowrap",display:"flex",flexWrap:"wrap"}),input:c.css({marginTop:o.spacingS,marginBottom:o.spacingM}),pill:c.css({marginRight:o.spacingS,marginBottom:o.spacingS}),pillDisabled:c.css({cursor:"not-allowed !important",button:{cursor:"not-allowed !important",pointerEvents:"none"}}),handle:c.css({lineHeight:"1.5rem",padding:"0.375rem 0.625rem",paddingRight:0,cursor:"grab",userSelect:"none",svg:{fill:o.gray500,verticalAlign:"middle"}})},g=l.SortableHandle(e=>n.createElement("div",{className:c.cx(p.handle,{[p.pillDisabled]:e.isDisabled})},n.createElement(s.DragIcon,{variant:"muted"}))),b=l.SortableElement(e=>n.createElement(r.Pill,{testId:"tag-editor-pill",className:c.cx(p.pill,{[p.pillDisabled]:e.isSortablePillDisabled}),label:e.label,onClose:()=>{e.isSortablePillDisabled||e.onRemove(e.index)},onDrag:m,dragHandleComponent:n.createElement(g,{isDisabled:e.isSortablePillDisabled})})),x=l.SortableContainer(e=>n.createElement("div",{className:p.dropContainer},e.children));function f(e){const[a,i]=t.useState(""),{isDisabled:l,items:s,constraints:o,constraintsType:c,hasError:m}=e,g=t.useCallback(t=>{const n=e.items.filter((e,n)=>t!==n);e.onUpdate(n)},[e]),f=t.useCallback(({oldIndex:t,newIndex:n})=>{const a=d(e.items,t,n);e.onUpdate(a)},[e]);return n.createElement("div",{"data-test-id":"tag-editor-container"},n.createElement(r.TextInput,{testId:"tag-editor-input",className:p.input,isDisabled:l,isInvalid:m,type:"text",value:a,placeholder:"Type the value and hit enter",onKeyDown:t=>{a&&13===t.keyCode&&(e.onUpdate([...e.items,a]),i(""))},onChange:e=>{i(e.target.value)}}),n.createElement(x,{useDragHandle:!0,axis:"xy",distance:10,onSortEnd:({oldIndex:e,newIndex:t})=>{f({oldIndex:e,newIndex:t})}},s.map((e,t)=>n.createElement(b,{label:e,index:t,key:e+t,disabled:l,isSortablePillDisabled:l,onRemove:()=>{g(t)}}))),o&&c&&n.createElement(u,{constraints:o,constraintsType:c}))}function E(e){return null===e||0===e.length}function h(e){const n=e.field,l=(n.validations||[]).filter(e=>e.size).map(e=>e.size),r=l.length>0?l[0]:{},s=function(e){if(e)return i(e.min)&&i(e.max)?"min-max":i(e.min)?"min":i(e.max)?"max":void 0}(r);return t.createElement(a.FieldConnector,{field:n,isInitiallyDisabled:e.isInitiallyDisabled,isEmptyValue:E,throttle:0},({disabled:e,value:n,errors:a,setValue:i})=>t.createElement(f,{constraints:r,constraintsType:s,isDisabled:e,hasError:a.length>0,items:n||[],onUpdate:e=>{i(e)}}))}h.defaultProps={isInitiallyDisabled:!0},exports.TagsEditor=h;
|
|
2
2
|
//# sourceMappingURL=field-editor-tags.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-tags.cjs.production.min.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport { Constraint, ConstraintsType } from './types';\n\nimport { Text } from '@contentful/f36-components';\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Text\n as=\"p\"\n fontColor=\"gray600\"\n marginBottom=\"none\"\n marginTop=\"spacingS\"\n className={css({\n fontStyle: 'italic',\n })}\n testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Text>\n );\n}\n","import noop from 'lodash/noop';\nimport React, { useState, useCallback } from 'react';\nimport { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\nimport arrayMove from 'array-move';\n\nimport { Pill, TextInput } from '@contentful/f36-components';\n\nimport { DragIcon } from '@contentful/f36-icons';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n pillDisabled: css({\n cursor: 'not-allowed !important',\n button: {\n cursor: 'not-allowed !important',\n // instead of changing the @contentful/f36-components package\n pointerEvents: 'none',\n },\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle((props: { isDisabled: boolean }) => (\n <div className={cx(styles.handle, { [styles.pillDisabled]: props.isDisabled })}>\n <DragIcon variant=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n isSortablePillDisabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={cx(styles.pill, { [styles.pillDisabled]: props.isSortablePillDisabled })}\n label={props.label}\n onClose={() => {\n if (!props.isSortablePillDisabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle isDisabled={props.isSortablePillDisabled} />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n isDisabled={isDisabled}\n isInvalid={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n /**\n * `isSortablePillDisabled` is needed as SortableElement\n * from react-sortable-hoc doesn't pass down the disabled prop.\n * See: https://github.com/clauderic/react-sortable-hoc/issues/612\n */\n isSortablePillDisabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\nimport isNumber from 'lodash/isNumber';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["TagsEditorConstraints","props","constraintsType","constraints","React","Text","as","fontColor","marginBottom","marginTop","className","css","fontStyle","testId","min","max","styles","dropContainer","whiteSpace","display","flexWrap","input","tokens","spacingS","spacingM","pill","marginRight","pillDisabled","cursor","button","pointerEvents","handle","lineHeight","padding","paddingRight","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","cx","isDisabled","DragIcon","variant","SortablePill","SortableElement","Pill","isSortablePillDisabled","label","onClose","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","arrayMove","oldIndex","newIndex","TextInput","isInvalid","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","disabled","isEmptyTagsValue","length","TagsEditorContainer","field","sizeValidations","validations","validation","size","sizeConstraints","isNumber","getConstraintsType","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","setValue","errors","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"field-editor-tags.cjs.production.min.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '@contentful/f36-components';\nimport { css } from 'emotion';\n\nimport { Constraint, ConstraintsType } from './types';\n\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Text\n as=\"p\"\n fontColor=\"gray600\"\n marginBottom=\"none\"\n marginTop=\"spacingS\"\n className={css({\n fontStyle: 'italic',\n })}\n testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Text>\n );\n}\n","import React, { useState, useCallback } from 'react';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\n\n\nimport { Pill, TextInput } from '@contentful/f36-components';\nimport { DragIcon } from '@contentful/f36-icons';\nimport tokens from '@contentful/f36-tokens';\nimport arrayMove from 'array-move';\nimport { css, cx } from 'emotion';\nimport noop from 'lodash/noop';\n\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n pillDisabled: css({\n cursor: 'not-allowed !important',\n button: {\n cursor: 'not-allowed !important',\n // instead of changing the @contentful/f36-components package\n pointerEvents: 'none',\n },\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle((props: { isDisabled: boolean }) => (\n <div className={cx(styles.handle, { [styles.pillDisabled]: props.isDisabled })}>\n <DragIcon variant=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n isSortablePillDisabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={cx(styles.pill, { [styles.pillDisabled]: props.isSortablePillDisabled })}\n label={props.label}\n onClose={() => {\n if (!props.isSortablePillDisabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle isDisabled={props.isSortablePillDisabled} />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n isDisabled={isDisabled}\n isInvalid={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n /**\n * `isSortablePillDisabled` is needed as SortableElement\n * from react-sortable-hoc doesn't pass down the disabled prop.\n * See: https://github.com/clauderic/react-sortable-hoc/issues/612\n */\n isSortablePillDisabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport isNumber from 'lodash/isNumber';\n\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["TagsEditorConstraints","props","constraintsType","constraints","React","Text","as","fontColor","marginBottom","marginTop","className","css","fontStyle","testId","min","max","styles","dropContainer","whiteSpace","display","flexWrap","input","tokens","spacingS","spacingM","pill","marginRight","pillDisabled","cursor","button","pointerEvents","handle","lineHeight","padding","paddingRight","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","cx","isDisabled","DragIcon","variant","SortablePill","SortableElement","Pill","isSortablePillDisabled","label","onClose","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","pendingValue","setPendingValue","useState","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","oldIndex","newIndex","arrayMove","TextInput","isInvalid","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","disabled","isEmptyTagsValue","length","TagsEditorContainer","field","sizeValidations","validations","validation","size","sizeConstraints","isNumber","getConstraintsType","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","errors","setValue","defaultProps"],"mappings":"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"}
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import React__default, { useState, useCallback, createElement } from 'react';
|
|
2
|
-
import isNumber from 'lodash-es/isNumber';
|
|
3
2
|
import { FieldConnector } from '@contentful/field-editor-shared';
|
|
4
|
-
import
|
|
5
|
-
import { css, cx } from 'emotion';
|
|
6
|
-
import tokens from '@contentful/f36-tokens';
|
|
7
|
-
import { Text, TextInput, Pill } from '@contentful/f36-components';
|
|
3
|
+
import isNumber from 'lodash-es/isNumber';
|
|
8
4
|
import { SortableElement, SortableContainer, SortableHandle } from 'react-sortable-hoc';
|
|
9
|
-
import
|
|
5
|
+
import { Text, TextInput, Pill } from '@contentful/f36-components';
|
|
10
6
|
import { DragIcon } from '@contentful/f36-icons';
|
|
7
|
+
import tokens from '@contentful/f36-tokens';
|
|
8
|
+
import arrayMove from 'array-move';
|
|
9
|
+
import { css, cx } from 'emotion';
|
|
10
|
+
import noop from 'lodash-es/noop';
|
|
11
11
|
|
|
12
12
|
function TagsEditorConstraints(props) {
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
const {
|
|
14
|
+
constraintsType,
|
|
15
|
+
constraints
|
|
16
|
+
} = props;
|
|
15
17
|
return React__default.createElement(Text, {
|
|
16
18
|
as: "p",
|
|
17
19
|
fontColor: "gray600",
|
|
@@ -24,7 +26,7 @@ function TagsEditorConstraints(props) {
|
|
|
24
26
|
}, constraintsType === 'min' && React__default.createElement("span", null, "Requires at least ", constraints.min, " ", constraints.min === 1 ? 'tag' : 'tags'), constraintsType === 'max' && React__default.createElement("span", null, "Requires no more than ", constraints.max, " ", constraints.max === 1 ? 'tag' : 'tags'), constraintsType === 'min-max' && constraints.max !== constraints.min && React__default.createElement("span", null, "Requires between ", constraints.min, " and ", constraints.max, " tags"), constraintsType === 'min-max' && constraints.max === constraints.min && React__default.createElement("span", null, "Requires exactly ", constraints.max, " ", constraints.max === 1 ? 'tag' : 'tags'));
|
|
25
27
|
}
|
|
26
28
|
|
|
27
|
-
|
|
29
|
+
const styles = {
|
|
28
30
|
dropContainer: /*#__PURE__*/css({
|
|
29
31
|
whiteSpace: 'nowrap',
|
|
30
32
|
display: 'flex',
|
|
@@ -58,58 +60,50 @@ var styles = {
|
|
|
58
60
|
}
|
|
59
61
|
})
|
|
60
62
|
};
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
});
|
|
88
|
-
var SortableList = /*#__PURE__*/SortableContainer(function (props) {
|
|
89
|
-
return React__default.createElement("div", {
|
|
90
|
-
className: styles.dropContainer
|
|
91
|
-
}, props.children);
|
|
92
|
-
});
|
|
63
|
+
const SortablePillHandle = /*#__PURE__*/SortableHandle(props => React__default.createElement("div", {
|
|
64
|
+
className: cx(styles.handle, {
|
|
65
|
+
[styles.pillDisabled]: props.isDisabled
|
|
66
|
+
})
|
|
67
|
+
}, React__default.createElement(DragIcon, {
|
|
68
|
+
variant: "muted"
|
|
69
|
+
})));
|
|
70
|
+
const SortablePill = /*#__PURE__*/SortableElement(props => React__default.createElement(Pill, {
|
|
71
|
+
testId: "tag-editor-pill",
|
|
72
|
+
className: cx(styles.pill, {
|
|
73
|
+
[styles.pillDisabled]: props.isSortablePillDisabled
|
|
74
|
+
}),
|
|
75
|
+
label: props.label,
|
|
76
|
+
onClose: () => {
|
|
77
|
+
if (!props.isSortablePillDisabled) {
|
|
78
|
+
props.onRemove(props.index);
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
onDrag: noop,
|
|
82
|
+
dragHandleComponent: React__default.createElement(SortablePillHandle, {
|
|
83
|
+
isDisabled: props.isSortablePillDisabled
|
|
84
|
+
})
|
|
85
|
+
}));
|
|
86
|
+
const SortableList = /*#__PURE__*/SortableContainer(props => React__default.createElement("div", {
|
|
87
|
+
className: styles.dropContainer
|
|
88
|
+
}, props.children));
|
|
93
89
|
function TagsEditor(props) {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
var newItems = props.items.filter(function (_, filterIndex) {
|
|
105
|
-
return index !== filterIndex;
|
|
106
|
-
});
|
|
90
|
+
const [pendingValue, setPendingValue] = useState('');
|
|
91
|
+
const {
|
|
92
|
+
isDisabled,
|
|
93
|
+
items,
|
|
94
|
+
constraints,
|
|
95
|
+
constraintsType,
|
|
96
|
+
hasError
|
|
97
|
+
} = props;
|
|
98
|
+
const removeItem = useCallback(index => {
|
|
99
|
+
const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);
|
|
107
100
|
props.onUpdate(newItems);
|
|
108
101
|
}, [props]);
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
102
|
+
const swapItems = useCallback(({
|
|
103
|
+
oldIndex,
|
|
104
|
+
newIndex
|
|
105
|
+
}) => {
|
|
106
|
+
const newItems = arrayMove(props.items, oldIndex, newIndex);
|
|
113
107
|
props.onUpdate(newItems);
|
|
114
108
|
}, [props]);
|
|
115
109
|
return React__default.createElement("div", {
|
|
@@ -122,28 +116,29 @@ function TagsEditor(props) {
|
|
|
122
116
|
type: "text",
|
|
123
117
|
value: pendingValue,
|
|
124
118
|
placeholder: "Type the value and hit enter",
|
|
125
|
-
onKeyDown:
|
|
119
|
+
onKeyDown: e => {
|
|
126
120
|
if (pendingValue && e.keyCode === 13) {
|
|
127
|
-
props.onUpdate([
|
|
121
|
+
props.onUpdate([...props.items, pendingValue]);
|
|
128
122
|
setPendingValue('');
|
|
129
123
|
}
|
|
130
124
|
},
|
|
131
|
-
onChange:
|
|
125
|
+
onChange: e => {
|
|
132
126
|
setPendingValue(e.target.value);
|
|
133
127
|
}
|
|
134
128
|
}), React__default.createElement(SortableList, {
|
|
135
129
|
useDragHandle: true,
|
|
136
130
|
axis: "xy",
|
|
137
131
|
distance: 10,
|
|
138
|
-
onSortEnd:
|
|
139
|
-
|
|
140
|
-
|
|
132
|
+
onSortEnd: ({
|
|
133
|
+
oldIndex,
|
|
134
|
+
newIndex
|
|
135
|
+
}) => {
|
|
141
136
|
swapItems({
|
|
142
|
-
oldIndex
|
|
143
|
-
newIndex
|
|
137
|
+
oldIndex,
|
|
138
|
+
newIndex
|
|
144
139
|
});
|
|
145
140
|
}
|
|
146
|
-
}, items.map(
|
|
141
|
+
}, items.map((item, index) => {
|
|
147
142
|
return React__default.createElement(SortablePill, {
|
|
148
143
|
label: item,
|
|
149
144
|
index: index,
|
|
@@ -156,7 +151,7 @@ function TagsEditor(props) {
|
|
|
156
151
|
* See: https://github.com/clauderic/react-sortable-hoc/issues/612
|
|
157
152
|
*/
|
|
158
153
|
isSortablePillDisabled: isDisabled,
|
|
159
|
-
onRemove:
|
|
154
|
+
onRemove: () => {
|
|
160
155
|
removeItem(index);
|
|
161
156
|
}
|
|
162
157
|
});
|
|
@@ -187,33 +182,30 @@ function getConstraintsType(sizeConstraints) {
|
|
|
187
182
|
}
|
|
188
183
|
|
|
189
184
|
function TagsEditorContainer(props) {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
return validation.size;
|
|
196
|
-
});
|
|
197
|
-
var constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};
|
|
198
|
-
var constraintsType = getConstraintsType(constraints);
|
|
185
|
+
const field = props.field;
|
|
186
|
+
const validations = field.validations || [];
|
|
187
|
+
const sizeValidations = validations.filter(validation => validation.size).map(validation => validation.size);
|
|
188
|
+
const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};
|
|
189
|
+
const constraintsType = getConstraintsType(constraints);
|
|
199
190
|
return createElement(FieldConnector, {
|
|
200
191
|
field: field,
|
|
201
192
|
isInitiallyDisabled: props.isInitiallyDisabled,
|
|
202
193
|
isEmptyValue: isEmptyTagsValue,
|
|
203
194
|
throttle: 0
|
|
204
|
-
},
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
195
|
+
}, ({
|
|
196
|
+
disabled,
|
|
197
|
+
value,
|
|
198
|
+
errors,
|
|
199
|
+
setValue
|
|
200
|
+
}) => {
|
|
201
|
+
const items = value || [];
|
|
210
202
|
return createElement(TagsEditor, {
|
|
211
203
|
constraints: constraints,
|
|
212
204
|
constraintsType: constraintsType,
|
|
213
205
|
isDisabled: disabled,
|
|
214
206
|
hasError: errors.length > 0,
|
|
215
207
|
items: items,
|
|
216
|
-
onUpdate:
|
|
208
|
+
onUpdate: items => {
|
|
217
209
|
setValue(items);
|
|
218
210
|
}
|
|
219
211
|
});
|
|
@@ -223,7 +215,7 @@ TagsEditorContainer.defaultProps = {
|
|
|
223
215
|
isInitiallyDisabled: true
|
|
224
216
|
};
|
|
225
217
|
|
|
226
|
-
|
|
218
|
+
const TagsEditor$1 = TagsEditorContainer;
|
|
227
219
|
|
|
228
220
|
export { TagsEditor$1 as TagsEditor };
|
|
229
221
|
//# sourceMappingURL=field-editor-tags.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-tags.esm.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport { Constraint, ConstraintsType } from './types';\n\nimport { Text } from '@contentful/f36-components';\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Text\n as=\"p\"\n fontColor=\"gray600\"\n marginBottom=\"none\"\n marginTop=\"spacingS\"\n className={css({\n fontStyle: 'italic',\n })}\n testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Text>\n );\n}\n","import noop from 'lodash/noop';\nimport React, { useState, useCallback } from 'react';\nimport { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\nimport arrayMove from 'array-move';\n\nimport { Pill, TextInput } from '@contentful/f36-components';\n\nimport { DragIcon } from '@contentful/f36-icons';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n pillDisabled: css({\n cursor: 'not-allowed !important',\n button: {\n cursor: 'not-allowed !important',\n // instead of changing the @contentful/f36-components package\n pointerEvents: 'none',\n },\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle((props: { isDisabled: boolean }) => (\n <div className={cx(styles.handle, { [styles.pillDisabled]: props.isDisabled })}>\n <DragIcon variant=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n isSortablePillDisabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={cx(styles.pill, { [styles.pillDisabled]: props.isSortablePillDisabled })}\n label={props.label}\n onClose={() => {\n if (!props.isSortablePillDisabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle isDisabled={props.isSortablePillDisabled} />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n isDisabled={isDisabled}\n isInvalid={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n /**\n * `isSortablePillDisabled` is needed as SortableElement\n * from react-sortable-hoc doesn't pass down the disabled prop.\n * See: https://github.com/clauderic/react-sortable-hoc/issues/612\n */\n isSortablePillDisabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\nimport isNumber from 'lodash/isNumber';\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["TagsEditorConstraints","props","constraintsType","constraints","React","Text","as","fontColor","marginBottom","marginTop","className","css","fontStyle","testId","min","max","styles","dropContainer","whiteSpace","display","flexWrap","input","tokens","spacingS","spacingM","pill","marginRight","pillDisabled","cursor","button","pointerEvents","handle","lineHeight","padding","paddingRight","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","cx","isDisabled","DragIcon","variant","SortablePill","SortableElement","Pill","isSortablePillDisabled","label","onClose","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","useState","pendingValue","setPendingValue","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","oldIndex","newIndex","arrayMove","TextInput","isInvalid","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","disabled","isEmptyTagsValue","length","getConstraintsType","sizeConstraints","undefined","isNumber","TagsEditorContainer","field","validations","sizeValidations","validation","size","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","errors","setValue","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"field-editor-tags.esm.js","sources":["../src/TagsEditorConstraints.tsx","../src/TagsEditor.tsx","../src/TagsEditorContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '@contentful/f36-components';\nimport { css } from 'emotion';\n\nimport { Constraint, ConstraintsType } from './types';\n\n\ninterface TagEditorConstraintsProps {\n constraintsType: ConstraintsType;\n constraints: Constraint;\n}\n\nexport function TagsEditorConstraints(props: TagEditorConstraintsProps) {\n const { constraintsType, constraints } = props;\n return (\n <Text\n as=\"p\"\n fontColor=\"gray600\"\n marginBottom=\"none\"\n marginTop=\"spacingS\"\n className={css({\n fontStyle: 'italic',\n })}\n testId=\"tag-editor-constraints\">\n {constraintsType === 'min' && (\n <span>\n Requires at least {constraints.min} {constraints.min === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'max' && (\n <span>\n Requires no more than {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max !== constraints.min && (\n <span>\n Requires between {constraints.min} and {constraints.max} tags\n </span>\n )}\n {constraintsType === 'min-max' && constraints.max === constraints.min && (\n <span>\n Requires exactly {constraints.max} {constraints.max === 1 ? 'tag' : 'tags'}\n </span>\n )}\n </Text>\n );\n}\n","import React, { useState, useCallback } from 'react';\nimport { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';\n\n\nimport { Pill, TextInput } from '@contentful/f36-components';\nimport { DragIcon } from '@contentful/f36-icons';\nimport tokens from '@contentful/f36-tokens';\nimport arrayMove from 'array-move';\nimport { css, cx } from 'emotion';\nimport noop from 'lodash/noop';\n\nimport { TagsEditorConstraints } from './TagsEditorConstraints';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorProps {\n items: string[];\n isDisabled: boolean;\n hasError: boolean;\n constraintsType?: ConstraintsType;\n constraints?: Constraint;\n onUpdate: (items: string[]) => void;\n}\n\nconst styles = {\n dropContainer: css({\n whiteSpace: 'nowrap',\n display: 'flex',\n flexWrap: 'wrap',\n }),\n input: css({\n marginTop: tokens.spacingS,\n marginBottom: tokens.spacingM,\n }),\n pill: css({\n marginRight: tokens.spacingS,\n marginBottom: tokens.spacingS,\n }),\n pillDisabled: css({\n cursor: 'not-allowed !important',\n button: {\n cursor: 'not-allowed !important',\n // instead of changing the @contentful/f36-components package\n pointerEvents: 'none',\n },\n }),\n handle: css({\n lineHeight: '1.5rem',\n padding: '0.375rem 0.625rem',\n paddingRight: 0,\n cursor: 'grab',\n userSelect: 'none',\n svg: {\n fill: tokens.gray500,\n verticalAlign: 'middle',\n },\n }),\n};\n\nconst SortablePillHandle = SortableHandle((props: { isDisabled: boolean }) => (\n <div className={cx(styles.handle, { [styles.pillDisabled]: props.isDisabled })}>\n <DragIcon variant=\"muted\" />\n </div>\n));\n\ninterface SortablePillProps {\n label: string;\n onRemove: Function;\n isSortablePillDisabled: boolean;\n index: number;\n}\n\nconst SortablePill = SortableElement((props: SortablePillProps) => (\n <Pill\n testId=\"tag-editor-pill\"\n className={cx(styles.pill, { [styles.pillDisabled]: props.isSortablePillDisabled })}\n label={props.label}\n onClose={() => {\n if (!props.isSortablePillDisabled) {\n props.onRemove(props.index);\n }\n }}\n onDrag={noop}\n dragHandleComponent={<SortablePillHandle isDisabled={props.isSortablePillDisabled} />}\n />\n));\n\ninterface SortableListProps {\n children: React.ReactNode;\n}\n\nconst SortableList = SortableContainer((props: SortableListProps) => (\n <div className={styles.dropContainer}>{props.children}</div>\n));\n\nexport function TagsEditor(props: TagsEditorProps) {\n const [pendingValue, setPendingValue] = useState('');\n\n const { isDisabled, items, constraints, constraintsType, hasError } = props;\n\n const removeItem = useCallback(\n (index) => {\n const newItems = props.items.filter((_, filterIndex) => index !== filterIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n const swapItems = useCallback(\n ({ oldIndex, newIndex }) => {\n const newItems = arrayMove(props.items, oldIndex, newIndex);\n props.onUpdate(newItems);\n },\n [props]\n );\n\n return (\n <div data-test-id=\"tag-editor-container\">\n <TextInput\n testId=\"tag-editor-input\"\n className={styles.input}\n isDisabled={isDisabled}\n isInvalid={hasError}\n type=\"text\"\n value={pendingValue}\n placeholder=\"Type the value and hit enter\"\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n if (pendingValue && e.keyCode === 13) {\n props.onUpdate([...props.items, pendingValue]);\n setPendingValue('');\n }\n }}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setPendingValue(e.target.value);\n }}\n />\n <SortableList\n useDragHandle\n axis=\"xy\"\n distance={10}\n onSortEnd={({ oldIndex, newIndex }) => {\n swapItems({ oldIndex, newIndex });\n }}>\n {items.map((item, index) => {\n return (\n <SortablePill\n label={item}\n index={index}\n key={item + index}\n disabled={isDisabled}\n /**\n * `isSortablePillDisabled` is needed as SortableElement\n * from react-sortable-hoc doesn't pass down the disabled prop.\n * See: https://github.com/clauderic/react-sortable-hoc/issues/612\n */\n isSortablePillDisabled={isDisabled}\n onRemove={() => {\n removeItem(index);\n }}\n />\n );\n })}\n </SortableList>\n {constraints && constraintsType && (\n <TagsEditorConstraints constraints={constraints} constraintsType={constraintsType} />\n )}\n </div>\n );\n}\n","import * as React from 'react';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport isNumber from 'lodash/isNumber';\n\nimport { TagsEditor } from './TagsEditor';\nimport { ConstraintsType, Constraint } from './types';\n\nexport interface TagsEditorContainerProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n /**\n * sdk.field\n */\n field: FieldAPI;\n}\n\ntype TagEditorValue = string[];\n\nfunction isEmptyTagsValue(value: TagEditorValue | null) {\n return value === null || value.length === 0;\n}\n\nfunction getConstraintsType(sizeConstraints?: Constraint): ConstraintsType | undefined {\n if (!sizeConstraints) {\n return undefined;\n }\n if (isNumber(sizeConstraints.min) && isNumber(sizeConstraints.max)) {\n return 'min-max';\n } else if (isNumber(sizeConstraints.min)) {\n return 'min';\n } else if (isNumber(sizeConstraints.max)) {\n return 'max';\n } else {\n return undefined;\n }\n}\n\nexport function TagsEditorContainer(props: TagsEditorContainerProps) {\n const field = props.field;\n\n const validations = field.validations || [];\n\n const sizeValidations = (validations as { size?: Constraint }[])\n .filter((validation) => validation.size)\n .map((validation) => validation.size);\n\n const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};\n\n const constraintsType = getConstraintsType(constraints);\n\n return (\n <FieldConnector<TagEditorValue>\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}\n isEmptyValue={isEmptyTagsValue}\n throttle={0}>\n {({ disabled, value, errors, setValue }) => {\n const items = value || [];\n return (\n <TagsEditor\n constraints={constraints}\n constraintsType={constraintsType}\n isDisabled={disabled}\n hasError={errors.length > 0}\n items={items}\n onUpdate={(items) => {\n setValue(items);\n }}\n />\n );\n }}\n </FieldConnector>\n );\n}\n\nTagsEditorContainer.defaultProps = {\n isInitiallyDisabled: true,\n};\n","import { TagsEditorContainer } from './TagsEditorContainer';\n\nexport const TagsEditor = TagsEditorContainer;\n"],"names":["TagsEditorConstraints","props","constraintsType","constraints","React","Text","as","fontColor","marginBottom","marginTop","className","css","fontStyle","testId","min","max","styles","dropContainer","whiteSpace","display","flexWrap","input","tokens","spacingS","spacingM","pill","marginRight","pillDisabled","cursor","button","pointerEvents","handle","lineHeight","padding","paddingRight","userSelect","svg","fill","gray500","verticalAlign","SortablePillHandle","SortableHandle","cx","isDisabled","DragIcon","variant","SortablePill","SortableElement","Pill","isSortablePillDisabled","label","onClose","onRemove","index","onDrag","noop","dragHandleComponent","SortableList","SortableContainer","children","TagsEditor","pendingValue","setPendingValue","useState","items","hasError","removeItem","useCallback","newItems","filter","_","filterIndex","onUpdate","swapItems","oldIndex","newIndex","arrayMove","TextInput","isInvalid","type","value","placeholder","onKeyDown","e","keyCode","onChange","target","useDragHandle","axis","distance","onSortEnd","map","item","key","disabled","isEmptyTagsValue","length","getConstraintsType","sizeConstraints","undefined","isNumber","TagsEditorContainer","field","validations","sizeValidations","validation","size","FieldConnector","isInitiallyDisabled","isEmptyValue","throttle","errors","setValue","defaultProps"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/field-editor-tags",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/field-editor-tags.esm.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"@contentful/f36-components": "^4.0.27",
|
|
25
25
|
"@contentful/f36-icons": "^4.1.0",
|
|
26
26
|
"@contentful/f36-tokens": "^4.0.0",
|
|
27
|
-
"@contentful/field-editor-shared": "^1.
|
|
27
|
+
"@contentful/field-editor-shared": "^1.2.0",
|
|
28
28
|
"array-move": "^3.0.0",
|
|
29
29
|
"emotion": "^10.0.0",
|
|
30
30
|
"lodash": "^4.17.15",
|
|
@@ -32,20 +32,10 @@
|
|
|
32
32
|
"react-sortable-hoc": "^2.0.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@contentful/field-editor-test-utils": "^1.
|
|
35
|
+
"@contentful/field-editor-test-utils": "^1.3.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": ">=16.8.0"
|
|
39
39
|
},
|
|
40
|
-
"
|
|
41
|
-
"testMatch": [
|
|
42
|
-
"**/?(*.)+(spec|test).[jt]s?(x)"
|
|
43
|
-
],
|
|
44
|
-
"globals": {
|
|
45
|
-
"ts-jest": {
|
|
46
|
-
"diagnostics": false
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
"gitHead": "1e4a7d92c48f0e1949f2b48b3c9974da1602fd5c"
|
|
40
|
+
"gitHead": "de7e74e3485dd69c240cfe9c545e6e50e41fb295"
|
|
51
41
|
}
|