diginet-core-ui 1.3.73 → 1.3.74

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