@contentful/field-editor-date 1.4.0 → 1.5.1

package/dist/cjs/utils/date.js

@@ -0,0 +1,116 @@
+"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, {
+    buildFieldValue: function() {
+        return buildFieldValue;
+    },
+    getDefaultAMPM: function() {
+        return getDefaultAMPM;
+    },
+    getDefaultUtcOffset: function() {
+        return getDefaultUtcOffset;
+    },
+    userInputFromDatetime: function() {
+        return userInputFromDatetime;
+    }
+});
+const _moment = _interop_require_default(require("moment"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ZONE_RX = /(Z|[+-]\d{2}[:+]?\d{2})$/;
+function startOfToday(format) {
+    return (0, _moment.default)().set({
+        hours: 0,
+        minutes: 0
+    }).format(format);
+}
+function fieldValueToMoment(datetimeString) {
+    if (!datetimeString) {
+        return null;
+    }
+    const datetime = (0, _moment.default)(datetimeString);
+    if (ZONE_RX.test(datetimeString)) {
+        datetime.utcOffset(datetimeString);
+    }
+    return datetime;
+}
+function timeFromUserInput(input) {
+    const timeInput = input.time || '00:00';
+    return _moment.default.utc(timeInput + '!' + input.ampm, 'HH:mm!A');
+}
+function datetimeFromUserInput(input) {
+    if (!input.date) {
+        return {
+            valid: null
+        };
+    }
+    const time = timeFromUserInput(input);
+    const date = _moment.default.parseZone(input.utcOffset, 'Z').set(input.date.toObject()).set({
+        hours: time.hours(),
+        minutes: time.minutes()
+    });
+    if (date.isValid()) {
+        return {
+            valid: date
+        };
+    } else {
+        return {
+            invalid: true,
+            valid: null
+        };
+    }
+}
+function buildFieldValue({ data , usesTime , usesTimezone  }) {
+    const date = datetimeFromUserInput(data);
+    if (date.invalid) {
+        return {
+            invalid: true
+        };
+    }
+    let format;
+    if (usesTimezone) {
+        format = 'YYYY-MM-DDTHH:mmZ';
+    } else if (usesTime) {
+        format = 'YYYY-MM-DDTHH:mm';
+    } else {
+        format = 'YYYY-MM-DD';
+    }
+    return {
+        valid: date?.valid ? date.valid.format(format) : null,
+        invalid: false
+    };
+}
+function getDefaultAMPM() {
+    return 'AM';
+}
+function getDefaultUtcOffset() {
+    return startOfToday('Z');
+}
+function userInputFromDatetime({ value , uses12hClock  }) {
+    const datetime = fieldValueToMoment(value);
+    if (datetime) {
+        const timeFormat = uses12hClock ? 'hh:mm' : 'HH:mm';
+        return {
+            date: datetime,
+            time: datetime.format(timeFormat),
+            ampm: datetime.format('A'),
+            utcOffset: datetime.format('Z')
+        };
+    } else {
+        return {
+            ampm: getDefaultAMPM(),
+            utcOffset: getDefaultUtcOffset()
+        };
+    }
+}

package/dist/cjs/utils/zoneOffsets.js

@@ -0,0 +1,61 @@
+"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, {
+    defaultZoneOffset: function() {
+        return defaultZoneOffset;
+    },
+    zoneOffsets: function() {
+        return zoneOffsets;
+    }
+});
+const defaultZoneOffset = '+00:00';
+const zoneOffsets = [
+    '-12:00',
+    '-11:00',
+    '-10:00',
+    '-09:30',
+    '-09:00',
+    '-08:00',
+    '-07:00',
+    '-06:00',
+    '-05:00',
+    '-04:30',
+    '-04:00',
+    '-03:30',
+    '-03:00',
+    '-02:00',
+    '-01:00',
+    '+00:00',
+    '+01:00',
+    '+02:00',
+    '+03:00',
+    '+03:30',
+    '+04:00',
+    '+04:30',
+    '+05:00',
+    '+05:30',
+    '+05:45',
+    '+06:00',
+    '+06:30',
+    '+07:00',
+    '+08:00',
+    '+08:45',
+    '+09:00',
+    '+09:30',
+    '+10:00',
+    '+10:30',
+    '+11:00',
+    '+11:30',
+    '+12:00',
+    '+12:45',
+    '+13:00',
+    '+14:00'
+];

package/dist/esm/DateEditor.js

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { TextLink } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { FieldConnector } from '@contentful/field-editor-shared';
+import { css } from 'emotion';
+import { DatepickerInput } from './DatepickerInput';
+import { TimepickerInput } from './TimepickerInput';
+import { TimezonepickerInput } from './TimezonePickerInput';
+import { userInputFromDatetime, buildFieldValue, getDefaultAMPM, getDefaultUtcOffset } from './utils/date';
+const styles = {
+    root: css({
+        display: 'flex',
+        alignItems: 'center'
+    }),
+    separator: css({
+        marginLeft: tokens.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, {
+        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, {
+        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, {
+        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(TextLink, {
+        as: "button",
+        isDisabled: disabled,
+        testId: "date-clear",
+        onClick: ()=>{
+            setValue({
+                date: undefined,
+                time: undefined,
+                ampm: getDefaultAMPM(),
+                utcOffset: getDefaultUtcOffset()
+            });
+        }
+    }, "Clear")));
+}
+export 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(FieldConnector, {
+        field: field,
+        isInitiallyDisabled: props.isInitiallyDisabled,
+        isDisabled: props.isDisabled,
+        throttle: 0
+    }, ({ value , disabled , setValue , externalReset  })=>{
+        const datetimeValue = userInputFromDatetime({
+            value,
+            uses12hClock
+        });
+        return React.createElement(DateEditorContainer, {
+            initialValue: datetimeValue,
+            uses12hClock: uses12hClock,
+            usesTimezone: usesTimezone,
+            usesTime: usesTime,
+            disabled: disabled,
+            hasClear: Boolean(value),
+            onChange: (data)=>{
+                const fieldValue = 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/esm/DatepickerInput.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { Datepicker } from '@contentful/f36-components';
+import { css } from 'emotion';
+import moment from 'moment';
+const YEAR_RANGE = 100;
+const styles = {
+    root: css({
+        maxWidth: '270px'
+    })
+};
+export const DatepickerInput = (props)=>{
+    const [fromDate, toDate] = 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.createElement(Datepicker, {
+        className: styles.root,
+        selected: selectedDate,
+        onSelect: (day)=>{
+            const momentDay = day ? moment(day) : undefined;
+            props.onChange(momentDay);
+        },
+        inputProps: {
+            isDisabled: props.disabled,
+            placeholder: ''
+        },
+        fromDate: fromDate,
+        toDate: toDate
+    });
+};

package/dist/esm/DatepickerInput.spec.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { configure, render, screen } from '@testing-library/react';
+import timezonedDate from 'timezoned-date';
+import { DatepickerInput } from './DatepickerInput';
+import { userInputFromDatetime } from './utils/date';
+configure({
+    testIdAttribute: 'data-test-id'
+});
+let originalDate;
+beforeEach(()=>{
+    originalDate = global.Date;
+});
+afterEach(()=>{
+    global.Date = originalDate;
+});
+const renderDatepicker = (dateString)=>{
+    const { date  } = userInputFromDatetime({
+        value: dateString,
+        uses12hClock: false
+    });
+    return render(React.createElement(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.makeConstructor(120);
+            renderDatepicker('2022-09-22T00:00+04:00');
+            expect(screen.getByTestId('cf-ui-datepicker-input')).toHaveValue('22 Sep 2022');
+        });
+        it('+10:00', async ()=>{
+            global.Date = timezonedDate.makeConstructor(120);
+            renderDatepicker('2022-09-22T00:00+10:00');
+            expect(screen.getByTestId('cf-ui-datepicker-input')).toHaveValue('22 Sep 2022');
+        });
+        it('-08:00', async ()=>{
+            global.Date = timezonedDate.makeConstructor(120);
+            renderDatepicker('2022-09-22T00:00-08:00');
+            expect(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.makeConstructor(-360);
+            renderDatepicker('2022-09-22T00:00+02:00');
+            expect(screen.getByTestId('cf-ui-datepicker-input')).toHaveValue('22 Sep 2022');
+        });
+        it('+10:00', async ()=>{
+            global.Date = timezonedDate.makeConstructor(-360);
+            renderDatepicker('2022-09-22T00:00+10:00');
+            expect(screen.getByTestId('cf-ui-datepicker-input')).toHaveValue('22 Sep 2022');
+        });
+        it('-08:00', async ()=>{
+            global.Date = timezonedDate.makeConstructor(-360);
+            renderDatepicker('2022-09-22T00:00-08:00');
+            expect(screen.getByTestId('cf-ui-datepicker-input')).toHaveValue('22 Sep 2022');
+        });
+    });
+});

package/dist/esm/TimepickerInput.js

@@ -0,0 +1,78 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { TextInput, Flex } from '@contentful/f36-components';
+import { css } from 'emotion';
+import moment from 'moment';
+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 = moment(raw, validInputFormats[i]);
+        if (date.isValid()) {
+            time = date;
+            break;
+        }
+    }
+    return time;
+}
+const getDefaultTime = ()=>{
+    return moment(`12:00 AM`, 'hh:mm A');
+};
+const formatToString = (uses12hClock, value)=>{
+    return uses12hClock ? value.format('hh:mm A') : value.format('HH:mm');
+};
+export const TimepickerInput = ({ disabled , uses12hClock , time ='12:00' , ampm ='AM' , onChange  })=>{
+    const [selectedTime, setSelectedTime] = useState(()=>{
+        return formatToString(uses12hClock, getDefaultTime());
+    });
+    useEffect(()=>{
+        setSelectedTime(formatToString(uses12hClock, moment(`${time} ${ampm}`, 'hh:mm A')));
+    }, [
+        time,
+        ampm,
+        uses12hClock
+    ]);
+    const handleChange = useCallback((e)=>{
+        setSelectedTime(e.currentTarget.value);
+    }, []);
+    const handleFocus = 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.createElement(Flex, {
+        className: css({
+            width: '145px'
+        })
+    }, React.createElement(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/esm/TimezonePickerInput.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Select } from '@contentful/f36-components';
+import { zoneOffsets, defaultZoneOffset } from './utils/zoneOffsets';
+export const TimezonepickerInput = ({ disabled , onChange , value =defaultZoneOffset  })=>{
+    return React.createElement(Select, {
+        "aria-label": "Select timezone",
+        testId: "timezone-input",
+        value: value,
+        isDisabled: disabled,
+        onChange: (e)=>{
+            onChange(e.currentTarget.value);
+        }
+    }, zoneOffsets.map((offset)=>React.createElement(Select.Option, {
+            key: offset,
+            value: offset
+        }, "UTC", offset)));
+};

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { DateEditor } from './DateEditor';
+export { zoneOffsets } from './utils/zoneOffsets';

package/dist/esm/types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1,47 @@
+import moment from 'moment';
+import { buildFieldValue } from './date';
+describe('date utils', ()=>{
+    describe('buildFieldValue', ()=>{
+        it('should work properly', ()=>{
+            expect(buildFieldValue({
+                data: {
+                    date: moment('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(buildFieldValue({
+                data: {
+                    date: moment('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(buildFieldValue({
+                data: {
+                    date: moment('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'
+            });
+        });
+    });
+});

package/dist/esm/utils/date.js

@@ -0,0 +1,87 @@
+import moment from 'moment';
+const ZONE_RX = /(Z|[+-]\d{2}[:+]?\d{2})$/;
+function startOfToday(format) {
+    return moment().set({
+        hours: 0,
+        minutes: 0
+    }).format(format);
+}
+function fieldValueToMoment(datetimeString) {
+    if (!datetimeString) {
+        return null;
+    }
+    const datetime = moment(datetimeString);
+    if (ZONE_RX.test(datetimeString)) {
+        datetime.utcOffset(datetimeString);
+    }
+    return datetime;
+}
+function timeFromUserInput(input) {
+    const timeInput = input.time || '00:00';
+    return moment.utc(timeInput + '!' + input.ampm, 'HH:mm!A');
+}
+function datetimeFromUserInput(input) {
+    if (!input.date) {
+        return {
+            valid: null
+        };
+    }
+    const time = timeFromUserInput(input);
+    const date = moment.parseZone(input.utcOffset, 'Z').set(input.date.toObject()).set({
+        hours: time.hours(),
+        minutes: time.minutes()
+    });
+    if (date.isValid()) {
+        return {
+            valid: date
+        };
+    } else {
+        return {
+            invalid: true,
+            valid: null
+        };
+    }
+}
+export function buildFieldValue({ data , usesTime , usesTimezone  }) {
+    const date = datetimeFromUserInput(data);
+    if (date.invalid) {
+        return {
+            invalid: true
+        };
+    }
+    let format;
+    if (usesTimezone) {
+        format = 'YYYY-MM-DDTHH:mmZ';
+    } else if (usesTime) {
+        format = 'YYYY-MM-DDTHH:mm';
+    } else {
+        format = 'YYYY-MM-DD';
+    }
+    return {
+        valid: date?.valid ? date.valid.format(format) : null,
+        invalid: false
+    };
+}
+export function getDefaultAMPM() {
+    return 'AM';
+}
+export function getDefaultUtcOffset() {
+    return startOfToday('Z');
+}
+export function userInputFromDatetime({ value , uses12hClock  }) {
+    const datetime = fieldValueToMoment(value);
+    if (datetime) {
+        const timeFormat = uses12hClock ? 'hh:mm' : 'HH:mm';
+        return {
+            date: datetime,
+            time: datetime.format(timeFormat),
+            ampm: datetime.format('A'),
+            utcOffset: datetime.format('Z')
+        };
+    } else {
+        return {
+            ampm: getDefaultAMPM(),
+            utcOffset: getDefaultUtcOffset()
+        };
+    }
+}

package/dist/esm/utils/zoneOffsets.js

@@ -0,0 +1,43 @@
+export const defaultZoneOffset = '+00:00';
+export const zoneOffsets = [
+    '-12:00',
+    '-11:00',
+    '-10:00',
+    '-09:30',
+    '-09:00',
+    '-08:00',
+    '-07:00',
+    '-06:00',
+    '-05:00',
+    '-04:30',
+    '-04:00',
+    '-03:30',
+    '-03:00',
+    '-02:00',
+    '-01:00',
+    '+00:00',
+    '+01:00',
+    '+02:00',
+    '+03:00',
+    '+03:30',
+    '+04:00',
+    '+04:30',
+    '+05:00',
+    '+05:30',
+    '+05:45',
+    '+06:00',
+    '+06:30',
+    '+07:00',
+    '+08:00',
+    '+08:45',
+    '+09:00',
+    '+09:30',
+    '+10:00',
+    '+10:30',
+    '+11:00',
+    '+11:30',
+    '+12:00',
+    '+12:45',
+    '+13:00',
+    '+14:00'
+];