diginet-core-ui 1.4.60-beta.1 → 1.4.61-beta.1

package/assets/images/menu/dhr/MHRP15N0004.svg

@@ -0,0 +1,18 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2469_36)">
+<path d="M33.6 3.09998H31V5.69998C31 7.39998 29.6 8.69998 28 8.69998C26.3 8.69998 25 7.39998 25 5.69998V3.09998H14V5.69998C14 7.39998 12.7 8.69998 11 8.69998C9.4 8.69998 8 7.39998 8 5.69998V3.09998H5.4C2.4 3.09998 0 5.49998 0 8.39998V33.6C0 36.6 2.4 39 5.4 39H33.6C36.6 39 39 36.6 39 33.6V8.39998C39 5.49998 36.6 3.09998 33.6 3.09998ZM36.5 33.1C36.5 35 34.9 36.5 33 36.5H6C4.1 36.5 2.6 35 2.6 33.1V13H36.5V33.1Z" fill="#2680EB"/>
+<path d="M30 5.9V1.8C30 0.8 29.2 0 28.2 0H27.8C26.8 0 26 0.8 26 1.8V5.9C26 6.9 26.8 7.7 27.8 7.7H28.2C29.2 7.7 30 6.9 30 5.9Z" fill="#7BC0F9"/>
+<path d="M13 5.9V1.8C13 0.8 12.2 0 11.2 0H10.8C9.8 0 9 0.8 9 1.8V5.9C9 6.9 9.8 7.7 10.8 7.7H11.2C12.2 7.7 13 6.9 13 5.9Z" fill="#7BC0F9"/>
+<path d="M13 24H7.6C7.2 24 7 23.8 7 23.5V18C7 17.7 7.2 17.4 7.6 17.4H13C13.3 17.4 13.6 17.6 13.6 18V23.5C13.6 23.8 13.3 24 13 24Z" fill="#1CA261"/>
+<path d="M22.3002 24H16.8002C16.5002 24 16.2002 23.8 16.2002 23.4V18C16.2002 17.7 16.4002 17.4 16.8002 17.4H22.3002C22.6002 17.4 22.9002 17.6 22.9002 18V23.5C22.8002 23.8 22.6002 24 22.3002 24Z" fill="#FFAA00"/>
+<path d="M31.4999 24H25.9999C25.6999 24 25.3999 23.8 25.3999 23.4V18C25.3999 17.7 25.5999 17.4 25.9999 17.4H31.4999C31.7999 17.4 32.0999 17.6 32.0999 18V23.5C31.9999 23.8 31.7999 24 31.4999 24Z" fill="#FF4444"/>
+<path d="M13 32.8H7.6C7.3 32.8 7 32.6 7 32.2V26.7C7 26.4 7.2 26.1 7.6 26.1H13C13.3 26.1 13.6 26.3 13.6 26.7V32.2C13.6 32.5 13.3 32.8 13 32.8Z" fill="#FFAA00"/>
+<path d="M22.3002 32.8H16.8002C16.5002 32.8 16.2002 32.6 16.2002 32.2V26.7C16.2002 26.4 16.4002 26.1 16.8002 26.1H22.3002C22.6002 26.1 22.9002 26.3 22.9002 26.7V32.2C22.8002 32.5 22.6002 32.8 22.3002 32.8Z" fill="#FF4444"/>
+<path d="M31.4999 32.8H25.9999C25.6999 32.8 25.3999 32.6 25.3999 32.2V26.7C25.3999 26.4 25.5999 26.1 25.9999 26.1H31.4999C31.7999 26.1 32.0999 26.3 32.0999 26.7V32.2C31.9999 32.5 31.7999 32.8 31.4999 32.8Z" fill="#1CA261"/>
+</g>
+<defs>
+<clipPath id="clip0_2469_36">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -5,7 +5,7 @@ import { Avatar, ButtonIcon, Checkbox, Chip, CircularProgress, HelperText, Input
 import Popover from "../../popover";
 import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import { animation, bgColor, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, bottom, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, fill, flexRow, flexWrap, inset, insetX, invisible, italic, itemsCenter, justifyCenter, justifyStart, outlineNone, overflowYScroll, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textColor, top, userSelectNone, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
@@ -89,6 +89,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     multiple,
     noDataText: noDataTextProp,
     onChange,
+    onOpened,
     onClosed,
     onInput,
     onKeyDown,
@@ -201,14 +202,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }
     !!blur && inputRef.current.blur();
   };
-  const onClickInput = e => {
+  const onClickInput = useCallback(e => {
     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);
       }
     }
-  };
+  }, [disabled, readOnly, loadingState]);
   const showDropdown = () => {
     const dropdown = children ? jsx("div", {
       css: _DropdownListCSS,
@@ -300,10 +301,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     });
   };
 
-  /**
-   * 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 (text === null || text === undefined) text = '';
@@ -316,10 +317,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     } 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 = '';
@@ -1110,6 +1111,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         filter.current.strSearch = '';
         handleActionLoadData(true);
       }
+    } else if (openState) {
+      onOpened && onOpened();
     }
   }, [openState]);
   useLayoutEffect(() => {
@@ -1802,9 +1805,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** The field name used for displaying text in the dropdown list.<br/>
-   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: Do not use 'id - name', as it will return undefined.
+  /** The field name used for displaying text in the dropdown list.<br/>
+   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: Do not use 'id - name', as it will return undefined.
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /**  Inline style for dropdown items. */
@@ -1813,14 +1816,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,
-  /** The field name used for displaying icons.<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;}
+  /** The field name used for displaying icons.<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,
@@ -1852,10 +1855,12 @@ Dropdown.propTypes = {
   noDataText: PropTypes.string,
   /** Callback function fired when the value changes. */
   onChange: PropTypes.func,
+  /** Callback function fired when the dropdown is opened. */
+  onOpened: PropTypes.func,
   /** Callback function fired when the dropdown is closed. */
   onClosed: PropTypes.func,
-  /** Callback function fired when the input value changes.<br/>
-   * If undefined, the filter function will run (default behavior).
+  /** Callback function fired when the input value changes.<br/>
+   * If undefined, the filter function will run (default behavior).
    */
   onInput: PropTypes.func,
   /** Callback function fired when a key is pressed down in the input. */
@@ -1868,21 +1873,21 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** Function used for custom rendering of items.<br/>
-   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
-   * This can be used as an alternative to `displayExpr`
+  /** Function used for custom rendering of items.<br/>
+   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
+   * This can be used as an alternative to `displayExpr`
    */
   renderItem: PropTypes.func,
-  /** Function or field name used to display selected items.<br/>
-   * Example: `(data, index) => index + ' - ' + data.name`<br/>
+  /** Function or field name used to display selected items.<br/>
+   * Example: `(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 to wait after entering search content before triggering a search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, the default delayOnInput will be used.
+  /**
+   * Duration to wait after entering search content before triggering a search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, the default delayOnInput will be used.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Specifies the field name or expression used to compare values with the search string. */
@@ -1915,19 +1920,19 @@ Dropdown.propTypes = {
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none']),
   /** Custom icon to override the default arrow icon. */
   endIcon: PropTypes.string
-  /**
-   * 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
    */
 };
 export default Dropdown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.60-beta.1",
+  "version": "1.4.61-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -42,6 +42,11 @@ npm test
 
 ## Changelog
 
+## 1.4.61
+- \[Added\]: Icon – Add IconMenu MHRM38N1051
+- \[Fixed\]: Dropdown  – Dropdown multiple core has a disable bug
+- \[Fixed\]: Dropdown  – Add a prop to support callback when clicking on the Dropdown.
+
 ## 1.4.60
 - \[Added\]: Icon – Add IconMenu MHRP09N0039, MHRP09N0040
 - \[Fixed\]: NumberInput  – Negative values can still be pasted when disabledNegative is enabled