diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,191 @@
+import { isValid } from 'date-fns';
+import { useReducer } from 'react';
+import { modifyDate } from './utils';
+
+export const patternMap = {
+    Y: 'year',
+    y: 'year',
+    M: 'month',
+    D: 'day',
+    d: 'day',
+    H: 'hour',
+    h: 'hour',
+    m: 'minute',
+    s: 'second',
+    a: 'meridian',
+};
+
+export class DateField {
+    constructor(format, value) {
+        this.format = format;
+        this.patternArray = [];
+        this.year = null;
+        this.month = null;
+        this.day = null;
+        this.hour = null;
+        this.minute = null;
+        this.second = null;
+
+        const formatArray = format.match(new RegExp('([Y|y|D|d|M|H|h|m|s|a])+', 'ig')) || [];
+
+        this.patternArray = formatArray.map(pattern => {
+            return {
+                pattern,
+                key: patternMap[pattern[0]],
+            };
+        });
+
+        if (value && isValid(value)) {
+            this.year = value.getFullYear();
+            this.month = value.getMonth() + 1;
+            this.day = value.getDate();
+            this.hour = value.getHours();
+            this.minute = value.getMinutes();
+            this.second = value.getSeconds();
+        }
+    }
+}
+
+/**
+ * Pad a number with zeros to the left.
+ */
+const padNumber = (number, length) => {
+    let numberString = String(number);
+
+    if (numberString.length >= length) {
+        return numberString;
+    }
+
+    const paddingCount = length - numberString.length;
+
+    for (let i = 0; i < paddingCount; i++) {
+        numberString = '0' + numberString;
+    }
+
+    return numberString;
+};
+
+export const useDateField = (format, localize, date) => {
+    const [dateField, dispatch] = useReducer((state, action) => {
+        switch (action.type) {
+            case 'setYear':
+                return { ...state, year: action.value };
+            case 'setMonth':
+                return { ...state, month: action.value };
+            case 'setDay':
+                return { ...state, day: action.value };
+            case 'setHour':
+                return { ...state, hour: action.value };
+            case 'setMinute':
+                return { ...state, minute: action.value };
+            case 'setSecond':
+                return { ...state, second: action.value };
+            case 'setNewDate':
+                return new DateField(format, action.value);
+            default:
+                return state;
+        }
+    }, new DateField(format, date));
+
+    const toDateString = () => {
+        let str = format;
+        dateField.patternArray.forEach(item => {
+            const { key, pattern } = item;
+            const hour = dateField.hour;
+
+            let value = dateField[key];
+
+            if (value !== null) {
+                if (pattern === 'MMM' && typeof value === 'number') {
+                    value = localize?.months[['notFull']][value - 1];
+                } else if (pattern === 'MMMM' && typeof value === 'number') {
+                    value = localize?.months[['full']][value - 1];
+                } else if (pattern === 'aa') {
+                    if (typeof hour === 'number') {
+                        value = hour > 12 ? 'PM' : 'AM';
+                    } else {
+                        value = 'aa';
+                    }
+                } else if (pattern === 'hh' && typeof value === 'number') {
+                    value = value === 0 ? 12 : value > 12 ? value - 12 : value;
+                }
+                if (typeof value === 'number') {
+                    value = padNumber(value, pattern.length);
+                }
+
+                str = str.replace(pattern, value);
+            }
+        });
+
+        return str;
+    };
+
+    // Check if the field value is valid.
+    const validFieldValue = (type, value) => {
+        let isValid = true;
+
+        format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))?.forEach(pattern => {
+            const key = patternMap[pattern[0]];
+            const fieldValue = type === key ? value : dateField[key];
+
+            if (fieldValue === null) {
+                isValid = false;
+                return;
+            }
+        });
+
+        return isValid;
+    };
+
+    const isEmptyValue = (type, value) => {
+        const checkValueArray = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))?.map(pattern => {
+            const key = patternMap[pattern[0]];
+            const fieldValue = type === key ? value : dateField[key];
+
+            return fieldValue !== null;
+        });
+
+        return checkValueArray?.every(item => item === false);
+    };
+
+    const toDate = (type, value) => {
+        const { year, month, day, hour, minute, second } = dateField;
+        const date = new Date(
+            year || 0,
+            typeof month === 'number' ? month - 1 : 0,
+            // The default day is 1 when the value is null, otherwise it becomes the last day of the month.
+            day || 1,
+            hour || 0,
+            minute || 0,
+            second || 0
+        );
+
+        if (typeof type === 'undefined' || typeof value === 'undefined') {
+            return date;
+        }
+
+        if (value === null || !validFieldValue(type, value)) {
+            if (isEmptyValue(type, value)) {
+                return null;
+            }
+
+            return new Date('');
+        }
+
+        if (type === 'meridian' && typeof hour === 'number') {
+            const newHour = hour > 12 ? hour - 12 : hour + 12;
+            type = 'hour';
+            value = newHour;
+        }
+
+        return modifyDate(date, type, value);
+    };
+
+    return {
+        dateField,
+        dispatch,
+        toDate,
+        toDateString,
+        isEmptyValue,
+    };
+};

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

@@ -0,0 +1,315 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { HelperText, Label } from 'components';
+import { getGlobal } from 'global';
+import locale from 'locale';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cursorNotAllowed, displayBlock, positionRelative } from 'styles/general';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, refType as ref, useControlled } from 'utils';
+import UncontrolledInputBase from '../input-base/UncontrolledInputBase';
+import useDateInputState from './useDateInputState';
+import useIsFocused from './useIsFocused';
+import useKeyboardInputEvent from './useKeyboardInputEvent';
+import {
+    getInputSelectedState,
+    isFieldFullValue,
+    useEventCallback,
+    useInputSelection,
+    validateDateTime,
+} from './utils';
+
+const DateInput = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'DateInput' });
+        const {
+            action = {},
+            className,
+            defaultValue,
+            disabled,
+            endIcon,
+            endIconProps,
+            error,
+            format: formatStr,
+            inputProps,
+            helperTextProps,
+            inputRef = useRef(null),
+            inputStyle,
+            label,
+            labelProps,
+            onBlur,
+            onChange,
+            onFocus,
+            onKeyDown,
+            placeholder,
+            readOnly,
+            required,
+            startIcon,
+            startIconProps,
+            style,
+            value: valueProp,
+            viewType,
+            ...other
+        } = props;
+
+        const ref = useRef(null);
+
+        const [selectedState, setSelectedState] = useState({
+            selectedPattern: 'y',
+            selectionStart: 0,
+            selectionEnd: 0,
+        });
+
+        const isError = !!error;
+        const isEnabled = !readOnly && !disabled;
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const dateLocale = locale.get();
+        const [value, setValue, isControlled] = useControlled(valueProp, defaultValue);
+        const { dateField, setDateOffset, setDateField, getDateField, toDateString, isEmptyValue } = useDateInputState({
+            formatStr,
+            locale: dateLocale,
+            date: value,
+            isControlledDate: isControlled,
+        });
+
+        const dateString = toDateString();
+        const keyPressOptions = useMemo(
+            () => ({
+                formatStr,
+                localize: getGlobal(dateLocale),
+                selectedMonth: dateField.month,
+                dateString,
+            }),
+            [dateField, dateString, formatStr, dateLocale]
+        );
+
+        const handleChange = useEventCallback((value, event) => {
+            if (onChange) {
+                onChange(value, event);
+            }
+            setValue(value);
+        });
+
+        const setSelectionRange = useInputSelection(inputRef);
+
+        const onSegmentChange = useEventCallback((event, nextDirection) => {
+            const input = event.target;
+            const key = event.key;
+            const direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
+
+            const state = getInputSelectedState({ ...keyPressOptions, input, direction });
+
+            setSelectionRange(state.selectionStart, state.selectionEnd);
+            setSelectedState(state);
+        });
+
+        const onSegmentValueChange = useEventCallback(event => {
+            const input = event.target;
+            const key = event.key;
+            const offset = key === 'ArrowUp' ? 1 : -1;
+
+            const state = getInputSelectedState({ ...keyPressOptions, input, valueOffset: offset });
+
+            setSelectedState(state);
+            setDateOffset(state.selectedPattern, offset, date => handleChange(date, event));
+            setSelectionRange(state.selectionStart, state.selectionEnd);
+        });
+
+        const onSegmentValueChangeWithNumericKeys = useEventCallback(event => {
+            const input = event.target;
+            const key = event.key;
+
+            const pattern = selectedState.selectedPattern;
+            if (!pattern) {
+                return;
+            }
+
+            const field = getDateField(pattern);
+            const value = parseInt(key, 10);
+            const padValue = parseInt(`${field.value || ''}${key}`, 10);
+
+            let newValue = value;
+
+            // Check if the value entered by the user is a valid date
+            if (validateDateTime(field.name, padValue)) {
+                newValue = padValue;
+            }
+
+            setDateField(pattern, newValue, date => handleChange(date, event));
+
+            // The currently selected month will be retained as a parameter of getInputSelectedState,
+            // but if the user enters a month, the month value will be replaced with the value entered by the user.
+            const selectedMonth = pattern === 'M' ? newValue : dateField.month;
+            const nextState = getInputSelectedState({ ...keyPressOptions, input, selectedMonth });
+
+            setSelectedState(nextState);
+            setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+            // If the field is full value, move the cursor to the next field
+            if (
+                (isFieldFullValue(formatStr, newValue, pattern) || field.value === 0) &&
+                input.selectionEnd !== input.value.length
+            ) {
+                onSegmentChange(event, 'right');
+            }
+        });
+
+        const onSegmentValueRemove = useEventCallback(event => {
+            const input = event.target;
+            if (selectedState.selectedPattern) {
+                const nextState = getInputSelectedState({ ...keyPressOptions, input, valueOffset: null });
+
+                setSelectedState(nextState);
+                setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+
+                setDateField(selectedState.selectedPattern, null, date => handleChange(date, event));
+            }
+        });
+
+        const handleClick = useEventCallback(event => {
+            const input = event.target;
+            const state = getInputSelectedState({ ...keyPressOptions, input });
+
+            setSelectedState(state);
+            setSelectionRange(state.selectionStart, state.selectionEnd);
+        });
+
+        const onKeyboardInput = useKeyboardInputEvent({
+            onSegmentChange,
+            onSegmentValueChange,
+            onSegmentValueChangeWithNumericKeys,
+            onSegmentValueRemove,
+            onKeyDown,
+        });
+
+        const [focused, focusEventProps] = useIsFocused({ onBlur, onFocus });
+
+        const renderedValue = useMemo(() => {
+            if (!isEmptyValue()) {
+                return dateString;
+            }
+
+            return !focused ? '' : dateString;
+        }, [dateString, focused, isEmptyValue]);
+
+        return (
+            <div
+                ref={ref}
+                css={DateInputRoot}
+                className={classNames('DGN-UI-DateInput', className, disabled && 'disabled')}
+                style={style}
+                {...other}
+            >
+                {!!label && (
+                    <Label required={required} {...labelProps} disabled={disabled}>
+                        {label}
+                    </Label>
+                )}
+                <UncontrolledInputBase
+                    autoComplete="off"
+                    autoCorrect="off"
+                    disabled={disabled}
+                    endIcon={endIcon}
+                    endIconProps={endIconProps}
+                    inputMode={focused ? 'numeric' : 'text'}
+                    inputProps={inputProps}
+                    inputRef={inputRef}
+                    inputStyle={inputStyle}
+                    onClick={handleClick}
+                    onKeyDown={isEnabled ? onKeyboardInput : null}
+                    placeholder={placeholder || formatStr}
+                    readOnly={readOnly}
+                    spellCheck={false}
+                    startIcon={startIcon}
+                    startIconProps={startIconProps}
+                    value={renderedValue}
+                    viewType={viewType}
+                    {...focusEventProps}
+                />
+                {isError && (
+                    <HelperText {...helperTextProps} disabled={disabled}>
+                        {error}
+                    </HelperText>
+                )}
+            </div>
+        );
+    })
+);
+
+const DateInputRoot = css`
+    ${displayBlock};
+    ${positionRelative};
+    &.disabled {
+        ${cursorNotAllowed};
+    }
+`;
+
+DateInput.propTypes = {
+    /** Class for component. */
+    className: PropTypes.string,
+    /** The default value. Use when the component is not controlled. */
+    defaultValue: PropTypes.instanceOf(Date),
+    /** If `true`, the component is disabled.*/
+    disabled: PropTypes.bool,
+    /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the right of input. */
+    endIcon: PropTypes.any,
+    /** Props of end icon in InputBase component. */
+    endIconProps: PropTypes.object,
+    /** Error displayed below input. */
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    /** Format of the date when rendered in the input. */
+    format: PropTypes.string,
+    /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+    helperTextProps: PropTypes.object,
+    /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
+    inputProps: PropTypes.object,
+    /** Pass a ref to the input element. */
+    inputRef: ref,
+    /** Style inline of input element. */
+    inputStyle: PropTypes.object,
+    /** The label of the component. */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
+    labelProps: PropTypes.object,
+    /** Callback fired when the input is blurred. */
+    onBlur: PropTypes.func,
+    /** Callback fired when the value is changed. */
+    onChange: PropTypes.func,
+    /** Callback fired when the input is focused. */
+    onFocus: PropTypes.func,
+    /** Callback fired when pressing a key. */
+    onKeyDown: PropTypes.func,
+    /** The short hint displayed in the input before the user enters a value. */
+    placeholder: PropTypes.string,
+    /** If `true`, the component is readOnly. */
+    readOnly: PropTypes.bool,
+    /** If `true`, the input element is required. */
+    required: PropTypes.bool,
+    /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the left of input. */
+    startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** Props of start icon in InputBase component. */
+    startIconProps: PropTypes.object,
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** The value of the input element, required for a controlled component. */
+    value: PropTypes.instanceOf(Date),
+    /** The variant to use. */
+    viewType: PropTypes.oneOf(['underlined', 'outlined', 'none']),
+};
+
+export default DateInput;

package/src/components/form-control/date-input/index.stories.js

@@ -0,0 +1,96 @@
+import DateInput from '.';
+import { ImportComp } from 'components/others/import/index.stories';
+import { Typography } from 'components';
+import React from 'react';
+import { useTheme } from 'theme';
+
+const theme = useTheme();
+DateInput.defaultProps = theme?.components?.TextInput?.defaultProps || {};
+
+export default {
+    title: 'Components/DateInput',
+    component: DateInput,
+    parameters: {
+        componentSubtitle: 'The DateInput component lets users select a date with the keyboard.',
+    },
+};
+
+const Template = args => {
+    return (
+        <>
+            <ImportComp components={'DateInput'} />
+            <DateInput {...args} />
+        </>
+    );
+};
+
+const Template2 = () => {
+    const dateFormats = [
+        'DD/MM/YYY',
+        'DD-MM-YYYY',
+        'DD.MM.YYYY',
+        'MMM dd, yyyy',
+        'MMMM dd, yyyy',
+        'DD/MM/YYYY HH:mm',
+        'DD/MM/YYYY hh:mm aa',
+        'HH:mm:ss',
+    ];
+    return (
+        <>
+            <ImportComp components={'DateInput'} />
+            {dateFormats.map((item, idx) => (
+                <DateInput key={idx} format={item} />
+            ))}
+        </>
+    );
+};
+
+const Template3 = () => {
+    return (
+        <>
+            <ImportComp components={'DateInput'} />
+            <Typography>Disabled</Typography>
+            <DateInput disabled value={new Date()} />
+            <Typography>Read only</Typography>
+            <DateInput readOnly value={new Date()} />
+        </>
+    );
+};
+
+const Template4 = () => {
+    const [value, setValue] = React.useState(new Date());
+
+    const handleChange = value => {
+        setValue(value);
+        console.log('Controlled Change', value);
+    };
+    return (
+        <>
+            <ImportComp components={'DateInput'} />
+            <Typography>Controlled Value:</Typography>
+            <DateInput value={value} onChange={handleChange} />
+
+            <Typography>Uncontrolled Value:</Typography>
+            <DateInput defaultValue={new Date()} />
+        </>
+    );
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+    endIcon: '',
+    format: 'DD/MM/YYYY',
+    label: '',
+    placeholder: '',
+    startIcon: '',
+    viewType: 'underlined',
+};
+
+export const CustomizeTheDateFormat = Template2.bind({});
+CustomizeTheDateFormat.parameters = { controls: { include: [], hideNoControlsWarning: true } };
+
+export const DisabledAndReadonly = Template3.bind({});
+DisabledAndReadonly.parameters = { controls: { include: [], hideNoControlsWarning: true } };
+
+export const ControlledAndUncontrolledValue = Template4.bind({});
+ControlledAndUncontrolledValue.parameters = { controls: { include: [], hideNoControlsWarning: true } };