diginet-core-ui 1.4.1 → 1.4.2

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

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { Avatar, ButtonIcon, Checkbox, Chip, CircularProgress, HelperText, InputBase, Label, TreeView, Typography } from "../..";
+import { Avatar, ButtonIcon, Checkbox, Chip, CircularProgress, HelperText, InputBase, Label, Popup, TreeView, Typography } from "../..";
 import Popover from "../../popover";
 import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
@@ -83,6 +83,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   searchExpr,
   searchMode,
   selectBox,
+  skip,
   style,
   subText,
   total,
@@ -110,6 +111,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   // const timeout = useRef(null);
   const loadMoreTimer = useRef(null);
   const dataChosen = useRef([]);
+  const popupRef = useRef(null);
+  const filter = useRef({
+    skip: skip || 0,
+    limit: limit || 50
+  });
   const [unique] = useState(randomString(6, {
     allowNumber: false,
     allowSymbol: false
@@ -119,6 +125,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [textValue, setTextValue] = useState('');
   const [txtSearch, setTxtSearch] = useState('');
   const [popoverWidth, setPopoverWidth] = useState(0);
+  const [loadingState, setLoadingState] = useState(loading);
+  const [totalState, setTotalState] = useState(total);
+  const [dataSourceState, setDataSourceState] = useState(dataSource);
+  const [popupDataState, setPopupDataState] = useState({
+    title: '',
+    substitle: '',
+    description: ''
+  });
   let valueTemp = valueProp || defaultValue || [];
 
   // only mode multi
@@ -131,7 +145,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, disabled, readOnly, multilineSelectedItem);
   const _IconCSS = IconCSS(viewType);
   const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, disabled, placeholder, _DropdownInputCSS.name);
-  const _DropdownListCSS = DropdownListCSS(loading);
+  const _DropdownListCSS = DropdownListCSS(loadingState);
   const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
   const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name);
 
@@ -148,7 +162,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     !!blur && inputRef.current.blur();
   };
   const onClickInput = e => {
-    if (disabled || readOnly || loading) return;
+    if (disabled || readOnly || loadingState) return;
     if (!dropdownListRef.current) {
       if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e === null || e === void 0 ? void 0 : e.target))) {
         setOpenState(true);
@@ -181,7 +195,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'DGN-Dropdown-List',
       onKeyDown: moveOnItem,
       tabIndex: -1
-    }, dataSource !== null && dataSource !== void 0 && dataSource.length ? children : EmptyDataText) : itemMode === 'normal' ? mapDropdown() : mapTreeView();
+    }, dataSourceState !== null && dataSourceState !== void 0 && dataSourceState.length ? children : EmptyDataText) : itemMode === 'normal' ? mapDropdown() : mapTreeView();
     // const { innerHeight } = window;
     // const { top, left, height, width } = formRef.current.getBoundingClientRect();
 
@@ -220,12 +234,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         marginBottom: 1
       },
       onKeyDown: pressESCHandler,
+      readOnly: loadingState,
       autoFocus: true
     })) : null, multiple && maximumSelectionLength ? jsx(Typography, {
       css: pd([2, 4])
     }, getGlobal('selected'), " ", (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) || 0, "/", maximumSelectionLength) : null, jsx("div", {
       className: 'DGN-Dropdown-Box'
-    }, dropdown), loading ? jsx("div", {
+    }, dropdown), loadingState ? jsx("div", {
       css: LoadingProgressCSS,
       className: 'DGN-Dropdown-Loading-Progress'
     }, jsx(CircularProgress, {
@@ -239,7 +254,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       window.addEventListener('resize', customizeWidthDropdown);
       // document.addEventListener('wheel', onWheelHandler);
       // document.addEventListener('mousedown', onClickOutsideOfInput);
-      if (onLoadMore && dataSource.length < total) {
+      if (onLoadMore && dataSourceState.length < totalState) {
         dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       }
     }, 10);
@@ -317,13 +332,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //     }
   // };
 
-  /**
-   * So sánh text đầu vào cáo map với txtSearch
-   * @param text
-   * @return {boolean}
+  /**
+   * So sánh text đầu vào cáo map với txtSearch
+   * @param text
+   * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
-    if (!txtSearch || typeof text !== 'string') return true;
+    if (typeof text !== 'string') text = text.toString();
+    if (!txtSearch) return true;
     if (searchMode === 'startswith') {
       return text.toLowerCase().startsWith(txtSearch.toLowerCase());
     } else if (searchMode === 'equals') {
@@ -331,10 +347,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else return text.toLowerCase().includes(txtSearch.toLowerCase());
   };
 
-  /**
-   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
-   * @param data {object} rowData of dataSource
-   * @return {string}
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
    */
   const displayValue = data => {
     let text = '';
@@ -353,20 +369,23 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return text;
   };
   const mapDropdown = () => {
-    var _dataSourceUsable, _currentObjectDefault;
+    var _currentObjectDefault;
     const items = [];
-    let dataSourceUsable = [...dataSource];
+    let dataSourceUsable = [...dataSourceState];
 
     // search dataSource dựa trên txtSearch
-    dataSourceUsable = (_dataSourceUsable = dataSourceUsable) === null || _dataSourceUsable === void 0 ? void 0 : _dataSourceUsable.filter(i => {
-      if (searchExpr) {
-        // nếu map đc vs 1 trong những <key>(data[key]) của searchExpr
-        return !!searchExpr.find(j => handleRenderBySearch(i[j]));
-      } else {
-        // nếu map đc vs displayValue
-        return handleRenderBySearch(displayValue(i)) || handleRenderBySearch(i === null || i === void 0 ? void 0 : i[valueExpr]);
-      }
-    });
+    if (!onInput || action !== null && action !== void 0 && action.loadData) {
+      var _dataSourceUsable;
+      dataSourceUsable = (_dataSourceUsable = dataSourceUsable) === null || _dataSourceUsable === void 0 ? void 0 : _dataSourceUsable.filter(i => {
+        if (searchExpr) {
+          // nếu map đc vs 1 trong những <key>(data[key]) của searchExpr
+          return !!searchExpr.find(j => handleRenderBySearch(i[j]));
+        } else {
+          // nếu map đc vs displayValue
+          return handleRenderBySearch(displayValue(i)) || handleRenderBySearch(i === null || i === void 0 ? void 0 : i[valueExpr]);
+        }
+      });
+    }
     if (currentObjectDefault[unique] && (_currentObjectDefault = currentObjectDefault[unique]) !== null && _currentObjectDefault !== void 0 && _currentObjectDefault.length) {
       const length = currentObjectDefault[unique].length;
       let existItemQuantity = 0;
@@ -385,6 +404,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const length = dataSourceUsable.length;
     for (let index = 0; index < length; index++) {
       const data = dataSourceUsable[index];
+      if (!data) continue;
       const itemHidden = typeof data === 'object' ? data['hidden'] : false;
       if (itemHidden) continue;
       let displayText = displayValue(data);
@@ -477,8 +497,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'DGN-Dropdown-List',
       onKeyDown: moveOnItem,
       tabIndex: -1
-    }, dataSource !== null && dataSource !== void 0 && dataSource.length ? jsx(TreeView, {
-      dataSource: dataSource,
+    }, dataSourceState !== null && dataSourceState !== void 0 && dataSourceState.length ? jsx(TreeView, {
+      dataSource: dataSourceState,
       displayExpr: displayExpr,
       valueExpr: valueExpr,
       multiple: multiple,
@@ -500,7 +520,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   // remove item  cũ và append child item mới khi load more
   const loadMoreItemsDropdown = (i = 0, pattern) => {
     var _currentObjectDefault2, _displayExpr2;
-    const dataSourceUsable = [...dataSource];
+    const dataSourceUsable = [...dataSourceState];
     // Nếu có load more thì đẩy đội tượng mặc định lên đầu
     let notExistItem = 0;
     if (onLoadMore && (_currentObjectDefault2 = currentObjectDefault[unique]) !== null && _currentObjectDefault2 !== void 0 && _currentObjectDefault2.length) {
@@ -648,6 +668,65 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //         : updatePosition(formRef.current, dropdownRef.current, closeDropdown);
   // };
 
+  const handleActionLoadData = isReset => {
+    const {
+      skip,
+      limit,
+      strSearch: search
+    } = filter.current;
+    const params = onLoadMore ? {
+      skip,
+      limit,
+      search
+    } : {
+      search
+    };
+    const callbackSave = (error, data) => {
+      setLoadingState(false);
+      if (error) {
+        let _data = {};
+        if (error.originalError) {
+          const {
+            message,
+            originalError,
+            customMessage,
+            code: codeError
+          } = error;
+          const _customMessage = customMessage && typeof customMessage === 'object' ? customMessage[codeError] : customMessage;
+          let messageError = '';
+          Object.keys(originalError).forEach(key => {
+            messageError += `${key}: ${JSON.stringify(originalError[key], null, 8)}\n`;
+          });
+          _data = {
+            title: getGlobal('error') + (codeError ? `: ${codeError}` : ''),
+            subtitle: _customMessage || message || getGlobal('unknownError'),
+            description: messageError
+          };
+        } else {
+          var _data$data;
+          const message = (data === null || data === void 0 ? void 0 : data.message) || (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.Message) || data;
+          _data = {
+            description: message || getGlobal('unknownError')
+          };
+        }
+        setPopupDataState(_data);
+        popupRef.current.instance.show();
+        return false;
+      } else if (data) {
+        let rows = [];
+        if (Array.isArray(data)) {
+          rows = data;
+        } else {
+          rows = data && data.rows ? data.rows : dataSourceState;
+          const total = data && data.total ? data.total : data.length;
+          setTotalState(total);
+        }
+        setDataSourceState(isReset ? rows : dataSourceState.concat(rows));
+      }
+    };
+    setLoadingState(true);
+    action.loadData(params, callbackSave);
+  };
   const onLoadMoreHandler = e => {
     if (loadMoreTimer.current) {
       clearTimeout(loadMoreTimer.current);
@@ -662,12 +741,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         var _dropdownListRef$curr, _currentObjectDefault3;
         const length = ((_dropdownListRef$curr = dropdownListRef.current.children) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.length) - (((_currentObjectDefault3 = currentObjectDefault[unique]) === null || _currentObjectDefault3 === void 0 ? void 0 : _currentObjectDefault3.length) || 0);
         dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
-        !!onLoadMore && onLoadMore({
+        if (!!onLoadMore && typeof onLoadMore === 'boolean' && action !== null && action !== void 0 && action.loadData) {
+          filter.current.skip = length;
+          filter.current.limit = limit;
+          handleActionLoadData();
+        } else !!onLoadMore && onLoadMore({
           skip: length,
           limit: limit
         });
       }
-    });
+    }, 300);
   };
   const onPreventKeyDownHandler = e => {
     e.preventDefault();
@@ -700,6 +783,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // }
       // return;
     }
+
+    if (action !== null && action !== void 0 && action.loadData && !!onLoadMore) {
+      filter.current.strSearch = e.target.value;
+      handleActionLoadData(true);
+    }
     // const value = e.target.value || e.target.textContent;
     // if (
     //     typeof renderSelectedItem === 'function' &&
@@ -721,7 +809,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (valueProp === undefined) {
         setValueMulti(value);
         setValueIntoInput(value);
-        setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loading);
+        setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loadingState);
       }
       !!onChange && onChange({
         value
@@ -840,7 +928,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
   const onClear = e => {
-    if (disabled || readOnly || loading || !clearAble) return;
+    if (disabled || readOnly || loadingState || !clearAble) return;
     currentValue[unique] = multiple ? [] : '';
     if (multiple) {
       setValueMulti([]);
@@ -886,7 +974,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
       return;
     }
-    const length = dataSource.length;
+    const length = dataSourceState.length;
     const displayKey = typeof renderSelectedItem === 'string' ? renderSelectedItem : displayExpr;
     if (displayKey && Array.isArray(displayKey)) {
       displayExpr = displayExpr.join(' - ');
@@ -903,8 +991,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       valueArr.forEach(v => {
         var _currentObjectDefault4;
         for (let i = 0; i < length; i++) {
-          if (typeof dataSource[i] === 'object' && dataSource[i][valueExpr] === v || dataSource[i] === v) {
-            setMultipleValueHandler(dataSource[i], v, keyArr, i);
+          if (!dataSourceState[i]) continue;
+          if (typeof dataSourceState[i] === 'object' && dataSourceState[i][valueExpr] === v || dataSourceState[i] === v) {
+            setMultipleValueHandler(dataSourceState[i], v, keyArr, i);
             return;
           }
         }
@@ -919,8 +1008,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       var _currentObjectDefault5;
       currentValue[unique] = source;
       for (let i = 0; i < length; i++) {
-        if (dataSource[i][valueExpr] === source || dataSource[i] === source) {
-          setSingleValueHandler(dataSource[i], keyArr);
+        if (!dataSourceState[i]) continue;
+        if (dataSourceState[i][valueExpr] === source || dataSourceState[i] === source) {
+          setSingleValueHandler(dataSourceState[i], keyArr);
           return;
         }
       }
@@ -1027,8 +1117,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   useEffect(() => {
-    setShowClear(clearAble && checkHasValue(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) && !disabled && !readOnly && !loading);
-  }, [clearAble, valueProp, defaultValue, disabled, readOnly, loading]);
+    setLoadingState(loading);
+  }, [loading]);
+  useEffect(() => {
+    setTotalState(total);
+  }, [total]);
+  useEffect(() => {
+    setDataSourceState(dataSource);
+  }, [dataSource]);
+  useEffect(() => {
+    setShowClear(clearAble && checkHasValue(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) && !disabled && !readOnly && !loadingState);
+  }, [clearAble, valueProp, defaultValue, disabled, readOnly, loadingState]);
   useEffect(() => {
     if (valueObjectDefault) {
       if (Array.isArray(valueObjectDefault)) {
@@ -1047,8 +1146,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allValue[unique] = [];
     if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
       setValueIntoInput(defaultValue);
-      setShowClear(clearAble && checkHasValue(defaultValue) && !disabled && !readOnly && !loading);
+      setShowClear(clearAble && checkHasValue(defaultValue) && !disabled && !readOnly && !loadingState);
     }
+    if (action !== null && action !== void 0 && action.loadData) handleActionLoadData();
     return () => {
       allValue[unique] = null;
       closeDropdown();
@@ -1087,10 +1187,12 @@ 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, dataSource]);
+  }, [valueProp, dataSourceState]);
   useEffect(() => {
     inputRef.current.readOnly = readOnly || inputProps.readOnly;
     if (!readOnly && !disabled) {
@@ -1133,9 +1235,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         inputRef.current.addEventListener('input', onChangeInput);
       }
       const length = (_dropdownListRef$curr2 = dropdownListRef.current) === null || _dropdownListRef$curr2 === void 0 ? void 0 : (_dropdownListRef$curr3 = _dropdownListRef$curr2.children) === null || _dropdownListRef$curr3 === void 0 ? void 0 : _dropdownListRef$curr3.length;
-      if (length < dataSource.length + ((_currentObjectDefault6 = currentObjectDefault[unique]) === null || _currentObjectDefault6 === void 0 ? void 0 : _currentObjectDefault6.length) && !isSearch[unique]) {
+      if (length < dataSourceState.length + ((_currentObjectDefault6 = currentObjectDefault[unique]) === null || _currentObjectDefault6 === void 0 ? void 0 : _currentObjectDefault6.length) && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
-        !!onLoadMore && dataSource.length < total && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
+        !!onLoadMore && dataSourceState.length < totalState && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
         isSearch[unique] = false;
       }
@@ -1151,7 +1253,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
       !!dropdownListRef.current && dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
     };
-  }, [dataSource]);
+  }, [dataSourceState]);
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -1173,7 +1275,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...labelProps
   }, label) : null, [label, required, disabled, labelProps]);
   const getData = () => {
-    let dataFilter = JSON.parse(JSON.stringify(dataSource));
+    let dataFilter = JSON.parse(JSON.stringify(dataSourceState));
     if (Array.isArray(valueObjectDefault)) {
       dataFilter = [...dataFilter, ...dataChosen.current, ...valueObjectDefault];
     } else if (typeof valueObjectDefault === 'object') {
@@ -1269,14 +1371,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: iconRef,
       css: _IconCSS,
       className: 'DGN-UI-Dropdown-Icon'
-    }, loading ? jsx(CircularProgress, {
+    }, loadingState ? jsx(CircularProgress, {
       size: 24
     }) : null, showClear ? jsx(ButtonIcon, {
       css: mgr([1]),
       viewType: 'ghost',
       name: 'Close',
       onClick: onClear
-    }) : null, !loading ? jsx(ButtonIcon, {
+    }) : null, !loadingState ? jsx(ButtonIcon, {
       key: openState,
       css: animation,
       viewType: 'ghost',
@@ -1284,7 +1386,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: setShowDropdown,
       disabled: disabled || readOnly
     }) : null));
-  }, [openState, showClear, textValue, valueMulti, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, loading, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType]);
+  }, [openState, showClear, textValue, 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,
@@ -1301,15 +1403,19 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClose: closeDropdown
     }, showDropdown());
     // return openState ? createPortal(showDropdown(), document.body) : null;
-  }, [openState, popoverWidth, valueMulti, dataSource, loading, maximumSelectionLength, multilineSelectedItem, multiple, selectBox, txtSearch]);
+  }, [openState, popoverWidth, valueMulti, loadingState, dataSourceState, dataSource, maximumSelectionLength, multilineSelectedItem, multiple, selectBox, txtSearch]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownRootCSS,
     style: style,
-    className: classNames('DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly')
-  }, LabelView, InputView, ErrorView), DropdownView);
+    className: classNames('DGN-UI-Dropdown', className, error && 'error', loadingState && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly')
+  }, LabelView, InputView, ErrorView), DropdownView, jsx(Popup, {
+    ref: popupRef,
+    type: 'danger',
+    ...popupDataState
+  }));
 }));
 
 /* Start styled */
@@ -1633,6 +1739,9 @@ Dropdown.defaultProps = {
   viewType: 'underlined'
 };
 Dropdown.propTypes = {
+  action: PropTypes.shape({
+    loadData: PropTypes.func
+  }),
   /** If `true`, display input box search. */
   allowSearch: PropTypes.bool,
   /** The contents in Dropdown box (Exp: TreeView). */
@@ -1649,9 +1758,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** 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]),
   /**  Style inline of dropdown items. */
@@ -1660,14 +1769,14 @@ Dropdown.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-  /** 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,
@@ -1701,33 +1810,33 @@ Dropdown.propTypes = {
   onChange: PropTypes.func,
   /** Callback fired when dropdown closed. */
   onClosed: PropTypes.func,
-  /** 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,
   /** Callback fired when key down input */
   onKeyDown: PropTypes.func,
   /** Callback fired when scroll near the end. */
-  onLoadMore: PropTypes.func,
+  onLoadMore: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   /** The short hint displayed in the input before the user select a value. */
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** 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]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * 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]),
   /** Specifies a data object's field name or an expression whose value is compared to the search string. */
@@ -1754,19 +1863,19 @@ Dropdown.propTypes = {
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   /**The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-  /**
-   * 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
    */
 };
 

package/global/index.js

@@ -7,6 +7,7 @@ const globalObject = {
     close: 'Đóng',
     confirm: 'Xác nhận',
     error: 'Lỗi',
+    unknownError: 'Lỗi chưa xác định',
     no: 'Không',
     noDataText: 'Không có dữ liệu',
     notify: 'Thông báo',
@@ -79,6 +80,7 @@ const globalObject = {
     close: 'Close',
     confirm: 'Confirm',
     error: 'Error',
+    unknownError: 'Unknown Error',
     no: 'No',
     noDataText: 'No data',
     notify: 'Notify',

package/package.json

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

package/readme.md

@@ -38,6 +38,11 @@ npm test
 ```
 
 ## Changelog
+## 1.4.2
+- \[Changed\]: Dropdown – Add action loadData
+- \[Fixed\]: Dropdown – Fix bug search filter data when using remote; Fix bug not render invalid html tag
+- \[Fixed\]: Dropdown – Fix bug if item of dataSource is null
+
 ## 1.4.1
 - \[Fixed\]: Dropdown – Fix bug render data wrong after search when not have searchExpr
 

package/styles/general.js

@@ -417,9 +417,15 @@ const selfEnd = css`
 const selfStart = css`
     align-self: flex-start;
 `;
+const shadowLarge = css`
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+`;
 const shadowNone = css`
     box-shadow: none;
 `;
+const shadowSmall = css`
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
+`;
 const textCapitalize = css`
     text-transform: capitalize;
 `;
@@ -487,4 +493,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { animation, aspectSquare, bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, borderRight, borderTop, borderTopColor, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { animation, aspectSquare, bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, borderRight, borderTop, borderTopColor, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowLarge, shadowNone, shadowSmall, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };

package/utils/parseHTML.js

@@ -1,5 +1,16 @@
 const parseHTML = (text, output = 'innerHTML') => {
   if (!text) return null;
+
+  // Check if text contains unescaped angle brackets that are not valid HTML tags
+  const invalidTagsRegex = /<(?!\s*\/?\s*(a|abbr|acronym|address|area|article|aside|audio|b|base|bdi|bdo|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|head|header|h1|h2|h3|h4|h5|h6|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|main|map|mark|meta|meter|nav|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|span|strong|style|sub|summary|sup|svg|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|u|ul|var|video|wbr)\b)[^>]*>/g;
+  const invalidTags = text.match(invalidTagsRegex);
+
+  // If text contains invalid tags, replace angle brackets with HTML entities for those tags only
+  if (invalidTags) {
+    invalidTags.forEach(tag => {
+      text = text.replace(tag, tag.replace(/</g, '&lt;').replace(/>/g, '&gt;'));
+    });
+  }
   const DOM = new DOMParser().parseFromString(text, 'text/html').querySelector('body');
   const result = DOM[output];
   return result && result.trim ? result.trim() : result;