diginet-core-ui 1.3.57 → 1.3.58

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/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/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,

package/package.json

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

package/readme.md

@@ -38,6 +38,10 @@ npm test
 ```
 
 ## Changelog
+## 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