diginet-core-ui 1.4.39 → 1.4.40

package/components/breadcrumb/index.js

@@ -1,220 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonMore, Typography } from "./..";
-import OptionWrapper from "../others/option-wrapper";
-import { Icon } from "../../icons/effect";
-import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { hexToRGBA } from "../../styles/color-helper";
-import { alphaPseudo, bgColor, borderRadius, cursorPointer, displayFlex, flexWrap, itemsCenter, listNone, textColor, userSelectNone } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-const sizeIconMap = new Map([['tiny', 16], ['small', 18], ['medium', 20]]);
-const sizeTypographyPMap = new Map([['tiny', 'p3'], ['small', 'p2'], ['medium', 'p1']]);
-const sizeTypographyHMap = new Map([['tiny', 'h5'], ['small', 'h4'], ['medium', 'h3']]);
-const Breadcrumb = /*#__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: 'Breadcrumb'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    color: colorProp,
-    data,
-    id,
-    itemsAfterCollapse,
-    itemsBeforeCollapse,
-    maxItems,
-    separator,
-    size,
-    style
-  } = props;
-  const color = colorProp === 'default' ? 'system/rest' : colorProp;
-  const colorCode = getProp(colors, color, color);
-  const ref = useRef(null);
-  const sizeIcon = sizeIconMap.get(size);
-  const sizeTypographyP = sizeTypographyPMap.get(size);
-  const sizeTypographyH = sizeTypographyHMap.get(size);
-
-  // const [expanded, setExpanded] = React.useState(false);
-
-  const _BreadcrumbOlCSS = BreadcrumbOlCSS(colorCode, theme);
-  const _BreadcrumbLiCSS = BreadcrumbLiCSS(colorCode, sizeTypographyP, sizeTypographyH, theme);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const renderSeparator = typeof separator === 'string' ? jsx(Icon, {
-    name: separator,
-    width: sizeIcon,
-    height: sizeIcon,
-    color: colorCode,
-    viewBox: true
-  }) : separator;
-  const renderItemsBeforeAndAfter = allItems => {
-    // const handleClickExpand = () => {
-    //     setExpanded(true);
-    // };
-
-    if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
-      return allItems;
-    }
-    let options = [];
-    data.slice(itemsBeforeCollapse, allItems.length - itemsAfterCollapse).map(item => {
-      var _item$onClick;
-      return options = [...options, {
-        label: (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name),
-        icon: item === null || item === void 0 ? void 0 : item.icon,
-        action: item === null || item === void 0 ? void 0 : (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item)
-      }];
-    });
-    return [...allItems.slice(0, itemsBeforeCollapse), jsx(ButtonMore, {
-      key: "ellipsis",
-      options: options,
-      anchor: jsx("li", {
-        key: "ellipsis",
-        css: _BreadcrumbLiCSS
-      }, jsx(Icon, {
-        name: 'MoreHoriz',
-        width: sizeIcon,
-        height: sizeIcon,
-        color: colorCode
-      }), renderSeparator)
-    }),
-    // <ButtonIcon key="ellipsis" name={'MoreHoriz'} width={24} height={16} onClick={handleClickExpand} />,
-    ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
-  };
-  const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => jsx("li", {
-    css: _BreadcrumbLiCSS,
-    className: 'DGN-UI-Breadcrumb-li',
-    key: `child-${idx}`
-  }, item !== null && item !== void 0 && item.icon ? jsx(Icon, {
-    className: 'DGN-UI-Breadcrumb-li-icon',
-    name: item === null || item === void 0 ? void 0 : item.icon,
-    color: colorCode,
-    width: sizeIcon,
-    height: sizeIcon
-  }) : null, jsx(Typography, {
-    className: 'DGN-UI-Breadcrumb-li-label',
-    type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? sizeTypographyH : sizeTypographyP,
-    mapping: 'a',
-    color: 'currentColor',
-    href: item === null || item === void 0 ? void 0 : item.href,
-    onClick: item === null || item === void 0 ? void 0 : item.onClick
-  }, (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name)), (data === null || data === void 0 ? void 0 : data.length) !== idx + 1 ? renderSeparator : null)) : React.Children.toArray(children).filter(child => {
-    return /*#__PURE__*/React.isValidElement(child);
-  }).map((child, idx) => {
-    var _React$Children$toArr;
-    return jsx("li", {
-      css: _BreadcrumbLiCSS,
-      className: 'DGN-UI-Breadcrumb-li',
-      key: `child-${idx}`
-    }, child, ((_React$Children$toArr = React.Children.toArray(children).filter(child => {
-      return /*#__PURE__*/React.isValidElement(child);
-    })) === null || _React$Children$toArr === void 0 ? void 0 : _React$Children$toArr.length) !== idx + 1 ? renderSeparator : null);
-  });
-  return useMemo(() => {
-    return jsx("nav", {
-      ref: ref,
-      id: id,
-      style: style,
-      className: classNames('DGN-UI-Breadcrumb', className)
-    }, jsx("ol", {
-      css: _BreadcrumbOlCSS,
-      className: 'DGN-UI-Breadcrumb-ol'
-    },
-    // expanded ||
-    maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems)));
-  }, [children, className, colorProp, data, id, itemsAfterCollapse, itemsBeforeCollapse, maxItems, separator, size, style, theme]);
-}));
-const BreadcrumbOlCSS = (color, {
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexWrap};
-    ${itemsCenter};
-    padding: ${spacing([0])};
-    margin: ${spacing([0])};
-    ${listNone};
-    ${textColor(color)};
-`;
-const BreadcrumbLiCSS = (color, sizeTypographyP, sizeTypographyH, {
-  spacing,
-  typography
-}) => css`
-    ${typography[sizeTypographyP]};
-    ${displayFlex};
-    ${itemsCenter};
-    gap: ${spacing([1])};
-    padding-left: ${spacing([1])};
-    ${borderRadius(4)};
-    ${cursorPointer};
-    ${userSelectNone};
-    &:last-child {
-        padding-right: ${spacing([1])};
-        ${typography[sizeTypographyH]};
-    }
-    ${Object.keys(alphaPseudo).map(key => css`
-                &: ${key} {
-                    ${bgColor(hexToRGBA(color, alphaPseudo[key]))};
-                }
-            `)}
-`;
-
-// Breadcrumb.defaultProps = {
-//     className: '',
-//     color: 'default',
-//     itemsAfterCollapse: 1,
-//     itemsBeforeCollapse: 1,
-//     maxItems: 8,
-//     separator: 'ArrowRight',
-//     size: 'medium',
-//     style: {},
-// };
-
-Breadcrumb.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /** Class for component. */
-  className: PropTypes.string,
-  /** The color of the component. */
-  color: PropTypes.string,
-  /** Class for component. */
-  data: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    icon: PropTypes.string,
-    href: PropTypes.string,
-    onClick: PropTypes.func
-  })),
-  /** Class for component. */
-  itemsBeforeCollapse: PropTypes.number,
-  /** Class for component. */
-  itemsAfterCollapse: PropTypes.number,
-  /** Class for component. */
-  maxItems: PropTypes.number,
-  /**	Custom separator node. */
-  separator: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /** The size of the component. */
-  size: PropTypes.oneOf(['tiny', 'small', 'medium']),
-  /** Style inline of component. */
-  style: PropTypes.object
-};
-export { Breadcrumb };
-export default OptionWrapper(Breadcrumb);

package/components/button/icon.js

@@ -1,357 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { CircularProgress, Icon } from "./..";
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { hexToRGBA } from "../../styles/color-helper";
-import { alphaPseudo, bgColor, border, borderColor, borderNone, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayFlex, displayInlineFlex, flexRow, itemsCenter, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
-import { getColor } from "../../styles/utils";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { capitalize, classNames, getProp } from "../../utils";
-import { getRippleColor } from '.';
-import Ripple from "./ripple-effect";
-const sizeMap = new Map([['tiny', {
-  buttonSize: '24px',
-  iconSize: '16px'
-}], ['small', {
-  buttonSize: '32px',
-  iconSize: '20px'
-}], ['medium', {
-  buttonSize: '40px',
-  iconSize: '24px'
-}], ['large', {
-  buttonSize: '48px',
-  iconSize: '32px'
-}], ['giant', {
-  buttonSize: '56px',
-  iconSize: '40px'
-}], ['extraGiant', {
-  buttonSize: '96px',
-  iconSize: '56px'
-}]]);
-const iconColorMap = new Map([['Close', 'semantic/danger'], ['Cancel', 'semantic/danger'], ['Approval', 'semantic/success'], ['Delete', 'semantic/warning'], ['Trash', 'semantic/warning'], ['Edit', 'semantic/info'], ['EditV2', 'semantic/info'], ['View', 'semantic/info']]);
-const alphaLoading = 0.2;
-// customIconSize calculated based on design size
-// Button size <= 24 => icon size = Button size - 8
-// Button size > 24 && <= 32 => icon size = Button size - 12
-// Button size > 32 => icon size = Button size - 16
-const customIconSize = width => width <= 24 ? width - 8 : width <= 32 ? width - 12 : width - 16;
-const IconLoadingView = iconSize => {
-  return jsx(CircularProgress, {
-    size: 'extraSmall',
-    background: 'transparent',
-    color: 'currentColor',
-    strokeWidth: 3,
-    width: parseInt(iconSize)
-  });
-};
-const ButtonIcon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  var _sizeMap$get, _sizeMap$get2;
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'ButtonIcon'
-  });
-  const {
-    action = {},
-    children,
-    circular,
-    className,
-    color: colorProp,
-    colorHover,
-    disabled,
-    height,
-    id,
-    loading,
-    name,
-    onClick,
-    size,
-    style,
-    viewBox,
-    viewType,
-    width
-  } = props;
-  const ref = useRef(null);
-  const rippleRef = useRef(null);
-  const isColorDefault = colorProp === 'default';
-  const isViewTypeGhost = viewType === 'ghost';
-  const buttonSize = ((_sizeMap$get = sizeMap.get(size)) === null || _sizeMap$get === void 0 ? void 0 : _sizeMap$get.buttonSize) || '40px';
-  const iconSize = width ? isNaN(width) ? '60%' : customIconSize(parseInt(width)) + 'px' : ((_sizeMap$get2 = sizeMap.get(size)) === null || _sizeMap$get2 === void 0 ? void 0 : _sizeMap$get2.iconSize) || '24px';
-  const colorCss = getProp(colors, colorProp, colorProp);
-  const colorHoverCss = getProp(colors, colorHover, colorHover);
-  const _ButtonRootCSS = ButtonRootCSS(circular, colorHoverCss, colorCss, name, isColorDefault, viewType, loading, theme);
-  const _ButtonSizeCSS = ButtonSizeCSS(width, height, buttonSize, iconSize);
-  const _ButtonIconCSS = ButtonIconCSS(iconSize);
-  const _onClick = event => {
-    event.persist();
-    onClick && event.stopPropagation();
-    if (disabled || loading) return;
-    if (!isViewTypeGhost) rippleRef.current.start(event);
-    onClick && onClick(event);
-  };
-  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("button", {
-      css: [_ButtonRootCSS, _ButtonSizeCSS],
-      ref: ref,
-      id: id,
-      style: style,
-      onClick: _onClick,
-      className: classNames('DGN-UI-ButtonIcon', disabled && 'disabled', viewType, size, className)
-    }, loading && IconLoadingView(iconSize), !loading && jsx("span", {
-      className: 'DGN-UI-ButtonIcon-Icon',
-      css: _ButtonIconCSS
-    }, children || jsx(Icon, {
-      name: name,
-      width: isViewTypeGhost ? width || iconSize : iconSize,
-      height: isViewTypeGhost ? height || iconSize : iconSize,
-      color: 'currentColor',
-      viewBox: viewBox
-    })), !disabled && !loading && !isViewTypeGhost && jsx(Ripple, {
-      ref: rippleRef,
-      color: getRippleColor(colorProp, viewType, colors),
-      circular: circular
-    }));
-  }, [children, circular, className, colorHover, colorProp, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width, theme]);
-}));
-const ButtonIconCSS = iconSize => css`
-    ${displayFlex};
-    ${flexRow};
-    ${positionRelative};
-    ${boxBorder};
-    ${justifyCenter};
-    ${itemsCenter};
-    ${parseWidthHeight(iconSize)};
-    ${parseMinWidthHeight(iconSize)};
-`;
-const ButtonSizeCSS = (width, height, buttonSize, iconSize) => css`
-    ${parseWidthHeight(width || buttonSize, height || buttonSize)};
-    ${parseMinWidthHeight(width || buttonSize, height || buttonSize)};
-    &.ghost {
-        ${parseWidthHeight(width || iconSize, height || iconSize)};
-        ${parseMinWidthHeight(width || iconSize, height || iconSize)};
-    }
-`;
-const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewType, loading, {
-  colors,
-  spacing
-}) => css`
-    ${displayInlineFlex};
-    ${positionRelative};
-    ${justifyCenter};
-    ${itemsCenter};
-    ${outlineNone};
-    ${boxBorder};
-    ${cursorPointer};
-    ${userSelectNone};
-    ${borderRadius(circular ? '50%' : 4)};
-    padding: ${spacing([0])};
-    transition: background-color 0.5s, filter 0.5s;
-    ${loading && pointerEventsNone};
-    ${viewType === 'outlined' && css`
-        ${bgColor('transparent')};
-        ${border(1, color)};
-        ${textColor(color)};
-        ${loading && css`
-            ${bgColor(hexToRGBA(color, alphaLoading))};
-        `}
-        ${Object.keys(alphaPseudo).map(key => css`
-                    &: ${key} {
-                        ${bgColor(hexToRGBA(color, alphaPseudo[key]))};
-                    }
-                `)}
-        ${isColorDefault && css`
-            ${border(1, getProp(colors, 'system/rest'))};
-            ${textColor(getProp(colors, 'system/rest'))};
-            ${loading && css`
-                ${textColor(colorHover)};
-                ${borderColor(colorHover)};
-                ${bgColor(hexToRGBA(colorHover, alphaLoading))};
-            `}
-            &:hover,
-            &:focus,
-            &:active {
-                ${textColor(colorHover)};
-                ${borderColor(colorHover)};
-            }
-            ${Object.keys(alphaPseudo).map(key => css`
-                        &: ${key} {
-                            ${bgColor(hexToRGBA(colorHover, alphaPseudo[key]))};
-                        }
-                    `)}// &:hover | &:focus | &:active
-        `}
-        &.disabled {
-            ${borderColor(getProp(colors, 'system/disabled'))};
-            ${bgColor('transparent')};
-        }
-    `}
-    ${viewType === 'filled' && css`
-        ${borderNone};
-        ${textColor(color === getColor(getProp(colors, 'system/standard')) ? getProp(colors, 'system/rest') : getProp(colors, 'system/standard'))};
-        ${bgColor(color)};
-        font-weight: bold;
-        ${loading && css`
-            filter: brightness(0.85);
-        `}
-        &:hover,
-        &:focus {
-            filter: brightness(0.85);
-        }
-        &:active {
-            filter: brightness(0.7);
-        }
-        ${isColorDefault && css`
-            ${bgColor(getProp(colors, 'system/rest'))};
-            ${loading && bgColor(getProp(colors, 'system/active'))};
-            &:hover,
-            &:focus,
-            &:active {
-                ${bgColor(colorHover)};
-            }
-        `}
-        &.disabled {
-            ${bgColor(getProp(colors, 'fill/disabled'))};
-        }
-    `}
-    ${viewType === 'text' && css`
-        ${borderNone};
-        ${textColor(color)};
-        ${bgColor('transparent')};
-        ${loading && bgColor(hexToRGBA(color, alphaLoading))};
-        ${Object.keys(alphaPseudo).map(key => css`
-                    &: ${key} {
-                        ${bgColor(hexToRGBA(color, alphaPseudo[key]))};
-                    }
-                `)}
-        ${isColorDefault && css`
-            ${textColor(getProp(colors, 'system/rest'))};
-            ${loading && css`
-                ${textColor(getProp(colors, 'system/active'))};
-                ${bgColor(hexToRGBA(colorHover, alphaLoading))};
-            `}
-            ${Object.keys(alphaPseudo).map(key => css`
-                        &: ${key} {
-                            ${textColor(colorHover)};
-                            ${bgColor(hexToRGBA(colorHover, alphaPseudo[key]))};
-                        }
-                    `)}
-        `}
-        &.disabled {
-            ${bgColor('transparent')};
-        }
-    `}
-    ${viewType === 'ghost' && css`
-        ${borderNone};
-        ${bgColor('transparent')};
-        ${textColor(color)};
-        ${loading && css`
-            filter: brightness(0.85);
-        `}
-        &:hover,
-        &:focus {
-            filter: brightness(0.85);
-        }
-        &:active {
-            filter: brightness(0.7);
-        }
-        ${isColorDefault && css`
-            ${textColor(getProp(colors, 'system/rest'))};
-            &:hover,
-            &:focus,
-            &:active {
-                ${textColor(iconColorMap.get(capitalize(name)) || colorHover)};
-            }
-        `}
-    `}
-    &.disabled {
-        ${cursorNotAllowed};
-        ${textColor(getProp(colors, 'system/disabled'))};
-        filter: brightness(1);
-    }
-`;
-
-// ButtonIcon.defaultProps = {
-//     circular: false,
-//     className: '',
-//     color: 'default',
-//     colorHover: 'system/active',
-//     disabled: false,
-//     size: 'medium',
-//     viewBox: true,
-//     viewType: 'outlined',
-// };
-
-ButtonIcon.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** If `true`, component is circular. */
-  circular: PropTypes.bool,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** The color of the component. */
-  color: PropTypes.string,
-  /** Custom hover color for button with color 'default'. */
-  colorHover: PropTypes.string,
-  /** If `true`, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** Height oof the component. */
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** If `true`, the loading indicator is shown. */
-  loading: PropTypes.bool,
-  /** Callback fired when the component is clicked. */
-  onClick: PropTypes.func,
-  /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
-  name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
-   * */
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** If `true`, icon has view box. */
-  viewBox: PropTypes.bool,
-  /** The variant to use. */
-  viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
-  /** Width of the component. */
-  width: PropTypes.oneOfType([PropTypes.number, 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
-   */
-};
-export { ButtonIcon };
-export default OptionWrapper(ButtonIcon);