diginet-core-ui 1.3.34 → 1.3.35

package/components/chip/index.js

@@ -1,12 +1,12 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, forwardRef, useEffect, useMemo, useImperativeHandle } from 'react';
+import { memo, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, Typography } from '../';
 import Icon from '../../icons';
-import { alignCenter, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone } from '../../styles/general';
+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';
 const {
@@ -37,7 +37,6 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   size,
   label,
   className,
-  refs,
   onRemove,
   onClick,
   onDbClick,
@@ -53,118 +52,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
   const IconRef = useRef(null);
-  const ChipIcon = 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 ChipLabel = css`
-        ${flexRow}
-        ${alignCenter}
-        ${positionRelative}
-        ${userSelectNone}
-        padding-right: ${endIcon || clearAble ? 2 : 10}px;
-        padding-left: ${startIcon ? 2 : 10}px;
-        white-space: nowrap;
-        &.small {
-            max-height: 24px;
-        }
-        &.medium {
-            max-height: 32px;
-        }
-    `;
-  const ChipRoot = css`
-        ${inlineFlex}
-        ${alignCenter}
-        ${positionRelative}
-        ${borderBox}
-        width: max-content;
-        margin-right: 15px;
-        padding: 0 6px;
-        color: ${rest};
-        background: ${white};
-        border: 1px solid ${normal};
-        border-radius: 20px;
-        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-${ChipIcon.name} {
-                path {
-                    fill: ${textDisabled} !important;
-                }
-            }
-        }
-        &.chip--readOnly {
-            cursor: unset !important;
-            .css-${ChipIcon.name} {
-                pointer-events: none !important;
-            }
-        }
-        &.outlined {
-            &.${color} {
-                color: ${colors[color] || color};
-                border-color: ${colors[color] || 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)};
-            }
-        }
-    `;
+  if (!onDbClick && onDoubleClick) onDbClick = onDoubleClick;
 
   const onRemoveHandler = () => {
     if (onRemove) onRemove(ref.current);
@@ -175,19 +63,14 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _onClick = event => {
     onClick && event.stopPropagation();
-    if (disabled || loading) return;
+    if (disabled) 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);
-    }
+    onDbClick && event.stopPropagation();
+    if (disabled) return;
+    onDbClick && onDbClick(event);
   };
 
   const renderLabel = () => {
@@ -198,9 +81,6 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return label;
   };
 
-  useEffect(() => {
-    if (refs) refs(ref);
-  }, []);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -224,19 +104,19 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return jsx("div", {
-      css: ChipIcon,
+      css: ChipIconCSS,
       className: size
     }, node);
   }, [startIcon, size]);
   const labelView = useMemo(() => {
     return jsx("div", {
-      css: ChipLabel,
+      css: ChipLabelCSS(startIcon, endIcon, clearAble),
       className: size
     }, jsx(Typography, {
       type: size === 'small' ? 'p2' : 'p1',
       color: 'inherit'
     }, renderLabel()));
-  }, [label]);
+  }, [label, size, startIcon, endIcon, clearAble]);
   const endIconView = useMemo(() => {
     let node = endIcon;
 
@@ -251,7 +131,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return clearAble ? jsx("div", {
-      css: ChipIcon,
+      css: ChipIconCSS,
       className: 'end-icon ' + size,
       ref: IconRef
     }, jsx(ButtonIcon, {
@@ -260,13 +140,13 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: viewType === 'outlined' && color ? 'inherit' : undefined,
       onClick: onRemoveHandler
     })) : endIcon && jsx("div", {
-      css: ChipIcon,
+      css: ChipIconCSS,
       className: 'end-icon ' + size,
       ref: IconRef
     }, node);
-  }, [clearAble, endIcon, size]);
+  }, [clearAble, viewType, color, endIcon, size]);
   return jsx("div", {
-    css: ChipRoot,
+    css: ChipRootCSS(onClick, onDbClick, color),
     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, ' '),
     onClick: _onClick,
@@ -274,6 +154,121 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...props
   }, startIconView, labelView, 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`
+    ${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`
+    ${inlineFlex};
+    ${alignCenter};
+    ${positionRelative};
+    ${borderBox};
+    ${border(1, normal)};
+    width: max-content;
+    margin-right: 15px;
+    padding: 0 6px;
+    color: ${rest};
+    background: ${white};
+    border-radius: 20px;
+    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;
+            }
+        }
+    }
+    &.chip--readOnly {
+        cursor: unset !important;
+        .css-${ChipIconCSS.name} {
+            pointer-events: none !important;
+        }
+    }
+    &.outlined {
+        &.${color} {
+            color: ${colors[color] || color};
+            border-color: ${colors[color] || 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)};
+        }
+    }
+`;
+
 Chip.defaultProps = {
   label: '',
   className: '',