diginet-core-ui 1.3.33 → 1.3.34

package/components/chip/index.js

@@ -1,11 +1,36 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, forwardRef, useEffect, useMemo } from 'react';
+import { memo, useRef, forwardRef, useEffect, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, Typography } from '../';
-import theme from '../../theme/settings';
+import Icon from '../../icons';
+import { alignCenter, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone } from '../../styles/general';
+import { color as colors } from '../../styles/colors';
+import { darken } from '../../styles/color-helper';
+const {
+  system: {
+    active,
+    rest,
+    white
+  },
+  semantic: {
+    danger
+  },
+  fill: {
+    disabled: fillDisabled,
+    hover: fillHover
+  },
+  line: {
+    normal,
+    disabled: lineDisabled
+  },
+  text: {
+    disabled: textDisabled
+  }
+} = colors;
+const iconSizeMap = new Map([['small', '12px'], ['medium', '16px']]);
 const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   color,
@@ -25,20 +50,17 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   readOnly,
   children,
   ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+}, reference) => {
+  const ref = useRef(null);
   const IconRef = useRef(null);
   const ChipIcon = css`
-        display: flex;
-        position: relative;
-        justify-content: center;
-        align-items: center;
+        ${flexRow}
+        ${justifyCenter}
+        ${alignCenter}
+        ${positionRelative}
+        ${borderBox}
         padding: 0 2px;
         color: inherit;
-        box-sizing: border-box;
         img {
             border-radius: 50%;
         }
@@ -65,17 +87,14 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 height: 26px;
             }
         }
-        .clear-icon svg {
-            padding: 0 !important;
-        }
     `;
   const ChipLabel = css`
-        display: flex;
-        position: relative;
-        align-items: center;
+        ${flexRow}
+        ${alignCenter}
+        ${positionRelative}
+        ${userSelectNone}
         padding-right: ${endIcon || clearAble ? 2 : 10}px;
         padding-left: ${startIcon ? 2 : 10}px;
-        user-select: none;
         white-space: nowrap;
         &.small {
             max-height: 24px;
@@ -85,16 +104,16 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     `;
   const ChipRoot = css`
-        display: inline-flex;
-        position: relative;
-        align-items: center;
+        ${inlineFlex}
+        ${alignCenter}
+        ${positionRelative}
+        ${borderBox}
         width: max-content;
         margin-right: 15px;
         padding: 0 6px;
-        color: ${theme.colors.secondary};
-        background: #FFFFFF;
-        border: 1px solid ${theme.colors.dark6};
-        box-sizing: border-box;
+        color: ${rest};
+        background: ${white};
+        border: 1px solid ${normal};
         border-radius: 20px;
         cursor: ${onClick || onDbClick ? 'pointer' : 'unset'};
         &.small {
@@ -106,74 +125,43 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             padding-bottom: 2px;
         }
         &:hover {
-            background: ${theme.colors.hover};
-            border-color: ${theme.colors.brand};
+            background: ${fillHover};
+            border-color: ${active};
         }
-        &.disabled {
-            color: ${theme.colors.disabled} !important;
-            background-color: ${theme.colors.dark12} !important;
+        &.chip--disabled {
+            color: ${textDisabled} !important;
+            background-color: ${fillDisabled} !important;
+            border-color: ${lineDisabled} !important;
             pointer-events: none !important;
             .css-${ChipIcon.name} {
                 path {
-                    fill: ${theme.colors.disabled} !important;
+                    fill: ${textDisabled} !important;
                 }
             }
         }
-        &.readOnly {
+        &.chip--readOnly {
             cursor: unset !important;
             .css-${ChipIcon.name} {
                 pointer-events: none !important;
             }
         }
         &.outlined {
-            &.primary {
-                color: ${theme.colors.primary};
-                border-color: ${theme.colors.brand};
-            }
-            &.info {
-                color: ${theme.colors.info};
-                border-color: ${theme.colors.info5};
-            }
-            &.success {
-                color: ${theme.colors.success};
-                border-color: ${theme.colors.success};
-            }
-            &.warning {
-                color: ${theme.colors.warning};
-                border-color: ${theme.colors.warning};
-            }
-            &.danger {
-                color: ${theme.colors.danger};
-                border-color: ${theme.colors.danger};
+            &.${color} {
+                color: ${colors[color] || color};
+                border-color: ${colors[color] || color};
             }
         }
         &.filled {
-            color: #FFF;
+            color: ${white};
             .clear-icon {
-                color: #FFF;
+                color: ${white};
                 &:hover {
-                    color: ${theme.colors.danger};
+                    color: ${danger};
                 }
             }
-            &.primary {
-                background-color: ${theme.colors.primary};
-                border-color: #3D4D9E;
-            }
-            &.info {
-                background-color: ${theme.colors.info5};
-                border-color: ${theme.colors.info5};
-            }
-            &.success {
-                background-color: ${theme.colors.success};
-                border-color: ${theme.colors.success6};
-            }
-            &.warning {
-                background-color: ${theme.colors.warning};
-                border-color: ${theme.colors.warning6};
-            }
-            &.danger {
-                background-color: ${theme.colors.danger};
-                border-color: ${theme.colors.danger6};
+            &.${color} {
+                background-color: ${colors[color] || color};
+                border-color: ${darken(colors[color] || color, 0.22)};
             }
         }
     `;
@@ -185,9 +173,20 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, 0);
   };
 
-  const handleClick = e => {
-    if (!IconRef.current || !IconRef.current.contains(e.target)) {
-      !!onClick && onClick();
+  const _onClick = event => {
+    onClick && event.stopPropagation();
+    if (disabled || loading) return;
+    onClick && onClick(event);
+  };
+
+  const _onDbClick = event => {
+    (onDbClick || onDoubleClick) && event.stopPropagation();
+    if (disabled || loading) return;
+
+    if (onDbClick) {
+      onDbClick && onDbClick(event);
+    } else if (onDoubleClick) {
+      onDoubleClick && onDoubleClick(event);
     }
   };
 
@@ -202,74 +201,77 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (refs) refs(ref);
   }, []);
-  useEffect(() => {
-    if (color && color !== 'default') {
-      ref.current.classList.add(viewType);
-      ref.current.classList.add(color);
-    }
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
 
-    return () => {
-      if (ref.current && color && color !== 'default') {
-        ref.current.classList.remove(viewType);
-        ref.current.classList.remove(color);
-      }
-    };
-  }, [viewType, color]);
-  useEffect(() => {
-    if (disabled) {
-      ref.current.classList.add('disabled');
+    _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
+      });
     }
 
-    return () => {
-      if (disabled && ref.current) {
-        ref.current.classList.remove('disabled');
-      }
-    };
-  }, [disabled]);
-  useEffect(() => {
-    if (readOnly) {
-      ref.current.classList.add('readOnly');
+    return jsx("div", {
+      css: ChipIcon,
+      className: size
+    }, node);
+  }, [startIcon, size]);
+  const labelView = useMemo(() => {
+    return jsx("div", {
+      css: ChipLabel,
+      className: size
+    }, jsx(Typography, {
+      type: size === 'small' ? 'p2' : 'p1',
+      color: 'inherit'
+    }, renderLabel()));
+  }, [label]);
+  const endIconView = useMemo(() => {
+    let node = endIcon;
+
+    if (typeof node === 'string') {
+      node = jsx(Icon, {
+        name: node,
+        width: iconSizeMap.get(size),
+        height: iconSizeMap.get(size),
+        color: 'currentColor',
+        viewBox: false
+      });
     }
 
-    return () => {
-      if (readOnly && ref.current) {
-        ref.current.classList.remove('readOnly');
-      }
-    };
-  }, [readOnly]);
-  const startIconView = useMemo(() => startIcon && jsx("div", {
-    css: ChipIcon,
-    className: size
-  }, startIcon), [startIcon]);
-  const labelView = useMemo(() => jsx("div", {
-    css: ChipLabel,
-    className: size
-  }, jsx(Typography, {
-    type: size === 'small' ? 'p2' : 'p1',
-    color: 'inherit'
-  }, renderLabel())), [label]);
-  const endIconView = useMemo(() => clearAble ? jsx("div", {
-    css: ChipIcon,
-    className: 'end-icon ' + size,
-    ref: IconRef
-  }, jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Close',
-    className: 'clear-icon',
-    color: viewType === 'outlined' && color ? 'inherit' : undefined,
-    onClick: onRemoveHandler
-  })) : endIcon && jsx("div", {
-    css: ChipIcon,
-    className: 'end-icon ' + size,
-    ref: IconRef
-  }, endIcon), [clearAble]);
+    return clearAble ? jsx("div", {
+      css: ChipIcon,
+      className: 'end-icon ' + size,
+      ref: IconRef
+    }, jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: 'Close',
+      color: viewType === 'outlined' && color ? 'inherit' : undefined,
+      onClick: onRemoveHandler
+    })) : endIcon && jsx("div", {
+      css: ChipIcon,
+      className: 'end-icon ' + size,
+      ref: IconRef
+    }, node);
+  }, [clearAble, endIcon, size]);
   return jsx("div", {
     css: ChipRoot,
     ref: ref,
-    ...props,
-    className: ['DGN-UI-Chip', size, className].join(' ').trim(),
-    onClick: readOnly ? null : handleClick,
-    onDoubleClick: onDbClick || onDoubleClick
+    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, ' '),
+    onClick: _onClick,
+    onDoubleClick: _onDbClick,
+    ...props
   }, startIconView, labelView, endIconView, children);
 }));
 Chip.defaultProps = {