diginet-core-ui 1.4.63 → 1.4.64

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

@@ -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

@@ -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

@@ -1182,6 +1182,37 @@ export const Block = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const BloodMinus = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = 'system/rest',
+  viewBox = false
+}) => {
+  if (viewBox) {
+    return /*#__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: "M6.64325 19.2933C5.21442 17.8221 4.5 15.9911 4.5 13.8001C4.5 12.2487 5.12083 10.5484 6.3625 8.69905C7.60417 6.84972 9.48333 4.83472 12 2.65405C14.5167 4.83472 16.3958 6.84972 17.6375 8.69905C18.8792 10.5484 19.5 12.2487 19.5 13.8001C19.5 15.9911 18.785 17.8221 17.355 19.2933C15.925 20.7645 14.1394 21.5001 11.9983 21.5001C9.85708 21.5001 8.07208 20.7645 6.64325 19.2933ZM8 15H16V13H8V15Z",
+      fill: fillColor(color)
+    }));
+  }
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width || 15,
+    height: height || 19,
+    viewBox: "0 0 15 19",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.14325 16.6392C0.714417 15.1681 0 13.337 0 11.146C0 9.59467 0.620833 7.89433 1.8625 6.045C3.10417 4.19567 4.98333 2.18067 7.5 0C10.0167 2.18067 11.8958 4.19567 13.1375 6.045C14.3792 7.89433 15 9.59467 15 11.146C15 13.337 14.285 15.1681 12.855 16.6392C11.425 18.1104 9.63942 18.846 7.49825 18.846C5.35708 18.846 3.57208 18.1104 2.14325 16.6392ZM3.5 12.3459H11.5V10.3459H3.5V12.3459Z",
+    fill: fillColor(color)
+  }));
+});
 export const Cake = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.63",
+  "version": "1.4.64",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

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

@@ -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;