diginet-core-ui 1.3.70 → 1.3.71

package/components/avatar/index.js

@@ -7,7 +7,7 @@ import { jsx, css, keyframes } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import { useIntersection } from '../../utils/intersectionObserver';
 import { ButtonIcon, ModalSample, Popover, Popup, Typography } from '../';
-import { randomString } from '../../utils';
+import { classNames, randomString } from '../../utils';
 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';
@@ -51,30 +51,32 @@ const checkFileType = (type, matchType) => {
 };
 
 const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  src,
+  action = {},
+  actionIconHeight,
+  actionIconWidth,
+  allowEdit,
+  className,
+  clearAble,
+  data,
   defaultSrc,
-  outlined,
-  width,
+  direction,
+  disabled,
   height,
-  maxSize,
+  hoverAble,
+  id,
+  lazyLoading,
   matchType,
-  className,
+  maxSize,
   maxSizeError,
-  wrongTypeError,
-  actionIconWidth,
-  actionIconHeight,
-  direction,
-  data,
-  onRemove,
   onChange,
-  clearAble,
-  hoverAble,
+  onClick,
+  onRemove,
+  outlined,
   readOnly,
-  disabled,
-  lazyLoading,
-  id,
-  allowEdit,
-  onClick
+  src,
+  style,
+  width,
+  wrongTypeError
 }, reference) => {
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
@@ -241,26 +243,35 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   }, [src]);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  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(() => {
     return jsx(Fragment, null, jsx("div", {
       css: _AvatarContainerCSS,
       ref: ref,
       id: unique,
-      className: disabled ? 'disabled' : ''
+      className: classNames(disabled && 'disabled')
     }, jsx("div", {
       css: _AvatarRootCSS,
-      className: ['DGN-UI-Avatar', className].join(' ').trim().replace(/\s+/g, ' '),
+      className: classNames('DGN-UI-Avatar', className),
+      style: style,
       id: id
     }, jsx("input", {
       ref: inputRef,
       type: "file",
       title: '',
       accept: 'image/*',
-      onChange: onChangeAvatar
+      onChange: onChangeAvatar,
+      disabled: disabled
     }), jsx("div", {
       css: _AvatarPreviewCSS,
       onClick: _onClick,
@@ -320,7 +331,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, allowEdit, srcState, isInView, onLoaded, 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`
@@ -391,99 +402,103 @@ const blurAnimationCSS = css`
     animation: ${blurKeyframe} 1s ease;
 `;
 Avatar.defaultProps = {
+  actionIconHeight: 24,
+  actionIconWidth: 24,
   allowEdit: false,
-  disabled: false,
-  readOnly: 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,
-  height: 48,
-  actionIconWidth: 24,
-  actionIconHeight: 24,
-  className: '',
-  direction: 'bottom',
-  maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,
-  wrongTypeError: `File ${getGlobal(['errorDefault', 'fileType'])}`,
-  matchType: /^image\/(gif|jpe?g|tiff?|png|webp|bmp|svg(\+xml)?)$/i,
-  data: {},
-  lazyLoading: false
+  wrongTypeError: `File ${getGlobal(['errorDefault', 'fileType'])}`
 };
 Avatar.propTypes = {
+  /** The height of action icon. */
+  actionIconHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** The width of action icon. */
+  actionIconWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** If `true`, allow to edit avatar. */
   allowEdit: PropTypes.bool,
 
-  /** prevent all events, only view */
-  disabled: PropTypes.bool,
-
-  /** only view and allow show more info if hoverAble is true */
-  readOnly: PropTypes.bool,
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** display remove avatar icon if true */
+  /** If `true`, display remove avatar icon. */
   clearAble: PropTypes.bool,
 
-  /** show more info in popover if true */
-  hoverAble: PropTypes.bool,
+  /**
+   * data to display when hoverAble is true<br />
+   * data is an object or function return a jsx element
+   */
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 
-  /** border of avatar (true or '1px solid #color') */
-  outlined: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /**
+   * it is used to display the default if there is no src<br />
+   * if undefined, will display icons available in the icons store
+   */
+  defaultSrc: PropTypes.string,
 
-  /** The width of avatar box (48 or '48px' or ...) */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** the direction to display more info */
+  direction: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+
+  /** prevent all events, only view */
+  disabled: PropTypes.bool,
 
   /** The height of avatar box (48 or '48px' or ...) */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /** The width of action icon (18 or '18px') */
-  actionIconWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** The height of action icon (18 or '18px') */
-  actionIconHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** show more info in popover if true */
+  hoverAble: PropTypes.bool,
 
-  /** maximum size for avatar file (unit: MB) */
-  maxSize: PropTypes.number,
+  /** lazy loading */
+  lazyLoading: PropTypes.bool,
 
   /** type of image was allowed */
   matchType: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func, PropTypes.array]),
 
-  /** class for Avatar component */
-  className: PropTypes.string,
+  /** maximum size for avatar file (unit: MB) */
+  maxSize: PropTypes.number,
 
   /** the error to show on exceeded allowed size */
   maxSizeError: PropTypes.string,
 
-  /** the error to show on wrong type */
-  wrongTypeError: PropTypes.string,
+  /** will run after change avatar */
+  onChange: PropTypes.func,
 
-  /** source of file (http:// or https://) */
-  src: PropTypes.string,
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func,
 
-  /**
-   * it is used to display the default if there is no src<br />
-   * if undefined, will display icons available in the icons store
-   */
-  defaultSrc: PropTypes.string,
+  /** will run after remove avatar */
+  onRemove: PropTypes.func,
 
-  /** the direction to display more info */
-  direction: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /** border of avatar (true or '1px solid #color') */
+  outlined: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /**
-   * data to display when hoverAble is true<br />
-   * data is an object or function return a jsx element
-   */
-  data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  /** only view and allow show more info if hoverAble is true */
+  readOnly: PropTypes.bool,
 
-  /** will run after remove avatar */
-  onRemove: PropTypes.func,
+  /** source of file (http:// or https://) */
+  src: PropTypes.string,
 
-  /** will run after change avatar */
-  onChange: PropTypes.func,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** Callback fired when the component is clicked. */
-  onClick: PropTypes.func,
+  /** The width of avatar box (48 or '48px' or ...) */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /** lazy loading */
-  lazyLoading: PropTypes.bool,
+  /** the error to show on wrong type */
+  wrongTypeError: PropTypes.string,
 
   /**
    * ref methods

package/components/button/index.js

@@ -12,6 +12,7 @@ import Ripple from './ripple-effect';
 import CircularProgress from '../progress/circular';
 import Icon from '../../icons';
 import { flexRow, alignCenter, justifyCenter, positionRelative, borderRadius4px, borderBox, noPadding, noBorder, cursorPointer, overflowHidden, pointerEventsNone, outlineNone, userSelectNone, backgroundTransparent, inlineFlex, noMargin } from '../../styles/general';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -33,7 +34,8 @@ const {
   },
   typography: {
     uppercase
-  }
+  },
+  spacing
 } = theme;
 export const getRippleColor = (color, viewType, colors) => {
   if (!isColor(color) && !isColorName(color)) {
@@ -83,12 +85,13 @@ export const getClassNameFromColor = color => {
   return !isColor(color) && !isColorName(color) ? color : 'custom-color';
 };
 const colorMap = new Map([['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
-const iconSizeMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
-const paddingSizeMap = new Map([['tiny', '4px 8px'], ['small', '6px 12px'], ['medium', '8px 16px'], ['large', '8px 20px'], ['giant', '8px 24px']]);
-const outlinedPaddingSizeMap = new Map([['tiny', '3px 7px'], ['small', '5px 11px'], ['medium', '7px 15px'], ['large', '7px 19px'], ['giant', '7px 23px']]);
+const iconSizeMap = new Map([['tiny', spacing([4])], ['small', spacing([5])], ['medium', spacing([6])], ['large', spacing([8])], ['giant', spacing([10])]]);
+const paddingSizeMap = new Map([['tiny', spacing([1, 2])], ['small', spacing([1.5, 3])], ['medium', spacing([2, 4])], ['large', spacing([2, 5])], ['giant', spacing([2, 6])]]);
+const outlinedPaddingSizeMap = new Map([['tiny', spacing([0.75, 1.75])], ['small', spacing([1.25, 2.75])], ['medium', spacing([1.75, 3.75])], ['large', spacing([1.75, 4.75])], ['giant', spacing([1.75, 5.75])]]);
 const iconMarginSizeMap = new Map([['tiny', '4px'], ['small', '4px'], ['medium', '4px'], ['large', '6px'], ['giant', '8px']]);
 const typographySizeMap = new Map([['tiny', 'heading5'], ['small', 'heading5'], ['medium', 'heading4'], ['large', 'heading2'], ['giant', 'heading1']]);
 const minHeightSizeMap = new Map([['tiny', '24px'], ['small', '32px'], ['medium', '40px'], ['large', '48px'], ['giant', '56px']]);
+const minHeightSizeLinkMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
 const alphaArr = {
   hover: 0.1,
   focus: 0.2,
@@ -121,10 +124,11 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const typographySize = typographySizeMap.get(size);
   const iconMarginSize = iconMarginSizeMap.get(size);
   const minHeightSize = minHeightSizeMap.get(size);
+  const minHeightSizeLink = minHeightSizeLinkMap.get(size);
 
   const _ButtonText = ButtonText(loading, iconMarginSize);
 
-  const _ButtonRoot = ButtonRoot(viewType, size, paddingSize, minHeightSize, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color);
+  const _ButtonRoot = ButtonRoot(viewType, size, paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color);
 
   useImperativeHandle(reference, () => ({
     element: ref.current,
@@ -219,7 +223,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: _onClick,
       id: id,
       type: type,
-      className: ['DGN-UI-Button', viewType, getClassNameFromColor(color), size, loading && 'button--loading', disabled && 'button--disabled', className].join(' ').trim().replace(/\s+/g, ' '),
+      className: classNames('DGN-UI-Button', viewType, getClassNameFromColor(color), size, loading && 'button--loading', disabled && 'button--disabled', className),
       ...props
     }, start, jsx(Typography, {
       css: _ButtonText,
@@ -228,7 +232,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, children || label), end && end, !disabled && !loading && viewType !== 'link' && jsx(Ripple, {
       color: getRippleColor(color, viewType, allColors)
     }));
-  }, [size, viewType, color, disabled, onClick, loading, startIcon, endIcon, label, type, className, children, id]);
+  }, [children, className, color, disabled, endIcon, id, label, loading, onClick, size, startIcon, type, viewType]);
 }));
 const ButtonIcon = css`
     ${flexRow};
@@ -244,7 +248,7 @@ const ButtonText = (loading, iconMarginSize) => css`
     margin: 0 ${loading ? iconMarginSize : 0};
 `;
 
-const ButtonRoot = (viewType, size, paddingSize, minHeightSize, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color) => css`
+const ButtonRoot = (viewType, size, paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color) => css`
     ${inlineFlex};
     ${alignCenter};
     ${justifyCenter};
@@ -413,6 +417,7 @@ const ButtonRoot = (viewType, size, paddingSize, minHeightSize, outlinedPaddingS
         }
     }
     &.link {
+        min-height: ${minHeightSizeLink};
         ${backgroundTransparent};
         ${noBorder};
         ${noPadding};

package/components/card/body.js

@@ -5,6 +5,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
+import { classNames } from '../../utils';
 const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
@@ -22,7 +23,7 @@ const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id,
       ref: ref,
       style: style,
-      className: [`DGN-UI-Card-Body`, className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Card-Body`, className)
     }, children);
   }, [children, className, id, style, title]);
 }));

package/components/card/extra.js

@@ -5,6 +5,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
+import { classNames } from '../../utils';
 const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
@@ -22,7 +23,7 @@ const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id,
       ref: ref,
       style: style,
-      className: [`DGN-UI-Card-Extra`, className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Card-Extra`, className)
     }, children);
   }, [children, className, id, style, title]);
 }));

package/components/card/footer.js

@@ -5,6 +5,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
+import { classNames } from '../../utils';
 const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
@@ -22,7 +23,7 @@ const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id,
       ref: ref,
       style: style,
-      className: [`DGN-UI-Card-Footer`, className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Card-Footer`, className)
     }, children);
   }, [children, className, id, style, title]);
 }));

package/components/card/header.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import Typography from '../typography';
+import { classNames } from '../../utils';
 const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
@@ -23,7 +24,7 @@ const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id,
       ref: ref,
       style: style,
-      className: [`DGN-UI-Card-Header`, className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Card-Header`, className)
     }, children || jsx(Typography, {
       type: 'h3'
     }, title));

package/components/card/index.js

@@ -11,6 +11,7 @@ import CardHeader from './header';
 import { CardFooter } from './footer';
 import { CardBody } from './body';
 import { getColor } from '../../styles/utils';
+import { classNames } from '../../utils';
 const {
   colors: {
     system: {
@@ -28,6 +29,7 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
   dividerColor,
+  direction,
   footer,
   footerDivider,
   footerStyle,
@@ -42,23 +44,23 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
 
-  const _CardCSS = CardCSS(width, height, headerDivider, footerDivider, dividerColor);
+  const _CardCSS = CardCSS(width, height, headerDivider, footerDivider, dividerColor, direction);
 
   useImperativeHandle(reference, () => ({
     element: ref.current,
     instance: {}
   }));
   const head = header || title ? jsx(CardHeader, {
-    className: (className === null || className === void 0 ? void 0 : className.header) || '',
+    className: classNames(className === null || className === void 0 ? void 0 : className.header),
     style: headerStyle,
     title: title
   }, header) : null;
   const foot = footer ? jsx(CardFooter, {
-    className: (className === null || className === void 0 ? void 0 : className.footer) || '',
+    className: classNames(className === null || className === void 0 ? void 0 : className.footer),
     style: footerStyle
   }, footer) : null;
   const body = bodyProp || children && (head || foot) ? jsx(CardBody, {
-    className: (className === null || className === void 0 ? void 0 : className.body) || '',
+    className: classNames(className === null || className === void 0 ? void 0 : className.body),
     style: bodyStyle
   }, bodyProp || children) : null;
   return useMemo(() => {
@@ -67,13 +69,13 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       css: _CardCSS,
       style: style,
-      className: [`DGN-UI-Card`, (className === null || className === void 0 ? void 0 : className.container) || className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames(`DGN-UI-Card`, (className === null || className === void 0 ? void 0 : className.container) || className)
     }, head, body || children, foot);
-  }, [bodyProp, bodyStyle, children, className, dividerColor, footer, footerDivider, footerStyle, header, headerDivider, headerStyle, height, id, style, title, width]);
+  }, [bodyProp, bodyStyle, children, className, dividerColor, direction, footer, footerDivider, footerStyle, header, headerDivider, headerStyle, height, id, style, title, width]);
 }));
 
-const CardCSS = (width, height, headerDivider, footerDivider, dividerColor) => css`
-    ${flexCol};
+const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, direction) => css`
+    ${direction === 'vertical' ? flexCol : flexRow};
     ${positionRelative};
     ${borderBox};
     ${borderRadius4px};
@@ -132,6 +134,7 @@ Card.defaultProps = {
   bodyStyle: {},
   className: '',
   dividerColor: category,
+  direction: 'vertical',
   footerDivider: false,
   footerStyle: {},
   headerDivider: true,