diginet-core-ui 1.4.4 → 1.4.5

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

@@ -122,7 +122,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }));
   const [openState, setOpenState] = useState(false);
   const [showClear, setShowClear] = useState(false);
-  const [textValue, setTextValue] = useState('');
+  const [valueSingle, setValueSingle] = useState('');
   const [txtSearch, setTxtSearch] = useState('');
   const [popoverWidth, setPopoverWidth] = useState(0);
   const [loadingState, setLoadingState] = useState(loading);
@@ -937,7 +937,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       //     dropdownListRef.current.querySelectorAll('input').forEach(input => (input.checked = false));
       // }
     } else {
-      setTextValue('');
+      setValueSingle('');
     }
     // onChangeValue('', '');
     setValueMulti([]);
@@ -964,12 +964,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         // inputRef.current.innerHTML = '';
         currentValue[unique] = [];
       } else {
-        if (typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' && !isSearch[unique]) {
-          // inputRef.current.innerHTML = '';
-        } else if (!isSearch[unique]) {
-          inputRef.current.value = '';
-          setTextValue('');
-        }
+        // if (
+        //     typeof renderSelectedItem === 'function' ||
+        //     (iconExpr && iconExpr !== 'none' && !isSearch[unique])
+        // ) {
+        //     inputRef.current.innerHTML = '';
+        // } else if (!isSearch[unique]) {
+        //     inputRef.current.value = '';
+        // }
         currentValue[unique] = '';
       }
       return;
@@ -1022,7 +1024,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
       if (!isSearch[unique]) {
-        inputRef.current.value = source;
+        // inputRef.current.value = source;
       }
     }
   };
@@ -1059,26 +1061,34 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       hoverTooltip: !_isMobile
     }, content);
     if (typeof renderSelectedItem === 'function') {
-      inputRef.current.innerHTML = '';
+      // inputRef.current.innerHTML = '';
       const item = renderSelectedItem({
         data
       });
-      const el = document.createElement('div');
-      el.style.display = 'flex';
-      el.style.width = '100%';
-      el.style.minHeight = '24px';
-      if (!multilineSelectedItem) el.style.maxHeight = '24px';
-      ReactDOM.render(item, inputRef.current.appendChild(el));
+      // const el = document.createElement('div');
+      // el.style.display = 'flex';
+      // el.style.width = '100%';
+      // el.style.minHeight = '24px';
+      // if (!multilineSelectedItem) el.style.maxHeight = '24px';
+      const el = jsx("div", {
+        css: [displayFlex, parseWidth('100%'), parseMinHeight(24), !multilineSelectedItem && parseMaxHeight(24)]
+      }, item);
+      setValueSingle(el);
+      // ReactDOM.render(item, inputRef.current.appendChild(el));
     } else if (iconExpr && iconExpr !== 'none') {
-      inputRef.current.innerHTML = '';
+      // inputRef.current.innerHTML = '';
       const icon = getIconFromData(data);
       const valueWithIcon = jsx(Fragment, null, icon && icon, renderContent(text));
-      const el = document.createElement('div');
-      el.style.cssText = 'display: flex; align-items: center; min-height:24px;';
-      ReactDOM.render(valueWithIcon, inputRef.current.appendChild(el));
+      // const el = document.createElement('div');
+      // el.style.cssText = 'display: flex; align-items: center; min-height:24px;';
+      const el = jsx("div", {
+        css: [displayFlex, itemsCenter, parseMinHeight(24)]
+      }, valueWithIcon);
+      setValueSingle(el);
+      // ReactDOM.render(valueWithIcon, inputRef.current.appendChild(el));
     } else {
-      inputRef.current.value = text;
-      setTextValue(text);
+      // inputRef.current.value = text;
+      setValueSingle(text);
     }
   };
   useImperativeHandle(reference, () => {
@@ -1187,9 +1197,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [valueProp]);
   useEffect(() => {
-    if (
-    // valueProp !== undefined &&
-    !dropdownListRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique])) {
+    if (valueProp !== undefined && (!dropdownListRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
       setValueIntoInput(valueProp);
     }
   }, [valueProp, dataSourceState]);
@@ -1355,7 +1363,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           return false;
         }
       }
-    }) : jsx("div", {
+    }, valueSingle) : jsx("div", {
       css: _DropdownInputCSS,
       onClick: onClickInput
     }, jsx(Typography, {
@@ -1367,7 +1375,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         lineHeight: multiple ? '30px' : '24px'
       },
       tabIndex: -1
-    }, textValue))), jsx("div", {
+    }, valueSingle))), jsx("div", {
       ref: iconRef,
       css: _IconCSS,
       className: 'DGN-UI-Dropdown-Icon'
@@ -1386,7 +1394,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: setShowDropdown,
       disabled: disabled || readOnly
     }) : null));
-  }, [openState, showClear, textValue, valueMulti, loadingState, dataSourceState, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType]);
+  }, [openState, showClear, valueSingle, valueMulti, loadingState, dataSourceState, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType]);
   const ErrorView = useMemo(() => {
     return error ? jsx(HelperText, {
       ...helperTextProps,

package/package.json

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

package/readme.md

@@ -38,6 +38,10 @@ npm test
 ```
 
 ## Changelog
+## 1.4.5
+- \[Changed\]: Dropdown – Optimize code remove innerHTML = ''
+- \[Fixed\]: Dropdown – Fix bug not show value
+
 ## 1.4.4
 - \[Fixed\]: Dropdown – Fix bug blank selected item when use renderSelectedItem