diginet-core-ui 1.3.70 → 1.3.71

package/components/chip/index.js

@@ -6,34 +6,33 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, Typography } from '../';
 import Icon from '../../icons';
-import { alignCenter, border, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone, whiteSpaceNoWrap } from '../../styles/general';
-import { color as colors } from '../../styles/colors';
-import { darken } from '../../styles/color-helper';
+import { alignCenter, border, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone, whiteSpaceNoWrap, cursorNotAllowed, positionAbsolute, overflowHidden } from '../../styles/general';
+import { hexToRGBA } from '../../styles/color-helper';
+import { useTheme } from '../../theme';
 const {
-  system: {
-    active,
-    rest,
-    white
-  },
-  semantic: {
-    danger
-  },
-  fill: {
-    disabled: fillDisabled,
-    hover: fillHover
-  },
-  line: {
-    normal,
-    disabled: lineDisabled
+  colors: {
+    danger,
+    info,
+    success,
+    warning,
+    system: {
+      active,
+      rest,
+      white,
+      disabled: disabledCl,
+      dark
+    }
   },
-  text: {
-    disabled: textDisabled
-  }
-} = colors;
-const iconSizeMap = new Map([['small', '12px'], ['medium', '16px']]);
+  spacing
+} = useTheme();
+const colorMap = new Map([['default', active], ['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+const iconSizeMap = new Map([['small', `${spacing(4)}px`], ['medium', `${spacing(5)}px`], ['large', `${spacing(6)}px`]]);
+const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
+const paddingSizeMap = new Map([['small', `0px ${spacing(1.5)}px`], ['medium', `0px ${spacing(2)}px`], ['large', `0px ${spacing(2.5)}px`]]);
+const minHeightSizeMap = new Map([['small', `${spacing(5)}px`], ['medium', `${spacing(6)}px`], ['large', `${spacing(7)}px`]]);
 const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
-  color,
+  color: colorProps,
   size,
   label,
   className,
@@ -41,24 +40,44 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onClick,
   onDbClick,
   onDoubleClick,
-  maxLength,
   startIcon,
   endIcon,
   clearAble,
   disabled,
   readOnly,
   children,
-  style
+  style,
+  labelProps
 }, reference) => {
   const ref = useRef(null);
   const IconRef = useRef(null);
   if (!onDbClick && onDoubleClick) onDbClick = onDoubleClick;
+  const color = colorMap.get(colorProps) || colorProps;
+  const infoChip = {
+    color: colorMap.get(colorProps) || colorProps,
+    contentColor: viewType !== 'filled' ? color : white,
+    backgroundColor: viewType !== 'filled' ? white : 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' ? rest : infoChip === null || infoChip === void 0 ? void 0 : infoChip.color;
+  infoChip.contentColor = colorProps === 'default' && viewType === 'outlined' ? rest : infoChip === null || infoChip === void 0 ? void 0 : infoChip.contentColor;
+  infoChip.backgroundColor = colorProps === 'default' && viewType === 'filled' ? rest : infoChip === null || infoChip === void 0 ? void 0 : infoChip.backgroundColor;
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
 
   const onRemoveHandler = () => {
-    if (onRemove) onRemove(ref.current);
-    setTimeout(() => {
-      ref.current && ref.current.remove();
-    }, 0);
+    if (onRemove || disabled) onRemove(ref.current);
   };
 
   const _onClick = event => {
@@ -71,213 +90,161 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onDbClick && event.stopPropagation();
     if (disabled) return;
     onDbClick && onDbClick(event);
-  };
+  }; // Start Icon
 
-  const renderLabel = () => {
-    if (maxLength && label && label.length > maxLength) {
-      label = label.slice(0, maxLength) + '...';
-    }
-
-    return label;
-  };
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
   const startIconView = useMemo(() => {
-    let node = startIcon;
-
-    if (typeof node === 'string') {
-      node = jsx(Icon, {
-        name: node,
-        width: iconSizeMap.get(size),
-        height: iconSizeMap.get(size),
-        color: 'currentColor',
-        viewBox: false
+    if (typeof startIcon === 'string') {
+      return jsx(Icon, {
+        name: startIcon,
+        width: infoChip.iconSize,
+        height: infoChip.iconSize,
+        color: 'currentColor'
       });
-    }
+    } else return jsx("div", {
+      css: ChipIconCSS(infoChip)
+    }, startIcon);
+  }, [startIcon, size]); // Label
 
-    return startIcon && jsx("div", {
-      css: ChipIconCSS,
-      className: size
-    }, node);
-  }, [startIcon, size]);
   const labelView = useMemo(() => {
-    return jsx("div", {
-      css: ChipLabelCSS(startIcon, endIcon, clearAble),
-      className: size
-    }, jsx(Typography, {
-      type: size === 'small' ? 'p2' : 'p1',
+    return jsx(Typography, {
+      css: ChipLabelCSS,
+      type: infoChip.typographySize,
       color: 'inherit',
-      lineClamp: 1
-    }, renderLabel()));
-  }, [label, size, startIcon, endIcon, clearAble]);
+      lineClamp: 1,
+      ...labelProps
+    }, label);
+  }, [label, size, startIcon, endIcon, clearAble]); // End Icon
+
   const endIconView = useMemo(() => {
     let node = endIcon;
 
     if (typeof node === 'string') {
-      node = jsx(Icon, {
+      return jsx(Icon, {
         name: node,
-        width: iconSizeMap.get(size),
-        height: iconSizeMap.get(size),
-        color: 'currentColor',
-        viewBox: false
+        width: infoChip.iconSize,
+        height: infoChip.iconSize,
+        color: infoChip.contentColor,
+        viewBox: true
       });
     }
 
-    return clearAble ? jsx("div", {
-      css: ChipIconCSS,
-      className: 'end-icon ' + size,
-      ref: IconRef
-    }, jsx(ButtonIcon, {
+    return clearAble ? jsx(ButtonIcon, {
+      ref: IconRef,
+      className: 'end-icon',
       viewType: 'ghost',
       name: 'Close',
-      color: viewType === 'outlined' && color ? 'inherit' : undefined,
+      width: infoChip.iconSize,
+      height: infoChip.iconSize,
+      color: infoChip.contentColor,
       disabled: disabled,
+      viewBox: true,
       onClick: onRemoveHandler
-    })) : endIcon && jsx("div", {
-      css: ChipIconCSS,
+    }) : node && jsx("div", {
+      css: ChipIconCSS(infoChip),
       className: 'end-icon ' + size,
       ref: IconRef
     }, node);
-  }, [clearAble, viewType, color, endIcon, size, disabled]);
+  }, [clearAble, viewType, color, endIcon, size, disabled, onRemove]);
   return jsx("div", {
-    css: ChipRootCSS(onClick, onDbClick, color),
+    css: ChipRootCSS(onClick, onDbClick, colorProps, infoChip),
     ref: ref,
-    className: ['DGN-UI-Chip', size, className, color && color !== 'default' && color, color && color !== 'default' && viewType, disabled && 'chip--disabled', readOnly && 'chip--readOnly'].join(' ').trim().replace(/\s+/g, ' '),
+    className: ['DGN-UI-Chip', className, disabled && 'chip--disabled', readOnly && 'chip--readOnly', viewType === 'filled' && 'chip--filled'].join(' '),
     style: style,
     onClick: _onClick,
     onDoubleClick: _onDbClick
-  }, startIconView, labelView, endIconView, children);
+  }, !!startIcon && startIconView, !!label && labelView, (!!endIcon || !!clearAble) && endIconView, children);
 }));
-const ChipIconCSS = css`
-    ${flexRow};
-    ${justifyCenter};
-    ${alignCenter};
-    ${positionRelative};
-    ${borderBox};
-    padding: 0 2px;
-    color: inherit;
-    img {
-        border-radius: 50%;
-    }
-    &.small {
-        width: 24px;
-        height: 24px;
-        img {
-            width: 20px;
-            height: 20px;
-        }
-    }
-    &.medium {
-        max-width: 32px;
-        max-height: 32px;
-        img {
-            min-width: 24px;
-            min-height: 24px;
-        }
-        &:not(.end-icon) {
-            margin-right: 4px;
-        }
-        &.end-icon {
-            width: 32px;
-            height: 26px;
-        }
-    }
-`;
-
-const ChipLabelCSS = (startIcon, endIcon, clearAble) => css`
+const ChipLabelCSS = css`
     ${flexRow};
     ${alignCenter};
     ${positionRelative};
     ${userSelectNone};
     ${whiteSpaceNoWrap};
-    padding-right: ${endIcon || clearAble ? 2 : 10}px;
-    padding-left: ${startIcon ? 2 : 10}px;
-    &.small {
-        max-height: 24px;
-    }
-    &.medium {
-        max-height: 32px;
-    }
 `;
 
-const ChipRootCSS = (onClick, onDbClick, color) => css`
+const ChipRootCSS = (onClick, onDbClick, colorProps, info) => css`
     ${inlineFlex};
     ${alignCenter};
     ${positionRelative};
     ${borderBox};
-    ${border(1, normal)};
+    ${border('1px', info.border)};
     width: max-content;
-    margin-right: 15px;
-    padding: 0 6px;
-    color: ${rest};
-    background: ${white};
-    border-radius: 20px;
+    padding: ${info === null || info === void 0 ? void 0 : info.paddingSize};
+    color: ${info === null || info === void 0 ? void 0 : info.contentColor};
+    background: ${info === null || info === void 0 ? void 0 : info.backgroundColor};
+    border-radius: ${spacing(4)}px;
     cursor: ${onClick || onDbClick ? 'pointer' : 'unset'};
-    &.small {
-        height: 24px;
-    }
-    &.medium {
-        min-height: 32px;
-        padding-top: 2px;
-        padding-bottom: 2px;
-    }
-    &:hover {
-        background: ${fillHover};
-        border-color: ${active};
-    }
-    &.chip--disabled {
-        color: ${textDisabled} !important;
-        background-color: ${fillDisabled} !important;
-        border-color: ${lineDisabled} !important;
-        pointer-events: none !important;
-        .css-${ChipIconCSS.name} {
-            path {
-                fill: ${textDisabled} !important;
+    height: ${info === null || info === void 0 ? void 0 : info.minHeightSize};
+    min-height: ${info === null || info === void 0 ? void 0 : info.minHeightSize};
+    gap: ${spacing()}px;
+    &.chip--filled {
+        &:not(.chip--disabled):not(.chip--readOnly) {
+            &::after {
+                border-radius: ${spacing(4)}px;
+                ${positionAbsolute};
+                top: 0;
+                left: 0;
+                content: '';
+                width: 100%;
+                height: 100%;
+            }
+            &:hover::after,
+            &:focus::after {
+                background: ${hexToRGBA(dark, 0.15)};
+            }
+            &:active::after {
+                background: ${hexToRGBA(dark, 0.3)};
             }
         }
     }
-    &.chip--readOnly {
-        cursor: unset !important;
-        .css-${ChipIconCSS.name} {
-            pointer-events: none !important;
+    &:not(.chip--filled) {
+        &:not(.chip--disabled):not(.chip--readOnly):hover {
+            ${border('1px', info === null || info === void 0 ? void 0 : info.color)};
+            background: ${hexToRGBA(info === null || info === void 0 ? void 0 : info.color, 0.1)};
+            color: ${info === null || info === void 0 ? void 0 : info.color};
         }
-    }
-    &.outlined {
-        &.${color} {
-            color: ${colors[color] || color};
-            border-color: ${colors[color] || color};
+        &:not(.chip--disabled):not(.chip--readOnly):active {
+            ${border('1px', info === null || info === void 0 ? void 0 : info.color)};
+            background: ${hexToRGBA(info === null || info === void 0 ? void 0 : info.color, 0.3)};
+            color: ${info === null || info === void 0 ? void 0 : info.color};
         }
-    }
-    &.filled {
-        color: ${white};
-        .clear-icon {
-            color: ${white};
-            &:hover {
-                color: ${danger};
-            }
-        }
-        &.${color} {
-            background-color: ${colors[color] || color};
-            border-color: ${darken(colors[color] || color, 0.22)};
+        &:not(.chip--disabled):not(.chip--readOnly):focus {
+            ${border('1px', info === null || info === void 0 ? void 0 : info.color)};
+            background: ${hexToRGBA(info === null || info === void 0 ? void 0 : info.color, 0.2)};
+            color: ${info === null || info === void 0 ? void 0 : info.color};
         }
     }
+    &.chip--disabled {
+        color: ${disabledCl} !important;
+        background-color: ${white} !important;
+        ${border('1px', disabledCl)};
+    }
+    &.chip--readOnly,
+    &.chip--disabled {
+        ${cursorNotAllowed}
+    }
+`;
+
+const ChipIconCSS = info => css`
+    ${flexRow};
+    ${justifyCenter};
+    ${alignCenter};
+    ${positionRelative};
+    ${borderBox};
+    ${overflowHidden};
+    width: ${info === null || info === void 0 ? void 0 : info.iconSize};
+    min-width: ${info === null || info === void 0 ? void 0 : info.iconSize};
+    max-width: ${info === null || info === void 0 ? void 0 : info.iconSize};
+    height: ${info === null || info === void 0 ? void 0 : info.iconSize};
+    min-height: ${info === null || info === void 0 ? void 0 : info.iconSize};
+    max-height: ${info === null || info === void 0 ? void 0 : info.iconSize};
 `;
 
 Chip.defaultProps = {
-  label: '',
-  className: '',
-  style: {},
   viewType: 'outlined',
-  size: 'small',
-  clearAble: false
+  size: 'medium',
+  color: 'default'
 };
 Chip.propTypes = {
   /** content to display in Chip */
@@ -290,7 +257,6 @@ Chip.propTypes = {
 
   /** style inline of component */
   style: PropTypes.object,
-  maxLength: PropTypes.number,
 
   /** the icon display at head of Chip */
   startIcon: PropTypes.any,
@@ -299,13 +265,13 @@ Chip.propTypes = {
   endIcon: PropTypes.any,
 
   /** type of chip */
-  viewType: PropTypes.oneOf(['outlined', 'filled']),
+  viewType: PropTypes.oneOf(['ghost', 'outlined', 'filled']),
 
   /** color for text or background of Chip */
   color: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']),
 
   /** size of Chip */
-  size: PropTypes.oneOf(['small', 'medium']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
 
   /** show clear icon if true */
   clearAble: PropTypes.bool,
@@ -332,6 +298,9 @@ Chip.propTypes = {
   onDoubleClick: PropTypes.func,
 
   /** content to display on Chip (the same to label) */
-  children: PropTypes.node
+  children: PropTypes.node,
+
+  /** props for Typography of label */
+  labelProps: PropTypes.object
 };
 export default Chip;

package/components/form-control/checkbox/index.js

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle } from 'react';
+import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle, Fragment } from 'react';
 import { Typography } from '../..';
 import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight } from '../../../styles/general';
 import { randomString } from '../../../utils';
@@ -154,7 +154,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     },
     color: disabled ? clDisabled : '',
     ...labelProps
-  }, jsx(React.Fragment, null, children || label, required && jsx("span", {
+  }, jsx(Fragment, null, children || label, required && jsx("span", {
     style: {
       color: disabled ? clDisabled : clDanger
     }