@contentful/field-editor-date 1.4.0 → 1.5.0

package/dist/cjs/DateEditor.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DateEditor", {
+    enumerable: true,
+    get: function() {
+        return DateEditor;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _emotion = require("emotion");
+const _DatepickerInput = require("./DatepickerInput");
+const _TimepickerInput = require("./TimepickerInput");
+const _TimezonePickerInput = require("./TimezonePickerInput");
+const _date = require("./utils/date");
+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 = {
+    root: (0, _emotion.css)({
+        display: 'flex',
+        alignItems: 'center'
+    }),
+    separator: (0, _emotion.css)({
+        marginLeft: _f36tokens.default.spacingM
+    })
+};
+function useEffectWithoutFirstRender(callback, deps) {
+    const isFirstRun = _react.useRef(true);
+    _react.useEffect(()=>{
+        if (isFirstRun.current) {
+            isFirstRun.current = false;
+            return;
+        }
+        callback();
+    }, deps);
+}
+function DateEditorContainer({ initialValue , usesTime , usesTimezone , uses12hClock , disabled , hasClear , onChange  }) {
+    const [value, setValue] = _react.useState(()=>initialValue);
+    useEffectWithoutFirstRender(()=>{
+        onChange(value);
+    }, [
+        value
+    ]);
+    return _react.createElement("div", {
+        "data-test-id": "date-editor",
+        className: styles.root
+    }, _react.createElement(_DatepickerInput.DatepickerInput, {
+        disabled: disabled,
+        value: value.date,
+        onChange: (date)=>{
+            setValue((value)=>({
+                    ...value,
+                    date
+                }));
+        }
+    }), usesTime && _react.createElement(_react.Fragment, null, _react.createElement("div", {
+        className: styles.separator
+    }), _react.createElement(_TimepickerInput.TimepickerInput, {
+        disabled: disabled,
+        time: value.time,
+        ampm: value.ampm,
+        onChange: ({ time , ampm  })=>{
+            setValue((value)=>({
+                    ...value,
+                    time,
+                    ampm
+                }));
+        },
+        uses12hClock: uses12hClock
+    })), usesTimezone && _react.createElement(_react.Fragment, null, _react.createElement("div", {
+        className: styles.separator
+    }), _react.createElement(_TimezonePickerInput.TimezonepickerInput, {
+        disabled: disabled,
+        value: value.utcOffset,
+        onChange: (utcOffset)=>{
+            setValue((value)=>({
+                    ...value,
+                    utcOffset
+                }));
+        }
+    })), hasClear && _react.createElement(_react.Fragment, null, _react.createElement("div", {
+        className: styles.separator
+    }), _react.createElement(_f36components.TextLink, {
+        as: "button",
+        isDisabled: disabled,
+        testId: "date-clear",
+        onClick: ()=>{
+            setValue({
+                date: undefined,
+                time: undefined,
+                ampm: (0, _date.getDefaultAMPM)(),
+                utcOffset: (0, _date.getDefaultUtcOffset)()
+            });
+        }
+    }, "Clear")));
+}
+function DateEditor(props) {
+    const { field , parameters  } = props;
+    const formatParam = parameters?.instance?.format ?? 'timeZ';
+    const ampmParam = parameters?.instance?.ampm ?? '24';
+    const usesTime = formatParam !== 'dateonly';
+    const usesTimezone = formatParam === 'timeZ';
+    const uses12hClock = ampmParam === '12';
+    return _react.createElement(_fieldeditorshared.FieldConnector, {
+        field: field,
+        isInitiallyDisabled: props.isInitiallyDisabled,
+        isDisabled: props.isDisabled,
+        throttle: 0
+    }, ({ value , disabled , setValue , externalReset  })=>{
+        const datetimeValue = (0, _date.userInputFromDatetime)({
+            value,
+            uses12hClock
+        });
+        return _react.createElement(DateEditorContainer, {
+            initialValue: datetimeValue,
+            uses12hClock: uses12hClock,
+            usesTimezone: usesTimezone,
+            usesTime: usesTime,
+            disabled: disabled,
+            hasClear: Boolean(value),
+            onChange: (data)=>{
+                const fieldValue = (0, _date.buildFieldValue)({
+                    data,
+                    usesTime,
+                    usesTimezone
+                });
+                if (fieldValue.invalid) {
+                    return;
+                }
+                if (Boolean(value) || !value && Boolean(fieldValue.valid)) {
+                    setValue(fieldValue.valid);
+                }
+            },
+            key: `date-container-${externalReset}`
+        });
+    });
+}
+DateEditor.defaultProps = {
+    isInitiallyDisabled: true
+};

package/dist/cjs/DatepickerInput.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DatepickerInput", {
+    enumerable: true,
+    get: function() {
+        return DatepickerInput;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _emotion = require("emotion");
+const _moment = _interop_require_default(require("moment"));
+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 YEAR_RANGE = 100;
+const styles = {
+    root: (0, _emotion.css)({
+        maxWidth: '270px'
+    })
+};
+const DatepickerInput = (props)=>{
+    const [fromDate, toDate] = (0, _react.useMemo)(()=>{
+        const fromDate = new Date();
+        fromDate.setFullYear(fromDate.getFullYear() - YEAR_RANGE);
+        const toDate = new Date();
+        toDate.setFullYear(toDate.getFullYear() + YEAR_RANGE);
+        return [
+            fromDate,
+            toDate
+        ];
+    }, []);
+    const dateObj = props.value?.toObject();
+    const selectedDate = dateObj ? new Date(dateObj.years, dateObj.months, dateObj.date) : undefined;
+    return _react.default.createElement(_f36components.Datepicker, {
+        className: styles.root,
+        selected: selectedDate,
+        onSelect: (day)=>{
+            const momentDay = day ? (0, _moment.default)(day) : undefined;
+            props.onChange(momentDay);
+        },
+        inputProps: {
+            isDisabled: props.disabled,
+            placeholder: ''
+        },
+        fromDate: fromDate,
+        toDate: toDate
+    });
+};

package/dist/cjs/DatepickerInput.spec.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = _interop_require_wildcard(require("react"));
+require("@testing-library/jest-dom/extend-expect");
+const _react1 = require("@testing-library/react");
+const _timezoneddate = _interop_require_default(require("timezoned-date"));
+const _DatepickerInput = require("./DatepickerInput");
+const _date = require("./utils/date");
+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;
+}
+(0, _react1.configure)({
+    testIdAttribute: 'data-test-id'
+});
+let originalDate;
+beforeEach(()=>{
+    originalDate = global.Date;
+});
+afterEach(()=>{
+    global.Date = originalDate;
+});
+const renderDatepicker = (dateString)=>{
+    const { date  } = (0, _date.userInputFromDatetime)({
+        value: dateString,
+        uses12hClock: false
+    });
+    return (0, _react1.render)(_react.createElement(_DatepickerInput.DatepickerInput, {
+        value: date,
+        onChange: jest.fn()
+    }));
+};
+describe('Date: DatepickerInput', function() {
+    describe('renders correct date, when the system UTC offset is +02:00 and the one in the props.value is', ()=>{
+        it('+04:00', async ()=>{
+            global.Date = _timezoneddate.default.makeConstructor(120);
+            renderDatepicker('2022-09-22T00:00+04:00');
+            expect(_react1.screen.getByTestId('cf-ui-datepicker-input')).toHaveValue('22 Sep 2022');
+        });
+        it('+10:00', async ()=>{
+            global.Date = _timezoneddate.default.makeConstructor(120);
+            renderDatepicker('2022-09-22T00:00+10:00');
+            expect(_react1.screen.getByTestId('cf-ui-datepicker-input')).toHaveValue('22 Sep 2022');
+        });
+        it('-08:00', async ()=>{
+            global.Date = _timezoneddate.default.makeConstructor(120);
+            renderDatepicker('2022-09-22T00:00-08:00');
+            expect(_react1.screen.getByTestId('cf-ui-datepicker-input')).toHaveValue('22 Sep 2022');
+        });
+    });
+    describe('renders correct date, when the system UTC offset is -06:00 and the one in the props.value is', ()=>{
+        it('+02:00', async ()=>{
+            global.Date = _timezoneddate.default.makeConstructor(-360);
+            renderDatepicker('2022-09-22T00:00+02:00');
+            expect(_react1.screen.getByTestId('cf-ui-datepicker-input')).toHaveValue('22 Sep 2022');
+        });
+        it('+10:00', async ()=>{
+            global.Date = _timezoneddate.default.makeConstructor(-360);
+            renderDatepicker('2022-09-22T00:00+10:00');
+            expect(_react1.screen.getByTestId('cf-ui-datepicker-input')).toHaveValue('22 Sep 2022');
+        });
+        it('-08:00', async ()=>{
+            global.Date = _timezoneddate.default.makeConstructor(-360);
+            renderDatepicker('2022-09-22T00:00-08:00');
+            expect(_react1.screen.getByTestId('cf-ui-datepicker-input')).toHaveValue('22 Sep 2022');
+        });
+    });
+});

package/dist/cjs/TimepickerInput.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TimepickerInput", {
+    enumerable: true,
+    get: function() {
+        return TimepickerInput;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _emotion = require("emotion");
+const _moment = _interop_require_default(require("moment"));
+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 validInputFormats = [
+    'hh:mm a',
+    'hh:mm A',
+    'h:mm a',
+    'h:mm A',
+    'hh:mm',
+    'k:mm',
+    'kk:mm',
+    'h a',
+    'h A',
+    'h',
+    'hh',
+    'HH'
+];
+function parseRawInput(raw) {
+    let time = null;
+    for(let i = 0; i < validInputFormats.length; i++){
+        const date = (0, _moment.default)(raw, validInputFormats[i]);
+        if (date.isValid()) {
+            time = date;
+            break;
+        }
+    }
+    return time;
+}
+const getDefaultTime = ()=>{
+    return (0, _moment.default)(`12:00 AM`, 'hh:mm A');
+};
+const formatToString = (uses12hClock, value)=>{
+    return uses12hClock ? value.format('hh:mm A') : value.format('HH:mm');
+};
+const TimepickerInput = ({ disabled , uses12hClock , time ='12:00' , ampm ='AM' , onChange  })=>{
+    const [selectedTime, setSelectedTime] = (0, _react.useState)(()=>{
+        return formatToString(uses12hClock, getDefaultTime());
+    });
+    (0, _react.useEffect)(()=>{
+        setSelectedTime(formatToString(uses12hClock, (0, _moment.default)(`${time} ${ampm}`, 'hh:mm A')));
+    }, [
+        time,
+        ampm,
+        uses12hClock
+    ]);
+    const handleChange = (0, _react.useCallback)((e)=>{
+        setSelectedTime(e.currentTarget.value);
+    }, []);
+    const handleFocus = (0, _react.useCallback)((e)=>{
+        e.preventDefault();
+        e.target.select();
+    }, []);
+    const handleBlur = ()=>{
+        const parsedTime = parseRawInput(selectedTime);
+        const value = parsedTime ?? getDefaultTime();
+        setSelectedTime(formatToString(uses12hClock, value));
+        onChange({
+            time: value.format('hh:mm'),
+            ampm: value.format('A')
+        });
+    };
+    return _react.default.createElement(_f36components.Flex, {
+        className: (0, _emotion.css)({
+            width: '145px'
+        })
+    }, _react.default.createElement(_f36components.TextInput, {
+        "aria-label": "Select time",
+        placeholder: uses12hClock ? '12:00 AM' : '00:00',
+        "date-time-type": uses12hClock ? '12' : '24',
+        testId: "time-input",
+        value: selectedTime,
+        isDisabled: disabled,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onChange: handleChange
+    }));
+};

package/dist/cjs/TimezonePickerInput.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TimezonepickerInput", {
+    enumerable: true,
+    get: function() {
+        return TimezonepickerInput;
+    }
+});
+const _react = _interop_require_default(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _zoneOffsets = require("./utils/zoneOffsets");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const TimezonepickerInput = ({ disabled , onChange , value =_zoneOffsets.defaultZoneOffset  })=>{
+    return _react.default.createElement(_f36components.Select, {
+        "aria-label": "Select timezone",
+        testId: "timezone-input",
+        value: value,
+        isDisabled: disabled,
+        onChange: (e)=>{
+            onChange(e.currentTarget.value);
+        }
+    }, _zoneOffsets.zoneOffsets.map((offset)=>_react.default.createElement(_f36components.Select.Option, {
+            key: offset,
+            value: offset
+        }, "UTC", offset)));
+};

package/dist/cjs/index.js

@@ -0,0 +1,20 @@
+"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, {
+    DateEditor: function() {
+        return _DateEditor.DateEditor;
+    },
+    zoneOffsets: function() {
+        return _zoneOffsets.zoneOffsets;
+    }
+});
+const _DateEditor = require("./DateEditor");
+const _zoneOffsets = require("./utils/zoneOffsets");

package/dist/cjs/types.js

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

package/dist/cjs/utils/data.spec.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _moment = _interop_require_default(require("moment"));
+const _date = require("./date");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('date utils', ()=>{
+    describe('buildFieldValue', ()=>{
+        it('should work properly', ()=>{
+            expect((0, _date.buildFieldValue)({
+                data: {
+                    date: (0, _moment.default)('2018-02-02'),
+                    time: '05:00',
+                    ampm: 'PM',
+                    utcOffset: '+03:00'
+                },
+                usesTimezone: true,
+                usesTime: true
+            })).toEqual({
+                invalid: false,
+                valid: '2018-02-02T17:00+03:00'
+            });
+            expect((0, _date.buildFieldValue)({
+                data: {
+                    date: (0, _moment.default)('2015-01-14'),
+                    time: '05:00',
+                    ampm: 'AM',
+                    utcOffset: '-05:00'
+                },
+                usesTimezone: true,
+                usesTime: true
+            })).toEqual({
+                invalid: false,
+                valid: '2015-01-14T05:00-05:00'
+            });
+            expect((0, _date.buildFieldValue)({
+                data: {
+                    date: (0, _moment.default)('2015-01-14'),
+                    time: '17:00',
+                    ampm: 'PM',
+                    utcOffset: '-05:00'
+                },
+                usesTimezone: true,
+                usesTime: true
+            })).toEqual({
+                invalid: false,
+                valid: '2015-01-14T17:00-05:00'
+            });
+        });
+    });
+});