@contentful/field-editor-checkbox 1.2.0 → 1.3.0

package/dist/cjs/CheckboxEditor.js

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CheckboxEditor", {
+    enumerable: true,
+    get: function() {
+        return CheckboxEditor;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _emotion = require("emotion");
+const _get = _interop_require_default(require("lodash/get"));
+const _nanoid = require("nanoid");
+const _styles = _interop_require_wildcard(require("./styles"));
+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 isEmptyListValue(value) {
+    return value === null || value.length === 0;
+}
+function getOptions(field, id) {
+    const validations = (0, _get.default)(field, [
+        'items',
+        'validations'
+    ], []);
+    const predefinedValues = validations.filter((validation)=>validation.in).map((validation)=>validation.in);
+    const firstPredefinedValues = predefinedValues.length > 0 ? predefinedValues[0] : [];
+    return firstPredefinedValues.map((value, index)=>({
+            id: [
+                'entity',
+                field.id,
+                field.locale,
+                index,
+                id
+            ].join('.'),
+            value,
+            label: value
+        }));
+}
+const getInvalidValues = (field, values, options)=>{
+    const getValueFromOptions = options.map((item)=>item.value);
+    const invalidValues = values.filter((value)=>!getValueFromOptions.includes(value)).map((value, index)=>({
+            id: [
+                'entity',
+                field.id,
+                field.locale,
+                index,
+                'invalid'
+            ].join('.'),
+            label: value,
+            invalid: true,
+            value
+        }));
+    return invalidValues;
+};
+function CheckboxEditor(props) {
+    const [id] = (0, _react.useState)(()=>(0, _nanoid.nanoid)(6));
+    const { field , locales  } = props;
+    const options = getOptions(field, id);
+    const misconfigured = options.length === 0;
+    if (misconfigured) {
+        return _react.createElement(_fieldeditorshared.PredefinedValuesError, null);
+    }
+    const direction = locales.direction[field.locale] || 'ltr';
+    return _react.createElement(_fieldeditorshared.FieldConnector, {
+        throttle: 0,
+        isEmptyValue: isEmptyListValue,
+        field: field,
+        isInitiallyDisabled: props.isInitiallyDisabled
+    }, ({ disabled , value , setValue  })=>{
+        const values = value || [];
+        const addValue = (value)=>{
+            const newValues = [
+                ...values.filter((item)=>item !== value),
+                value
+            ];
+            setValue(newValues);
+        };
+        const removeValue = (value)=>{
+            const newValues = values.filter((item)=>item !== value);
+            setValue(newValues);
+        };
+        const invalidValues = getInvalidValues(field, values, options);
+        const mergedOptions = [
+            ...options,
+            ...invalidValues
+        ];
+        return _react.createElement(_f36components.Form, {
+            testId: "checkbox-editor",
+            className: (0, _emotion.cx)(_styles.form, direction === 'rtl' ? _styles.rightToLeft : '')
+        }, mergedOptions.map((item)=>_react.createElement(_f36components.Box, {
+                key: item.id,
+                marginBottom: "spacingS"
+            }, _react.createElement(_f36components.Checkbox, {
+                key: item.id,
+                id: item.id,
+                isChecked: values.includes(item.value),
+                isDisabled: disabled,
+                value: item.value,
+                name: `${field.id}.${field.locale}`,
+                onChange: (e)=>{
+                    if (e.target.checked) {
+                        addValue(item.value);
+                    } else {
+                        removeValue(item.value);
+                    }
+                }
+            }, item.label), item.invalid && _react.createElement(_react.Fragment, null, _react.createElement("span", {
+                "data-test-id": "invalid-text",
+                className: _styles.invalidText
+            }, "(invalid)"), _react.createElement(_f36components.TextLink, {
+                as: "button",
+                className: _styles.removeBtn,
+                onClick: ()=>removeValue(item.value)
+            }, "Remove")))));
+    });
+}
+CheckboxEditor.defaultProps = {
+    isInitiallyDisabled: true
+};

package/dist/cjs/CheckboxEditor.spec.js

@@ -0,0 +1,219 @@
+"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 _CheckboxEditor = require("./CheckboxEditor");
+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('CheckboxEditor', ()=>{
+    afterEach(_react1.cleanup);
+    it('renders a warning if no options are present', ()=>{
+        const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((mock)=>{
+            return {
+                ...mock,
+                items: {
+                    type: '',
+                    validations: []
+                }
+            };
+        });
+        const { getByTestId , queryByTestId  } = (0, _react1.render)(_react.createElement(_CheckboxEditor.CheckboxEditor, {
+            field: field,
+            locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
+            isInitiallyDisabled: false
+        }));
+        expect(getByTestId('predefined-values-warning')).toBeInTheDocument();
+        expect(queryByTestId('dropdown-editor')).not.toBeInTheDocument();
+    });
+    it('renders checkboxes for predefined values', ()=>{
+        const predefined = [
+            'banana',
+            'orange',
+            'strawberry'
+        ];
+        const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((mock)=>{
+            return {
+                ...mock,
+                items: {
+                    type: '',
+                    validations: [
+                        {
+                            in: predefined
+                        }
+                    ]
+                }
+            };
+        });
+        const { container  } = (0, _react1.render)(_react.createElement(_CheckboxEditor.CheckboxEditor, {
+            field: field,
+            locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
+            isInitiallyDisabled: false
+        }));
+        const $inputs = container.querySelectorAll('input[type="checkbox"]');
+        expect($inputs).toHaveLength(3);
+        predefined.forEach((item, index)=>{
+            expect($inputs[index].value).toEqual(item);
+        });
+    });
+    it('calls setValue for every check event and removeValue if all items are unclicked', ()=>{
+        const predefined = [
+            'banana',
+            'orange',
+            'strawberry'
+        ];
+        const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((mock)=>{
+            jest.spyOn(mock, 'setValue');
+            jest.spyOn(mock, 'removeValue');
+            return {
+                ...mock,
+                items: {
+                    type: '',
+                    validations: [
+                        {
+                            in: predefined
+                        }
+                    ]
+                }
+            };
+        });
+        const { container  } = (0, _react1.render)(_react.createElement(_CheckboxEditor.CheckboxEditor, {
+            field: field,
+            locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
+            isInitiallyDisabled: false
+        }));
+        const $inputs = container.querySelectorAll('input[type="checkbox"]');
+        _react1.fireEvent.click($inputs[0]);
+        expect(field.setValue).toHaveBeenCalledWith([
+            predefined[0]
+        ]);
+        expect(field.setValue).toHaveBeenCalledTimes(1);
+        _react1.fireEvent.click($inputs[2]);
+        expect(field.setValue).toHaveBeenCalledWith([
+            predefined[0],
+            predefined[2]
+        ]);
+        expect(field.setValue).toHaveBeenCalledTimes(2);
+        _react1.fireEvent.click($inputs[1]);
+        expect(field.setValue).toHaveBeenCalledWith([
+            predefined[0],
+            predefined[2],
+            predefined[1]
+        ]);
+        expect(field.setValue).toHaveBeenCalledTimes(3);
+        $inputs.forEach(($input)=>{
+            _react1.fireEvent.click($input);
+        });
+        expect(field.removeValue).toHaveBeenCalledTimes(1);
+    });
+    it('renders invalid text and remove link when value set is not in predefined values', ()=>{
+        const predefined = [
+            'banana',
+            'orange',
+            'strawberry'
+        ];
+        const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((mock)=>{
+            jest.spyOn(mock, 'setValue');
+            jest.spyOn(mock, 'removeValue');
+            return {
+                ...mock,
+                items: {
+                    type: '',
+                    validations: [
+                        {
+                            in: predefined
+                        }
+                    ]
+                }
+            };
+        });
+        field.setValue([
+            'mango'
+        ]);
+        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CheckboxEditor.CheckboxEditor, {
+            field: field,
+            locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
+            isInitiallyDisabled: false
+        }));
+        expect(getByTestId('invalid-text')).toBeInTheDocument();
+        expect(getByTestId('cf-ui-text-link')).toBeInTheDocument();
+        _react1.fireEvent.click(getByTestId('cf-ui-text-link'));
+        expect(field.removeValue).toHaveBeenCalledTimes(1);
+    });
+    it('renders checkboxes with unique ids', async ()=>{
+        const predefined = [
+            'banana',
+            'orange',
+            'strawberry'
+        ];
+        const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((mock)=>{
+            return {
+                ...mock,
+                items: {
+                    type: '',
+                    validations: [
+                        {
+                            in: predefined
+                        }
+                    ]
+                }
+            };
+        });
+        const locales = (0, _fieldeditortestutils.createFakeLocalesAPI)();
+        const { findAllByTestId  } = (0, _react1.render)(_react.createElement("div", null, _react.createElement(_CheckboxEditor.CheckboxEditor, {
+            field: field,
+            locales: locales,
+            isInitiallyDisabled: false
+        }), _react.createElement(_CheckboxEditor.CheckboxEditor, {
+            field: field,
+            locales: locales,
+            isInitiallyDisabled: false
+        })));
+        const $labels = await findAllByTestId('cf-ui-checkbox');
+        const uniqueIds = Array.from(new Set($labels.map((label)=>label.getAttribute('for'))));
+        expect(uniqueIds).toHaveLength(6);
+    });
+});

package/dist/cjs/index.js

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

package/dist/cjs/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    form: function() {
+        return form;
+    },
+    rightToLeft: function() {
+        return rightToLeft;
+    },
+    invalidText: function() {
+        return invalidText;
+    },
+    removeBtn: function() {
+        return removeBtn;
+    }
+});
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const form = (0, _emotion.css)({
+    marginTop: _f36tokens.default.spacingS
+});
+const rightToLeft = (0, _emotion.css)({
+    direction: 'rtl'
+});
+const invalidText = (0, _emotion.css)({
+    color: _f36tokens.default.red500,
+    marginLeft: _f36tokens.default.spacing2Xs
+});
+const removeBtn = (0, _emotion.css)({
+    marginLeft: _f36tokens.default.spacingL
+});

package/dist/esm/CheckboxEditor.js

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Checkbox, Box } from '@contentful/f36-components';
+import { TextLink, Form } from '@contentful/f36-components';
+import { FieldConnector, PredefinedValuesError } from '@contentful/field-editor-shared';
+import { cx } from 'emotion';
+import get from 'lodash/get';
+import { nanoid } from 'nanoid';
+import * as styles from './styles';
+function isEmptyListValue(value) {
+    return value === null || value.length === 0;
+}
+function getOptions(field, id) {
+    const validations = get(field, [
+        'items',
+        'validations'
+    ], []);
+    const predefinedValues = validations.filter((validation)=>validation.in).map((validation)=>validation.in);
+    const firstPredefinedValues = predefinedValues.length > 0 ? predefinedValues[0] : [];
+    return firstPredefinedValues.map((value, index)=>({
+            id: [
+                'entity',
+                field.id,
+                field.locale,
+                index,
+                id
+            ].join('.'),
+            value,
+            label: value
+        }));
+}
+const getInvalidValues = (field, values, options)=>{
+    const getValueFromOptions = options.map((item)=>item.value);
+    const invalidValues = values.filter((value)=>!getValueFromOptions.includes(value)).map((value, index)=>({
+            id: [
+                'entity',
+                field.id,
+                field.locale,
+                index,
+                'invalid'
+            ].join('.'),
+            label: value,
+            invalid: true,
+            value
+        }));
+    return invalidValues;
+};
+export function CheckboxEditor(props) {
+    const [id] = useState(()=>nanoid(6));
+    const { field , locales  } = props;
+    const options = getOptions(field, id);
+    const misconfigured = options.length === 0;
+    if (misconfigured) {
+        return React.createElement(PredefinedValuesError, null);
+    }
+    const direction = locales.direction[field.locale] || 'ltr';
+    return React.createElement(FieldConnector, {
+        throttle: 0,
+        isEmptyValue: isEmptyListValue,
+        field: field,
+        isInitiallyDisabled: props.isInitiallyDisabled
+    }, ({ disabled , value , setValue  })=>{
+        const values = value || [];
+        const addValue = (value)=>{
+            const newValues = [
+                ...values.filter((item)=>item !== value),
+                value
+            ];
+            setValue(newValues);
+        };
+        const removeValue = (value)=>{
+            const newValues = values.filter((item)=>item !== value);
+            setValue(newValues);
+        };
+        const invalidValues = getInvalidValues(field, values, options);
+        const mergedOptions = [
+            ...options,
+            ...invalidValues
+        ];
+        return React.createElement(Form, {
+            testId: "checkbox-editor",
+            className: cx(styles.form, direction === 'rtl' ? styles.rightToLeft : '')
+        }, mergedOptions.map((item)=>React.createElement(Box, {
+                key: item.id,
+                marginBottom: "spacingS"
+            }, React.createElement(Checkbox, {
+                key: item.id,
+                id: item.id,
+                isChecked: values.includes(item.value),
+                isDisabled: disabled,
+                value: item.value,
+                name: `${field.id}.${field.locale}`,
+                onChange: (e)=>{
+                    if (e.target.checked) {
+                        addValue(item.value);
+                    } else {
+                        removeValue(item.value);
+                    }
+                }
+            }, item.label), item.invalid && React.createElement(React.Fragment, null, React.createElement("span", {
+                "data-test-id": "invalid-text",
+                className: styles.invalidText
+            }, "(invalid)"), React.createElement(TextLink, {
+                as: "button",
+                className: styles.removeBtn,
+                onClick: ()=>removeValue(item.value)
+            }, "Remove")))));
+    });
+}
+CheckboxEditor.defaultProps = {
+    isInitiallyDisabled: true
+};