diginet-core-ui 1.3.80 → 1.3.81

package/components/avatar/index.js

@@ -27,8 +27,7 @@ const {
   zIndex: zIndexCORE
 } = useTheme();
 const existed = {},
-  urlAvatar = {},
-  popupHandler = {};
+  urlAvatar = {};
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
     25% { -webkit-filter: blur(3px);}
@@ -78,6 +77,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   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
@@ -109,12 +109,16 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const reader = new FileReader();
     if (!checkFileType(file.type, matchType)) {
       input.target.value = '';
-      popupHandler[unique].show(wrongTypeError);
+      popupRef.current.instance.show({
+        description: wrongTypeError
+      });
       return;
     }
     if (+maxSize && file.size > maxSize * 1024 ** 2) {
       input.target.value = '';
-      popupHandler[unique].show(maxSizeError);
+      popupRef.current.instance.show({
+        description: maxSizeError
+      });
       return;
     }
     reader.onload = e => {
@@ -295,11 +299,8 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx("div", {
       css: MoreInfoCSS
     }, typeof data === 'function' ? data() : renderData())), !disabled && !readOnly && jsx(Popup, {
-      getPopup: func => popupHandler[unique] = func,
-      type: 'info',
-      title: maxSizeError,
-      icon: 'danger',
-      fullScreen: true
+      ref: popupRef,
+      type: 'danger'
     }));
   }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, isInView, onLoaded, srcState, viewAvatar, viewMoreInfo]);
 }));

package/components/button/icon.js

@@ -11,7 +11,7 @@ import Icon from "../../icons";
 import Ripple from "./ripple-effect";
 import { getClassNameFromColor, getRippleColor } from '.';
 import CircularProgress from "../progress/circular";
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, borderRadius50, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, borderRadius50, cursorPointer, flexRow, inlineFlex, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
 const {
   colors: {
@@ -47,6 +47,9 @@ const sizeMap = new Map([['tiny', {
 }], ['giant', {
   buttonSize: '56px',
   iconSize: '40px'
+}], ['extraGiant', {
+  buttonSize: '96px',
+  iconSize: '56px'
 }]]);
 const iconColorMap = new Map([['Close', semanticDanger], ['Cancel', semanticDanger], ['Approval', semanticSuccess], ['Delete', semanticWarning], ['Trash', semanticWarning], ['Edit', semanticInfo], ['EditV2', semanticInfo], ['View', semanticInfo]]);
 const alphaArr = {
@@ -239,7 +242,7 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
         }
     }
     &.text {
-        ${noBorder};
+        ${borderNone};
         ${backgroundTransparent};
         color: ${color};
         &.button-icon--loading {
@@ -266,7 +269,7 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
     }
     &.ghost {
         ${backgroundTransparent};
-        ${noBorder};
+        ${borderNone};
         color: ${color};
         &.loading,
         &:hover,
@@ -326,7 +329,7 @@ ButtonIcon.propTypes = {
    * * large (button 48px, icon 32px)
    * * giant (button 56px, icon 40px)
    * */
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
   style: PropTypes.object,
   /** If `true`, icon has view box. */

package/components/button/index.js

@@ -1,17 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { CircularProgress, Icon, Typography } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { Typography } from "../";
-import Icon from "../../icons";
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex } from "../../styles/color-helper";
 import * as allColors from "../../styles/colors";
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, noMargin, noPadding, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, cursorPointer, flexRow, inlineFlex, justifyCenter, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
-import OptionWrapper from "../others/option-wrapper";
-import CircularProgress from "../progress/circular";
 import Ripple from "./ripple-effect";
 const {
   colors: {
@@ -89,6 +87,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   color: colorProp,
   disabled,
   endIcon,
+  href,
   id,
   label,
   labelProps,
@@ -99,12 +98,14 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   stopPropagation,
   text,
   type,
+  urlParams,
   viewType,
   ...props
 }, reference) => {
   label = label || text || '';
   const ref = useRef(null);
   const rippleRef = useRef(null);
+  const [urlState, setUrlState] = useState(href);
   const iconSize = iconSizeMap.get(size);
   const paddingSize = paddingSizeMap.get(size);
   const outlinedPaddingSize = outlinedPaddingSizeMap.get(size);
@@ -114,10 +115,25 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const minHeightSizeLink = minHeightSizeLinkMap.get(size);
   const color = colors[colorProp] || colorProp;
   const isViewTypeLink = viewType === 'link';
+  const TagName = href ? 'a' : 'button';
   const _ButtonRootCSS = ButtonRootCSS(color);
   const _ButtonIcon = ButtonIconCSS(endIcon, label, startIcon, iconMarginSize, iconSize);
   const _ButtonTextCSS = ButtonTextCSS(loading, iconMarginSize);
   const _ButtonSizeCSS = ButtonSizeCSS(paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, iconSize);
+  const _onClick = e => {
+    if (href) e.preventDefault(); //Prevent open link when click
+    onClick && stopPropagation && e.stopPropagation();
+    if (disabled || loading) return;
+    if (!isViewTypeLink) rippleRef.current.start(e);
+    onClick && onClick(e);
+  };
+  useEffect(() => {
+    if (href) {
+      const qs = urlParams ? '?' + new URLSearchParams(urlParams).toString() : '';
+      const url = href + qs;
+      setUrlState(url);
+    }
+  }, [href, urlParams]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -171,19 +187,11 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const iconLoading = () => {
     return jsx(CircularProgress, {
       className: 'DGN-UI-Button-Loading',
-      size: 'extraSmall',
       background: 'transparent',
       color: 'currentColor',
-      strokeWidth: 3,
-      width: parseInt(iconSize)
+      size: parseInt(iconSize)
     });
   };
-  const _onClick = e => {
-    onClick && stopPropagation && e.stopPropagation();
-    if (disabled || loading) return;
-    if (!isViewTypeLink) rippleRef.current.start(e);
-    onClick && onClick(e);
-  };
   return useMemo(() => {
     // 1. Có StartIcon => thay StartIcon
     // 2. Có EndIcon => thay EndIcon
@@ -203,7 +211,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
       if (!startIcon && !endIcon) start = iconLoading();
     }
-    return jsx("button", {
+    return jsx(TagName, {
       css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
       ref: ref,
       onClick: _onClick,
@@ -211,17 +219,18 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       type: type,
       disabled: disabled,
       className: classNames('DGN-UI-Button', viewType, getClassNameFromColor(colorProp), size, loading && 'button--loading', className),
+      href: urlState || null,
       ...props
     }, start, jsx(Typography, {
       css: _ButtonTextCSS,
       type: typographySize,
       className: classNames('DGN-UI-Button-Label', 'button-text'),
       ...labelProps
-    }, children || label), end && end, !disabled && !loading && !isViewTypeLink && jsx(Ripple, {
+    }, children || label), end ? end : null, !disabled && !loading && !isViewTypeLink ? jsx(Ripple, {
       ref: rippleRef,
       color: getRippleColor(colorProp, viewType, allColors)
-    }));
-  }, [children, className, colorProp, disabled, endIcon, id, label, loading, onClick, size, startIcon, stopPropagation, type, viewType]);
+    }) : null);
+  }, [children, className, colorProp, disabled, endIcon, href, id, label, loading, onClick, size, startIcon, stopPropagation, type, urlParams, viewType, urlState]);
 }));
 const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize) => css`
     ${flexRow};
@@ -270,7 +279,7 @@ const ButtonSizeCSS = (paddingSize, minHeightSize, minHeightSizeLink, outlinedPa
         ${parseMinHeight(minHeightSizeLink)};
     }
     .no-icon {
-        ${noMargin};
+        margin: 0;
         ${parseHeight(iconSize)};
         ${parseMinWidth(0)};
     }
@@ -288,6 +297,7 @@ const ButtonRootCSS = color => css`
     ${outlineNone};
     ${userSelectNone};
     ${parseHeight('max-content')};
+    text-decoration: none;
     transition: all 0.5s;
     &.button--loading {
         ${pointerEventsNone};
@@ -347,7 +357,7 @@ const ButtonRootCSS = color => css`
     }
     &.text {
         ${backgroundTransparent};
-        ${noBorder};
+        ${borderNone};
         color: ${color};
         &.button--loading {
             background-color: ${hexToRGBA(color, alphaLoading)};
@@ -373,8 +383,8 @@ const ButtonRootCSS = color => css`
     }
     &.link {
         ${backgroundTransparent};
-        ${noBorder};
-        ${noPadding};
+        ${borderNone};
+        padding: 0;
         color: ${color};
         &.button--loading,
         &:hover,
@@ -410,6 +420,8 @@ Button.propTypes = {
   disabled: PropTypes.bool,
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed after the children. */
   endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. */
+  href: PropTypes.string,
   /** The content of the component. */
   label: PropTypes.string,
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` label. */
@@ -422,6 +434,8 @@ Button.propTypes = {
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed before the children. */
   startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** Query params pass to url. */
+  urlParams: PropTypes.object,
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
   /**

package/components/divider/index.js

@@ -1,78 +1,79 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { noBorder } from "../../styles/general";
-import { color as colors } from "../../styles/colors";
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { noBorder, parseWidthHeight } from "../../styles/general";
+import { useColor as colors, useTheme } from "../../theme";
+import { classNames } from "../../utils";
 const {
-  system: {
-    disabled: systemDisabled
+  colors: {
+    system: {
+      disabled: systemDisabled
+    }
   }
-} = colors;
+} = useTheme();
 const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  width,
-  height,
-  direction,
-  color,
+  action = {},
   className,
+  color,
+  direction,
+  height,
+  id,
   style,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-  if (typeof width === 'number') width = `${width}px`;
-  if (typeof height === 'number') height = `${height}px`;
-  const DividerRoot = css`
-            ${noBorder}
-            flex-shrink: 0;
-            margin: 0;
-            background-color: ${colors.semantic[color] || color};
-            &.vertical {
-                width: ${width || '1px'};
-                height: ${height || '100%'};
-                /* margin: auto 5px; */
-            }
-            &.horizontal {
-                width: ${width || '100%'};
-                height: ${height || '1px'};
-                /* margin: 5px auto; */
-            }
-        `;
-  useEffect(() => {
-    if (direction === 'vertical' && !height && ref.current && ref.current.parentNode) {
-      ref.current.style.height = ref.current.parentNode.offsetHeight + 'px';
-    }
-  }, []);
+  width
+}, reference) => {
+  if (!reference) reference = useRef(null);
+  const ref = useRef(null);
+  const _DividerRoot = DividerRoot(color, width, height);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => jsx("hr", {
-    css: DividerRoot,
+    css: _DividerRoot,
     ref: ref,
+    id: id,
     style: style,
-    className: ['DGN-UI-Divider', direction, className].join(' ').trim(),
-    ...props
-  }), [width, height, color, style, className]);
+    className: classNames('DGN-UI-Divider', direction, className)
+  }), [className, color, direction, height, id, style, width]);
 }));
+const DividerRoot = (color, width, height) => css`
+    ${noBorder}
+    flex-shrink: 0;
+    margin: 0;
+    background-color: ${colors[color] || color};
+    &.vertical {
+        ${parseWidthHeight(width || '1px', height || 'auto')};
+    }
+    &.horizontal {
+        ${parseWidthHeight(width || '100%', height || '1px')};
+    }
+`;
 Divider.defaultProps = {
+  className: '',
   color: systemDisabled,
   direction: 'horizontal',
-  style: {},
-  className: ''
+  style: {}
 };
 Divider.propTypes = {
-  /** width of divider */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** color of divider */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** color of divider */
+  /** Class for component. */
+  className: PropTypes.string,
+  /** The color of the component. */
   color: PropTypes.string,
   /** direction of divider */
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
-  /** style inline of divider */
+  /** Height oof the component. */
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Style inline of component. */
   style: PropTypes.object,
-  /** className of divider */
-  className: PropTypes.string,
-  /** any props else */
-  props: PropTypes.object
+  /** Width of the component. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 export default Divider;