diginet-core-ui 1.3.86-beta.1 → 1.3.87

package/components/avatar/index.js

@@ -1,19 +1,20 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { jsx, css, keyframes } from '@emotion/core';
 import AvatarDefault from "../../assets/avatar/default.svg";
-import { ButtonIcon, Image, ModalSample, Popover, Popup, Typography } from "./..";
-import OptionWrapper from "../others/option-wrapper";
+import { ButtonIcon, ModalSample, Popover, Popup, Typography } from "./..";
 import { getGlobal } from "../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, isValidElement, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { borderNone, borderRadius, boxContent, cursorInherit, cursorPointer, displayBlock, displayFlex, displayInlineFlex, displayNone, flexCol, itemsCenter, overflowHidden, parseMinWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, userSelectNone, z } from "../../styles/general";
+import { itemsCenter, borderNone, displayBlock, displayNone, flexCol, displayInlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames, isMobile } from "../../utils";
+import { classNames, isMobile, randomString } from "../../utils";
+import { useIntersection } from "../../utils/intersectionObserver";
+import OptionWrapper from "../others/option-wrapper";
 const {
   colors: {
     system: {
-      white: systemWhite
+      white
     },
     fill: {
       tooltip: fillTooltip
@@ -21,8 +22,19 @@ const {
     text: {
       tooltip: textTooltip
     }
-  }
+  },
+  spacing,
+  zIndex: zIndexCORE
 } = useTheme();
+const existed = {},
+  urlAvatar = {};
+const blurKeyframe = keyframes`
+    0% { -webkit-filter: blur(4px);}
+    25% { -webkit-filter: blur(3px);}
+    50% { -webkit-filter: blur(2px);}
+    75% { -webkit-filter: blur(1px);}
+    100% { -webkit-filter: blur(0px);}
+`;
 const checkFileType = (type, matchType) => {
   if (typeof matchType === 'object' && matchType instanceof RegExp) {
     return matchType.test(type);
@@ -61,22 +73,30 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   wrongTypeError
 }, reference) => {
-  if (!reference) reference = useRef(null);
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
   const popupRef = useRef(null);
+  const [unique] = useState(randomString(6, {
+    allowNumber: false,
+    allowSymbol: false
+  }));
   const [viewAvatar, setViewAvatar] = useState(false);
   const [viewMoreInfo, setViewMoreInfo] = useState(false);
   const [srcState, setSrcState] = useState(src);
+  const [isInView, setIsInView] = useState(false);
+  const [onLoaded, setOnLoaded] = useState(false);
+  useIntersection(ref, () => {
+    setIsInView(true);
+  });
   const _ActionIconCSS = ActionIconCSS(actionIconWidth);
-  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly || disabled);
-  const _AvatarContainerCSS = AvatarContainerCSS(_ActionIconCSS.name);
+  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly);
+  const _AvatarContainerCSS = AvatarContainerCSS(_AvatarPreviewCSS.name, _ActionIconCSS.name);
   const _AvatarRootCSS = AvatarRootCSS(width, height, outlined);
   const _isMobile = isMobile.any();
   const triggerInput = e => {
-    if (e || !srcState) {
+    if (e || !existed[unique]) {
       inputRef.current.click();
     } else {
       // on View
@@ -102,13 +122,16 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       return;
     }
     reader.onload = e => {
-      setSrcState(e.target.result);
+      urlAvatar[unique] = e.target.result;
+      setSrcState(urlAvatar[unique]);
+      existed[unique] = true;
     };
     reader.readAsDataURL(file);
     !!onChange && onChange(input);
   };
   const onRemoveAvatar = () => {
     setSrcState(null);
+    existed[unique] = false;
     inputRef.current.value = '';
     !!onRemove && onRemove();
   };
@@ -129,6 +152,32 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       type: 'p1'
     }, getGlobal('noDataText'));
   };
+  const renderImage = () => {
+    const _image = jsx(Fragment, null, !onLoaded && jsx("img", {
+      src: defaultSrc,
+      alt: '',
+      style: {
+        objectFit: 'cover'
+      }
+    }), jsx("img", {
+      css: blurAnimationCSS,
+      src: srcState,
+      alt: srcState,
+      style: {
+        objectFit: 'cover'
+      },
+      onLoad: () => setOnLoaded(true)
+    }));
+    if (lazyLoading) {
+      return isInView ? _image : jsx("img", {
+        src: defaultSrc,
+        alt: '',
+        style: {
+          objectFit: 'cover'
+        }
+      });
+    } else return _image;
+  };
   const showMoreInfo = () => {
     if (hoverAble) setViewMoreInfo(true);
   };
@@ -152,11 +201,22 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   useEffect(() => {
     if (src) {
-      setSrcState(src);
+      if (isInView || !lazyLoading) {
+        inputRef.current.value = '';
+        const img = document.createElement('img');
+        urlAvatar[unique] = src;
+        img.src = src;
+        img.alt = '';
+        img.onerror = () => {
+          setSrcState(defaultSrc);
+          existed[unique] = false;
+        };
+        img.onload = () => {
+          setSrcState(src);
+          existed[unique] = true;
+        };
+      }
     }
-    return () => {
-      setSrcState(defaultSrc);
-    };
   }, [src]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -170,9 +230,11 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx(Fragment, null, jsx("div", {
-      css: _AvatarContainerCSS
-    }, jsx("div", {
+      css: _AvatarContainerCSS,
       ref: ref,
+      id: unique,
+      className: classNames(disabled && 'disabled')
+    }, jsx("div", {
       css: _AvatarRootCSS,
       className: classNames('DGN-UI-Avatar', className),
       style: style,
@@ -185,21 +247,14 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onChange: onChangeAvatar,
       disabled: disabled
     }), jsx("div", {
-      ref: avatarRef,
       css: _AvatarPreviewCSS,
       onClick: _onClick,
+      ref: avatarRef,
       onMouseEnter: _onMouseEnter,
       onMouseLeave: _onMouseLeave,
       tabIndex: "-1",
       onBlur: closeMoreInfo
-    }, jsx(Image, {
-      circular: true,
-      defaultSrc: defaultSrc,
-      src: srcState,
-      width: '100%',
-      height: '100%',
-      lazyLoading: lazyLoading
-    }))), allowEdit && !readOnly && !disabled ? jsx("span", {
+    }, renderImage())), allowEdit && !readOnly && !disabled && jsx("span", {
       css: _ActionIconCSS
     }, jsx(ButtonIcon, {
       viewType: 'ghost',
@@ -208,7 +263,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height: actionIconHeight,
       className: 'icon-edit',
       onClick: triggerInput
-    }), clearAble && srcState ? jsx(ButtonIcon, {
+    }), clearAble && srcState && jsx(ButtonIcon, {
       viewType: 'ghost',
       name: 'Delete',
       width: actionIconWidth,
@@ -218,53 +273,68 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: {
         marginTop: '8px'
       }
-    }) : null) : null), jsx(ModalSample, {
+    }))), jsx(ModalSample, {
       open: viewAvatar,
       onClose: () => setViewAvatar(false),
       width: 'max-content'
-    }, jsx(Image, {
-      defaultSrc: defaultSrc,
-      src: srcState,
-      width: '100%',
-      height: '100%'
-    })), hoverAble ? jsx(Popover, {
+    }, jsx("img", {
+      src: urlAvatar[unique],
+      alt: "",
+      style: {
+        objectFit: 'cover',
+        maxHeight: '100%',
+        maxWidth: '100%',
+        margin: 'auto',
+        display: 'block'
+      }
+    })), hoverAble && jsx(Popover, {
       arrow: true,
       open: viewMoreInfo,
       pressESCToClose: false,
       bgColor: fillTooltip,
       anchor: avatarRef,
       fullScreen: false,
+      width: 'max-content',
       direction: direction
     }, jsx("div", {
       css: MoreInfoCSS
-    }, typeof data === 'function' ? data() : renderData())) : null, !disabled && !readOnly ? jsx(Popup, {
+    }, typeof data === 'function' ? data() : renderData())), !disabled && !readOnly && jsx(Popup, {
       ref: popupRef,
       type: 'danger'
-    }) : null);
-  }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, srcState, viewAvatar, viewMoreInfo]);
+    }));
+  }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, isInView, onLoaded, srcState, viewAvatar, viewMoreInfo]);
 }));
 const ActionIconCSS = actionIconWidth => css`
-    ${displayFlex};
     ${flexCol};
     ${positionAbsolute};
-    ${parseMinWidth(actionIconWidth)};
     right: ${-actionIconWidth}px;
+    min-width: ${actionIconWidth}px;
     transition: opacity 0.5s;
     opacity: 0;
-    ${z(2)};
+    z-index: ${zIndexCORE(2)};
 `;
-const AvatarPreviewCSS = isDisabled => css`
+const AvatarPreviewCSS = readOnly => css`
     ${displayBlock};
     ${positionRelative};
     ${overflowHidden};
-    ${parseWidthHeight('100%')};
-    ${borderRadius('50%')};
-    ${isDisabled ? cursorInherit : cursorPointer};
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    cursor: ${readOnly ? 'initial' : 'pointer'};
 `;
-const AvatarContainerCSS = ActionIconCSSName => css`
+const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
     ${displayInlineFlex};
     ${positionRelative};
     ${itemsCenter};
+    &.disabled {
+        .css-${AvatarPreviewCSSName} {
+            ${pointerEventsNone}
+            cursor: inherit;
+        }
+        .css-${ActionIconCSSName} {
+            display: none !important;
+        }
+    }
     &:hover {
         .css-${ActionIconCSSName} {
             opacity: 1;
@@ -277,18 +347,25 @@ const AvatarRootCSS = (width, height, outlined) => css`
     ${overflowHidden};
     ${userSelectNone};
     ${borderNone};
-    ${boxContent};
     ${parseWidthHeight(width, height)};
-    ${borderRadius('50%')};
-    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${systemWhite}` : outlined};
+    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${white}` : outlined};
+    border-radius: 50%;
+    box-sizing: content-box;
     input {
         ${displayNone};
     }
+    img {
+        width: 100%;
+        height: 100%;
+    }
 `;
 const MoreInfoCSS = css`
     ${displayBlock};
     ${positionRelative};
-    ${pd([2])};
+    padding: ${spacing([2])};
+`;
+const blurAnimationCSS = css`
+    animation: ${blurKeyframe} 1s ease;
 `;
 Avatar.defaultProps = {
   actionIconHeight: 24,

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

@@ -1301,8 +1301,7 @@ Attachment.defaultProps = {
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
-  },
-  viewType: 'detail'
+  }
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */

package/components/image/index.js

@@ -1,12 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { css, jsx, keyframes } from '@emotion/core';
-import AvatarDefault from "../../assets/avatar/default.svg";
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { borderRadius, displayInlineFlex, itemsCenter, objectCover, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
-import { classNames, useIntersection } from "../../utils";
+import PropTypes from 'prop-types';
+import { jsx, css, keyframes } from '@emotion/core';
+import OptionWrapper from "../others/option-wrapper";
+import { useIntersection } from "../../utils/intersectionObserver";
+import { classNames } from "../../utils";
+import AvatarDefault from "../../assets/avatar/default.svg";
+import { itemsCenter, displayInlineFlex, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
     25% { -webkit-filter: blur(3px);}
@@ -28,7 +29,6 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   width
 }, reference) => {
-  if (!reference) reference = useRef(null);
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
   const [srcState, setSrcState] = useState(src);
@@ -53,9 +53,6 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         };
       }
     }
-    return () => {
-      setSrcState(defaultSrc);
-    };
   }, [src]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -69,16 +66,21 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   const renderImage = () => {
     const defaultImage = jsx("img", {
-      css: objectCover,
       src: defaultSrc,
       alt: '',
+      style: {
+        objectFit: 'cover'
+      },
       width: width,
       height: height
     });
     const image = jsx(Fragment, null, !onLoaded && defaultImage, jsx("img", {
-      css: [blurAnimationCSS, objectCover],
+      css: blurAnimationCSS,
       src: srcState,
       alt: alt || srcState,
+      style: {
+        objectFit: 'cover'
+      },
       onLoad: () => setOnLoaded(true),
       width: width,
       height: height
@@ -103,7 +105,7 @@ const ImageCSS = (width, height, circular) => css`
     ${itemsCenter};
     ${overflowHidden};
     ${parseWidthHeight(width, height)};
-    ${circular && borderRadius('50%')};
+    ${circular && `border-radius: 50%`};
 `;
 const blurAnimationCSS = css`
     animation: ${blurKeyframe} 1s ease;

package/components/tab/tab.js

@@ -102,7 +102,7 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _IndicatorCSS,
       className: 'Indicator'
     }));
-  }, [children, className, color, disabled, endIcon, index, label, labelProps, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
+  }, [children, className, color, disabled, endIcon, index, label, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
 }));
 const TabButtonCSS = (color, isVertical) => css`
     ${flexRow};

package/components/tree-view/css.js

@@ -0,0 +1,107 @@
+import { css } from '@emotion/core';
+import { itemsCenter, boxBorder, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from "../../styles/general";
+import theme from "../../theme/settings";
+const {
+  colors: {
+    fill: {
+      focus: fillFocus,
+      hover: fillHover,
+      pressed: fillPressed
+    }
+  }
+} = theme;
+export const TreeViewRootCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    .DGN-UI-Accordion {
+        box-shadow: none !important;
+        .DGN-UI-Accordion-Summary {
+            ${itemsCenter};
+            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};
+        ${itemsCenter};
+        ${boxBorder};
+        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;
+        }
+    }
+`;

package/components/tree-view/index.js

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Accordion, AccordionDetails, AccordionSummary, ButtonIcon, Checkbox, Divider, InputBase, Typography } from "./..";
-import { getGlobal } from "../../global";
-import PropTypes from 'prop-types';
-import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { memo, useMemo, useState, useEffect, useRef, forwardRef, Fragment, useImperativeHandle } from 'react';
 import { render } from 'react-dom';
-import { bgColor, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayBlock, displayInlineBlock, flexRow, itemsCenter, mgb, mgl, mgr, parseHeight, parseMinHeight, parseWidth, pd, pdl, positionRelative, textLeft } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { classNames, mapParent, randomString, refType as ref, removeUnicode } from "../../utils";
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { Accordion, AccordionSummary, AccordionDetails, Typography, Checkbox, Divider, InputBase, ButtonIcon } from '..';
+import { classNames, mapParent, randomString, removeUnicode } from "../../utils";
+import { getGlobal } from "../../global";
+import { itemsCenter, boxBorder, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from "../../styles/general";
+import theme from "../../theme/settings";
 const {
   colors: {
     system: {
@@ -22,8 +22,9 @@ const {
     text: {
       main: textMain
     }
-  }
-} = useTheme();
+  },
+  spacing
+} = theme;
 const separatorPattern = /\{\w+\}/g;
 const currentValue = {},
   itemsRenderAsync = {};
@@ -60,7 +61,6 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   valueExpr,
   ...props
 }, reference) => {
-  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const selectAllRef = useRef(null);
   const inputValueRef = useRef(null);
@@ -319,8 +319,8 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const checkBoxEl = currentTarget.querySelector('.TreeView-Item-Checkbox');
     if (multiple) {
       var _value;
-      let checked;
-      let inputEl;
+      let checked = false;
+      let inputEl = null;
       // Click on text (not checkbox)
       if (!checkBoxEl.contains(target)) {
         inputEl = checkBoxEl.querySelector('input');
@@ -604,7 +604,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }, jsx("div", {
         className: 'TreeView-Item'
-      }, selectBox || multiple ? jsx("span", {
+      }, (selectBox || multiple) && jsx("span", {
         className: 'TreeView-Item-Checkbox'
       }, jsx(Checkbox, {
         forTreeView: true,
@@ -612,19 +612,19 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         value: typeof data === 'object' ? data[valueExpr] : data,
         stopPropagation: false,
         disabled: disabled
-      })) : null, renderContent(data, keyArr, index))), jsx(AccordionDetails, {
+      })), renderContent(data, keyArr, index))), jsx(AccordionDetails, {
         id: id
       }, childItems.map((child, i) => renderTreeView(child, index + i, level + 1, sync, id))));
     }
     return jsx("div", {
-      className: classNames('TreeView-Item', 'non-child', focusClass),
+      className: 'TreeView-Item non-child ' + focusClass,
       style: {
         paddingLeft: 34 + 16 * level
       },
       onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined,
       key: index,
       tabIndex: "-1"
-    }, selectBox || multiple ? jsx("span", {
+    }, (selectBox || multiple) && jsx("span", {
       className: 'TreeView-Item-Checkbox'
     }, jsx(Checkbox, {
       forTreeView: true,
@@ -632,7 +632,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       value: typeof data === 'object' ? data[valueExpr] : data,
       stopPropagation: false,
       disabled: disabled
-    })) : null, renderContent(data, keyArr, index));
+    })), renderContent(data, keyArr, index));
   };
   useEffect(() => {
     currentValue[unique] = {};
@@ -756,7 +756,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("div", {
       css: TreeViewRootCSS,
       className: classNames('DGN-UI-TreeView', disabled && 'disabled')
-    }, showSelectedItems && multiple ? jsx(InputBase, {
+    }, showSelectedItems && jsx(InputBase, {
       inputRef: inputValueRef,
       viewType: 'outlined',
       readOnly: true,
@@ -774,12 +774,12 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         name: 'Cancel',
         onClick: clearAllValue
       })
-    }) : null, allowSearch ? jsx(InputBase, {
+    }), allowSearch && jsx(InputBase, {
       startIcon: 'Search',
       onChange: onChangeHandler,
       viewType: 'outlined',
       ...searchProps
-    }) : null, multiple && selectAll ? jsx(Fragment, null, jsx("div", {
+    }), multiple && selectAll && jsx(Fragment, null, jsx("div", {
       className: 'TreeView-All'
     }, jsx(Checkbox, {
       forTreeView: true,
@@ -788,10 +788,10 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       inputRef: selectAllRef,
       stopPropagation: false,
       disabled: disabled
-    })), jsx(Divider, null)) : null, jsx("div", {
+    })), jsx(Divider, null)), jsx("div", {
       ref: ref,
-      className: classNames('TreeView-Content', disabled && 'disabled', className),
-      ...props
+      ...props,
+      className: classNames('TreeView-Content', disabled && 'disabled', className)
     }, mapParent(dataSource, id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
   }, [allowSearch, autoExpandToResult, className, collapseIcon, dataSource, disabled, disabledBoldResult, disabledRelevantValue, displayExpr, expandIcon, id, multiple, multipleValueMode, onChange, parentID, renderAsyncFromLevel, renderAsyncWithLength, renderItem, searchMode, searchProps, selectAll, selectAllLabel, selectBox, showChildrenOfResult, showSelectedItems, value, valueExpr]);
 }));
@@ -802,20 +802,20 @@ const TreeViewRootCSS = css`
         box-shadow: none !important;
         .DGN-UI-Accordion-Summary {
             ${itemsCenter};
-            ${parseMinHeight(40)};
-            ${pd(0)};
-            ${borderRadius(0)};
+            min-height: 40px;
+            padding: 0;
+            border-radius: 0;
             &.focus {
-                ${bgColor(fillFocus)};
+                background-color: ${fillFocus};
             }
             .Accordion-Icon-Root {
                 ${flexRow};
-                ${mgr([1])};
+                margin-right: ${spacing([1])};
             }
         }
         .DGN-UI-Accordion-Details-Content {
-            ${pd(0)};
-            ${borderRadius(0)};
+            padding: 0;
+            border-radius: 0;
         }
         .Accordion-Icon-Root {
             ${flexRow};
@@ -834,40 +834,40 @@ const TreeViewRootCSS = css`
         ${displayBlock};
         ${positionRelative};
         .DGN-UI-Accordion {
-            ${mgb(0)};
+            margin-bottom: 0;
         }
     }
     .TreeView-Item-Checkbox {
         ${displayInlineBlock};
         ${positionRelative};
-        ${parseHeight('100%')};
-        ${mgr([2])};
+        height: 100%;
+        margin-right: ${spacing([2])};
     }
     .TreeView-Item {
         ${flexRow};
         ${positionRelative};
         ${itemsCenter};
         ${boxBorder};
-        ${parseWidth('100%')};
-        ${parseMinHeight(40)};
-        ${textLeft};
+        min-height: 40px;
+        text-align: left;
         color: ${textMain};
+        width: 100%;
         &.non-child {
             ${cursorPointer};
             transition: background-color 300ms ease;
             &.disabled {
-                ${cursorNotAllowed};
                 color: ${systemDisabled};
+                cursor: no-drop;
             }
             &:not(.disabled) {
                 &:hover {
-                    ${bgColor(fillHover)};
+                    background-color: ${fillHover};
                 }
                 &:focus {
-                    ${bgColor(fillFocus)};
+                    background-color: ${fillFocus};
                 }
                 &:active {
-                    ${bgColor(fillPressed)};
+                    background-color: ${fillPressed};
                 }
             }
             &.DGN-Hidden {
@@ -875,7 +875,7 @@ const TreeViewRootCSS = css`
             }
         }
         &.focus {
-            ${bgColor(fillFocus)};
+            background-color: ${fillFocus};
         }
         &.TreeView-Item-active .DGN-UI-Typography {
             font-weight: bold;
@@ -883,10 +883,10 @@ const TreeViewRootCSS = css`
     }
     &.expand-able {
         .TreeView-All {
-            ${mgl([8.5])};
+            margin-left: ${spacing([8.5])};
         }
         .TreeView-Item.non-child {
-            ${pdl([8.5])};
+            padding-left: ${spacing([8.5])};
         }
     }
 `;
@@ -918,82 +918,86 @@ TreeView.defaultProps = {
   valueExpr: ''
 };
 TreeView.propTypes = {
-  /** If `true`, display input box search. */
+  /** expand immediate if true */
+  expand: PropTypes.bool,
+  /** prevent all event if true */
+  disabled: PropTypes.bool,
+  /** show checkbox in each item */
+  selectBox: PropTypes.bool,
+  /** allow select multiple item if true */
+  multiple: PropTypes.bool,
+  /** allow select/unselect all items on one click (just support for multiple) */
+  selectAll: PropTypes.bool,
+  /** display input box search if true */
   allowSearch: PropTypes.bool,
-  /** If `true`, expand TreeView to match result. */
+  /** display all value in a box */
+  showSelectedItems: PropTypes.bool,
+  /** disabled parent and children item if true (only supported for multipleValueMode is single) */
+  disabledRelevantValue: PropTypes.bool,
+  /** prevent display content of match values with bold style */
+  disabledBoldResult: PropTypes.bool,
+  /** expand TreeView to match result if true */
   autoExpandToResult: PropTypes.bool,
-  /** Class for component. */
+  /** still show children of last result was found if true */
+  showChildrenOfResult: PropTypes.bool,
+  /** Used to identify the parent key */
+  id: PropTypes.string.isRequired,
+  /** used for mapping into a nested list */
+  parentID: PropTypes.string.isRequired,
+  /** class on element */
   className: PropTypes.string,
-  /** Icon display for collapse icon. */
-  collapseIcon: PropTypes.any,
-  /** The array of elements that appear in the tree list. */
-  dataSource: PropTypes.array,
-  /** If `true`, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** If `true`, prevent display content of match values with bold style. */
-  disabledBoldResult: PropTypes.bool,
-  /** If `true`, disabled parent and children item (only supported for multipleValueMode is single). */
-  disabledRelevantValue: PropTypes.bool,
-  /** Field name used for text display in dropdown list.<br/>
+  /**
+   * field name used for text display<br/>
    * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
    * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.string,
-  /** If `true`, expand immediate after render (shouldn't use this). */
-  expand: PropTypes.bool,
-  /** Icon display for expand icon. */
-  expandIcon: PropTypes.any,
-  /** If `true`, value must be an array and the treeview will support multiple selections. */
-  multiple: PropTypes.bool,
-  /** Return value for the select multiple use case. */
+  /** the key to determine value to return */
+  valueExpr: PropTypes.string,
+  /** return value for the select multiple use case */
   multipleValueMode: PropTypes.oneOf(['single', 'multiple', 'inheritance']),
   /**
-   * Callback fired when the value changes.<br />
-   * return 2 parameters (e, data)<br />
-   * * e: element (insist {value, justSelected, data})<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp; + value is one or an array of selected values<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp; + justSelected is value has just been selected (either true or false))<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp; + data is one or an array of selected values with full information<br />
-   * * data: array of selected values (not recommend because it's the same e.value)
+   * return value for the select multiple use case
+   * * contains: "Công ty" contains "công", but not contains "cong"
+   * * similar: "Công ty" contains "công" and "cong"
    */
-  onChange: PropTypes.func,
-  /** Used for mapping into a nested list. */
-  parentID: PropTypes.string.isRequired,
-  /** Will render asynchronously from level equal this number. */
-  renderAsyncFromLevel: PropTypes.oneOf([2, 3, 4, 5]),
-  /** Will render asynchronously if the number of elements is greater than this number. */
+  searchMode: PropTypes.oneOf(['contains', 'similar']),
+  /** The content display for label of checkbox select all */
+  selectAllLabel: PropTypes.string,
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   */
+  searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** will render asynchronously if the number of elements is greater than this number */
   renderAsyncWithLength: PropTypes.number,
-  /** Function displays items by custom.<br/>
+  /** will render asynchronously from level equal this number */
+  renderAsyncFromLevel: PropTypes.oneOf([2, 3, 4, 5]),
+  /** data to show in tree list */
+  dataSource: PropTypes.array,
+  /** the value was selected */
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  /** function displays items by custom<br/>
    * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
    * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
   /**
-   * Duration wait enter search content on search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
+   * on change value function<br />
+   * return 2 parameters (e, data)<br />
+   * * e: element (insist {value, justSelected, data})<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp; + value is one or an array of selected values<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp; + justSelected is value has just been selected (either true or false))<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp; + data is one or an array of selected values with full information<br />
+   * * data: array of selected values (not recommend because it's the same e.value)
    */
-  searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Specifies a comparison operation used to search items. */
-  searchMode: PropTypes.oneOf(['contains', 'similar']),
-  /** The props for InputBase. */
+  onChange: PropTypes.func,
+  /** the icon to display for expand icon */
+  expandIcon: PropTypes.any,
+  /** the props for InputBase */
   searchProps: PropTypes.object,
-  /** If `true`, allow select/unselect all items on one click (just support for multiple). */
-  selectAll: PropTypes.bool,
-  /** The content display for label of checkbox select all */
-  selectAllLabel: PropTypes.string,
-  /** If `true`, show checkbox in each item. */
-  selectBox: PropTypes.bool,
-  /** If `true`, still show children of last result was found. */
-  showChildrenOfResult: PropTypes.bool,
-  /** If `true`, display all value in a box. */
-  showSelectedItems: PropTypes.bool,
-  /** Used to identify the parent key. */
-  id: PropTypes.string.isRequired,
-  /** The displayed value of component. */
-  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  /** The field name used for the returned result. */
-  valueExpr: PropTypes.string,
+  /** the icon to display for collapse icon */
+  collapseIcon: PropTypes.any,
   /**
    * get ref of TreeView component, insist:<br/>
    * {<br/>
@@ -1011,6 +1015,6 @@ TreeView.propTypes = {
    * &nbsp;&nbsp;&nbsp;&nbsp;get: get DOM of TreeView component<br/>
    * }
    */
-  ref: ref
+  ref: PropTypes.any
 };
 export default TreeView;

package/package.json

@@ -1,73 +1,42 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.86-beta.1",
-  "description": "",
+  "version": "1.3.87",
+  "description": "The DigiNet core ui",
+  "homepage": "https://diginet.com.vn",
   "main": "index.js",
-  "license": "UNLICENSED",
   "scripts": {
-    "start": "npm-run-all --parallel start-sb eslint-test",
-    "start-sb": "start-storybook -p 9050",
-    "build-storybook": "build-storybook -c .storybook -s src",
-    "build": "run-script-os",
-    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
-    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
-    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
-    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
-    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
-    "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
-    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
-    "version:add": "run-script-os",
-    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
-    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
-    "version:bump": "npm version patch --no-git-tag-version --silent",
-    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
-    "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix",
-    "test-storybook": "test-storybook --url http://localhost:9050"
+    "start-js": "react-scripts start --max_old_space_size=4096",
+    "start": "npx npm-run-all -p start-js",
+    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
+    "eject": "react-scripts eject",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
     "@emotion/core": "^10.0.35",
-    "babel-plugin-module-resolver": "^4.1.0",
     "prop-types": "^15.7.2"
   },
-  "lint-staged": {
-    "*/**/*.{js,jsx,json}": [
-      "prettier --write",
-      "git add"
-    ]
+  "repository": {
+    "type": "git",
+    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
   },
-  "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-    "@babel/preset-react": "^7.13.13",
-    "@storybook/addon-actions": "6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "6.2.9",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "6.2.9",
-    "@storybook/test-runner": "^0.7.1",
-    "autoprefixer": "^10.3.1",
-    "babel-loader": "^8.2.2",
-    "eslint": "^8.4.1",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-regex": "^1.10.0",
-    "husky": "^7.0.4",
-    "jest": "^27.5.1",
-    "lint-staged": "^12.1.2",
-    "mkdirp": "^1.0.4",
-    "npm-run-all": "^4.1.5",
-    "onchange": "^7.1.0",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
-    "run-script-os": "^1.1.6",
-    "sass": "^1.37.0"
-  }
+  "keywords": [
+    "core ui",
+    "diginet"
+  ],
+  "author": "rocachien",
+  "contributors": [
+    {
+      "name": "Chien Do",
+      "email": "rocachien@gmail.com"
+    },
+    {
+      "name": "Nhat Tran",
+      "email": "tranminhnhat1005@gmail.com"
+    },
+    {
+      "name": "Thuan Nguyen",
+      "email": "nt.thuan.hutech@gmail.com"
+    }
+  ],
+  "license": "MIT"
 }

package/readme.md

@@ -38,6 +38,10 @@ npm test
 ```
 
 ## Changelog
+## 1.3.87
+- \[Added\]: Icon – Upload, Workflow
+- \[Fixed\]: InputBase – Fix not run when inputRef is function
+
 ## 1.3.86
 - \[Changed\]: Icon – Optimize code
 - \[Fixed\]: Dropdown – Fix bug cannot select multiple after search

package/utils/index.js

@@ -19,7 +19,6 @@ export { default as SbTemplate } from "./sb-template";
 export { default as updatePosition } from "./updatePosition";
 export { default as useDelayUnmount } from "./useDelayUnmount";
 export { default as useInput } from "./useInput";
-export { default as useIntersection } from "./intersectionObserver";
 export { default as useMediaQuery } from "./useMediaQuery";
 export { default as useOnClickOutside } from "./useOnClickOutside";
 export { default as usePortal } from "./usePortal";

package/utils/intersectionObserver.js

@@ -22,7 +22,7 @@ const getIntersectionObserver = () => {
   }
   return observer;
 };
-const useIntersection = (elem, callback) => {
+export const useIntersection = (elem, callback) => {
   useEffect(() => {
     let target = elem.current;
     let observer = getIntersectionObserver();
@@ -33,5 +33,4 @@ const useIntersection = (elem, callback) => {
       observer.unobserve(target);
     };
   }, []);
-};
-export default useIntersection;
+};