diginet-core-ui 1.4.48 → 1.4.49

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

@@ -7,7 +7,7 @@ import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
 import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } 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, overflowScroll, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textColor, top, userSelectNone, z } from "../../../styles/general";
+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, overflowXScroll, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textColor, top, userSelectNone, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp, isMobile, randomString } from "../../../utils";
@@ -61,6 +61,7 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
   });
   const {
     action = {},
+    allowInput,
     allowSearch,
     children,
     className,
@@ -223,6 +224,7 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
                                 padding: ${spacing([2, 4])};
                             `
     }, getGlobal('selected'), " ", (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) || 0, "/", maximumSelectionLength) : null, jsx("div", {
+      onScroll: onLoadMoreHandler,
       css: _DropdownBoxCSS,
       className: 'DGN-Dropdown-Box'
     }, dropdown), loadingState ? jsx("div", {
@@ -256,6 +258,19 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
     } else if (e.key === 'ArrowDown' && dropdownListRef.current) {
       e.preventDefault();
       dropdownListRef.current.firstChild.focus();
+    } else if (!!allowInput && txtSearch && multiple && e.key === 'Enter') {
+      if (!Array.isArray(currentValue[unique])) currentValue[unique] = [];
+      const newValueArrState = [...valueMulti];
+      if (!newValueArrState.some(v => JSON.stringify(v) === JSON.stringify(txtSearch))) {
+        newValueArrState.push(txtSearch);
+      }
+      setValueMulti(newValueArrState);
+      !!onChange && onChange({
+        value: newValueArrState,
+        data: {
+          [valueExpr]: txtSearch
+        }
+      });
     }
   };
   const closeDropdown = (event, reason, value) => {
@@ -635,7 +650,7 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
           scrollHeight,
           offsetHeight
         } = e.target;
-        if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && dropdownListRef.current) {
+        if (scrollHeight <= Math.ceil(scrollTop) + offsetHeight && dropdownListRef.current) {
           var _dropdownListRef$curr;
           const length = ((_dropdownListRef$curr = dropdownListRef.current.children) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.length) - ((vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length) || 0);
           // dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
@@ -1158,6 +1173,27 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
             });
           }
           items.push(item);
+        } else if (allowInput && multiple) {
+          const displayText = vl;
+          let item;
+          if (typeof renderSelectedItem === 'function') {
+            item = renderSelectedItem({
+              data,
+              index
+            });
+          } else {
+            item = jsx(Chip, {
+              css: [parseWidth('100%'), parseMaxWidth('max-content')],
+              key: index,
+              startIcon: getIconFromData(data, true),
+              label: displayText,
+              size: 'medium',
+              disabled: disabled,
+              clearAble: !readOnly && !disabled,
+              onRemove: e => onRemove(e, vl)
+            });
+          }
+          items.push(item);
         }
       });
     }
@@ -1519,7 +1555,7 @@ const DropdownListCSS = ({
 const DropdownBoxCSS = (loading, {
   colors
 }) => css`
-    ${loading ? overflowHidden : overflowScroll};
+    ${loading ? overflowHidden : overflowXScroll};
     ${parseMaxHeight(280)};
     &::-webkit-scrollbar {
         ${borderRadius(4)};
@@ -1657,6 +1693,8 @@ Dropdown.propTypes = {
   }),
   /** If `true`, the input box for searching will be displayed. */
   allowSearch: PropTypes.bool,
+  /** If `true`, the input value will be added when user hit Enter. */
+  allowInput: PropTypes.bool,
   /** The content to be displayed inside the Dropdown box, such as TreeView. */
   children: PropTypes.node,
   /** The CSS class for the component. */

package/icons/basic.js

@@ -2581,6 +2581,34 @@ export const First = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const Fire = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = 'system/rest',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.24 5.46992C14.24 3.31992 13.5 0.669922 13.5 0.669922C17.41 3.79992 20 8.60992 20 13.9999C20 18.4199 16.42 21.9999 12 21.9999C7.58 21.9999 4 18.4199 4 13.9999C4 10.6199 5.21 7.50992 7.23 5.10992L7.2 5.46992C7.2 7.52992 8.76 9.19992 10.83 9.19992C12.89 9.19992 14.24 7.52992 14.24 5.46992ZM8.49 15.8599C8.49 17.5999 9.93 18.9999 11.71 18.9999C14.36 18.9999 16.51 16.8499 16.51 14.1999C16.51 12.8099 16.31 11.4499 15.92 10.1599C14.9 11.5299 13.07 12.3799 11.3 12.7399C9.54 13.0999 8.49 14.2399 8.49 15.8599Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 16,
+    height: height || 22,
+    viewBox: "0 0 16 22",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.24 5.46992C10.24 3.31992 9.5 0.669922 9.5 0.669922C13.41 3.79992 16 8.60992 16 13.9999C16 18.4199 12.42 21.9999 8 21.9999C3.58 21.9999 0 18.4199 0 13.9999C0 10.6199 1.21 7.50992 3.23 5.10992L3.2 5.46992C3.2 7.52992 4.76 9.19992 6.83 9.19992C8.89 9.19992 10.24 7.52992 10.24 5.46992ZM4.49 15.8599C4.49 17.5999 5.93 18.9999 7.71 18.9999C10.36 18.9999 12.51 16.8499 12.51 14.1999C12.51 12.8099 12.31 11.4499 11.92 10.1599C10.9 11.5299 9.07 12.3799 7.3 12.7399C5.54 13.0999 4.49 14.2399 4.49 15.8599Z",
+    fill: fillColor(color)
+  }));
+});
 export const FiveSquare = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

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

package/readme.md

@@ -42,6 +42,11 @@ npm test
 
 ## Changelog
 
+## 1.4.49
+- \[Added\]: Icon – Add Icon Fire 
+- \[Added\]: Dropdown – Add allowInput to the multiple-select dropdown.
+- \[Added\]: Dropdown – Dropdown does not display all data when shown - onLoadMore
+
 ## 1.4.48
 - \[Added\]: Icon – Add IconMenu MHRP38N0003, MHRP38N0004
 - \[Added\]: Icon – Add IconMenu MHRP38N0005, MHRM38N0012

package/styles/general.js

@@ -337,6 +337,12 @@ const outlineNone = css`
 const overflowScroll = css`
     overflow: scroll;
 `;
+const overflowXScroll = css`
+    overflow-x: scroll;
+`;
+const overflowYScroll = css`
+    overflow-y: scroll;
+`;
 const overflowAuto = css`
     overflow: auto;
 `;
@@ -554,7 +560,7 @@ mgx,
 // deprecated
 mgy,
 // deprecated
-noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectFit, objectNone, order, outlineNone, overflowAuto, overflowScroll, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd,
+noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectFit, objectNone, order, outlineNone, overflowAuto, overflowScroll, overflowXScroll, overflowYScroll, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd,
 // deprecated
 pdb,
 // deprecated