diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,292 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { HelperText, Label } from "../..";
-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 = /*#__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;
-  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 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/useDateInputState.js

@@ -1,129 +0,0 @@
-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 === null || callback === void 0 ? void 0 : callback(toDate(field, value));
-    }
-  };
-  const setDateField = (pattern, value, callback) => {
-    const field = patternMap[pattern];
-    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, 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

@@ -1,20 +0,0 @@
-import { useCallback, useState } from 'react';
-const 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

@@ -1,45 +0,0 @@
-const 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;