diginet-core-ui 1.4.39 → 1.4.40

package/src/components/form-control/calendar/index.js

@@ -0,0 +1,413 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, date as moment } from 'utils';
+import {
+    generateCalendarCSS,
+    isAfterLimit,
+    isBeforeLimit,
+    isValidDate,
+    onUpdateCalendar,
+    renderHeader,
+    renderNavigator,
+} from './function';
+
+const Calendar = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Calendar' });
+        const {
+            actions,
+            className,
+            defaultValue,
+            displayAnotherMonth,
+            max,
+            min,
+            minZoom,
+            maxZoom,
+            onClick,
+            value,
+            ...other
+        } = props;
+
+        const unique = {
+            container: 'DGN-UI-Calendar',
+            icon: 'DGN-UI-Calendar-Icon',
+            navigator: {
+                navigator: 'DGN-UI-Calendar-Navigator',
+                around: 'DGN-UI-Calendar-Navigator-Around',
+                center: 'DGN-UI-Calendar-Navigator-Center',
+            },
+            table: {
+                container: 'DGN-UI-Calendar-Table-Container',
+                table: 'DGN-UI-Calendar-Table-Table',
+                header: 'DGN-UI-Calendar-Table-Header',
+                raw: 'DGN-UI-Calendar-Table-Raw',
+                data: 'DGN-UI-Calendar-Table-Data',
+            },
+            day: {
+                day: 'DGN-UI-Calendar-Day',
+                week: 'DGN-UI-Calendar-Week',
+                today: 'DGN-UI-Calendar-Day-today',
+                active: 'DGN-UI-Calendar-Day-active',
+                limit: 'DGN-UI-Calendar-Day-limit',
+            },
+            year: {
+                year: 'DGN-UI-Calendar-Year',
+                thisyear: 'DGN-UI-Calendar-This-Year',
+                active: 'DGN-UI-Calendar-Year-active',
+            },
+        };
+
+        /**
+         * START REFERENCE
+         */
+        const ref = useRef(null);
+        const tableRef = useRef(null);
+        const activeValue = useRef(null);
+        const navigatorValue = useRef(null);
+
+        const [, setActiveValue] = useState(Date.now());
+        const [, setNavigatorValue] = useState(Date.now());
+        const zoomLevel = new Map([
+            ['day', 0],
+            ['month', 1],
+            ['quarter', 2],
+            ['year', 3],
+            ['decade', 4],
+        ]);
+        const maxZoomLevel = zoomLevel.get(`${maxZoom}`) ?? 3;
+        const minZoomLevel = zoomLevel.get(`${minZoom}`) ?? 0;
+        const [currentZoomLevel, setCurrentZoomLevel] = useState(minZoomLevel);
+        const isZoomInAble = currentZoomLevel > minZoomLevel;
+        const isZoomOutAble = currentZoomLevel < maxZoomLevel;
+        const navigatorRefs = {
+            doubleLeft: useRef(null),
+            doubleRight: useRef(null),
+            left: useRef(null),
+            right: useRef(null),
+            content: useRef(null),
+        };
+        const firstDayOfMax = new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
+        const firstDayOfMin = new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+        /**
+         * END REFERENCE
+         */
+
+        /**
+         * START FUNCTION
+         */
+        const onUpdateNavigatorValue = useCallback(
+            value => {
+                navigatorValue.current = value;
+                setNavigatorValue();
+            },
+            [navigatorValue]
+        );
+        const onUpdateActiveValue = useCallback(
+            value => {
+                activeValue.current = value;
+                setActiveValue();
+            },
+            [activeValue]
+        );
+        const onUpdate = value => {
+            const newValue = new Date(value).setHours(0, 0, 0, 0);
+            onUpdateActiveValue(newValue);
+            onUpdateCalendar(
+                newValue,
+                navigatorRefs,
+                min,
+                max,
+                tableRef.current,
+                activeValue.current,
+                unique,
+                displayAnotherMonth,
+                isZoomInAble ? zoomIn : onDayClick,
+                onUpdateNavigatorValue,
+                currentZoomLevel
+            );
+        };
+        const getCurrentTime = () => {
+            const time = new Date(navigatorValue.current);
+            return [time.getDate(), time.getMonth(), time.getFullYear()];
+        };
+        const zoomOut = () => {
+            if (isZoomOutAble) {
+                let zoomOutLevel = currentZoomLevel + 1;
+                if (zoomOutLevel === 2 && minZoom !== 'quarter') zoomOutLevel++; // skip quarter
+                onUpdate(navigatorValue.current);
+                setCurrentZoomLevel(zoomOutLevel);
+                return;
+            }
+        };
+        const zoomIn = e => {
+            if (isZoomInAble) {
+                const node = e.currentTarget;
+                const timeStamp = Number(node.dataset.time);
+                const objNewDate = new Date(timeStamp);
+                activeValue.current = objNewDate;
+                let zoomInLevel = currentZoomLevel - 1;
+                if (zoomInLevel === 2 && minZoom !== 'quarter') zoomInLevel--; // skip quarter
+                setCurrentZoomLevel(zoomInLevel);
+            }
+            return;
+        };
+        const onDayClick = e => {
+            const node = e.currentTarget;
+            tableRef.current.querySelectorAll(`td.${unique.day.active}`).forEach(element => {
+                element.classList.remove(unique.day.active);
+            });
+            node.classList.add(unique.day.active);
+            const timeStamp = Number(node.dataset.time);
+            const objNewDate = new Date(timeStamp);
+            const _navigatorValue = new Date(navigatorValue.current);
+            const objNewDateMonth = objNewDate.getMonth() + 1;
+            const objNewDateYear = objNewDate.getFullYear();
+            const navigatorMonth = _navigatorValue.getMonth() + 1;
+            const navigatorYear = _navigatorValue.getFullYear();
+            onUpdateActiveValue(objNewDate);
+            if (objNewDateMonth > navigatorMonth || objNewDateYear > navigatorYear) setNextMonth(e);
+            else if (objNewDateMonth < navigatorMonth || objNewDateYear < navigatorYear) setPrevMonth(e);
+            !!onClick && onClick({ value: objNewDate });
+        };
+        const setPrevYear = e => {
+            const time = new Date(getCurrentTime()[2] - 1, getCurrentTime()[1]);
+            if (min && isValidDate(min) && moment(time).diff(firstDayOfMin) < 0) {
+                e.preventDefault();
+            } else {
+                onUpdateCalendar(
+                    time,
+                    navigatorRefs,
+                    min,
+                    max,
+                    tableRef.current,
+                    activeValue.current,
+                    unique,
+                    displayAnotherMonth,
+                    isZoomInAble ? zoomIn : onDayClick,
+                    onUpdateNavigatorValue,
+                    currentZoomLevel
+                );
+            }
+        };
+        const setNextYear = e => {
+            const time = new Date(getCurrentTime()[2] + 1, getCurrentTime()[1]);
+            if (max && isValidDate(max) && moment(time).diff(firstDayOfMax) > 0) {
+                e.preventDefault();
+            } else {
+                onUpdateCalendar(
+                    time,
+                    navigatorRefs,
+                    min,
+                    max,
+                    tableRef.current,
+                    activeValue.current,
+                    unique,
+                    displayAnotherMonth,
+                    isZoomInAble ? zoomIn : onDayClick,
+                    onUpdateNavigatorValue,
+                    currentZoomLevel
+                );
+            }
+        };
+        const setPrevMonth = e => {
+            let time = null;
+            switch (currentZoomLevel) {
+                case 1:
+                case 2:
+                    time = new Date(getCurrentTime()[2] - 1, getCurrentTime()[1]); // set year = current year - 1
+                    break;
+                case 3:
+                    time = new Date(getCurrentTime()[2] - 10, getCurrentTime()[1]); // set year = current year - 10
+                    break;
+                case 4:
+                    time = new Date(getCurrentTime()[2] - 100, getCurrentTime()[1]); // set year = current year - 100
+                    break;
+                default:
+                    time = new Date(getCurrentTime()[2], getCurrentTime()[1] - 1); // set month = current month - 1
+                    break;
+            }
+            if (min && isValidDate(min) && moment(time).diff(firstDayOfMin) < 0) {
+                e.preventDefault();
+            } else {
+                onUpdateCalendar(
+                    time,
+                    navigatorRefs,
+                    min,
+                    max,
+                    tableRef.current,
+                    activeValue.current,
+                    unique,
+                    displayAnotherMonth,
+                    isZoomInAble ? zoomIn : onDayClick,
+                    onUpdateNavigatorValue,
+                    currentZoomLevel
+                );
+            }
+        };
+        const setNextMonth = e => {
+            let time = null;
+            switch (currentZoomLevel) {
+                case 1:
+                case 2:
+                    time = new Date(getCurrentTime()[2] + 1, getCurrentTime()[1]); // set year = current year + 1
+                    break;
+                case 3:
+                    time = new Date(getCurrentTime()[2] + 10, getCurrentTime()[1]); // set year = current year + 10
+                    break;
+                case 4:
+                    time = new Date(getCurrentTime()[2] + 100, getCurrentTime()[1]); // set year = current year + 100
+                    break;
+                default:
+                    time = new Date(getCurrentTime()[2], getCurrentTime()[1] + 1); // set month = current month + 1
+                    break;
+            }
+            if (max && isValidDate(max) && moment(time).diff(firstDayOfMax) > 0) {
+                e.preventDefault();
+            } else {
+                onUpdateCalendar(
+                    time,
+                    navigatorRefs,
+                    min,
+                    max,
+                    tableRef.current,
+                    activeValue.current,
+                    unique,
+                    displayAnotherMonth,
+                    isZoomInAble ? zoomIn : onDayClick,
+                    onUpdateNavigatorValue,
+                    currentZoomLevel
+                );
+            }
+        };
+
+        /**
+         * END FUNCTION
+         */
+
+        /**
+         * START EFFECT
+         */
+        useEffect(() => {
+            if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
+                if (isBeforeLimit(min, defaultValue)) {
+                    onUpdate(min);
+                } else if (isAfterLimit(max, defaultValue)) {
+                    onUpdate(max);
+                } else {
+                    onUpdate(defaultValue);
+                }
+            }
+        }, []);
+        useEffect(() => {
+            if (value && value !== '' && isValidDate(value)) {
+                if (isBeforeLimit(min, value)) {
+                    onUpdate(min);
+                } else if (isAfterLimit(max, value)) {
+                    onUpdate(max);
+                } else {
+                    onUpdate(value);
+                }
+            }
+        }, [value]);
+        useEffect(() => {
+            if (min && isBeforeLimit(min, activeValue.current)) {
+                onUpdate(min);
+                !!onClick && onClick({ value: new Date(min) });
+            } else if (max && isAfterLimit(max, activeValue.current)) {
+                onUpdate(max);
+                !!onClick && onClick({ value: new Date(max) });
+            } else {
+                onUpdate(activeValue.current);
+            }
+        }, [onClick, min, max, currentZoomLevel, minZoom, maxZoom]);
+        /**
+         * END FUNCTION
+         */
+
+        /**
+         * START COMPONENT
+         */
+        const tableMemo = (
+            <div className={unique.table.container}>
+                <table className={unique.table.table} ref={tableRef}>
+                    {renderHeader(unique, currentZoomLevel)}
+                    <tbody />
+                </table>
+            </div>
+        );
+        /**
+         * END COMPONENT
+         */
+        return (
+            <div
+                {...other}
+                className={classNames(unique.container, className)}
+                css={generateCalendarCSS(unique, true, true, theme)}
+                ref={ref}
+            >
+                {renderNavigator(
+                    unique,
+                    navigatorRefs,
+                    setPrevYear,
+                    setPrevMonth,
+                    setNextMonth,
+                    setNextYear,
+                    zoomOut,
+                    currentZoomLevel
+                )}
+                {tableMemo}
+                {actions}
+            </div>
+        );
+    })
+);
+
+// Calendar.defaultProps = {
+//     actions: null,
+//     defaultValue: new Date(),
+//     displayAnotherMonth: true,
+// };
+
+Calendar.propTypes = {
+    /** the footer actions */
+    actions: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
+    /** class for calendar */
+    className: PropTypes.string,
+    /** the default value of the calendar */
+    defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
+    /** display days of previous or next month */
+    displayAnotherMonth: PropTypes.bool,
+    /** the last date that can be selected within the UI component. */
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
+    /** the minimum date that can be selected within the UI component. */
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
+    /** Min zoom level of DatePicker */
+    minZoom: PropTypes.oneOf(['day', 'month', 'quarter', 'year']),
+    /** Max zoom level of DatePicker */
+    maxZoom: PropTypes.oneOf(['day', 'month', 'year', 'decade']),
+    /** a callback function when click on a day of calendar */
+    onClick: PropTypes.func,
+    /** value of the calendar */
+    value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
+};
+
+export default Calendar;

package/src/components/form-control/calendar/index.stories.js

@@ -0,0 +1,40 @@
+import { ImportComp } from 'components/others/import/index.stories';
+import { useTheme } from 'theme';
+import Calendar from './index';
+import React from 'react';
+// import CalendarRangeComponent from './range';
+
+const theme = useTheme();
+Calendar.defaultProps = theme?.components?.Calendar?.defaultProps || {};
+
+export default {
+    title: 'Components/Calendar',
+    component: Calendar,
+    // subcomponents: { CalendarRangeComponent },
+};
+
+const Template1 = args => (
+    <div>
+        <ImportComp components={'Calendar'} />
+        <div style={{ display: 'grid', height: '50vh', placeContent: 'center' }}>
+            <Calendar {...args} />
+        </div>
+    </div>
+);
+// const Template2 = (args) => (
+// 	<div>
+// 		<ImportComp components={'CalendarRange'} />
+// 		<div style={{ display: 'grid', placeContent: 'center' }} >
+// 			<CalendarRangeComponent {...args} />
+// 		</div>
+// 	</div>
+// );
+
+export const Sample = Template1.bind({});
+Sample.args = {
+    displayAnotherMonth: true,
+    value: new Date(),
+    max: new Date(Date.now() + 21 * 86400000),
+    min: new Date(Date.now() - 21 * 86400000),
+    onClick: e => console.log(e.value),
+};