diginet-core-ui 1.4.24 → 1.4.25

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

@@ -0,0 +1,189 @@
+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.
+ */
+function 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?.month(value - 1, { width: 'abbreviated' });
+          value = localize === null || localize === void 0 ? void 0 : localize.months[['notFull']][value - 1];
+        } else if (pattern === 'MMMM' && typeof value === 'number') {
+          // value = localize?.month(value - 1, { width: 'wide' });
+          value = localize === null || localize === void 0 ? void 0 : 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) => {
+    var _format$match;
+    let isValid = true;
+    (_format$match = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match === void 0 ? void 0 : _format$match.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) => {
+    var _format$match2;
+    const checkValueArray = (_format$match2 = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match2 === void 0 ? void 0 : _format$match2.map(pattern => {
+      const key = patternMap[pattern[0]];
+      const fieldValue = type === key ? value : dateField[key];
+      return fieldValue !== null;
+    });
+    return checkValueArray === null || checkValueArray === void 0 ? void 0 : 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/components/form-control/date-input/index.js

@@ -0,0 +1,300 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { HelperText, Label } from "../..";
+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 } from "../../../utils";
+import useIsFocused from "./useIsFocused";
+import useKeyboardInputEvent from "./useKeyboardInputEvent";
+import { getInputSelectedState, isFieldFullValue, useEventCallback, useInputSelection, validateDateTime } from "./utils";
+import { getGlobal } from "../../../global";
+import locale from "../../../locale";
+import useDateInputState from "./useDateInputState";
+import useControlled from "./useControlled";
+import UncontrolledInputBase from "../input-base/UncontrolledInputBase";
+const DateInput = /*#__PURE__*/memo( /*#__PURE__*/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;
+  const _DateInputRoot = DateInputRoot();
+  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;
+    }
+
+    // if (pattern === 'M') {
+    //     // Month cannot be less than 1.
+    //     newValue = Math.max(1, newValue);
+    // }
+
+    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 jsx("div", {
+    ref: ref,
+    css: _DateInputRoot,
+    className: classNames('DGN-UI-DateInput', className, disabled && 'disabled'),
+    style: style,
+    ...other
+  }, !!label && jsx(Label, {
+    required: required,
+    ...labelProps,
+    disabled: disabled
+  }, label), jsx(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 && jsx(HelperText, {
+    ...helperTextProps,
+    disabled: disabled
+  }, error));
+}));
+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/components/form-control/date-input/useControlled.js

@@ -0,0 +1,14 @@
+import { useRef, useState, useCallback } from 'react';
+function useControlled(controlledValue, defaultValue) {
+  const controlledRef = useRef(false);
+  controlledRef.current = controlledValue !== undefined;
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const value = controlledRef.current ? controlledValue : uncontrolledValue;
+  const setValue = useCallback(nextValue => {
+    if (!controlledRef.current) {
+      setUncontrolledValue(nextValue);
+    }
+  }, [controlledRef]);
+  return [value, setValue, controlledRef.current];
+}
+export default useControlled;

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

@@ -0,0 +1,132 @@
+import { useEffect } from 'react';
+// import startCase from 'lodash/startCase';
+import { addDays, addHours, addMinutes, addMonths, addSeconds, addYears, format, isLastDayOfMonth, isValid, lastDayOfMonth } from 'date-fns';
+import { getGlobal } from "../../../global";
+import { capitalize } from "../../../utils";
+import { patternMap, useDateField } from "./DateField";
+import { lowerCaseDayYear } from "./utils";
+import { enUS, vi } from 'date-fns/locale';
+export function 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 === null || callback === void 0 ? void 0 : callback(toDate(field, value));
+    }
+  };
+  const setDateField = (pattern, value, callback) => {
+    const field = patternMap[pattern];
+    // const actionName = `set${startCase(field)}`;
+    const actionName = `set${capitalize(field)}`;
+    dispatch({
+      type: actionName,
+      value
+    });
+    callback === null || callback === void 0 ? void 0 : 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, formatStr, { locale });
+      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/components/form-control/date-input/useIsFocused.js

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

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

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