@contentful/field-editor-tags 1.2.0 → 1.3.1

package/dist/cjs/TagsEditor.js

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TagsEditor", {
+    enumerable: true,
+    get: function() {
+        return TagsEditor;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _reactsortablehoc = require("react-sortable-hoc");
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _arraymove = _interop_require_default(require("array-move"));
+const _emotion = require("emotion");
+const _noop = _interop_require_default(require("lodash/noop"));
+const _TagsEditorConstraints = require("./TagsEditorConstraints");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    dropContainer: (0, _emotion.css)({
+        whiteSpace: 'nowrap',
+        display: 'flex',
+        flexWrap: 'wrap'
+    }),
+    input: (0, _emotion.css)({
+        marginTop: _f36tokens.default.spacingS,
+        marginBottom: _f36tokens.default.spacingM
+    }),
+    pill: (0, _emotion.css)({
+        marginRight: _f36tokens.default.spacingS,
+        marginBottom: _f36tokens.default.spacingS
+    }),
+    pillDisabled: (0, _emotion.css)({
+        cursor: 'not-allowed !important',
+        button: {
+            cursor: 'not-allowed !important',
+            pointerEvents: 'none'
+        }
+    }),
+    handle: (0, _emotion.css)({
+        lineHeight: '1.5rem',
+        padding: '0.375rem 0.625rem',
+        paddingRight: 0,
+        cursor: 'grab',
+        userSelect: 'none',
+        svg: {
+            fill: _f36tokens.default.gray500,
+            verticalAlign: 'middle'
+        }
+    })
+};
+const SortablePillHandle = (0, _reactsortablehoc.SortableHandle)((props)=>_react.default.createElement("div", {
+        className: (0, _emotion.cx)(styles.handle, {
+            [styles.pillDisabled]: props.isDisabled
+        })
+    }, _react.default.createElement(_f36icons.DragIcon, {
+        variant: "muted"
+    })));
+const SortablePill = (0, _reactsortablehoc.SortableElement)((props)=>_react.default.createElement(_f36components.Pill, {
+        testId: "tag-editor-pill",
+        className: (0, _emotion.cx)(styles.pill, {
+            [styles.pillDisabled]: props.isSortablePillDisabled
+        }),
+        label: props.label,
+        onClose: ()=>{
+            if (!props.isSortablePillDisabled) {
+                props.onRemove(props.index);
+            }
+        },
+        onDrag: _noop.default,
+        dragHandleComponent: _react.default.createElement(SortablePillHandle, {
+            isDisabled: props.isSortablePillDisabled
+        })
+    }));
+const SortableList = (0, _reactsortablehoc.SortableContainer)((props)=>_react.default.createElement("div", {
+        className: styles.dropContainer
+    }, props.children));
+function TagsEditor(props) {
+    const [pendingValue, setPendingValue] = (0, _react.useState)('');
+    const { isDisabled , items , constraints , constraintsType , hasError  } = props;
+    const removeItem = (0, _react.useCallback)((index)=>{
+        const newItems = props.items.filter((_, filterIndex)=>index !== filterIndex);
+        props.onUpdate(newItems);
+    }, [
+        props
+    ]);
+    const swapItems = (0, _react.useCallback)(({ oldIndex , newIndex  })=>{
+        const newItems = (0, _arraymove.default)(props.items, oldIndex, newIndex);
+        props.onUpdate(newItems);
+    }, [
+        props
+    ]);
+    return _react.default.createElement("div", {
+        "data-test-id": "tag-editor-container"
+    }, _react.default.createElement(_f36components.TextInput, {
+        testId: "tag-editor-input",
+        className: styles.input,
+        isDisabled: isDisabled,
+        isInvalid: hasError,
+        type: "text",
+        value: pendingValue,
+        placeholder: "Type the value and hit enter",
+        onKeyDown: (e)=>{
+            if (pendingValue && e.keyCode === 13) {
+                props.onUpdate([
+                    ...props.items,
+                    pendingValue
+                ]);
+                setPendingValue('');
+            }
+        },
+        onChange: (e)=>{
+            setPendingValue(e.target.value);
+        }
+    }), _react.default.createElement(SortableList, {
+        useDragHandle: true,
+        axis: "xy",
+        distance: 10,
+        onSortEnd: ({ oldIndex , newIndex  })=>{
+            swapItems({
+                oldIndex,
+                newIndex
+            });
+        }
+    }, items.map((item, index)=>{
+        return _react.default.createElement(SortablePill, {
+            label: item,
+            index: index,
+            key: item + index,
+            disabled: isDisabled,
+            isSortablePillDisabled: isDisabled,
+            onRemove: ()=>{
+                removeItem(index);
+            }
+        });
+    })), constraints && constraintsType && _react.default.createElement(_TagsEditorConstraints.TagsEditorConstraints, {
+        constraints: constraints,
+        constraintsType: constraintsType
+    }));
+}

package/dist/cjs/TagsEditorConstraints.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TagsEditorConstraints", {
+    enumerable: true,
+    get: function() {
+        return TagsEditorConstraints;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _emotion = require("emotion");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function TagsEditorConstraints(props) {
+    const { constraintsType , constraints  } = props;
+    return _react.createElement(_f36components.Text, {
+        as: "p",
+        fontColor: "gray600",
+        marginBottom: "none",
+        marginTop: "spacingS",
+        className: (0, _emotion.css)({
+            fontStyle: 'italic'
+        }),
+        testId: "tag-editor-constraints"
+    }, constraintsType === 'min' && _react.createElement("span", null, "Requires at least ", constraints.min, " ", constraints.min === 1 ? 'tag' : 'tags'), constraintsType === 'max' && _react.createElement("span", null, "Requires no more than ", constraints.max, " ", constraints.max === 1 ? 'tag' : 'tags'), constraintsType === 'min-max' && constraints.max !== constraints.min && _react.createElement("span", null, "Requires between ", constraints.min, " and ", constraints.max, " tags"), constraintsType === 'min-max' && constraints.max === constraints.min && _react.createElement("span", null, "Requires exactly ", constraints.max, " ", constraints.max === 1 ? 'tag' : 'tags'));
+}

package/dist/cjs/TagsEditorContainer.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TagsEditorContainer", {
+    enumerable: true,
+    get: function() {
+        return TagsEditorContainer;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _isNumber = _interop_require_default(require("lodash/isNumber"));
+const _TagsEditor = require("./TagsEditor");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function isEmptyTagsValue(value) {
+    return value === null || value.length === 0;
+}
+function getConstraintsType(sizeConstraints) {
+    if (!sizeConstraints) {
+        return undefined;
+    }
+    if ((0, _isNumber.default)(sizeConstraints.min) && (0, _isNumber.default)(sizeConstraints.max)) {
+        return 'min-max';
+    } else if ((0, _isNumber.default)(sizeConstraints.min)) {
+        return 'min';
+    } else if ((0, _isNumber.default)(sizeConstraints.max)) {
+        return 'max';
+    } else {
+        return undefined;
+    }
+}
+function TagsEditorContainer(props) {
+    const field = props.field;
+    const validations = field.validations || [];
+    const sizeValidations = validations.filter((validation)=>validation.size).map((validation)=>validation.size);
+    const constraints = sizeValidations.length > 0 ? sizeValidations[0] : {};
+    const constraintsType = getConstraintsType(constraints);
+    return _react.createElement(_fieldeditorshared.FieldConnector, {
+        field: field,
+        isInitiallyDisabled: props.isInitiallyDisabled,
+        isEmptyValue: isEmptyTagsValue,
+        throttle: 0
+    }, ({ disabled , value , errors , setValue  })=>{
+        const items = value || [];
+        return _react.createElement(_TagsEditor.TagsEditor, {
+            constraints: constraints,
+            constraintsType: constraintsType,
+            isDisabled: disabled,
+            hasError: errors.length > 0,
+            items: items,
+            onUpdate: (items)=>{
+                setValue(items);
+            }
+        });
+    });
+}
+TagsEditorContainer.defaultProps = {
+    isInitiallyDisabled: true
+};

package/dist/cjs/TagsEditorContainer.spec.js

@@ -0,0 +1,226 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
+require("@testing-library/jest-dom/extend-expect");
+const _react1 = require("@testing-library/react");
+const _TagsEditorContainer = require("./TagsEditorContainer");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+(0, _react1.configure)({
+    testIdAttribute: 'data-test-id'
+});
+describe('TagsEditor', ()=>{
+    afterEach(_react1.cleanup);
+    function expectNoConstraints({ queryByTestId  }) {
+        const $constraints = queryByTestId('tag-editor-constraints');
+        expect($constraints).not.toBeInTheDocument();
+    }
+    function expectInputValue({ getByTestId  }, expected) {
+        const $input = getByTestId('tag-editor-input');
+        expect($input).toHaveValue(expected);
+    }
+    function expectTagsCount({ queryAllByTestId  }, expectedCount) {
+        const $values = queryAllByTestId('tag-editor-pill');
+        expect($values).toHaveLength(expectedCount);
+    }
+    function expectTag({ queryAllByTestId  }, index, content) {
+        const $values = queryAllByTestId('tag-editor-pill');
+        expect($values[index].textContent).toEqual(content);
+    }
+    function typePendingValueAndHitEnter({ getByTestId  }, value) {
+        const $input = getByTestId('tag-editor-input');
+        _react1.fireEvent.change($input, {
+            target: {
+                value
+            }
+        });
+        _react1.fireEvent.keyDown($input, {
+            keyCode: 13
+        });
+    }
+    function clickRemoveTag({ getAllByTestId  }, index) {
+        _react1.fireEvent.click(getAllByTestId('tag-editor-pill')[index].querySelector('button'));
+    }
+    it('renders empty value properly', ()=>{
+        const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((mock)=>{
+            return {
+                ...mock,
+                validations: []
+            };
+        });
+        const renderResult = (0, _react1.render)(_react.createElement(_TagsEditorContainer.TagsEditorContainer, {
+            field: field,
+            isInitiallyDisabled: false
+        }));
+        expectNoConstraints(renderResult);
+        expectInputValue(renderResult, '');
+        expectTagsCount(renderResult, 0);
+    });
+    it('renders non-empty value properly', ()=>{
+        const initialValue = [
+            'test1',
+            'test2',
+            'test3'
+        ];
+        const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((mock)=>{
+            return {
+                ...mock,
+                validations: []
+            };
+        }, initialValue);
+        const renderResult = (0, _react1.render)(_react.createElement(_TagsEditorContainer.TagsEditorContainer, {
+            field: field,
+            isInitiallyDisabled: false
+        }));
+        expectInputValue(renderResult, '');
+        expectNoConstraints(renderResult);
+        expectTagsCount(renderResult, 3);
+        expectTag(renderResult, 0, 'test1');
+        expectTag(renderResult, 1, 'test2');
+        expectTag(renderResult, 2, 'test3');
+    });
+    describe('renders constraints message', ()=>{
+        const conditions = [
+            {
+                testType: 'max',
+                validation: {
+                    max: 10
+                },
+                expected: 'Requires no more than 10 tags'
+            },
+            {
+                testType: 'max-one',
+                validation: {
+                    max: 1
+                },
+                expected: 'Requires no more than 1 tag'
+            },
+            {
+                testType: 'min',
+                validation: {
+                    min: 20
+                },
+                expected: 'Requires at least 20 tags'
+            },
+            {
+                testType: 'min-one',
+                validation: {
+                    min: 1
+                },
+                expected: 'Requires at least 1 tag'
+            },
+            {
+                testType: 'min-max',
+                validation: {
+                    min: 10,
+                    max: 20
+                },
+                expected: 'Requires between 10 and 20 tags'
+            },
+            {
+                testType: 'min-max-equal',
+                validation: {
+                    min: 10,
+                    max: 10
+                },
+                expected: 'Requires exactly 10 tags'
+            }
+        ];
+        conditions.forEach((condition)=>{
+            it(condition.testType, ()=>{
+                const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((mock)=>{
+                    return {
+                        ...mock,
+                        validations: [
+                            {
+                                size: condition.validation
+                            }
+                        ]
+                    };
+                });
+                const { getByTestId  } = (0, _react1.render)(_react.createElement(_TagsEditorContainer.TagsEditorContainer, {
+                    field: field,
+                    isInitiallyDisabled: false
+                }));
+                const $constraints = getByTestId('tag-editor-constraints');
+                expect($constraints.textContent).toEqual(condition.expected);
+            });
+        });
+    });
+    it('adds and removes values', ()=>{
+        const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
+            jest.spyOn(field, 'setValue');
+            jest.spyOn(field, 'removeValue');
+            return {
+                ...field,
+                validations: []
+            };
+        });
+        const renderResult = (0, _react1.render)(_react.createElement(_TagsEditorContainer.TagsEditorContainer, {
+            field: field,
+            isInitiallyDisabled: false
+        }));
+        typePendingValueAndHitEnter(renderResult, 'first item');
+        expect(field.setValue).toHaveBeenCalledWith([
+            'first item'
+        ]);
+        expect(field.setValue).toHaveBeenCalledTimes(1);
+        expect(field.removeValue).toHaveBeenCalledTimes(0);
+        expectInputValue(renderResult, '');
+        typePendingValueAndHitEnter(renderResult, 'second item');
+        expect(field.setValue).toHaveBeenCalledWith([
+            'first item',
+            'second item'
+        ]);
+        expect(field.setValue).toHaveBeenCalledTimes(2);
+        expectInputValue(renderResult, '');
+        clickRemoveTag(renderResult, 0);
+        expect(field.setValue).toHaveBeenCalledWith([
+            'second item'
+        ]);
+        expect(field.setValue).toHaveBeenCalledTimes(3);
+        clickRemoveTag(renderResult, 0);
+        expect(field.setValue).toHaveBeenCalledTimes(3);
+        expect(field.removeValue).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TagsEditor", {
+    enumerable: true,
+    get: function() {
+        return TagsEditor;
+    }
+});
+const _TagsEditorContainer = require("./TagsEditorContainer");
+const TagsEditor = _TagsEditorContainer.TagsEditorContainer;

package/dist/cjs/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});