diginet-core-ui 1.4.39 → 1.4.40

package/components/avatar/index.js

@@ -1,388 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import AvatarDefault from "../../assets/avatar/default.svg";
-import { ButtonIcon, Image, ModalSample, Notify, Popover, Typography } from "./..";
-import OptionWrapper from "../others/option-wrapper";
-import { getGlobal } from "../../global";
-import PropTypes from 'prop-types';
-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 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);
-  } 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((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  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: maxSizeErrorProp,
-    onChange,
-    onClick,
-    onRemove,
-    outlined,
-    readOnly,
-    src,
-    style,
-    width,
-    wrongTypeError: wrongTypeErrorProp
-  } = props;
-  const defaultSrc = defaultSrcProp || AvatarDefault;
-  const maxSizeError = maxSizeErrorProp || `File ${getGlobal(['errorDefault', 'maxSize'])}`;
-  const wrongTypeError = wrongTypeErrorProp || `File ${getGlobal(['errorDefault', 'fileType'])}`;
-  const ref = useRef(null);
-  const inputRef = useRef(null);
-  const avatarRef = useRef(null);
-  const notifyRef = useRef(null);
-  const [viewAvatar, setViewAvatar] = useState(false);
-  const [viewMoreInfo, setViewMoreInfo] = useState(false);
-  const [srcState, setSrcState] = useState(src);
-  const _ActionIconCSS = ActionIconCSS(actionIconWidth);
-  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly || disabled);
-  const _AvatarContainerCSS = AvatarContainerCSS(_ActionIconCSS.name);
-  const _AvatarRootCSS = AvatarRootCSS(width, height, outlined, theme);
-  const _isMobile = isMobile.any();
-  const triggerInput = e => {
-    if (e || !srcState) {
-      inputRef.current.click();
-    } else {
-      // on View
-      setViewAvatar(true);
-    }
-  };
-  const onChangeAvatar = input => {
-    const [file] = input.target.files;
-    if (!file) return;
-    const reader = new FileReader();
-    if (!checkFileType(file.type, matchType)) {
-      input.target.value = '';
-      notifyRef.current.instance.show(wrongTypeError);
-      return;
-    }
-    if (+maxSize && file.size > maxSize * 1024 ** 2) {
-      input.target.value = '';
-      notifyRef.current.instance.show(maxSizeError);
-      return;
-    }
-    reader.onload = e => {
-      setSrcState(e.target.result);
-    };
-    reader.readAsDataURL(file);
-    !!onChange && onChange(input);
-  };
-  const onRemoveAvatar = () => {
-    setSrcState(null);
-    inputRef.current.value = '';
-    !!onRemove && onRemove();
-  };
-  const renderData = () => {
-    if (/*#__PURE__*/isValidElement(data)) return data;
-    const info = Object.keys(data || {});
-    if (info !== null && info !== void 0 && info.length) {
-      return info.map((key, index) => {
-        return jsx(Typography, {
-          key: index,
-          color: 'text/tooltip',
-          type: 'p1'
-        }, key + ': ' + data[key]);
-      });
-    }
-    return jsx(Typography, {
-      color: 'text/tooltip',
-      type: 'p1'
-    }, getGlobal('noDataText'));
-  };
-  const showMoreInfo = () => {
-    if (hoverAble) setViewMoreInfo(true);
-  };
-  const closeMoreInfo = () => {
-    if (hoverAble) setViewMoreInfo(false);
-  };
-  const _onClick = event => {
-    onClick && event.stopPropagation();
-    if (disabled) return;
-    if (readOnly) {
-      if (_isMobile) showMoreInfo();
-    } else {
-      allowEdit ? triggerInput() : onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }
-  };
-  const _onMouseEnter = () => {
-    if (!_isMobile) showMoreInfo();
-  };
-  const _onMouseLeave = () => {
-    if (!_isMobile) closeMoreInfo();
-  };
-  useEffect(() => {
-    if (src) {
-      setSrcState(src);
-    }
-    return () => {
-      setSrcState(defaultSrc);
-    };
-  }, [src]);
-  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
-    }, jsx("div", {
-      ref: ref,
-      css: _AvatarRootCSS,
-      className: classNames('DGN-UI-Avatar', className),
-      style: style,
-      id: id
-    }, jsx("input", {
-      ref: inputRef,
-      type: "file",
-      title: '',
-      accept: 'image/*',
-      onChange: onChangeAvatar,
-      disabled: disabled
-    }), jsx("div", {
-      ref: avatarRef,
-      css: _AvatarPreviewCSS,
-      onClick: _onClick,
-      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", {
-      css: _ActionIconCSS
-    }, jsx(ButtonIcon, {
-      viewType: 'ghost',
-      name: 'Edit',
-      width: actionIconWidth,
-      height: actionIconHeight,
-      className: 'icon-edit',
-      onClick: triggerInput
-    }), clearAble && srcState ? jsx(ButtonIcon, {
-      viewType: 'ghost',
-      name: 'Delete',
-      width: actionIconWidth,
-      height: actionIconHeight,
-      className: 'icon-delete',
-      onClick: onRemoveAvatar,
-      style: {
-        marginTop: '8px'
-      }
-    }) : null) : null), jsx(ModalSample, {
-      open: viewAvatar,
-      onClose: () => setViewAvatar(false),
-      width: 'max-content'
-    }, jsx(Image, {
-      defaultSrc: defaultSrc,
-      src: srcState,
-      width: '100%',
-      height: '100%'
-    })), hoverAble ? jsx(Popover, {
-      arrow: true,
-      open: viewMoreInfo,
-      pressESCToClose: false,
-      bgColor: 'fill/tooltip',
-      anchor: avatarRef,
-      fullScreen: false,
-      direction: direction
-    }, jsx("div", {
-      css: MoreInfoCSS(theme)
-    }, typeof data === 'function' ? data() : renderData())) : null, jsx(Notify, {
-      ref: notifyRef,
-      progressing: true,
-      autoDisappear: true,
-      color: 'danger'
-    }));
-  }, [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};
-    ${flexCol};
-    ${positionAbsolute};
-    ${parseMinWidth(actionIconWidth)};
-    right: ${-actionIconWidth}px;
-    transition: opacity 0.5s;
-    opacity: 0;
-    ${z(2)};
-`;
-const AvatarPreviewCSS = isDisabled => css`
-    ${displayBlock};
-    ${positionRelative};
-    ${overflowHidden};
-    ${parseWidthHeight('100%')};
-    ${borderRadius('50%')};
-    ${isDisabled ? cursorInherit : cursorPointer};
-`;
-const AvatarContainerCSS = ActionIconCSSName => css`
-    ${displayInlineFlex};
-    ${positionRelative};
-    ${itemsCenter};
-    &:hover {
-        .css-${ActionIconCSSName} {
-            opacity: 1;
-        }
-    }
-`;
-const AvatarRootCSS = (width, height, outlined, {
-  colors
-}) => css`
-    ${displayBlock};
-    ${positionRelative};
-    ${overflowHidden};
-    ${userSelectNone};
-    ${borderNone};
-    ${boxContent};
-    ${parseWidthHeight(width, height)};
-    ${borderRadius('50%')};
-    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${getColor(getProp(colors, 'system/standard'))}` : outlined};
-    input {
-        ${displayNone};
-    }
-`;
-const MoreInfoCSS = ({
-  spacing
-}) => css`
-    ${displayBlock};
-    ${positionRelative};
-    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.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,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** If `true`, display remove avatar icon. */
-  clearAble: 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, PropTypes.node]),
-  /**
-   * 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 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]),
-  /** show more info in popover if true */
-  hoverAble: PropTypes.bool,
-  /** lazy loading */
-  lazyLoading: PropTypes.bool,
-  /** type of image was allowed */
-  matchType: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func, PropTypes.array]),
-  /** maximum size for avatar file (unit: MB) */
-  maxSize: PropTypes.number,
-  /** the error to show on exceeded allowed size */
-  maxSizeError: PropTypes.string,
-  /** will run after change avatar */
-  onChange: PropTypes.func,
-  /** Callback fired when the component is clicked. */
-  onClick: PropTypes.func,
-  /** will run after remove avatar */
-  onRemove: PropTypes.func,
-  /** border of avatar (true or '1px solid #color') */
-  outlined: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /** only view and allow show more info if hoverAble is true */
-  readOnly: PropTypes.bool,
-  /** source of file (http:// or https://) */
-  src: PropTypes.string,
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** The width of avatar box (48 or '48px' or ...) */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** the error to show on wrong type */
-  wrongTypeError: PropTypes.string,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
-   */
-  ref: ref
-};
-export { Avatar };
-export default OptionWrapper(Avatar);

package/components/badge/index.js

@@ -1,231 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Icon } from "./..";
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, borderRadius4px, boxBorder, displayInlineFlex, flexRow, flexWrap, itemsCenter, justifyCenter, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textColor } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-const colorMap = new Map([['default', 'system/rest']]);
-const iconSizeMap = new Map([['medium', 24], ['large', 32], ['giant', 40]]);
-const dotSizeMap = new Map([['medium', 8], ['large', 10], ['giant', 12]]);
-const dotIndentMap = new Map([['medium', 4], ['large', 2]]);
-const typographySizeMap = new Map([['medium', 'paragraph3'], ['large', 'paragraph2'], ['giant', 'paragraph1']]);
-const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) => {
-  const halfDotSize = dotSize / 2;
-  const {
-    horizontal,
-    vertical
-  } = anchorOrigin;
-  const dotIndent = hasContent ? dotIndentMap.get(size) || 0 : 0;
-  const verticalCssRight = vertical === 'bottom' ? css`
-                  bottom: ${-dotIndent}px;
-              ` : css`
-                  top: ${-dotIndent}px;
-              `;
-  const verticalCssLeft = vertical === 'bottom' ? css`
-                  bottom: ${-halfDotSize}px;
-              ` : css`
-                  top: ${-halfDotSize}px;
-              `;
-  if (contentDirection === 'right') {
-    if (horizontal === 'left') {
-      return css`
-                left: ${-dotIndent}px;
-                ${verticalCssRight};
-            `;
-    } else {
-      return css`
-                left: ${`calc(100% - ${dotSize - dotIndent}px);`};
-                ${verticalCssRight};
-            `;
-    }
-  } else {
-    if (horizontal === 'left') {
-      return css`
-                right: ${`calc(100% - ${halfDotSize}px);`};
-                ${verticalCssLeft};
-            `;
-    } else {
-      return css`
-                right: ${`${-halfDotSize}px;`};
-                ${verticalCssLeft};
-            `;
-    }
-  }
-};
-const Badge = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors,
-    typography
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Badge'
-  });
-  const {
-    action = {},
-    anchorOrigin,
-    children,
-    className,
-    color,
-    content,
-    contentDirection,
-    iconProps,
-    id,
-    invisible,
-    max,
-    name,
-    showZero,
-    size,
-    style,
-    ...other
-  } = props;
-  const ref = useRef(null);
-  const typographySize = typography[typographySizeMap.get(size)];
-  const iconSize = iconSizeMap.get(size);
-  const dotSize = content || content === 0 && showZero ? dotSizeMap.get(size) + 8 : dotSizeMap.get(size);
-  let dotColor = colorMap.get(color) || color;
-  dotColor = getProp(colors, dotColor, dotColor);
-  const dotPos = calDotPos(anchorOrigin, !children && name ? 'right' : contentDirection, dotSize, content || content === 0, size);
-  const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor, theme);
-  const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS.name);
-  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(() => {
-    let node = children;
-    if (!node && name) {
-      node = jsx(Icon, {
-        viewBox: true,
-        name: name,
-        width: iconSize,
-        height: iconSize,
-        color: 'currentColor',
-        ...iconProps
-      });
-    }
-    return jsx("div", {
-      css: _BadgeRootCSS,
-      ref: ref,
-      id: id,
-      className: classNames('DGN-UI-Badge', className),
-      style: style,
-      ...other
-    }, jsx("span", {
-      className: 'DGN-UI-Badge-Children'
-    }, node), content !== undefined && !invisible ? jsx("span", {
-      css: _BadgeNumberCSS,
-      className: 'DGN-UI-Badge-Dot'
-    }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content) : null);
-  }, [anchorOrigin, children, className, color, content, contentDirection, iconProps, id, invisible, max, name, other, showZero, size, style, theme]);
-}));
-const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, {
-  colors,
-  spacing
-}) => css`
-    ${typographySize};
-    ${flexRow};
-    ${itemsCenter};
-    ${justifyCenter};
-    ${flexWrap};
-    ${boxBorder};
-    ${pointerEventsNone};
-    ${children || name ? positionAbsolute : positionRelative};
-    ${textColor(getProp(colors, 'system/standard'))};
-    ${bgColor(dotColor)};
-    ${parseMinWidthHeight(dotSize)};
-    border-radius: ${dotSize / 2}px;
-    padding: ${spacing([0, 1])};
-`;
-const BadgeRootCSS = (children, name, dotPos, BadgeNumberCSSName) => css`
-    ${displayInlineFlex};
-    ${itemsCenter};
-    ${justifyCenter};
-    ${positionRelative};
-    ${boxBorder};
-    ${borderRadius4px};
-    ${parseWidthHeight('max-content')};
-    ${parseMinWidthHeight('max-content')};
-    .css-${BadgeNumberCSSName} {
-        ${(children || name) && dotPos};
-    }
-`;
-
-// Badge.defaultProps = {
-//     anchorOrigin: { vertical: 'top', horizontal: 'right' },
-//     className: '',
-//     color: 'default',
-//     content: null,
-//     contentDirection: 'left',
-//     invisible: false,
-//     max: 99,
-//     showZero: false,
-//     size: 'medium',
-//     style: {},
-// };
-
-Badge.propTypes = {
-  /** The anchor of the badge. */
-  anchorOrigin: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'right']),
-    vertical: PropTypes.oneOf(['top', 'bottom'])
-  }),
-  /** The badge will be added relative to this node. */
-  children: PropTypes.node,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** The color of the component. */
-  color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
-  /** The content rendered within the badge. */
-  content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Direction of content within the badge */
-  contentDirection: PropTypes.oneOf(['left', 'right']),
-  /** If `true`, the badge is invisible */
-  invisible: PropTypes.bool,
-  /** Max count to show. */
-  max: PropTypes.number,
-  /** Prop name of [ButtonIcon](https://core.diginet.com.vn/ui/?path=/docs/buttonicon) components.  */
-  name: PropTypes.string,
-  /** Controls whether the badge is hidden when `content` is zero. */
-  showZero: PropTypes.bool,
-  /** Size of the components.
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
-   * */
-  size: PropTypes.oneOf(['medium', 'large', 'giant']),
-  /** Style inline of component. */
-  style: PropTypes.object
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
-   */
-};
-export { Badge };
-export default OptionWrapper(Badge);