diginet-core-ui 1.4.14-beta.2 → 1.4.14-beta.4

package/components/alert/index.js

@@ -1,70 +1,64 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Icon, LinearProgress } from "./..";
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import LinearProgress from "../progress/linear";
-import ButtonIcon from "../button/icon";
-import Icon from "../../icons";
-import { hexToRGBA } from "../../styles/color-helper";
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { animations } from "../../styles/animation";
-import { classNames, useDelayUnmount } from "../../utils";
-import { itemsCenter, border, boxBorder, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from "../../styles/general";
-import { useTheme, useColor as colors } from "../../theme";
-const {
-  colors: {
-    system: {
-      white: systemWhite
-    }
-  },
-  typography: {
-    heading3,
-    heading4,
-    heading5,
-    paragraph1,
-    paragraph2,
-    paragraph3
-  },
-  spacing,
-  zIndex: zIndexCORE
-} = useTheme();
+import { bgColor, border, borderRadius4px, boxBorder, breakWord, displayBlock, flexRow, itemsCenter, justifyStart, positionRelative, textColor, userSelectNone } from "../../styles/general";
+import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { classNames, getProp, hexToRGBA, useDelayUnmount } from "../../utils";
 const iconMap = new Map([['info', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'CancelFilled']]);
 const maxWidthMap = new Map([['tiny', 320], ['small', 400], ['medium', 480]]);
-const primaryTypoMap = new Map([['tiny', heading5], ['small', heading4], ['medium', heading3]]);
+const primaryTypoMap = new Map([['tiny', 'typography.heading5'], ['small', 'typography.heading4'], ['medium', 'typography.heading3']]);
 const iconSizeMap = new Map([['tiny', 16], ['small', 20], ['medium', 24]]);
 const linearProgressSizeMap = new Map([['tiny', 2], ['small', 3], ['medium', 4]]);
 const transitionTime = 300;
-const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  autoDisappear,
-  children,
-  className,
-  clearAble,
-  color,
-  duration,
-  onClose,
-  progressing,
-  secondary,
-  size,
-  text,
-  type
-}, reference) => {
-  type = type || color;
+const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  if (!reference) reference = useRef(null);
+  const theme = useTheme();
+  const {
+    colors
+  } = theme;
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'Alert'
+  });
+  const {
+    action = {},
+    autoDisappear,
+    children,
+    className,
+    clearAble,
+    color,
+    duration,
+    onClose,
+    progressing,
+    secondary,
+    size,
+    text,
+    type: typeProp
+  } = props;
+  const type = typeProp || color;
   const ref = useRef(null);
   const clearIconRef = useRef(null);
   const [percentState, setPercentState] = useState(100);
   const [isClose, setIsClose] = useState(false);
   const showAlert = useDelayUnmount(!isClose, transitionTime);
-  const mainColor = colors[type];
-  const opacityColor = hexToRGBA(mainColor, 0.15);
+  const mainColor = getProp(colors, type, type);
+  const opacityColor = hexToRGBA(getProp(colors, mainColor, mainColor), 0.15);
   const iconName = iconMap.get(type);
   const iconSize = iconSizeMap.get(size);
-  const _AlertContainerCSS = AlertContainerCSS(size);
-  const _AlertInfoCSS = AlertInfoCSS(mainColor, opacityColor);
-  const _AlertTextCSS = AlertTextCSS(clearAble);
-  const _AlertPrimaryCSS = AlertPrimaryCSS(secondary, size);
-  const _AlertSecondaryCSS = AlertSecondaryCSS(size);
-  const _linearProgressCSS = linearProgressCSS(size);
+  const _AlertContainerCSS = AlertContainerCSS(size, theme);
+  const _AlertInfoCSS = AlertInfoCSS(mainColor, opacityColor, theme);
+  const _AlertIconCSS = AlertIconCSS(theme);
+  const _AlertTextCSS = AlertTextCSS(clearAble, theme);
+  const _AlertPrimaryCSS = AlertPrimaryCSS(secondary, size, theme);
+  const _AlertSecondaryCSS = AlertSecondaryCSS(size, theme);
+  const _linearProgressCSS = linearProgressCSS(size, theme);
   const _onClose = () => {
     setIsClose(true);
     onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -107,7 +101,7 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _AlertInfoCSS,
       className: classNames('DGN-UI-Alert', className)
     }, jsx("span", {
-      css: AlertIconCSS,
+      css: _AlertIconCSS,
       className: 'DGN-UI-Alert-Icon'
     }, node), jsx("span", {
       css: _AlertTextCSS,
@@ -130,7 +124,7 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: type,
       name: 'Close'
     }) : null));
-  }, [color, text, clearAble, secondary, size, children, className, type, onClose, mainColor, opacityColor, isClose]);
+  }, [children, className, clearAble, color, onClose, secondary, size, text, typeProp, isClose, mainColor, opacityColor, theme]);
   const LinearView = useMemo(() => {
     return progressing ? jsx("span", {
       css: _linearProgressCSS,
@@ -146,7 +140,7 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         boxShadow: 'none'
       }
     })) : null;
-  }, [progressing, size, duration, percentState]);
+  }, [duration, size, progressing, percentState, theme]);
   return showAlert ? jsx("div", {
     css: _AlertContainerCSS,
     className: 'DGN-UI-Container-Alert',
@@ -154,73 +148,88 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, AlertView, LinearView) : null;
 }));
 const fadeIn = animations.fadeIn;
-const AlertContainerCSS = size => css`
+const AlertContainerCSS = (size, {
+  zIndex
+}) => css`
     ${positionRelative};
     ${displayBlock};
     max-width: ${maxWidthMap.get(size)}px;
     transition: opacity ${transitionTime}ms ease;
     margin-bottom: 1rem;
     pointer-events: auto;
-    z-index: ${zIndexCORE(1)};
+    z-index: ${zIndex(1)};
     animation: ${fadeIn} ${transitionTime}ms ease;
 `;
-const AlertInfoCSS = (mainColor, opacityColor) => css`
+const AlertInfoCSS = (mainColor, opacityColor, {
+  colors,
+  spacing
+}) => css`
     ${flexRow};
     ${positionRelative};
     ${boxBorder};
     ${borderRadius4px};
     ${breakWord};
     ${border(1, mainColor)};
-    color: ${mainColor};
+    ${textColor(mainColor)};
     background-image: linear-gradient(${opacityColor}, ${opacityColor});
-    background-color: ${systemWhite};
+    ${bgColor(getProp(colors, 'system/standard'))};
     width: 100%;
     min-width: 320px;
     padding: ${spacing([0, 1, 0, 4])};
     opacity: 1;
 `;
-const AlertIconCSS = css`
+const AlertIconCSS = ({
+  spacing
+}) => css`
     display: inherit;
     margin-right: ${spacing([2.5])};
     padding: ${spacing([2, 0])};
 `;
-const AlertTextCSS = clearAble => css`
+const AlertTextCSS = (clearAble, {
+  spacing
+}) => css`
     ${displayBlock};
     margin-right: ${spacing([clearAble ? 2.5 : 0])};
     padding: ${spacing([2, 0])};
     align-self: center;
 `;
-const AlertPrimaryCSS = (secondary, size) => css`
+const AlertPrimaryCSS = (secondary, size, theme) => css`
     ${flexRow};
     ${positionRelative};
     ${itemsCenter};
     ${justifyStart};
     ${userSelectNone};
-    ${secondary ? primaryTypoMap.get(size) : paragraph1};
+    ${secondary ? getProp(theme, primaryTypoMap.get(size)) : getProp(theme, 'typography.paragraph1')};
 `;
-const AlertSecondaryCSS = size => css`
+const AlertSecondaryCSS = (size, {
+  typography
+}) => css`
     ${displayBlock};
     ${userSelectNone};
-    ${size === 'tiny' ? paragraph3 : paragraph2};
+    ${size === 'tiny' ? typography.paragraph3 : typography.paragraph2};
 `;
 const AlertClearIconCSS = css`
     margin-left: auto;
 `;
-const linearProgressCSS = size => css`
+const linearProgressCSS = (size, {
+  spacing
+}) => css`
     ${displayBlock};
     ${positionRelative};
     margin-top: ${spacing([size === 'medium' ? 1 : 0.5])};
     padding: ${spacing([0, 1.25])};
 `;
-Alert.defaultProps = {
-  autoDisappear: false,
-  className: '',
-  clearAble: true,
-  color: 'info',
-  duration: 2000,
-  progressing: false,
-  size: 'medium'
-};
+
+// Alert.defaultProps = {
+//     autoDisappear: false,
+//     className: '',
+//     clearAble: true,
+//     color: 'semantic/info',
+//     duration: 2000,
+//     progressing: false,
+//     size: 'medium',
+// };
+
 Alert.propTypes = {
   /** Automatically remove the Alert component after the timer ends (milliseconds). */
   autoDisappear: PropTypes.bool,

package/components/alert/notify.js

@@ -1,16 +1,14 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useEffect, forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import ReactDOM, { createPortal } from 'react-dom';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import Alert from "./";
-import theme from "../../theme/settings";
-import { classNames } from "../../utils";
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import ReactDOM, { createPortal } from 'react-dom';
 import { bgTransparent, pointerEventsNone, positionFixed } from "../../styles/general";
-const {
-  zIndex: zIndexCORE
-} = theme;
+import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { classNames } from "../../utils";
+import Alert from "./";
 const positionVerticalMap = new Map([['top', css`
             top: 15px;
         `], ['center', css`
@@ -29,17 +27,27 @@ const positionHorizontalMap = new Map([['left', css`
         `], ['right', css`
             right: 15px;
         `]]);
-const Notify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  className,
-  getAddNotify,
-  id,
-  position,
-  style,
-  ...props
-}, reference) => {
+const Notify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  if (!reference) reference = useRef(null);
+  const theme = useTheme();
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'Notify'
+  });
+  const {
+    action = {},
+    className,
+    getAddNotify,
+    id,
+    position,
+    style,
+    ...other
+  } = props;
   const ref = useRef(null);
   const [positionState, setPositionState] = useState(position);
+  const _AlertCSS = AlertCSS(theme);
   const PositionVerticalCSS = positionVerticalMap.get((positionState === null || positionState === void 0 ? void 0 : positionState.vertical) || 'bottom');
   const PositionHorizontalCSS = positionHorizontalMap.get((positionState === null || positionState === void 0 ? void 0 : positionState.horizontal) || 'center');
   const showNotify = (message, {
@@ -56,13 +64,13 @@ const Notify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // onClose={() => el.remove()}
     , {
       secondary: message,
-      ...props,
+      ...other,
       ...options
     }), ref.current.appendChild(el));
   };
   useEffect(() => {
     if (getAddNotify && typeof getAddNotify === 'function') getAddNotify(showNotify);
-  }, [props]);
+  }, [other]);
   useEffect(() => {
     setPositionState(position);
   }, [position]);
@@ -80,27 +88,31 @@ const Notify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   const NotifyContainerView = jsx("div", {
     ref: ref,
-    css: [AlertCSS, PositionVerticalCSS, PositionHorizontalCSS],
+    css: [_AlertCSS, PositionVerticalCSS, PositionHorizontalCSS],
     id: id,
     style: style,
     className: classNames('DGN-UI-Notify-Alert', (position === null || position === void 0 ? void 0 : position.vertical) || 'center' + '-' + (position === null || position === void 0 ? void 0 : position.horizontal) || 'center', className)
   });
   return /*#__PURE__*/createPortal(NotifyContainerView, document.body);
 }));
-const AlertCSS = css`
+const AlertCSS = ({
+  zIndex
+}) => css`
     ${positionFixed};
     ${pointerEventsNone};
     ${bgTransparent};
-    z-index: ${zIndexCORE(2)};
+    z-index: ${zIndex(2)};
 `;
-Notify.defaultProps = {
-  className: '',
-  position: {
-    vertical: 'bottom',
-    horizontal: 'center'
-  },
-  style: {}
-};
+
+// Notify.defaultProps = {
+//     className: '',
+//     position: {
+//         vertical: 'bottom',
+//         horizontal: 'center',
+//     },
+//     style: {},
+// };
+
 Notify.propTypes = {
   /** Class for component. */
   className: PropTypes.string,

package/components/avatar/index.js

@@ -6,23 +6,12 @@ import { ButtonIcon, Image, ModalSample, Notify, Popover, Typography } from "./.
 import OptionWrapper from "../others/option-wrapper";
 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 { Fragment, forwardRef, isValidElement, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { borderNone, borderRadius, boxContent, cursorInherit, cursorPointer, displayBlock, displayFlex, displayInlineFlex, displayNone, flexCol, itemsCenter, overflowHidden, parseMinWidth, parseWidthHeight, positionAbsolute, positionRelative, userSelectNone, z } from "../../styles/general";
+import { getColor } from "../../styles/utils";
 import { useTheme } from "../../theme";
-import { classNames, isMobile, refType as ref } from "../../utils";
-const {
-  colors: {
-    system: {
-      white: systemWhite
-    },
-    fill: {
-      tooltip: fillTooltip
-    },
-    text: {
-      tooltip: textTooltip
-    }
-  }
-} = useTheme();
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { classNames, getProp, isMobile, refType as ref } from "../../utils";
 const checkFileType = (type, matchType) => {
   if (typeof matchType === 'object' && matchType instanceof RegExp) {
     return matchType.test(type);
@@ -33,36 +22,44 @@ const checkFileType = (type, matchType) => {
     return new RegExp(matchType).test(type);
   }
 };
-const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  actionIconHeight,
-  actionIconWidth,
-  allowEdit,
-  className,
-  clearAble,
-  data,
-  defaultSrc,
-  direction,
-  disabled,
-  height,
-  hoverAble,
-  id,
-  lazyLoading,
-  matchType,
-  maxSize,
-  maxSizeError,
-  onChange,
-  onClick,
-  onRemove,
-  outlined,
-  readOnly,
-  src,
-  style,
-  width,
-  wrongTypeError
-}, reference) => {
+const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
-  if (!defaultSrc) defaultSrc = AvatarDefault;
+  const theme = useTheme();
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'Avatar'
+  });
+  const {
+    action = {},
+    actionIconHeight,
+    actionIconWidth,
+    allowEdit,
+    className,
+    clearAble,
+    data,
+    defaultSrc: defaultSrcProp,
+    direction,
+    disabled,
+    height,
+    hoverAble,
+    id,
+    lazyLoading,
+    matchType,
+    maxSize,
+    maxSizeError,
+    onChange,
+    onClick,
+    onRemove,
+    outlined,
+    readOnly,
+    src,
+    style,
+    width,
+    wrongTypeError
+  } = props;
+  const defaultSrc = defaultSrcProp || AvatarDefault;
   const ref = useRef(null);
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
@@ -73,7 +70,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const _ActionIconCSS = ActionIconCSS(actionIconWidth);
   const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly || disabled);
   const _AvatarContainerCSS = AvatarContainerCSS(_ActionIconCSS.name);
-  const _AvatarRootCSS = AvatarRootCSS(width, height, outlined);
+  const _AvatarRootCSS = AvatarRootCSS(width, height, outlined, theme);
   const _isMobile = isMobile.any();
   const triggerInput = e => {
     if (e || !srcState) {
@@ -115,13 +112,13 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       return info.map((key, index) => {
         return jsx(Typography, {
           key: index,
-          color: textTooltip,
+          color: 'text/tooltip',
           type: 'p1'
         }, key + ': ' + data[key]);
       });
     }
     return jsx(Typography, {
-      color: textTooltip,
+      color: 'text/tooltip',
       type: 'p1'
     }, getGlobal('noDataText'));
   };
@@ -227,19 +224,19 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       arrow: true,
       open: viewMoreInfo,
       pressESCToClose: false,
-      bgColor: fillTooltip,
+      bgColor: 'fill/tooltip',
       anchor: avatarRef,
       fullScreen: false,
       direction: direction
     }, jsx("div", {
-      css: MoreInfoCSS
+      css: MoreInfoCSS(theme)
     }, typeof data === 'function' ? data() : renderData())) : null, jsx(Notify, {
       ref: notifyRef,
       progressing: true,
       autoDisappear: true,
       color: 'danger'
     }));
-  }, [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, defaultSrcProp, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, srcState, theme, viewAvatar, viewMoreInfo]);
 }));
 const ActionIconCSS = actionIconWidth => css`
     ${displayFlex};
@@ -269,7 +266,9 @@ const AvatarContainerCSS = ActionIconCSSName => css`
         }
     }
 `;
-const AvatarRootCSS = (width, height, outlined) => css`
+const AvatarRootCSS = (width, height, outlined, {
+  colors
+}) => css`
     ${displayBlock};
     ${positionRelative};
     ${overflowHidden};
@@ -278,36 +277,40 @@ const AvatarRootCSS = (width, height, outlined) => css`
     ${boxContent};
     ${parseWidthHeight(width, height)};
     ${borderRadius('50%')};
-    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${systemWhite}` : outlined};
+    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${getColor(getProp(colors, 'system/standard'))}` : outlined};
     input {
         ${displayNone};
     }
 `;
-const MoreInfoCSS = css`
+const MoreInfoCSS = ({
+  spacing
+}) => css`
     ${displayBlock};
     ${positionRelative};
-    ${pd([2])};
+    padding: ${spacing([2])};
 `;
-Avatar.defaultProps = {
-  actionIconHeight: 24,
-  actionIconWidth: 24,
-  allowEdit: false,
-  className: '',
-  clearAble: true,
-  data: {},
-  direction: 'bottom',
-  disabled: false,
-  height: 48,
-  hoverAble: false,
-  lazyLoading: false,
-  matchType: /^image\/(gif|jpe?g|tiff?|png|webp|bmp|svg(\+xml)?)$/i,
-  maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,
-  outlined: false,
-  readOnly: false,
-  style: {},
-  width: 48,
-  wrongTypeError: `File ${getGlobal(['errorDefault', 'fileType'])}`
-};
+
+// Avatar.defaultProps = {
+//     actionIconHeight: 24,
+//     actionIconWidth: 24,
+//     allowEdit: false,
+//     className: '',
+//     clearAble: true,
+//     data: {},
+//     direction: 'bottom',
+//     disabled: false,
+//     height: 48,
+//     hoverAble: false,
+//     lazyLoading: false,
+//     matchType: /^image\/(gif|jpe?g|tiff?|png|webp|bmp|svg(\+xml)?)$/i,
+//     maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,
+//     outlined: false,
+//     readOnly: false,
+//     style: {},
+//     width: 48,
+//     wrongTypeError: `File ${getGlobal(['errorDefault', 'fileType'])}`,
+// };
+
 Avatar.propTypes = {
   /** The height of action icon. */
   actionIconHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),