diginet-core-ui 1.4.39 → 1.4.40

package/src/components/form-control/date-input/useDateInputState.js

@@ -0,0 +1,138 @@
+import { useEffect } from 'react';
+import {
+    addDays,
+    addHours,
+    addMinutes,
+    addMonths,
+    addSeconds,
+    addYears,
+    format,
+    isLastDayOfMonth,
+    isValid,
+    lastDayOfMonth,
+} from 'date-fns';
+import { enUS, vi } from 'date-fns/locale';
+import { getGlobal } from 'global';
+import { capitalize } from 'utils';
+import { patternMap, useDateField } from './DateField';
+import { lowerCaseDayYear } from './utils';
+
+export const useDateInputState = ({ formatStr, locale, date, isControlledDate }) => {
+    const { dateField, dispatch, toDateString, toDate, isEmptyValue } = useDateField(
+        formatStr,
+        getGlobal(locale),
+        date
+    );
+
+    const setDateOffset = (pattern, offset, callback) => {
+        const currentDate = new Date();
+        const year = dateField.year || currentDate.getFullYear();
+        const month = dateField.month ? dateField.month - 1 : currentDate.getMonth();
+        const day = dateField.day || 0;
+        const hour = dateField.hour || 0;
+        const minute = dateField.minute || 0;
+        const second = dateField.second || 0;
+
+        let actionName;
+        let value;
+
+        switch (pattern) {
+            case 'Y':
+            case 'y':
+                actionName = 'setYear';
+                value = addYears(new Date(year, 0), offset).getFullYear();
+                break;
+            case 'M':
+                actionName = 'setMonth';
+                value = addMonths(new Date(year, month), offset).getMonth() + 1;
+                break;
+            case 'D':
+            case 'd':
+                actionName = 'setDay';
+                // eslint-disable-next-line no-case-declarations
+                const prevDate = new Date(year, month, day);
+
+                value = addDays(prevDate, offset).getDate();
+
+                if (offset > 0) {
+                    value = isLastDayOfMonth(prevDate) ? 1 : value;
+                } else {
+                    value = prevDate.getDate() === 1 ? lastDayOfMonth(prevDate).getDate() : value;
+                }
+                break;
+            case 'H':
+            case 'h':
+                actionName = 'setHour';
+                value = addHours(new Date(year, month, day, hour), offset).getHours();
+
+                break;
+            case 'm':
+                actionName = 'setMinute';
+                value = addMinutes(new Date(year, month, day, hour, minute), offset).getMinutes();
+
+                break;
+            case 's':
+                actionName = 'setSecond';
+                value = addSeconds(new Date(year, month, day, hour, minute, second), offset).getSeconds();
+                break;
+            case 'a':
+                actionName = 'setHour';
+                value = hour >= 12 ? hour - 12 : hour + 12;
+                break;
+        }
+
+        if (actionName && value) {
+            dispatch({ type: actionName, value });
+
+            const field = patternMap[pattern];
+
+            callback?.(toDate(field, value));
+        }
+    };
+
+    const setDateField = (pattern, value, callback) => {
+        const field = patternMap[pattern];
+        const actionName = `set${capitalize(field)}`;
+
+        dispatch({ type: actionName, value });
+
+        callback?.(toDate(field, value));
+    };
+
+    const getDateField = pattern => {
+        const fieldName = patternMap[pattern];
+        return {
+            name: fieldName,
+            value: dateField[fieldName],
+        };
+    };
+
+    const toControlledDateString = () => {
+        if (date && isValid(date)) {
+            return format(date, lowerCaseDayYear(formatStr), { locale: locale === 'vi' ? vi : enUS });
+        }
+        // if date is not valid, return uncontrolled date string
+        return toDateString();
+    };
+
+    useEffect(() => {
+        if (isControlledDate) {
+            if (date && isValid(date)) {
+                dispatch({ type: 'setNewDate', value: date });
+            } else if (date === null) {
+                dispatch({ type: 'setNewDate', value: null });
+            }
+        }
+    }, [date, dispatch, isControlledDate]);
+
+    return {
+        dateField,
+        setDateOffset,
+        setDateField,
+        getDateField,
+        toDateString: isControlledDate ? toControlledDateString : toDateString,
+        isEmptyValue,
+    };
+};
+
+export default useDateInputState;

package/src/components/form-control/date-input/useIsFocused.js

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+
+const useIsFocused = ({ onFocus: onFocusProp, onBlur: onBlurProp }) => {
+    const [isFocused, setIsFocused] = useState(false);
+
+    const onFocus = useCallback(
+        event => {
+            setIsFocused(true);
+            onFocusProp?.(event);
+        },
+        [onFocusProp]
+    );
+
+    const onBlur = useCallback(
+        event => {
+            setIsFocused(false);
+            onBlurProp?.(event);
+        },
+        [onBlurProp]
+    );
+
+    return [isFocused, { onFocus, onBlur }];
+};
+
+export default useIsFocused;

package/src/components/form-control/date-input/useKeyboardInputEvent.js

@@ -0,0 +1,45 @@
+const useKeyboardInputEvent = ({
+    onSegmentChange,
+    onSegmentValueChange,
+    onSegmentValueChangeWithNumericKeys,
+    onSegmentValueRemove,
+    onKeyDown,
+}) => {
+    return event => {
+        const { key, ctrlKey, metaKey } = event;
+
+        switch (key) {
+            case 'ArrowRight':
+            case 'ArrowLeft':
+                onSegmentChange?.(event);
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                onSegmentValueChange?.(event);
+                event.preventDefault();
+                break;
+            case 'Backspace':
+            case 'Delete':
+                onSegmentValueRemove?.(event);
+                event.preventDefault();
+                break;
+
+            case key.match(/\d/)?.input:
+                // Allow numeric keys to be entered
+                onSegmentValueChangeWithNumericKeys?.(event);
+                event.preventDefault();
+                break;
+
+            default:
+                // case key.match(/[a-z]/)?.[0]:
+                // Prevent letters from being entered
+                if (!ctrlKey && !metaKey) event.preventDefault();
+                break;
+        }
+
+        onKeyDown?.(event);
+    };
+};
+
+export default useKeyboardInputEvent;

package/src/components/form-control/date-input/utils.js

@@ -0,0 +1,293 @@
+import { isValid, parse, setDate, setHours, setMinutes, setMonth, setSeconds, setYear } from 'date-fns';
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * @param {function} fn
+ */
+export const useEventCallback = fn => {
+    const ref = useRef(fn);
+    useEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => {
+        return ref.current?.(...args);
+    }, []);
+};
+
+export const safeSetSelection = (element, selectionStart, selectionEnd) => {
+    if (document.activeElement === element) {
+        element.setSelectionRange(selectionStart, selectionEnd, 'none');
+    }
+};
+
+export const getSelectIndexGap = options => {
+    const { pattern, formatStr, valueOffset, selectedMonth, localize } = options;
+    let gap = 0;
+
+    const monthIsAbbreviated = formatStr.includes('MMM');
+    const monthIsFull = formatStr.includes('MMMM');
+
+    // If the month is abbreviated or full, the gap needs to be adjusted.
+    if (monthIsAbbreviated || monthIsFull) {
+        const isSelectedMonth = pattern === 'M';
+
+        // If the selected is the month, and the valueOffset is null,
+        // it means that the delete key is pressed, and the default pattern is displayed, and the gap is 0 at this time.
+        if (isSelectedMonth && valueOffset === null) {
+            return 0;
+        }
+
+        // If the month is null and the valueOffset is 0, the month will not be updated, and the gap is 0 at this time.
+        if (selectedMonth === null && valueOffset === 0) {
+            return 0;
+        }
+
+        let month = selectedMonth ? selectedMonth + (isSelectedMonth ? valueOffset || 0 : 0) : 1;
+
+        if (month > 12) {
+            month = 1;
+        } else if (month === 0) {
+            month = 12;
+        }
+
+        const monthStr = localize?.months[[monthIsFull ? 'full' : 'notFull']][month - 1];
+        gap = monthStr.length - (monthIsFull ? 4 : 3);
+    }
+
+    return gap;
+};
+
+export const isCursorAfterMonth = (cursorIndex, formatStr) => {
+    return cursorIndex > formatStr.indexOf('M');
+};
+
+export const getDatePattern = options => {
+    const {
+        selectionIndex,
+        positionOffset = -1,
+        formatStr,
+        dateString,
+        valueOffset,
+        selectedMonth,
+        localize,
+    } = options;
+
+    let pattern = formatStr.charAt(selectionIndex || 0);
+
+    if (selectionIndex < 0 || selectionIndex > dateString.length - 1) {
+        pattern = formatStr.trim().charAt(0);
+
+        return pattern;
+    }
+
+    let gap = 0;
+    if (isCursorAfterMonth(selectionIndex, formatStr)) {
+        gap = getSelectIndexGap({ pattern, formatStr, valueOffset, selectedMonth, localize });
+    }
+
+    pattern = formatStr.charAt(selectionIndex - gap);
+
+    // If the pattern is not a letter, then get the pattern from the previous or next letter.
+    if (!pattern.match(/[Y|y|D|d|M|H|h|m|s|a]/)) {
+        const nextIndex = selectionIndex + positionOffset;
+        pattern = getDatePattern({ ...options, selectionIndex: nextIndex });
+    }
+
+    return pattern;
+};
+
+export const getInputSelectedState = options => {
+    const { input, direction, formatStr, localize, selectedMonth, dateString, valueOffset = 0 } = options;
+
+    const getPatternSelectedIndexes = pattern => {
+        const selectionStart = formatStr.indexOf(pattern);
+        const selectionEnd = formatStr.lastIndexOf(pattern) + 1;
+        const gap = getSelectIndexGap({ pattern, formatStr, valueOffset, selectedMonth, localize });
+
+        const isSelectedMonth = pattern === 'M';
+        const isNullMonth = selectedMonth === null && !(isSelectedMonth && valueOffset !== 0);
+
+        // If the month is null and the valueOffset is 0, the month will not be updated, and the gap is 0 at this time.
+        if (isNullMonth) {
+            return { selectionStart, selectionEnd };
+        }
+
+        if (isSelectedMonth) {
+            return {
+                selectionStart,
+                selectionEnd: selectionEnd + gap,
+            };
+        }
+
+        if (isCursorAfterMonth(selectionStart, formatStr)) {
+            return {
+                selectionStart: selectionStart + gap,
+                selectionEnd: selectionEnd + gap,
+            };
+        }
+
+        return { selectionStart, selectionEnd };
+    };
+
+    if (typeof input.selectionEnd === 'number' && typeof input.selectionStart === 'number') {
+        let selectionIndex = input.selectionStart;
+
+        let positionOffset = -1;
+
+        if (direction === 'left') {
+            selectionIndex = input.selectionStart - 1;
+        } else if (direction === 'right') {
+            selectionIndex = input.selectionEnd + 1;
+            positionOffset = 1;
+        }
+
+        const datePattern = getDatePattern({
+            selectionIndex,
+            positionOffset,
+            formatStr,
+            dateString,
+            valueOffset,
+            selectedMonth,
+            localize,
+        });
+
+        const indexes = getPatternSelectedIndexes(datePattern);
+
+        return {
+            selectedPattern: datePattern,
+            ...indexes,
+        };
+    }
+
+    return {
+        selectedPattern: 'y',
+        selectionStart: 0,
+        selectionEnd: 0,
+    };
+};
+
+export const validateDateTime = (type, value) => {
+    switch (type) {
+        case 'year':
+            if (value < 1 || value > 9999) {
+                return false;
+            }
+            break;
+        case 'month':
+            if (value < 1 || value > 12) {
+                return false;
+            }
+            break;
+        case 'day':
+            if (value < 1 || value > 31) {
+                return false;
+            }
+            break;
+        case 'hour':
+            if (value < 0 || value > 23) {
+                return false;
+            }
+            break;
+        case 'minute':
+            if (value < 0 || value > 59) {
+                return false;
+            }
+            break;
+        case 'second':
+            if (value < 0 || value > 59) {
+                return false;
+            }
+            break;
+        default:
+            return false; // Invalid type
+    }
+
+    return true;
+};
+
+export const modifyDate = (date, type, value) => {
+    switch (type) {
+        case 'year':
+            return setYear(date, value);
+        case 'month':
+            return setMonth(date, value - 1);
+        case 'day':
+            return setDate(date, value);
+        case 'hour':
+            return setHours(date, value);
+        case 'minute':
+            return setMinutes(date, value);
+        case 'second':
+            return setSeconds(date, value);
+    }
+
+    return date;
+};
+
+export const getPatternGroups = (format, pattern) => {
+    return format.match(new RegExp(`(${pattern})+`))?.[0] || '';
+};
+
+export const isFieldFullValue = (formatStr, value, pattern) => {
+    const patternGroup = getPatternGroups(formatStr, pattern);
+
+    if (value.toString().length === patternGroup.length) {
+        return true;
+    }
+
+    switch (pattern) {
+        case 'M':
+            return parseInt(`${value}0`) > 12;
+        case 'D':
+        case 'd':
+            return parseInt(`${value}0`) > 31;
+        case 'H':
+            return parseInt(`${value}0`) > 23;
+        case 'h':
+            return parseInt(`${value}0`) > 12;
+        case 'm':
+        case 's':
+            return parseInt(`${value}0`) > 59;
+        default:
+            return false;
+    }
+};
+
+export const useInputSelection = input => {
+    return function setSelectionRange(selectionStart, selectionEnd) {
+        requestAnimationFrame(() => {
+            safeSetSelection(input.current, selectionStart, selectionEnd);
+        });
+    };
+};
+
+// use yyyy instead of YYYY for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+// use yy instead of YY for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+// use d instead of D for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+// use dd instead of DD for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+// This function convert letter 'D' and 'Y' to lowercase to use date-fns format
+export const lowerCaseDayYear = dateString => {
+    const modifiedString = [...dateString]
+        .map(char => {
+            if (char === 'D') {
+                return 'd';
+            } else if (char === 'Y') {
+                return 'y';
+            } else {
+                return char;
+            }
+        })
+        .join('');
+
+    return modifiedString;
+};
+
+export const isValidDate = (dateString, format = 'MM/DD/YYYY') => {
+    if (dateString && dateString !== 'Invalid Date') {
+        if (isValid(dateString)) return true;
+        const parsedDate = parse(dateString, lowerCaseDayYear(format), new Date());
+        return isValid(parsedDate);
+    }
+    return false;
+};