diginet-core-ui 1.3.57 → 1.3.59

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

@@ -44,6 +44,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   forTreeView,
   width,
   labelProps,
+  stopPropagation,
   ...props
 }, reference) => {
   if (!inputRef) {
@@ -68,7 +69,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, clMain);
 
   const handleChange = event => {
-    event.stopPropagation();
+    stopPropagation && event.stopPropagation();
     if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
     const oldLogicChecked = inputRef.current.checked; //Use for TreeView
 
@@ -278,7 +279,8 @@ Checkbox.defaultProps = {
   determinate: true,
   inputProps: {},
   labelProps: {},
-  width: 18
+  width: 18,
+  stopPropagation: true
 };
 Checkbox.propTypes = {
   /** If `true`, the component is checked. */

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

@@ -115,6 +115,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const searchRef = useRef(null);
   const lastSearchRef = useRef(null);
   const timeout = useRef(null);
+  const loadMoreTimer = useRef(null);
   const [unique] = useState(randomString(6, {
     allowNumber: false,
     allowSymbol: false
@@ -720,22 +721,28 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onLoadMoreHandler = e => {
-    const {
-      scrollTop,
-      scrollHeight,
-      offsetHeight
-    } = e.target;
-
-    if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && dropdownListRef.current) {
-      var _dropdownListRef$curr4, _currentObjectDefault3;
-
-      const length = ((_dropdownListRef$curr4 = dropdownListRef.current.children) === null || _dropdownListRef$curr4 === void 0 ? void 0 : _dropdownListRef$curr4.length) - (((_currentObjectDefault3 = currentObjectDefault[unique]) === null || _currentObjectDefault3 === void 0 ? void 0 : _currentObjectDefault3.length) || 0);
-      dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
-      !!onLoadMore && onLoadMore({
-        skip: length,
-        limit: limit
-      });
+    if (loadMoreTimer.current) {
+      clearTimeout(loadMoreTimer.current);
     }
+
+    loadMoreTimer.current = setTimeout(() => {
+      const {
+        scrollTop,
+        scrollHeight,
+        offsetHeight
+      } = e.target;
+
+      if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && dropdownListRef.current) {
+        var _dropdownListRef$curr4, _currentObjectDefault3;
+
+        const length = ((_dropdownListRef$curr4 = dropdownListRef.current.children) === null || _dropdownListRef$curr4 === void 0 ? void 0 : _dropdownListRef$curr4.length) - (((_currentObjectDefault3 = currentObjectDefault[unique]) === null || _currentObjectDefault3 === void 0 ? void 0 : _currentObjectDefault3.length) || 0);
+        dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
+        !!onLoadMore && onLoadMore({
+          skip: length,
+          limit: limit
+        });
+      }
+    });
   };
 
   const onPreventKeyDownHandler = e => {

package/components/form-control/money-input/index.js

@@ -548,10 +548,10 @@ MoneyInput.propTypes = {
   /** style inline of input in MoneyInput component */
   inputStyle: PropTypes.object,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 
@@ -564,13 +564,13 @@ MoneyInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function, return an object:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
-   * }
+  /**
+   * on change function, return an object:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
+   * }
    */
   onChange: PropTypes.func,
 

package/components/index.js

@@ -57,7 +57,9 @@ export { default as Toggle } from './form-control/toggle'; // Grid
 
 export { default as Grid } from './grid';
 export { default as Row } from './grid/Row';
-export { default as Col } from './grid/Col'; // List
+export { default as Col } from './grid/Col'; //Icon
+
+export { default as Icon } from '../icons/index'; // List
 
 export { default as List } from './list/list';
 export { default as ListItem } from './list/list-item';

package/components/tree-view/index.js

@@ -4,18 +4,27 @@
 import { memo, useMemo, useState, useEffect, useRef, forwardRef, Fragment, useImperativeHandle } from 'react';
 import { render } from 'react-dom';
 import PropTypes from 'prop-types';
-import { jsx } from '@emotion/core';
-import { TreeViewRootCSS } from './css';
+import { jsx, css } from '@emotion/core';
 import { Accordion, AccordionSummary, AccordionDetails, Typography, Checkbox, Divider, InputBase, ButtonIcon } from '..';
 import { mapParent, randomString, removeUnicode } from '../../utils';
 import { getGlobal } from '../../global';
+import { alignCenter, borderBox, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from '../../styles/general';
+import theme from '../../theme/settings';
+const {
+  colors: {
+    fill: {
+      focus: fillFocus,
+      hover: fillHover,
+      pressed: fillPressed
+    }
+  }
+} = theme;
 const separatorPattern = /\{\w+\}/g;
 const currentValue = {},
       itemsRenderAsync = {};
 const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   expand,
   disabled,
-  disabledMap,
   selectBox,
   multiple,
   selectAll,
@@ -60,22 +69,20 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (multipleValueMode === 'multiple' || disabledRelevantValue) {
       input.classList[determinate ? 'add' : 'remove']('determinate');
       input.classList[determinate ? 'remove' : 'add']('indeterminate');
-      input.nextElementSibling.classList[determinate ? 'add' : 'remove']('determinate');
-      input.nextElementSibling.classList[determinate ? 'remove' : 'add']('indeterminate');
+      input.nextElementSibling.firstChild.classList[determinate ? 'add' : 'remove']('determinate');
+      input.nextElementSibling.firstChild.classList[determinate ? 'remove' : 'add']('indeterminate');
     }
-  }; // eslint-disable-next-line no-unused-vars
-
+  }; // const triggerCheckboxRecursion = (nodes, isChecked) => {
+  //     nodes.forEach(el => {
+  //         if (el.classList.contains('non-child')) {
+  //             el.querySelector('input').checked = isChecked;
+  //         } else {
+  //             el.firstChild.querySelector('input').checked = isChecked;
+  //             triggerCheckboxRecursion(Array.from(el.lastChild.firstChild.childNodes), isChecked);
+  //         }
+  //     });
+  // };
 
-  const triggerCheckboxRecursion = (nodes, isChecked) => {
-    nodes.forEach(el => {
-      if (el.classList.contains('non-child')) {
-        el.querySelector('input').checked = isChecked;
-      } else {
-        el.firstChild.querySelector('input').checked = isChecked;
-        triggerCheckboxRecursion(Array.from(el.lastChild.firstChild.childNodes), isChecked);
-      }
-    });
-  };
 
   const checkedParentFollowValue = nodes => {
     if (nodes && nodes !== null && nodes !== void 0 && nodes.length) {
@@ -331,6 +338,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClickHandler = (e, data) => {
+    if (disabled) return;
     const target = e.target;
     const currentTarget = e.currentTarget;
     let value = typeof data === 'object' ? data[valueExpr] : data;
@@ -665,9 +673,9 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, jsx(Checkbox, {
         forTreeView: true,
         checked: isTrue,
-        inputProps: {
-          value: typeof data === 'object' ? data[valueExpr] : data
-        }
+        value: typeof data === 'object' ? data[valueExpr] : data,
+        stopPropagation: false,
+        disabled: disabled
       })), renderContent(data, keyArr, index))), jsx(AccordionDetails, {
         id: id
       }, childItems.map((child, i) => renderTreeView(child, index + i, level + 1, sync, id))));
@@ -686,9 +694,9 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(Checkbox, {
       forTreeView: true,
       checked: isTrue,
-      inputProps: {
-        value: typeof data === 'object' ? data[valueExpr] : data
-      }
+      value: typeof data === 'object' ? data[valueExpr] : data,
+      stopPropagation: false,
+      disabled: disabled
     })), renderContent(data, keyArr, index));
   };
 
@@ -702,6 +710,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (searchDelayTime) {
       var _searchDelayTime$matc, _searchDelayTime$matc2;
 
+      if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
       const units = {
         m: 60000,
         s: 1000,
@@ -781,19 +790,6 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
     }
   }, [dataSource, value, multiple, selectBox]);
-  useEffect(() => {
-    if (disabled && ref.current) {
-      const childNodes = ref.current.childNodes;
-      Array.from(childNodes).forEach(node => {
-        node.classList.add('disabled');
-      });
-      return () => {
-        Array.from(childNodes).forEach(node => {
-          node.classList.remove('disabled');
-        });
-      };
-    }
-  }, [disabled]);
   useEffect(() => {
     var _Object$keys;
 
@@ -860,14 +856,111 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       forTreeView: true,
       label: selectAllLabel,
       onChange: onSelectAll,
-      inputRef: selectAllRef
+      inputRef: selectAllRef,
+      stopPropagation: false,
+      disabled: disabled
     })), jsx(Divider, null)), jsx("div", {
       ref: ref,
       ...props,
       className: ['TreeView-Content', disabled ? 'disabled' : '', className].join(' ').trim().replace(/\s+/g, ' ')
-    }, disabledMap ? dataSource : mapParent(dataSource, id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
-  }, [dataSource, value, multiple, selectBox, disabledBoldResult, autoExpandToResult, showChildrenOfResult, searchMode, onChange, searchProps]);
+    }, mapParent(dataSource, id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
+  }, [dataSource, value, renderAsyncWithLength, disabled, showSelectedItems, allowSearch, multiple, selectAll, selectAllLabel, className, selectBox, id, parentID, disabledBoldResult, autoExpandToResult, showChildrenOfResult, searchMode, onChange, searchProps]);
 }));
+const TreeViewRootCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    .DGN-UI-Accordion {
+        box-shadow: none !important;
+        .DGN-UI-Accordion-Summary {
+            ${alignCenter};
+            min-height: 40px;
+            padding: 0;
+            border-radius: 0;
+            &.focus {
+                background-color: ${theme.colors.focus};
+            }
+            .Accordion-Icon-Root {
+                ${flexRow};
+                margin-right: 4px;
+            }
+        }
+        .DGN-UI-Accordion-Details-Content {
+            padding: 0;
+            border-radius: 0;
+        }
+        .Accordion-Icon-Root {
+            ${flexRow};
+            transition: opacity 0.2s ease-out;
+            opacity: 1;
+            &.DGN-Invisible {
+                opacity: 0;
+            }
+        }
+        &.DGN-Hidden {
+            display: none !important;
+        }
+    }
+    .TreeView-All,
+    .TreeView-Content {
+        ${displayBlock};
+        ${positionRelative};
+        .DGN-UI-Accordion {
+            margin-bottom: 0;
+        }
+    }
+    .TreeView-Item-Checkbox {
+        ${displayInlineBlock};
+        ${positionRelative};
+        height: 100%;
+        margin-right: 8px;
+    }
+    .TreeView-Item {
+        ${flexRow};
+        ${positionRelative};
+        ${alignCenter};
+        ${borderBox};
+        min-height: 40px;
+        text-align: left;
+        color: ${theme.colors.text.main};
+        width: 100%;
+        &.non-child {
+            ${cursorPointer};
+            transition: background-color 300ms ease;
+            &.disabled {
+                color: ${theme.colors.disabled};
+                cursor: no-drop;
+            }
+            &:not(.disabled) {
+                &:hover {
+                    background-color: ${fillHover};
+                }
+                &:focus {
+                    background-color: ${fillFocus};
+                }
+                &:active {
+                    background-color: ${fillPressed};
+                }
+            }
+            &.DGN-Hidden {
+                display: none !important;
+            }
+        }
+        &.focus {
+            background-color: ${theme.colors.focus};
+        }
+        &.TreeView-Item-active .DGN-UI-Typography {
+            font-weight: bold;
+        }
+    }
+    &.expand-able {
+        .TreeView-All {
+            margin-left: 34px;
+        }
+        .TreeView-Item.non-child {
+            padding-left: 34px;
+        }
+    }
+`;
 TreeView.defaultProps = {
   expand: false,
   disabled: false,
@@ -903,9 +996,6 @@ TreeView.propTypes = {
   /** prevent all event if true */
   disabled: PropTypes.bool,
 
-  /** Will not map parent from data */
-  disabledMap: PropTypes.bool,
-
   /** show checkbox in each item */
   selectBox: PropTypes.bool,
 

package/icons/basic.js

@@ -1342,6 +1342,54 @@ export const ChatBubble = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Checkin = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  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", {
+    d: "M11 7L9.6 8.4L12.2 11H2V13H12.2L9.6 15.6L11 17L16 12L11 7ZM20 19H12V21H20C21.1 21 22 20.1 22 19V5C22 3.9 21.1 3 20 3H12V5H20V19Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 18,
+    viewBox: "0 0 20 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9 4L7.6 5.4L10.2 8H0V10H10.2L7.6 12.6L9 14L14 9L9 4ZM18 16H10V18H18C19.1 18 20 17.1 20 16V2C20 0.9 19.1 0 18 0H10V2H18V16Z",
+    fill: colors[color] || color
+  }));
+});
+export const Checkout = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  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", {
+    d: "M17 7L15.59 8.41L18.17 11H8V13H18.17L15.59 15.58L17 17L22 12L17 7ZM4 5H12V3H4C2.9 3 2 3.9 2 5V19C2 20.1 2.9 21 4 21H12V19H4V5Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 18,
+    viewBox: "0 0 20 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15 4L13.59 5.41L16.17 8H6V10H16.17L13.59 12.58L15 14L20 9L15 4ZM2 2H10V0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H10V16H2V2Z",
+    fill: colors[color] || color
+  }));
+});
 export const CheckList = /*#__PURE__*/memo(({
   width,
   height,
@@ -2359,6 +2407,30 @@ export const Generate = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Groups = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  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", {
+    d: "M12 12.75C13.63 12.75 15.07 13.14 16.24 13.65C17.32 14.13 18 15.21 18 16.38V18H6V16.39C6 15.21 6.68 14.13 7.76 13.66C8.93 13.14 10.37 12.75 12 12.75ZM4 13C5.1 13 6 12.1 6 11C6 9.9 5.1 9 4 9C2.9 9 2 9.9 2 11C2 12.1 2.9 13 4 13ZM5.13 14.1C4.76 14.04 4.39 14 4 14C3.01 14 2.07 14.21 1.22 14.58C0.48 14.9 0 15.62 0 16.43V18H4.5V16.39C4.5 15.56 4.73 14.78 5.13 14.1ZM20 13C21.1 13 22 12.1 22 11C22 9.9 21.1 9 20 9C18.9 9 18 9.9 18 11C18 12.1 18.9 13 20 13ZM24 16.43C24 15.62 23.52 14.9 22.78 14.58C21.93 14.21 20.99 14 20 14C19.61 14 19.24 14.04 18.87 14.1C19.27 14.78 19.5 15.56 19.5 16.39V18H24V16.43ZM12 6C13.66 6 15 7.34 15 9C15 10.66 13.66 12 12 12C10.34 12 9 10.66 9 9C9 7.34 10.34 6 12 6Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 12,
+    viewBox: "0 0 24 12",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 6.75C13.63 6.75 15.07 7.14 16.24 7.65C17.32 8.13 18 9.21 18 10.38V12H6V10.39C6 9.21 6.68 8.13 7.76 7.66C8.93 7.14 10.37 6.75 12 6.75ZM4 7C5.1 7 6 6.1 6 5C6 3.9 5.1 3 4 3C2.9 3 2 3.9 2 5C2 6.1 2.9 7 4 7ZM5.13 8.1C4.76 8.04 4.39 8 4 8C3.01 8 2.07 8.21 1.22 8.58C0.48 8.9 0 9.62 0 10.43V12H4.5V10.39C4.5 9.56 4.73 8.78 5.13 8.1ZM20 7C21.1 7 22 6.1 22 5C22 3.9 21.1 3 20 3C18.9 3 18 3.9 18 5C18 6.1 18.9 7 20 7ZM24 10.43C24 9.62 23.52 8.9 22.78 8.58C21.93 8.21 20.99 8 20 8C19.61 8 19.24 8.04 18.87 8.1C19.27 8.78 19.5 9.56 19.5 10.39V12H24V10.43ZM12 0C13.66 0 15 1.34 15 3C15 4.66 13.66 6 12 6C10.34 6 9 4.66 9 3C9 1.34 10.34 0 12 0Z",
+    fill: colors[color] || color
+  }));
+});
 export const Guide = /*#__PURE__*/memo(({
   width,
   height,
@@ -4300,6 +4372,34 @@ export const Phone = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Photo = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  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: "M19 3C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19ZM11 16.51L8.5 13.5L5 18H19L14.5 12L11 16.51Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 0C17.1 0 18 0.9 18 2V16C18 17.1 17.1 18 16 18H2C0.9 18 0 17.1 0 16V2C0 0.9 0.9 0 2 0H16ZM8 13.51L5.5 10.5L2 15H16L11.5 9L8 13.51Z",
+    fill: colors[color] || color
+  }));
+});
 export const PlanePaper = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

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

package/readme.md

@@ -38,6 +38,15 @@ npm test
 ```
 
 ## Changelog
+## 1.3.59
+- \[Added\]: Icon – Export component Icon
+- \[Added\]: Icon – Groups, Photo
+- \[Fixed\]: Dropdown – Fix load more handler
+
+## 1.3.58
+- \[Added\]: Icon– Checkin, Checkout
+- \[Fixed\]: TreeView, Checkbox – Fix bug cannot select by click checkbox
+
 ## 1.3.57
 - \[Added\]: MenuIcon – MHRM29N0005
 - \[Changed\]: MoneyInput – Update PagingSelector with new design