diginet-core-ui 1.4.39 → 1.4.40

package/components/chip/index.js

@@ -1,275 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Icon, Typography } from "./..";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, border, boxBorder, cursorNotAllowed, displayInlineFlex, flexRow, itemsCenter, justifyCenter, overflowHidden, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textColor
-// userSelectNone,
-} from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp, hexToRGBA } from "../../utils";
-const colorMap = new Map([['default', 'system/active'], ['primary', 'system/active'], ['success', 'semantic/success'], ['warning', 'semantic/warning'], ['danger', 'semantic/danger'], ['info', 'semantic/info']]);
-const iconSizeMap = new Map([['small', `16px`], ['medium', `20px`], ['large', `24px`]]);
-const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
-const paddingSizeMap = new Map([['small', `0px 6px`], ['medium', `0px 8px`], ['large', `0px 10px`]]);
-const minHeightSizeMap = new Map([['small', `20px`], ['medium', `24px`], ['large', `28px`]]);
-const Chip = /*#__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: 'Chip'
-  });
-  const {
-    children,
-    className,
-    clearAble,
-    color: colorProps,
-    disabled,
-    endIcon,
-    label,
-    labelProps,
-    onClick,
-    onDbClick: onDbClickProp,
-    onDoubleClick,
-    onRemove,
-    readOnly,
-    size,
-    startIcon,
-    style,
-    viewType
-  } = props;
-  const onDbClick = !onDbClickProp && onDoubleClick ? onDoubleClick : onDbClickProp;
-  const ref = useRef(null);
-  let color = colorMap.get(colorProps) || colorProps;
-  color = getProp(colors, color, color);
-  const infoChip = {
-    color: color,
-    contentColor: viewType !== 'filled' ? color : getProp(colors, 'system/standard'),
-    backgroundColor: viewType !== 'filled' ? getProp(colors, 'system/standard') : color,
-    iconSize: iconSizeMap.get(size),
-    paddingSize: paddingSizeMap.get(size),
-    typographySize: typographySizeMap.get(size),
-    minHeightSize: minHeightSizeMap.get(size),
-    viewType
-  };
-  infoChip.border = viewType === 'ghost' ? 'transparent !important' : colorProps === 'default' ? getProp(colors, 'system/rest') : infoChip === null || infoChip === void 0 ? void 0 : infoChip.color;
-  infoChip.contentColor = colorProps === 'default' && viewType === 'outlined' ? getProp(colors, 'system/rest') : infoChip === null || infoChip === void 0 ? void 0 : infoChip.contentColor;
-  infoChip.backgroundColor = colorProps === 'default' && viewType === 'filled' ? getProp(colors, 'system/rest') : infoChip === null || infoChip === void 0 ? void 0 : infoChip.backgroundColor;
-  const _ChipRootCSS = ChipRootCSS(onClick, onDbClick, infoChip, theme);
-  const _ChipIconCSS = ChipIconCSS(infoChip);
-  const onRemoveHandler = () => {
-    if (onRemove || disabled) onRemove(ref.current);
-  };
-  const _onClick = event => {
-    onClick && event.stopPropagation();
-    if (disabled) return;
-    onClick && onClick(event);
-  };
-  const _onDbClick = event => {
-    onDbClick && event.stopPropagation();
-    if (disabled) return;
-    onDbClick && onDbClick(event);
-  };
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-
-  // Start Icon
-  const startIconView = useMemo(() => {
-    if (typeof startIcon === 'string') {
-      return jsx(Icon, {
-        name: startIcon,
-        width: infoChip.iconSize,
-        height: infoChip.iconSize,
-        color: 'currentColor'
-      });
-    } else return jsx("div", {
-      css: _ChipIconCSS
-    }, startIcon);
-  }, [startIcon, size]);
-
-  // Label
-  const labelView = jsx(Typography
-  // css={ChipLabelCSS}
-  , {
-    type: infoChip.typographySize,
-    color: 'inherit',
-    lineClamp: 1,
-    hoverTooltip: true,
-    ...labelProps
-  }, label);
-
-  // End Icon
-  const endIconView = useMemo(() => {
-    let node = endIcon;
-    if (typeof node === 'string') {
-      return jsx(Icon, {
-        name: node,
-        width: infoChip.iconSize,
-        height: infoChip.iconSize,
-        color: infoChip.contentColor
-      });
-    }
-    return clearAble ? jsx(ButtonIcon, {
-      className: 'end-icon',
-      viewType: 'ghost',
-      name: 'Close',
-      width: infoChip.iconSize,
-      height: infoChip.iconSize,
-      color: infoChip.contentColor,
-      disabled: disabled,
-      onClick: onRemoveHandler
-    }) : node && jsx("div", {
-      css: _ChipIconCSS,
-      className: 'end-icon ' + size
-    }, node);
-  }, [clearAble, viewType, color, endIcon, size, disabled, onRemove]);
-  return jsx("div", {
-    css: _ChipRootCSS,
-    ref: ref,
-    className: classNames('DGN-UI-Chip', className, disabled && 'chip--disabled', readOnly && 'chip--readOnly', viewType === 'filled' && 'chip--filled'),
-    style: style,
-    onClick: _onClick,
-    onDoubleClick: _onDbClick
-  }, !!startIcon && startIconView, !!label && labelView, (!!endIcon || !!clearAble) && endIconView, children);
-}));
-
-// const ChipLabelCSS = css`
-//     ${flexRow};
-//     ${itemsCenter};
-//     ${positionRelative};
-//     ${userSelectNone};
-// `;
-
-const ChipRootCSS = (onClick, onDbClick, info, {
-  colors,
-  spacing
-}) => css`
-    ${displayInlineFlex};
-    ${itemsCenter};
-    ${positionRelative};
-    ${boxBorder};
-    ${border('1px', info.border)};
-    width: max-content;
-    padding: ${info === null || info === void 0 ? void 0 : info.paddingSize};
-    ${textColor(info === null || info === void 0 ? void 0 : info.contentColor)};
-    ${bgColor(info === null || info === void 0 ? void 0 : info.backgroundColor)};
-    border-radius: ${spacing([4])};
-    cursor: ${onClick || onDbClick ? 'pointer' : 'unset'};
-    height: ${info === null || info === void 0 ? void 0 : info.minHeightSize};
-    min-height: ${info === null || info === void 0 ? void 0 : info.minHeightSize};
-    gap: ${spacing([1])};
-    &.chip--filled {
-        &:not(.chip--disabled):not(.chip--readOnly) {
-            &::after {
-                border-radius: ${spacing([4])};
-                ${positionAbsolute};
-                top: 0;
-                left: 0;
-                content: '';
-                ${parseWidthHeight('100%')};
-                ${pointerEventsNone};
-            }
-            &:hover::after,
-            &:focus::after {
-                ${bgColor(hexToRGBA(getProp(colors, 'system/on-standard'), 0.15))};
-            }
-            &:active::after {
-                ${bgColor(hexToRGBA(getProp(colors, 'system/on-standard'), 0.3))};
-            }
-        }
-    }
-    &:not(.chip--filled) {
-        &:not(.chip--disabled):not(.chip--readOnly):hover {
-            ${border('1px', info === null || info === void 0 ? void 0 : info.color)};
-            ${bgColor(hexToRGBA(info === null || info === void 0 ? void 0 : info.color, 0.1))};
-            ${textColor(info === null || info === void 0 ? void 0 : info.color)};
-        }
-        &:not(.chip--disabled):not(.chip--readOnly):active {
-            ${border('1px', info === null || info === void 0 ? void 0 : info.color)};
-            ${bgColor(hexToRGBA(info === null || info === void 0 ? void 0 : info.color, 0.3))};
-            ${textColor(info === null || info === void 0 ? void 0 : info.color)};
-        }
-        &:not(.chip--disabled):not(.chip--readOnly):focus {
-            ${border('1px', info === null || info === void 0 ? void 0 : info.color)};
-            ${bgColor(hexToRGBA(info === null || info === void 0 ? void 0 : info.color, 0.2))};
-            ${textColor(info === null || info === void 0 ? void 0 : info.color)};
-        }
-    }
-    &.chip--disabled {
-        ${textColor(getProp(colors, 'system/disabled'))};
-        ${bgColor(getProp(colors, 'system/standard'))};
-        ${border('1px', getProp(colors, 'system/disabled'))};
-    }
-    &.chip--readOnly,
-    &.chip--disabled {
-        ${cursorNotAllowed}
-    }
-`;
-const ChipIconCSS = info => css`
-    ${flexRow};
-    ${justifyCenter};
-    ${itemsCenter};
-    ${positionRelative};
-    ${boxBorder};
-    ${overflowHidden};
-    ${parseWidthHeight(info === null || info === void 0 ? void 0 : info.iconSize)};
-    ${parseMinWidthHeight(info === null || info === void 0 ? void 0 : info.iconSize)};
-    ${parseMaxWidthHeight(info === null || info === void 0 ? void 0 : info.iconSize)};
-`;
-
-// Chip.defaultProps = {
-//     viewType: 'outlined',
-//     size: 'medium',
-//     color: 'default',
-// };
-
-Chip.propTypes = {
-  /** Content to display in the component. */
-  label: PropTypes.string,
-  /** The CSS class for the component. */
-  className: PropTypes.string,
-  /** Inline style for the component. */
-  style: PropTypes.object,
-  /** The icon displayed at the start of the component. */
-  startIcon: PropTypes.any,
-  /** The icon displayed at the end of the component. */
-  endIcon: PropTypes.any,
-  /** The variant to use. */
-  viewType: PropTypes.oneOf(['ghost', 'outlined', 'filled']),
-  /** Color for the text or background of the Chip. */
-  color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
-  /** Size of the component. */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /** If `true`, a clear icon will be shown. */
-  clearAble: PropTypes.bool,
-  /** If `true`, all events will be disabled and the color will be changed. */
-  disabled: PropTypes.bool,
-  /** If `true`, all events will be disabled. */
-  readOnly: PropTypes.bool,
-  /** Function to be called after removing the component. */
-  onRemove: PropTypes.func,
-  /** Function to be called when the component is clicked. */
-  onClick: PropTypes.func,
-  /** Function to be called when the component is double-clicked. */
-  onDbClick: PropTypes.func,
-  /** Function to be called when the component is double-clicked (priority over onDbClick). */
-  onDoubleClick: PropTypes.func,
-  /** Content to display on the Chip (same as label). */
-  children: PropTypes.node,
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography--title) applied to the `Typography` label. */
-  labelProps: PropTypes.object
-};
-export default Chip;

package/components/collapse/index.js

@@ -1,93 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { displayBlock, parseWidthHeight, positionRelative } from "../../styles/general";
-const Collapse = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  children,
-  className,
-  id,
-  onClosed,
-  onOpened,
-  open,
-  style
-}, reference) => {
-  const ref = useRef(null);
-  const timer = useRef(null);
-  const _onOpen = () => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    const scrollHeight = ref.current.scrollHeight;
-    const duration = Math.min(scrollHeight, 1500);
-    ref.current.style.transitionDuration = duration + 'ms';
-    ref.current.style.height = scrollHeight + 'px';
-    timer.current = setTimeout(() => {
-      if (ref.current) {
-        ref.current.style.height = 'auto';
-      }
-      onOpened && onOpened(ref.current);
-    }, duration);
-  };
-  const _onClose = () => {
-    if (ref.current) {
-      if (timer.current) {
-        clearTimeout(timer.current);
-      }
-      const scrollHeight = ref.current.scrollHeight;
-      ref.current.style.height = scrollHeight + 'px';
-      timer.current = setTimeout(() => {
-        if (ref.current) {
-          ref.current.style.height = null;
-        }
-        onClosed && onClosed(ref.current);
-      });
-    }
-  };
-  useEffect(() => {
-    if (open) {
-      _onOpen();
-    } else {
-      _onClose();
-    }
-  }, [open]);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
-  return useMemo(() => jsx("div", {
-    css: CollapseRoot,
-    ref: ref,
-    id: id,
-    style: style,
-    className: ['DGN-UI-Collapse', className].join(' ').trim().replace(/\s+/g, ' ')
-  }, children), [children, className, id, onClosed, onOpened, open, style]);
-}));
-const CollapseRoot = css`
-    ${displayBlock};
-    ${positionRelative};
-    ${parseWidthHeight('100%', 0)};
-    transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    overflow-y: clip;
-`;
-Collapse.defaultProps = {
-  className: '',
-  open: false,
-  style: {}
-};
-Collapse.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** Callback fired when the component closed. */
-  onClosed: PropTypes.func,
-  /** Callback fired when the component opened. */
-  onOpened: PropTypes.func,
-  /** If `true`, the content is shown. */
-  open: PropTypes.bool,
-  /** Style inline of component. */
-  style: PropTypes.object
-};
-export default Collapse;

package/components/dialogs/colors.js

@@ -1,13 +0,0 @@
-// export const iconDefault  = '#687799';
-// export const iconHover    = '#111d5e';
-// export const iconDisabled = '#8f9bb3';
-
-// export const fillHover    = '#eff5ff';
-// export const fillDisabled = '#e7eaf0';
-// export const fillDefault  = '#8f9bb3';
-// export const fillPath     = '#fff';
-
-// export const uiSuccess    = '#00c875';
-// export const uiWarning    = '#ffaa00';
-// export const uiDanger     = '#ff3d71';
-// export const uiInfo       = '#0095ff';

package/components/divider/index.js

@@ -1,89 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, borderNone, flexShrink0, parseWidthHeight } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-const Divider = /*#__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: 'Divider'
-  });
-  const {
-    action = {},
-    className,
-    color: colorProp,
-    direction,
-    height,
-    id,
-    style,
-    width
-  } = props;
-  const ref = useRef(null);
-  const isVertical = direction === 'vertical';
-  const color = getProp(colors, colorProp, colorProp);
-  const _DividerRoot = DividerRoot(color, width, height, isVertical, theme);
-  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("hr", {
-      css: _DividerRoot,
-      ref: ref,
-      id: id,
-      style: style,
-      className: classNames('DGN-UI-Divider', className)
-    });
-  }, [className, color, direction, height, id, style, width, theme]);
-}));
-const DividerRoot = (color, width, height, isVertical, {
-  spacing
-}) => css`
-    ${borderNone};
-    ${flexShrink0};
-    margin: ${spacing([0])};
-    ${bgColor(color)};
-    ${parseWidthHeight(width || (isVertical ? 1 : '100%'), height || (isVertical ? 'auto' : 1))};
-`;
-
-// Divider.defaultProps = {
-//     className: '',
-//     color: 'system/disabled',
-//     direction: 'horizontal',
-//     style: {},
-// };
-
-Divider.propTypes = {
-  /** Class for component. */
-  className: PropTypes.string,
-  /** The color of the component. */
-  color: PropTypes.string,
-  /** direction of divider */
-  direction: PropTypes.oneOf(['vertical', 'horizontal']),
-  /** Height oof the component. */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** Width of the component. */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-export { Divider };
-export default OptionWrapper(Divider);