diginet-core-ui 1.3.73 → 1.3.75

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

@@ -38,6 +38,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   readOnly,
   required,
   returnFormat,
+  showUnitCount,
   startFromZero,
   style,
   textAlign,
@@ -462,8 +463,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         tableData = [],
         weekDateFirst = getDateOfWeek(firstDay),
         weekDateLast = getDateOfWeek(lastDay);
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
 
     for (let i = weekDateFirst; i > 0; i--) {
@@ -476,8 +477,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
 
 
@@ -491,8 +492,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, jsx(Typography, { ...typographyProps(unique.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
 
 
@@ -595,11 +596,11 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    const trueWidth = width > 320 ? width < 633 ? 633 : width : 320;
+    const pickerWidth = window.innerWidth <= 633 ? 300 : 633;
 
-    if (left + trueWidth > innerWidth) {
-      if (innerWidth > trueWidth) {
-        style.left = (innerWidth - trueWidth) / 2;
+    if (left + pickerWidth > innerWidth) {
+      if (innerWidth > pickerWidth) {
+        style.left = (innerWidth - pickerWidth) / 2;
       }
     }
 
@@ -1003,9 +1004,9 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (!reset) {
       if (unshift) {
-        tempValue = formatValue(time, displayFormat) + ' - ' + el.value + ` (${selected.current} ${enUnitText})`;
+        tempValue = formatValue(time, displayFormat) + ' - ' + el.value + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '');
       } else {
-        tempValue = el.value + ' - ' + formatValue(time, displayFormat) + ` (${selected.current} ${enUnitText})`;
+        tempValue = el.value + ' - ' + formatValue(time, displayFormat) + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '');
       }
     } else {
       tempValue = formatValue(time, displayFormat);
@@ -1189,8 +1190,10 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     disabled: disabled,
     required: required
   }, label), jsx(InputBase, {
-    placeholder: placeholder,
-    ...inputProps,
+    inputProps: {
+      placeholder: !readOnly && !disabled ? placeholder : '',
+      ...inputProps
+    },
     readOnly: true,
     ref: ipConRef,
     inputRef: ipRef,
@@ -1224,6 +1227,7 @@ DateRangePickerV2.defaultProps = {
   startFromZero: false,
   textAlign: 'start',
   returnFormat: 'YYYY-MM-DD',
+  showUnitCount: true,
   viewType: 'underlined'
 };
 DateRangePickerV2.propTypes = {
@@ -1287,6 +1291,9 @@ DateRangePickerV2.propTypes = {
   /** 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]),
 
+  /** If `true`, show unit count. */
+  showUnitCount: PropTypes.bool,
+
   /** counter with start with 0 or 1 */
   startFromZero: PropTypes.bool,
 

package/components/form-control/dropdown/index.js

@@ -49,7 +49,8 @@ const timing = {},
       isSearch = {},
       allValue = {};
 const separatorPattern = /\{\w+\}/g;
-const regexBetween = /[^{\}]+(?=})/g;
+const regexBetween = /[^{\}]+(?=})/g; // eslint-disable-line
+
 const regexInclude = /{|}/g;
 
 const checkHasValue = value => {
@@ -233,7 +234,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _DropdownListCSS,
       ref: dropdownListRef,
       className: 'DGN-Dropdown-List'
-    }, children) : itemMode === 'normal' ? mapDropdown(null, keyArr) : mapTreeView();
+    }, dataSource !== null && dataSource !== void 0 && dataSource.length ? children : EmptyDataText) : itemMode === 'normal' ? mapDropdown(null, keyArr) : mapTreeView();
     const {
       innerHeight
     } = window;
@@ -551,10 +552,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _DropdownListCSS,
       ref: dropdownListRef,
       className: 'DGN-Dropdown-List'
-    }, items !== null && items !== void 0 && items.length ? items : jsx("div", {
-      css: _DropdownItemCSS,
-      className: 'no-data'
-    }, ' ', noDataText, ' '));
+    }, items !== null && items !== void 0 && items.length ? items : EmptyDataText);
   };
 
   const mapTreeView = () => {
@@ -563,7 +561,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _DropdownListCSS,
       ref: dropdownListRef,
       className: 'DGN-Dropdown-List'
-    }, jsx(TreeView, {
+    }, dataSource !== null && dataSource !== void 0 && dataSource.length ? jsx(TreeView, {
       dataSource: dataSource,
       displayExpr: displayExpr,
       valueExpr: valueExpr,
@@ -580,7 +578,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       value: typeof currentValue[unique] === 'string' ? [currentValue[unique]] : currentValue[unique],
       onChange: (e, value) => onChangeValue('', multiple ? value : e.value),
       renderItem: renderItem
-    })); // }
+    }) : EmptyDataText); // }
     // return treeView[unique];
   };
 
@@ -896,6 +894,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           value,
           data
         });
+      } else {
+        // Fix lost icon when select same value
+        triggerBlur(false);
       }
     }
 
@@ -917,6 +918,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const onRemove = (e, value) => {
     var _ref;
 
+    if (readOnly || disabled) return;
     const index = currentValue[unique].findIndex(v => JSON.stringify(v) === JSON.stringify(value));
 
     if (index !== -1) {
@@ -1087,7 +1089,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setSingleValueHandler = (data, keyArr) => {
-    const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr || valueExpr] || data;
+    const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr] || data[valueExpr] || data;
 
     if (typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
@@ -1158,8 +1160,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   useEffect(() => {
-    setShowClear(clearAble && checkHasValue(valueProp) && !disabled && !readOnly && !loading);
-  }, [clearAble, valueProp, disabled, readOnly, loading]);
+    setShowClear(clearAble && checkHasValue(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) && !disabled && !readOnly && !loading);
+  }, [clearAble, valueProp, defaultValue, disabled, readOnly, loading]);
   useEffect(() => {
     if (valueObjectDefault) {
       if (Array.isArray(valueObjectDefault)) {
@@ -1211,6 +1213,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (multiple && valueProp) {
       setValueMulti(!Array.isArray(valueProp) ? [valueProp] : valueProp);
+    } // Close dropdown treeview by children when select item
+
+
+    if (children && (closeAfterSelect === true || closeAfterSelect === undefined && !multiple)) {
+      closeDropdown();
     }
   }, [valueProp]);
   useEffect(() => {
@@ -1312,6 +1319,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   /* Start component */
 
+  const EmptyDataText = jsx("div", {
+    css: _DropdownItemCSS,
+    className: 'no-data'
+  }, ' ', noDataText, ' ');
   const LabelView = useMemo(() => label ? jsx(Label, {
     required: required,
     disabled: disabled,
@@ -1361,7 +1372,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (data) {
         var _displayExpr4;
 
-        const mask = (_displayExpr4 = displayExpr) === null || _displayExpr4 === void 0 ? void 0 : _displayExpr4.replace(regexBetween, _ => data[_]);
+        const mask = (data === null || data === void 0 ? void 0 : data[displayExpr]) || ((_displayExpr4 = displayExpr) === null || _displayExpr4 === void 0 ? void 0 : _displayExpr4.replace(regexBetween, _ => data[_]));
         text = mask === null || mask === void 0 ? void 0 : mask.replace(regexInclude, '');
       }
 
@@ -1379,7 +1390,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           label: text,
           size: 'medium',
           disabled: disabled,
-          clearAble: true,
+          clearAble: !readOnly && !disabled,
           onRemove: e => onRemove(e, vl)
         });
       }
@@ -1562,6 +1573,9 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               span:empty:before {
                   content: '${placeholder}';
                   color: ${sub};
+                  height: 100%;
+                  ${flexRow};
+                  ${alignCenter};
               }
               &::placeholder {
                   color: ${sub};
@@ -1611,6 +1625,13 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                       transform: rotateX(180deg);
                   }
               }
+              span:empty:before {
+                  content: '${placeholder}';
+                  color: ${sub};
+                  height: 100%;
+                  ${flexRow};
+                  ${alignCenter};
+              }
               &::placeholder {
                   color: ${sub};
               }
@@ -1829,14 +1850,14 @@ Dropdown.propTypes = {
   /** The icon to display if not found the icon follow `iconExpr`. */
   iconDefault: PropTypes.string,
 
-  /** Field name used for icon display.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** Field name used for icon display.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1851,9 +1872,9 @@ Dropdown.propTypes = {
   /** The displayed value of component. */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** Field name used for text display in dropdown list.<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** Field name used for text display in dropdown list.<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1863,10 +1884,10 @@ Dropdown.propTypes = {
   /** The field name used for the returned result. */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * Duration wait enter search content on search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
+  /**
+   * Duration wait enter search content on search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, used default delayOnInput.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
 
@@ -1933,19 +1954,19 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown list. */
   dataSource: PropTypes.array,
 
-  /** Function displays items by custom.<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** Function displays items by custom.<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** Function or field name used for display selected items, example:<br/>
-   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** Function or field name used for display selected items, example:<br/>
+   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
-  /** Callback fired when the input value changes.<br/>
-   * if undefined: the filter function will run (default)
+  /** Callback fired when the input value changes.<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 
@@ -1976,19 +1997,19 @@ Dropdown.propTypes = {
   /** If `true`, show multi-line selected item(s). */
   multilineSelectedItem: PropTypes.bool,
 
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)