diginet-core-ui 1.4.63-beta.1 → 1.4.64-beta.1

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

@@ -41,8 +41,8 @@ export class DateField {
   }
 }
 
-/**
- * Pad a number with zeros to the left.
+/**
+ * Pad a number with zeros to the left.
  */
 const padNumber = (number, length) => {
   let numberString = String(number);
@@ -158,7 +158,7 @@ export const useDateField = (format, localize, date) => {
       minute,
       second
     } = dateField;
-    const date = new Date(year || 0, typeof month === 'number' ? month - 1 : 0,
+    const date = new Date(year || 0, typeof month === 'number' ? Math.max(0, 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') {

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

@@ -1,5 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
+import { useEffect } from 'react';
 import { css, jsx } from '@emotion/core';
 import { HelperText, Label } from "../..";
 import { getGlobal } from "../../../global";
@@ -8,12 +9,19 @@ 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 { classNames, refType as ref, useControlled, parseDateByFormat } 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 usePrevious = value => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
 const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
@@ -57,6 +65,7 @@ const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
     selectionStart: 0,
     selectionEnd: 0
   });
+  const selectedStateOld = usePrevious(selectedState) || {};
   const isError = !!error;
   const isEnabled = !readOnly && !disabled;
   useImperativeHandle(reference, () => {
@@ -124,15 +133,25 @@ const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
     setSelectionRange(state.selectionStart, state.selectionEnd);
   });
   const onSegmentValueChangeWithNumericKeys = useEventCallback(event => {
+    var _inputRef$current;
     const input = event.target;
     const key = event.key;
     const pattern = selectedState.selectedPattern;
     if (!pattern) {
       return;
     }
+    const displayDate = ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) || '';
+    const dataDisplayVal = parseDateByFormat(displayDate, formatStr) || [];
+    const patternName = Object.keys(dataDisplayVal).find(name => name.includes(pattern));
+    const valDisplay = (dataDisplayVal === null || dataDisplayVal === void 0 ? void 0 : dataDisplayVal[patternName]) || '';
     const field = getDateField(pattern);
     const value = parseInt(key, 10);
-    const padValue = parseInt(`${field.value || ''}${key}`, 10);
+    // * If Date or Month ['DD', 'MM'];
+    // * If current display value has two number and first num is 0
+    // * If current value !== 0
+    // * And Already finish text month or date
+    // ===> Not chain the previous num
+    const padValue = ['DD', 'MM'].includes(patternName) && valDisplay.length === 2 && valDisplay[0] === '0' && key !== 0 && (selectedStateOld.selectedPattern || '').toUpperCase() !== pattern ? Number(key) : parseInt(`${field.value || ''}${key}`, 10);
     let newValue = value;
 
     // Check if the value entered by the user is a valid date

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

@@ -1,9 +1,9 @@
 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
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * @param {function} fn
  */
 export const useEventCallback = fn => {
   const ref = useRef(fn);
@@ -217,7 +217,7 @@ export const modifyDate = (date, type, value) => {
     case 'year':
       return setYear(date, value);
     case 'month':
-      return setMonth(date, value - 1);
+      return setMonth(date, Math.max(0, value - 1));
     case 'day':
       return setDate(date, value);
     case 'hour':

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

@@ -106,19 +106,24 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     value: valueProp,
     viewType,
     onBlur,
+    delayOnChange: delayOnChangeProp,
     ...other
   } = props;
   const dateLocale = locale.get();
   const displayFormat = (_getDateFormats = getDateFormats(dateLocale, minZoom)) !== null && _getDateFormats !== void 0 ? _getDateFormats : 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 renderDateInputCondition = useDateInput && minZoom !== 'quarter' && !min && !max || true;
+  const delayOnChange = delayOnChangeProp || renderDateInputCondition ? typeof delayOnChangeProp === 'number' ? delayOnChangeProp : getGlobal('delayOnInput') : 0;
   const [value, setValue] = useControlled(parseValueToDate(valueProp), parseValueToDate(defaultValue));
   const [openPickerState, setOpenPickerState] = useState(false);
+  const defaultVal = useRef(valueProp);
   const ipRef = useRef(null);
   const ref = useRef(null);
   const focusedValue = useRef(null);
   const pickerRef = useRef(null);
   const buttonCarlendarRef = useRef(null);
+  const timer = useRef(null);
   const isError = !!error && (!value || !isValid(value));
   const _DatePickerRoot = DatePickerRoot();
   const _IconAreaCSS = IconAreaCSS();
@@ -140,9 +145,12 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     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
-    });
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        value: isValid(vl) ? formatValue(vl, returnFormat) : String(vl) === 'Invalid Date' ? defaultVal.current : vl
+      });
+    }, delayOnChange);
   };
   const onCalendarClick = e => {
     !controls ? onChangeValue(e) : focusedValue.current = e === null || e === void 0 ? void 0 : e.value;
@@ -224,7 +232,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       return null;
     } else return parse(value, lowerCaseDayYear(returnFormat), new Date());
   }, [value]);
-  const renderDateInputCondition = useDateInput && minZoom !== 'quarter' && !min && !max || true;
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DatePickerRoot,
@@ -339,6 +346,8 @@ DatePicker.propTypes = {
   controls: PropTypes.bool,
   /** The default value of the component. */
   defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
+  /** The number of milliseconds to wait before call onChange. */
+  delayOnChange: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   /** If `true`, the form control will be disabled. */
   disabled: PropTypes.bool,
   /** Format to display value. */

package/icons/basic.js

@@ -4679,6 +4679,34 @@ export const OneSquare = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const OpenNew = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = 'system/rest',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 3V5H5V19H19V12H21V19C21 20.1 20.1 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.89 3 5 3H12ZM21 3V10H19V6.41016L9.16992 16.2402L7.75977 14.8301L17.5898 5H14V3H21Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9 0V2H2V16H16V9H18V16C18 17.1 17.1 18 16 18H2C0.89 18 0 17.1 0 16V2C0 0.9 0.89 0 2 0H9ZM18 0V7H16V3.41016L6.16992 13.2402L4.75977 11.8301L14.5898 2H11V0H18Z",
+    fill: fillColor(color)
+  }));
+});
 export const Undo = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.63-beta.1",
+  "version": "1.4.64-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -41,6 +41,9 @@ npm test
 ```
 
 ## Changelog
+## 1.4.64
+- \[Added\]: Icon – Add Icon BloodMinus
+- \[Changed\]: DatePicker - Allow manual input for the DatePicker (default value shows "Invalid Date" when typing) + add a "delayOnChange" prop.
 
 ## 1.4.63
 - \[Added\]: Icon – Add IconMenu MHRP39N0029

package/utils/date.js

@@ -4,11 +4,11 @@ const language = locale.get();
 const localeName = language === 'en' ? 'en-US' : 'vi-VN';
 const units = ['year', 'month', 'day', 'hour', 'minute', 'second', 'millisecond'];
 
-/**
- *
- * @param {Date|String|Array} value is a date time
- * @param {String} format the input date format
- * @param {Boolean} setNow return current time if true
+/**
+ *
+ * @param {Date|String|Array} value is a date time
+ * @param {String} format the input date format
+ * @param {Boolean} setNow return current time if true
  */
 const getDate = (value, format = 'MM/DD/YYYY', setNow = true) => {
   if (value) {
@@ -52,11 +52,11 @@ const getMethodOfUnit = unit => {
   }
 };
 
-/**
- * check 1 value is a date
- * @param {Date|String|Array|Number} value the value to check
- * @param {String} formatInput the format date to check valid date
- * @returns {Boolean} valid date
+/**
+ * check 1 value is a date
+ * @param {Date|String|Array|Number} value the value to check
+ * @param {String} formatInput the format date to check valid date
+ * @returns {Boolean} valid date
  */
 export const isValidDate = (value, formatInput) => {
   if (typeof value === 'string' || Array.isArray(value)) {
@@ -69,11 +69,11 @@ export const isValidDate = (value, formatInput) => {
   return false;
 };
 
-/**
- * get the end of month from month and year or from a date
- * @param {Number|String|Date|Array} month the month of year (can also be validated as year) or a value with date type
- * @param {Number} year the year (can also be validated as month if arg 1 is year)
- * @returns {Number} end day
+/**
+ * get the end of month from month and year or from a date
+ * @param {Number|String|Date|Array} month the month of year (can also be validated as year) or a value with date type
+ * @param {Number} year the year (can also be validated as month if arg 1 is year)
+ * @returns {Number} end day
  */
 export const getEndDayOfMonth = (month, year) => {
   if (!year) {
@@ -92,11 +92,11 @@ export const getEndDayOfMonth = (month, year) => {
   return 'Invalid Date';
 };
 
-/**
- * return a date time follow the concrete format
- * @param {Date|String|Array} value is a date time
- * @param {String} formatOutput format of date
- * @param {Boolean} utc is utc time
+/**
+ * return a date time follow the concrete format
+ * @param {Date|String|Array} value is a date time
+ * @param {String} formatOutput format of date
+ * @param {Boolean} utc is utc time
  */
 export const formatDate = (value, formatOutput = 'DD/MM/YYYY', utc = false) => {
   if (!value) return formatOutput;
@@ -232,21 +232,21 @@ export const formatDate = (value, formatOutput = 'DD/MM/YYYY', utc = false) => {
   }
 };
 
-/**
- * return a date like moment
- * @param {Date|String|Array} value is date time
- * @param {String} formatInput format of input date value
- * @returns {Object} date
+/**
+ * return a date like moment
+ * @param {Date|String|Array} value is date time
+ * @param {String} formatInput format of input date value
+ * @returns {Object} date
  */
 const date = (value, formatInput = 'MM/DD/YYYY') => {
   const originDate = getDate(value, formatInput);
 
-  /**
-   * compare two date time and return a period
-   * @param {Date|String|Array} date is a date time
-   * @param {String} unit one of milliseconds|seconds|minutes|hours|days|months|years
-   * @param {Boolean|Number} floating allow odd numbers
-   * @returns {Number} distance
+  /**
+   * compare two date time and return a period
+   * @param {Date|String|Array} date is a date time
+   * @param {String} unit one of milliseconds|seconds|minutes|hours|days|months|years
+   * @param {Boolean|Number} floating allow odd numbers
+   * @returns {Number} distance
    */
   const diff = (compareDate, unit = 'days', floating = false) => {
     compareDate = getDate(compareDate);
@@ -295,12 +295,12 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
     return result.toFixed(floating ? typeof floating === 'number' ? floating : 2 : 0);
   };
 
-  /**
-   * add or subtract date time
-   * @param {Number} num the quantity to cal for unit
-   * @param {String} unit the unit of date/time
-   * @param {String} operator operator to cal (add/subtract)
-   * @returns {Object} date
+  /**
+   * add or subtract date time
+   * @param {Number} num the quantity to cal for unit
+   * @param {String} unit the unit of date/time
+   * @param {String} operator operator to cal (add/subtract)
+   * @returns {Object} date
    */
   const calculation = (num, unit, operator) => {
     if (isNaN(num)) {
@@ -311,11 +311,11 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
     return date(originDate, formatInput);
   };
 
-  /**
-   * get the moment of time follow unit time
-   * @param {String} unit the unit of time
-   * @param {String} moment start|end to get start|end of the moment
-   * @returns {Object} date
+  /**
+   * get the moment of time follow unit time
+   * @param {String} unit the unit of time
+   * @param {String} moment start|end to get start|end of the moment
+   * @returns {Object} date
    */
   const timeOf = (unit, moment) => {
     let temp = 1;
@@ -337,12 +337,12 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
     return date(originDate, formatInput);
   };
 
-  /**
-   *
-   * @param {Date|String|Number|Array} compareDate date to calculate moment, undefined will compare with now
-   * @param {String|Array} unit year|month|day|hour|minute|second|millisecond, allow undefined
-   * @param {Boolean|Number} floating allow odd numbers
-   * @returns {String} moments
+  /**
+   *
+   * @param {Date|String|Number|Array} compareDate date to calculate moment, undefined will compare with now
+   * @param {String|Array} unit year|month|day|hour|minute|second|millisecond, allow undefined
+   * @param {Boolean|Number} floating allow odd numbers
+   * @returns {String} moments
    */
   const relative = (compareDate, unit, floating) => {
     compareDate = getDate(compareDate);
@@ -378,17 +378,17 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
   };
   return {
     value: originDate,
-    /**
-     * return a date time follow the concrete format
-     * @param {String} formatOutput format of date
-     * @param {Boolean} utc is utc time
+    /**
+     * return a date time follow the concrete format
+     * @param {String} formatOutput format of date
+     * @param {Boolean} utc is utc time
      */
     format: (formatOutput, utc) => formatDate(originDate, formatOutput, utc),
     diff,
-    /**
-     * check 1 value is a date
-     * @param {String} formatInput the format date to check valid date
-     * @returns {Boolean} valid date
+    /**
+     * check 1 value is a date
+     * @param {String} formatInput the format date to check valid date
+     * @returns {Boolean} valid date
      */
     isValid: () => isValidDate(originDate, formatInput),
     add: (num, unit) => calculation(num, unit, 'add'),
@@ -398,4 +398,14 @@ const date = (value, formatInput = 'MM/DD/YYYY') => {
     relative
   };
 };
+export const parseDateByFormat = (dateStr, format) => {
+  const separators = /[-/]/;
+  const dateParts = dateStr.split(separators);
+  const formatParts = format.split(separators);
+  const result = {};
+  formatParts.forEach((part, index) => {
+    result[part] = dateParts[index] === part ? '' : dateParts[index];
+  });
+  return result;
+};
 export default date;