diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,290 +0,0 @@
-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) => {
-    var _ref$current;
-    return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.call(ref, ...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 === null || localize === void 0 ? void 0 : 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) => {
-  var _format$match;
-  return ((_format$match = format.match(new RegExp(`(${pattern})+`))) === null || _format$match === void 0 ? void 0 : _format$match[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;
-};

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

@@ -1,357 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Button, ButtonIcon, DateInput, HelperText, InputBase, Label, Popover, Tooltip } from "../..";
-import { format, isValid, parse } from 'date-fns';
-import { enUS, vi } from 'date-fns/locale';
-import { getGlobal } from "../../../global";
-import locale from "../../../locale";
-import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { cursorNotAllowed, displayBlock, displayFlex, flexRow, itemsCenter, justifyEnd, positionRelative } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { capitalizeSentenceCase, classNames, isValidDate, useControlled } from "../../../utils";
-import Calendar from "../calendar";
-import { lowerCaseDayYear } from "../date-input/utils";
-const unique = {
-  footer: 'DGN-UI-DatePicker-Footer',
-  cancel: 'DGN-UI-DatePicker-cancel',
-  confirm: 'DGN-UI-DatePicker-confirm',
-  icon: 'DGN-UI-DatePicker-Icon'
-};
-const confirmText = getGlobal(['confirm']);
-const cancelText = getGlobal(['cancel']);
-const viDisplayFormat = new Map([['year', 'YYYY'], ['quarter', 'Q-YYYY'], ['month', 'MM-YYYY']]);
-const pickerReturnFormat = new Map([['year', 'YYYY'], ['quarter', 'YYYY-Q'], ['month', 'YYYY-MM']]);
-const parseValueToDate = valueProp => {
-  if (valueProp === '') return null;
-  return isValidDate(valueProp) ? new Date(valueProp) : valueProp;
-};
-const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  var _ref, _pickerReturnFormat$g, _ipRef$current, _ipRef$current2;
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'DatePicker'
-  });
-  const {
-    action = {},
-    actionIconAt,
-    className,
-    clearAble,
-    controls,
-    defaultValue,
-    disabled,
-    displayAnotherMonth,
-    displayFormat: displayFormatProp,
-    error,
-    errorProps,
-    inputProps,
-    inputStyle,
-    label,
-    labelProps,
-    max,
-    min,
-    minZoom,
-    maxZoom,
-    onChange,
-    placeholder: placeholderProp,
-    pressESCToClose,
-    readOnly,
-    required,
-    returnFormat: returnFormatProp,
-    style,
-    textAlign,
-    useDateInput,
-    value: valueProp,
-    viewType,
-    onBlur,
-    ...other
-  } = props;
-  const dateLocale = locale.get();
-  const displayFormat = (_ref = dateLocale === 'vi' ? viDisplayFormat.get(minZoom) : pickerReturnFormat.get(minZoom)) !== null && _ref !== void 0 ? _ref : displayFormatProp;
-  const returnFormat = (_pickerReturnFormat$g = pickerReturnFormat.get(minZoom)) !== null && _pickerReturnFormat$g !== void 0 ? _pickerReturnFormat$g : returnFormatProp;
-  const placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : displayFormat;
-  const [value, setValue] = useControlled(parseValueToDate(valueProp), parseValueToDate(defaultValue));
-  const [openPickerState, setOpenPickerState] = useState(false);
-  const ipRef = useRef(null);
-  const ref = useRef(null);
-  const focusedValue = useRef(null);
-  const pickerRef = useRef(null);
-  const buttonCarlendarRef = useRef(null);
-  const isError = !!error && (!value || !isValid(value));
-  const _DatePickerRoot = DatePickerRoot();
-  const _IconAreaCSS = IconAreaCSS();
-  const _ControlContainerCSS = ControlContainerCSS(theme);
-  const onConfirm = () => {
-    onChangeValue({
-      value: focusedValue.current
-    });
-    closePicker();
-  };
-  const onCancel = () => {
-    closePicker();
-  };
-  const formatValue = (value, formatStr) => {
-    // return moment(value).format(format, utc = false);
-    return format(value, lowerCaseDayYear(formatStr), {
-      locale: dateLocale === 'vi' ? vi : enUS
-    });
-  };
-  const onChangeValue = e => {
-    const vl = (e === null || e === void 0 ? void 0 : e.value) || e;
-    closePicker();
-    setValue(vl);
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: isValid(vl) ? formatValue(vl, returnFormat) : String(vl) === 'Invalid Date' ? 'Invalid Date' : vl
-    });
-  };
-  const onCalendarClick = e => {
-    !controls ? onChangeValue(e) : focusedValue.current = e === null || e === void 0 ? void 0 : e.value;
-  };
-  const openPicker = () => {
-    if (!readOnly) {
-      setOpenPickerState(true);
-    }
-  };
-  const closePicker = () => {
-    var _pickerRef$current;
-    if ((_pickerRef$current = pickerRef.current) !== null && _pickerRef$current !== void 0 && _pickerRef$current.element) {
-      setOpenPickerState(false);
-      if (ipRef.current) onBlur === null || onBlur === void 0 ? void 0 : onBlur(ipRef.current);
-    }
-  };
-  const onClear = () => {
-    if (!clearAble && !ipRef.current) return;
-    onChangeValue(null);
-    focusedValue.current = null;
-  };
-  const _onBlur = e => {
-    if (ipRef.current && (e === null || e === void 0 ? void 0 : e.relatedTarget) !== buttonCarlendarRef.current) {
-      onBlur === null || onBlur === void 0 ? void 0 : onBlur(ipRef.current);
-    }
-  };
-  useEffect(() => {
-    const vl = parseValueToDate(valueProp);
-    setValue(vl);
-  }, [valueProp]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const iconComp = jsx("div", {
-    css: _IconAreaCSS
-  }, clearAble && value ? jsx(ButtonIcon, {
-    disabled: disabled || readOnly,
-    viewType: 'ghost',
-    onClick: onClear,
-    className: `${unique.icon} ${unique.icon}-cancel`,
-    viewBox: true,
-    name: 'Close'
-  }) : null, jsx(ButtonIcon, {
-    ref: buttonCarlendarRef,
-    disabled: disabled || readOnly,
-    viewType: 'ghost',
-    onClick: openPicker,
-    className: `${unique.icon} ${unique.icon}-accept`,
-    viewBox: true,
-    name: 'Calendar'
-  }));
-  const endIcon = actionIconAt === 'end' && iconComp;
-  const startIcon = actionIconAt === 'start' && iconComp;
-  const footerMemo = jsx("div", {
-    css: _ControlContainerCSS,
-    className: unique.footer
-  }, jsx(Button, {
-    className: unique.cancel,
-    onClick: onCancel
-  }, cancelText), jsx(Button, {
-    color: 'info',
-    className: unique.confirm,
-    onClick: onConfirm
-  }, confirmText));
-  const renderedValue = useMemo(() => {
-    if (isValidDate(value)) return capitalizeSentenceCase(formatValue(value, displayFormat));
-    return value;
-  }, [value, displayFormat]);
-  const valueDateInput = useMemo(() => {
-    if (value && isValid(value)) {
-      return value;
-    } else if (value === null) {
-      return null;
-    } else return parse(value, lowerCaseDayYear(returnFormat), new Date());
-  }, [value]);
-  const renderDateInputCondition = useDateInput && minZoom !== 'quarter' && !min && !max;
-  return jsx(Fragment, null, jsx("div", {
-    ref: ref,
-    css: _DatePickerRoot,
-    className: classNames('DGN-UI-DatePicker', className, disabled && 'disabled'),
-    style: style,
-    ...other
-  }, label ? jsx(Label, {
-    disabled: disabled,
-    required: required,
-    ...labelProps
-  }, label) : null, jsx(Tooltip, {
-    title: (ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current = ipRef.current) === null || _ipRef$current === void 0 ? void 0 : _ipRef$current.clientWidth) < 200 ? ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current2 = ipRef.current) === null || _ipRef$current2 === void 0 ? void 0 : _ipRef$current2.value : ''
-  }, renderDateInputCondition ? jsx(DateInput, {
-    inputRef: ipRef,
-    disabled: disabled,
-    readOnly: readOnly,
-    viewType: viewType,
-    startIcon: startIcon,
-    endIcon: endIcon,
-    format: displayFormat,
-    value: valueDateInput,
-    onBlur: _onBlur,
-    onChange: onChangeValue
-  }) : jsx(InputBase, {
-    inputProps: {
-      placeholder: !readOnly && !disabled ? placeholder : '',
-      ...inputProps
-    },
-    inputRef: ipRef,
-    disabled: disabled,
-    viewType: viewType,
-    inputStyle: {
-      textAlign: textAlign,
-      ...inputStyle
-    },
-    startIcon: startIcon,
-    endIcon: endIcon,
-    onKeyDown: e => e.preventDefault(),
-    readOnly: true,
-    value: renderedValue,
-    onFocus: openPicker
-  })), isError ? jsx(HelperText, {
-    ...errorProps,
-    disabled: disabled
-  }, error) : null), jsx(Popover, {
-    css: PopoverCSS,
-    ref: pickerRef,
-    open: openPickerState,
-    anchor: ref.current,
-    pressESCToClose: pressESCToClose,
-    onClose: closePicker
-  }, jsx(Calendar, {
-    actions: controls && footerMemo,
-    value: value,
-    max: max,
-    min: min,
-    minZoom: minZoom,
-    maxZoom: maxZoom,
-    displayAnotherMonth: displayAnotherMonth,
-    onClick: onCalendarClick
-  })));
-}));
-const PopoverCSS = css`
-    .DGN-UI-Calendar {
-        box-shadow: none;
-    }
-`;
-const DatePickerRoot = () => css`
-    ${displayBlock};
-    ${positionRelative};
-    &.disabled {
-        ${cursorNotAllowed};
-    }
-`;
-const IconAreaCSS = () => css`
-    ${displayFlex};
-    ${flexRow};
-    ${itemsCenter};
-`;
-const ControlContainerCSS = ({
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${justifyEnd};
-    margin: ${spacing([0, 4, 4])};
-`;
-
-// DatePicker.defaultProps = {
-//     actionIconAt: 'end',
-//     clearAble: false,
-//     controls: false,
-//     disabled: false,
-//     displayAnotherMonth: true,
-//     displayFormat: locale.get() === 'vi' ? 'DD/MM/YYYY' : 'MM/DD/YYYY',
-//     pressESCToClose: true,
-//     readOnly: false,
-//     required: false,
-//     returnFormat: 'YYYY-MM-DD',
-//     textAlign: 'start',
-//     viewType: 'underlined',
-// };
-
-DatePicker.propTypes = {
-  /** Action icons position. */
-  actionIconAt: PropTypes.oneOf(['end', 'start']),
-  /** CSS class for the component. */
-  className: PropTypes.string,
-  /** Display the clear icon if true. */
-  clearAble: PropTypes.bool,
-  /** If `true`, the calendar will have a footer controls. */
-  controls: PropTypes.bool,
-  /** The default value of the component. */
-  defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
-  /** If `true`, the form control will be disabled. */
-  disabled: PropTypes.bool,
-  /** Format to display value. */
-  displayFormat: PropTypes.oneOfType([PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']), PropTypes.string]),
-  /** View days of previous or next month. */
-  displayAnotherMonth: PropTypes.bool,
-  /** Error of the form control. */
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /** InputProps are properties of the input element. */
-  inputProps: PropTypes.object,
-  /** InputStyle is style of input element. */
-  inputStyle: PropTypes.object,
-  /** Content of the label element. */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /** LabelProps are properties if the label element. */
-  labelProps: PropTypes.object,
-  /** Min value of date picker. */
-  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
-  /** Max value of date picker. */
-  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
-  /** Callback fired when the input is blurred. */
-  onBlur: PropTypes.func,
-  /** A callback function when value input change. */
-  onChange: PropTypes.func,
-  /** Hints for input. */
-  placeholder: PropTypes.string,
-  /** Allow close Popup when press ESC. */
-  pressESCToClose: PropTypes.bool,
-  /** Status read only of input. */
-  readOnly: PropTypes.bool,
-  /** Required state of the form control. */
-  required: PropTypes.bool,
-  /** Format of the returned value. */
-  returnFormat: PropTypes.oneOfType([PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']), PropTypes.string]),
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** Text align of the input. */
-  textAlign: PropTypes.oneOf(['center', 'end', 'start']),
-  /** If `true`, lets users select a date with the keyboard. */
-  useDateInput: PropTypes.bool,
-  /** Value of the component. */
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array, PropTypes.object]),
-  /** View type of the form control. */
-  viewType: PropTypes.oneOf(['outlined', 'underlined']),
-  /** Min zoom level of DatePicker */
-  minZoom: PropTypes.oneOf(['day', 'month', 'quarter', 'year']),
-  /** Max zoom level of DatePicker */
-  maxZoom: PropTypes.oneOf(['day', 'month', 'year', 'decade'])
-};
-export default DatePicker;