diginet-core-ui 1.3.49 → 1.3.51-beta.2

package/components/accordion/css.js

@@ -1,37 +1,37 @@
 import { css } from '@emotion/core';
-import { typography } from '../../styles/typography';
-import { color as colors } from '../../styles/colors';
-import { alignCenter, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+import theme from '../../theme/settings';
+import { alignCenter, alignStart, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 const {
-  heading3
-} = typography;
-const {
-  system: {
-    active,
-    disabled: systemDisabled
+  colors: {
+    system: {
+      active,
+      disabled: systemDisabled
+    },
+    fill: {
+      disabled: fillDisabled,
+      headerbar,
+      focus,
+      hover,
+      pressed
+    }
   },
-  fill: {
-    disabled: fillDisabled,
-    headerbar,
-    focus,
-    hover,
-    pressed
-  }
-} = colors;
-export const SummaryRootCSS = css`
+  typography: {
+    heading3
+  },
+  spacing
+} = theme;
+export const SummaryRootCSS = background => css`
     ${flexRow};
     ${positionRelative};
     ${justifyBetween};
-    ${alignCenter};
+    ${alignStart};
     ${cursorPointer};
     ${borderBox};
     ${borderRadius4px};
     width: 100%;
     min-height: 56px;
-    padding: 16px 24px;
-    &.background {
-        background-color: ${headerbar};
-    }
+    padding: ${spacing(4)}px ${spacing(6)}px;
+    ${background && `background-color: ${background === true ? headerbar : theme.colors[background] || background};`};
     .Accordion-Expand-Icon,
     .Accordion-Collapse-Icon {
         ${cursorPointer};
@@ -47,8 +47,7 @@ export const SummaryRootCSS = css`
         ${flexRow};
         .Accordion-Icon.rotate-able {
             ${borderBox};
-            width: 24px;
-            height: 24px;
+            ${parseWidthHeight(24, 24)};
             &:not(.TreeView) {
                 transform: rotateZ(0deg);
                 transform-origin: center;
@@ -62,7 +61,7 @@ export const SummaryRootCSS = css`
         ${flexRowReverse};
         ${justifyEnd};
         .Accordion-Icon.rotate-able {
-            margin-right: 8px;
+            margin-right: ${spacing(2)}px;
             &.TreeView {
                 transform: rotateZ(-90deg);
             }
@@ -70,7 +69,7 @@ export const SummaryRootCSS = css`
     }
     &.end {
         .Accordion-Icon.rotate-able {
-            margin-left: 8px;
+            margin-left: ${spacing(2)}px;
             &.TreeView {
                 transform: rotateZ(90deg);
             }
@@ -144,8 +143,7 @@ export const SummaryRootCSS = css`
         ${displayInlineBlock};
         ${positionRelative};
         ${cursorPointer};
-        width: 24px;
-        height: 24px;
+        ${parseWidthHeight(24, 24)};
         transition: transform 200ms linear;
         .Accordion-Expand-Icon {
             transform: scale(1);
@@ -169,7 +167,6 @@ export const SummaryRootCSS = css`
             max-width: 34px;
             min-height: 24px;
             max-height: 34px;
-            padding: 3px;
         }
     }
 `;

package/components/accordion/details.js

@@ -5,16 +5,18 @@ import { memo, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { borderBox, displayBlock, overflowHidden, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
-import { typography } from '../../styles/typography';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  paragraph1
-} = typography;
-const {
-  text: {
-    main
-  }
-} = colors;
+  colors: {
+    text: {
+      main
+    }
+  },
+  typography: {
+    paragraph1
+  },
+  spacing
+} = theme;
 const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
@@ -52,7 +54,7 @@ const DetailsRootCSS = css`
     .DGN-UI-Accordion-Details-Content {
         ${borderBox};
         ${paragraph1};
-        padding: 0 24px 16px 24px;
+        padding: 0 ${spacing(6)}px ${spacing(4)}px ${spacing(6)}px;
         color: ${main};
         &.disabled {
             ${pointerEventsNone}
@@ -66,13 +68,13 @@ AccordionDetails.defaultProps = {
   id: ''
 };
 AccordionDetails.propTypes = {
-  /** The element to display in alert like text props (priority) */
+  /** The content of the component. */
   children: PropTypes.node,
 
-  /** class for De */
-  className: PropTypes.string,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** style inline of component */
-  style: PropTypes.object
+  /** Class for component. */
+  className: PropTypes.string
 };
 export default AccordionDetails;

package/components/accordion/group.js

@@ -41,10 +41,10 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       style: style,
       className: ['DGN-UI-Accordion-Group', className].join(' ').trim().replace(/\s+/g, ' ')
-    }, Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+    }, Children.map(children, child => child && /*#__PURE__*/cloneElement(child, {
       onExpand: e => onCollapseOther(e, child.props.onExpand)
     })));
-  }, [className, children]);
+  }, [style, className, children]);
 }));
 const AccordionGroupRootCSS = css`
     ${borderRadius4px};
@@ -113,16 +113,16 @@ AccordionGroup.defaultProps = {
   style: {}
 };
 AccordionGroup.propTypes = {
-  /** collapse other if true */
-  collapseOther: PropTypes.bool,
+  /** The content of the component. */
+  children: PropTypes.node,
 
-  /** class on element */
-  className: PropTypes.string,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** insist <Accordion /> */
-  children: PropTypes.node.isRequired,
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** style inline of component */
-  style: PropTypes.object
+  /** If `true`, collapse other when expand */
+  collapseOther: PropTypes.bool
 };
 export default AccordionGroup;

package/components/accordion/index.js

@@ -7,13 +7,16 @@ import { jsx, css } from '@emotion/core';
 import AccordionContext from './context';
 import Divider from '../divider';
 import { borderRadius4px, displayBlock, positionRelative } from '../../styles/general';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  line: {
-    category
+  colors: {
+    line: {
+      category
+    }
   }
-} = colors;
+} = theme;
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   disabled,
   expand,
   expanded,
@@ -57,6 +60,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
+      id: id,
       css: AccordionRootCSS,
       ref: ref,
       style: style,
@@ -78,7 +82,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+  }, [id, disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
 }));
 const AccordionRootCSS = css`
     ${displayBlock};
@@ -102,31 +106,31 @@ Accordion.defaultProps = {
   style: {}
 };
 Accordion.propTypes = {
-  /** prevent all event if true */
+  /** The content of the component (insist <AccordionSummary />, <AccordionDetails />). */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** expand immediate after render if true (don't use this) */
+  /** If `true`, expand immediate after render (shouldn't use this). */
   expand: PropTypes.bool,
 
-  /** expand state of accordion (use this) */
+  /** Expand state of accordion (should use this). */
   expanded: PropTypes.bool,
 
-  /** class on element */
-  className: PropTypes.string,
-
-  /** class on element */
+  /** The box-shadow of component. */
   boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
-  /** The function will run after expand Accordion detail */
+  /** Callback fired when Accordion is expanded. */
   onExpand: PropTypes.func,
 
-  /** The function will run after collapse Accordion detail */
-  onCollapse: PropTypes.func,
-
-  /** insist <AccordionSummary />, <AccordionDetails /> */
-  children: PropTypes.node,
-
-  /** style inline of component */
-  style: PropTypes.object
+  /** Callback fired when Accordion is collapsed. */
+  onCollapse: PropTypes.func
 };
 export default Accordion;

package/components/accordion/summary.js

@@ -8,6 +8,7 @@ import { renderIcon } from '../../utils';
 import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   expandIcon,
   collapseIcon,
   expandIconAt,
@@ -18,9 +19,6 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   expandIconProps,
   style
 }, reference) => {
-  const ref = useRef(null);
-  const expandIconRef = useRef(null);
-  const timer = useRef(null);
   const {
     expanded,
     expandState,
@@ -30,8 +28,13 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onCollapse,
     setExpandState
   } = useContext(AccordionContext);
+  const ref = useRef(null);
+  const expandIconRef = useRef(null);
+  const timer = useRef(null);
 
-  const onClickHandler = e => {
+  const _SummaryRootCSS = SummaryRootCSS(background);
+
+  const _onClick = e => {
     if (!disabled) {
       const target = e.target;
 
@@ -93,19 +96,6 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useEffect(() => {
-    if (/^(#|rgb)/.test(background)) {
-      if (ref.current) {
-        ref.current.style.backgroundColor = background;
-      }
-
-      return () => {
-        if (ref.current) {
-          ref.current.style.backgroundColor = null;
-        }
-      };
-    }
-  }, [background]);
   useEffect(() => {
     if (expandState) {
       showHideDetailHandler('show');
@@ -124,19 +114,20 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
-      css: SummaryRootCSS,
+      id: id,
+      css: _SummaryRootCSS,
       ref: ref,
       tabIndex: "-1",
-      onClick: onClickHandler,
+      onClick: _onClick,
       style: style,
-      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', className, background === true ? 'background' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
+      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx("div", {
       className: 'DGN-UI-Accordion-Summary-Content'
     }, children), !!expandIcon && jsx("div", {
       className: 'Accordion-Icon-Root'
     }, jsx("div", { ...expandIconProps,
       ref: expandIconRef,
-      className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim()
+      className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim().replace(/\s+/g, ' ')
     }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
       className: 'Accordion-Expand-Icon'
     }) : jsx("span", {
@@ -146,7 +137,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
+  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
 }));
 AccordionSummary.defaultProps = {
   expandIconAt: 'start',
@@ -156,28 +147,28 @@ AccordionSummary.defaultProps = {
   style: {}
 };
 AccordionSummary.propTypes = {
-  /** the icon to display for expand icon */
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Icon display for expand icon. */
   expandIcon: PropTypes.any,
 
-  /** the icon to display for collapse icon */
+  /** Icon display for collapse icon. */
   collapseIcon: PropTypes.any,
 
-  /** the position to render expand icon */
+  /** Position to render icon. */
   expandIconAt: PropTypes.oneOf(['start', 'end']),
 
-  /** background for label summary */
+  /** Background for label summary. */
   background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
-  /** class for Summary component */
-  className: PropTypes.string,
-
-  /** The element to display in alert like text props (priority) */
-  children: PropTypes.node,
-
-  /** props of expand and collapse icons */
-  expandIconProps: PropTypes.any,
-
-  /** style inline of component */
-  style: PropTypes.object
+  /** Other props of icons. */
+  expandIconProps: PropTypes.any
 };
 export default AccordionSummary;

package/components/alert/index.js

@@ -10,8 +10,8 @@ import ButtonIcon from '../button/icon';
 import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
 import { typography } from '../../styles/typography';
-import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 import { useTheme } from '../../theme';
+import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 const {
   heading3,
   heading4,

package/components/avatar/index.js

@@ -12,18 +12,22 @@ import { getGlobal } from '../../global';
 import AvatarDefault from '../../assets/avatar/default.svg';
 import { alignCenter, borderNone, displayBlock, displayNone, flexCol, inlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 import isMobile from '../../utils/isMobile';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  system: {
-    white
-  },
-  fill: {
-    tooltip: fillTooltip
+  colors: {
+    system: {
+      white
+    },
+    fill: {
+      tooltip: fillTooltip
+    },
+    text: {
+      tooltip: textTooltip
+    }
   },
-  text: {
-    tooltip: textTooltip
-  }
-} = colors;
+  spacing,
+  zIndex: zIndexCORE
+} = theme;
 const existed = {},
       urlAvatar = {},
       popupHandler = {};
@@ -34,6 +38,18 @@ const blurKeyframe = keyframes`
     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);
+  } else if (typeof matchType === 'object' && Array.isArray(matchType)) {
+    const pattern = new RegExp('^image/(' + matchType.join('|') + ')', 'i');
+    return pattern.test(type);
+  } else {
+    return new RegExp(matchType).test(type);
+  }
+};
+
 const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   src,
   defaultSrc,
@@ -56,7 +72,9 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   readOnly,
   disabled,
   lazyLoading,
-  id
+  id,
+  allowEdit,
+  onClick
 }, reference) => {
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
@@ -94,23 +112,12 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const checkFileType = type => {
-    if (typeof matchType === 'object' && matchType instanceof RegExp) {
-      return matchType.test(type);
-    } else if (typeof matchType === 'object' && Array.isArray(matchType)) {
-      const pattern = new RegExp('^image/(' + matchType.join('|') + ')', 'i');
-      return pattern.test(type);
-    } else {
-      return new RegExp(matchType).test(type);
-    }
-  };
-
   const onChangeAvatar = input => {
     const [file] = input.target.files;
     if (!file) return;
     const reader = new FileReader();
 
-    if (!checkFileType(file.type)) {
+    if (!checkFileType(file.type, matchType)) {
       input.target.value = '';
       popupHandler[unique].show(wrongTypeError);
       return;
@@ -194,12 +201,15 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (hoverAble) setViewMoreInfo(false);
   };
 
-  const _onClick = () => {
+  const _onClick = event => {
+    onClick && event.stopPropagation();
     if (disabled) return;
 
     if (readOnly) {
       if (_isMobile) showMoreInfo();
-    } else triggerInput();
+    } else {
+      allowEdit ? triggerInput() : onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
   };
 
   const _onMouseEnter = () => {
@@ -264,7 +274,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onMouseLeave: _onMouseLeave,
       tabIndex: "-1",
       onBlur: closeMoreInfo
-    }, renderImage())), !readOnly && !disabled && jsx("span", {
+    }, renderImage())), allowEdit && !readOnly && !disabled && jsx("span", {
       css: _ActionIconCSS
     }, jsx(ButtonIcon, {
       viewType: 'ghost',
@@ -315,7 +325,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       icon: 'danger',
       fullScreen: true
     }));
-  }, [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble, outlined, actionIconWidth, actionIconHeight, lazyLoading, defaultSrc, direction, data, maxSizeError, srcState, isInView, onLoaded, viewAvatar, viewMoreInfo]);
+  }, [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble, outlined, actionIconWidth, actionIconHeight, lazyLoading, defaultSrc, direction, data, maxSizeError, allowEdit, srcState, isInView, onLoaded, viewAvatar, viewMoreInfo]);
 }));
 
 const ActionIconCSS = actionIconWidth => css`
@@ -325,7 +335,7 @@ const ActionIconCSS = actionIconWidth => css`
     min-width: ${actionIconWidth}px;
     transition: opacity 0.5s;
     opacity: 0;
-    z-index: 9002;
+    z-index: ${zIndexCORE(2)};
 `;
 
 const AvatarPreviewCSS = readOnly => css`
@@ -380,12 +390,13 @@ const AvatarRootCSS = (width, height, outlined) => css`
 const MoreInfoCSS = css`
     ${displayBlock};
     ${positionRelative};
-    padding: 8px;
+    padding: ${spacing([2])};
 `;
 const blurAnimationCSS = css`
     animation: ${blurKeyframe} 1s ease;
 `;
 Avatar.defaultProps = {
+  allowEdit: false,
   disabled: false,
   readOnly: false,
   clearAble: true,
@@ -404,6 +415,9 @@ Avatar.defaultProps = {
   lazyLoading: false
 };
 Avatar.propTypes = {
+  /** If `true`, allow to edit avatar. */
+  allowEdit: PropTypes.bool,
+
   /** prevent all events, only view */
   disabled: PropTypes.bool,
 
@@ -470,12 +484,12 @@ Avatar.propTypes = {
   /** will run after change avatar */
   onChange: PropTypes.func,
 
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func,
+
   /** lazy loading */
   lazyLoading: PropTypes.bool,
 
-  /** any props else */
-  props: PropTypes.any,
-
   /**
    * ref methods
    *

package/components/chip/index.js

@@ -114,8 +114,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: size
     }, jsx(Typography, {
       type: size === 'small' ? 'p2' : 'p1',
-      color: 'inherit',
-      lineClamp: 1
+      color: 'inherit'
     }, renderLabel()));
   }, [label, size, startIcon, endIcon, clearAble]);
   const endIconView = useMemo(() => {

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

@@ -41,8 +41,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   inputProps,
   forTreeView,
-  width,
   labelProps,
+  width,
   ...props
 }, reference) => {
   if (!inputRef) {