diginet-core-ui 1.4.23-beta.2 → 1.4.24

package/components/chip/index.js

@@ -4,12 +4,11 @@ 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 { hexToRGBA } from "../../styles/color-helper";
+import { bgColor, border, boxBorder, cursorNotAllowed, displayInlineFlex, flexRow, itemsCenter, justifyCenter, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, textColor, userSelectNone } from "../../styles/general";
 import { useTheme } from "../../theme";
 import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp, hexToRGBA } from "../../utils";
+import { classNames, getProp } 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']]);
@@ -28,26 +27,27 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =>
     name: 'Chip'
   });
   const {
-    children,
-    className,
-    clearAble,
+    viewType,
     color: colorProps,
-    disabled,
-    endIcon,
+    size,
     label,
-    labelProps,
+    className,
+    onRemove,
     onClick,
     onDbClick: onDbClickProp,
     onDoubleClick,
-    onRemove,
-    readOnly,
-    size,
     startIcon,
+    endIcon,
+    clearAble,
+    disabled,
+    readOnly,
+    children,
     style,
-    viewType
+    labelProps
   } = props;
   const onDbClick = !onDbClickProp && onDoubleClick ? onDoubleClick : onDbClickProp;
   const ref = useRef(null);
+  const IconRef = useRef(null);
   let color = colorMap.get(colorProps) || colorProps;
   color = getProp(colors, color, color);
   const infoChip = {
@@ -64,7 +64,6 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =>
   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);
   };
@@ -96,20 +95,20 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =>
         color: 'currentColor'
       });
     } else return jsx("div", {
-      css: _ChipIconCSS
+      css: ChipIconCSS(infoChip)
     }, startIcon);
   }, [startIcon, size]);
 
   // Label
-  const labelView = jsx(Typography
-  // css={ChipLabelCSS}
-  , {
-    type: infoChip.typographySize,
-    color: 'inherit',
-    lineClamp: 1,
-    hoverTooltip: true,
-    ...labelProps
-  }, label);
+  const labelView = useMemo(() => {
+    return jsx(Typography, {
+      css: ChipLabelCSS,
+      type: infoChip.typographySize,
+      color: 'inherit',
+      lineClamp: 1,
+      ...labelProps
+    }, label);
+  }, [label, size, startIcon, endIcon, clearAble]);
 
   // End Icon
   const endIconView = useMemo(() => {
@@ -119,10 +118,12 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =>
         name: node,
         width: infoChip.iconSize,
         height: infoChip.iconSize,
-        color: infoChip.contentColor
+        color: infoChip.contentColor,
+        viewBox: true
       });
     }
     return clearAble ? jsx(ButtonIcon, {
+      ref: IconRef,
       className: 'end-icon',
       viewType: 'ghost',
       name: 'Close',
@@ -130,29 +131,29 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =>
       height: infoChip.iconSize,
       color: infoChip.contentColor,
       disabled: disabled,
+      viewBox: true,
       onClick: onRemoveHandler
     }) : node && jsx("div", {
-      css: _ChipIconCSS,
-      className: 'end-icon ' + size
+      css: ChipIconCSS(infoChip),
+      className: 'end-icon ' + size,
+      ref: IconRef
     }, 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'),
+    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 ChipLabelCSS = css`
+    ${flexRow};
+    ${itemsCenter};
+    ${positionRelative};
+    ${userSelectNone};
+`;
 const ChipRootCSS = (onClick, onDbClick, info, {
   colors,
   spacing
@@ -166,20 +167,21 @@ const ChipRootCSS = (onClick, onDbClick, info, {
     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])};
+    border-radius: ${spacing(4)}px;
     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])};
+    gap: ${spacing()}px;
     &.chip--filled {
         &:not(.chip--disabled):not(.chip--readOnly) {
             &::after {
-                border-radius: ${spacing([4])};
+                border-radius: ${spacing(4)}px;
                 ${positionAbsolute};
                 top: 0;
                 left: 0;
                 content: '';
-                ${parseWidthHeight('100%')};
+                width: 100%;
+                height: 100%;
                 ${pointerEventsNone};
             }
             &:hover::after,
@@ -225,9 +227,12 @@ const ChipIconCSS = info => css`
     ${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)};
+    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 = {
@@ -237,39 +242,42 @@ const ChipIconCSS = info => css`
 // };
 
 Chip.propTypes = {
-  /** Content to display in the component. */
+  /** content to display in Chip */
   label: PropTypes.string,
-  /** The CSS class for the component. */
+  /** class of Chip element */
   className: PropTypes.string,
-  /** Inline style for the component. */
+  /** max length content to display was allowed */
+  /** style inline of component */
   style: PropTypes.object,
-  /** The icon displayed at the start of the component. */
+  /** the icon display at head of Chip */
   startIcon: PropTypes.any,
-  /** The icon displayed at the end of the component. */
+  /** the icon display at last of Chip */
   endIcon: PropTypes.any,
-  /** The variant to use. */
+  /** type of chip */
   viewType: PropTypes.oneOf(['ghost', 'outlined', 'filled']),
-  /** Color for the text or background of the Chip. */
+  /** color for text or background of Chip */
   color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
-  /** Size of the component. */
+  /** size of Chip */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /** If `true`, a clear icon will be shown. */
+  /** show clear icon if true */
   clearAble: PropTypes.bool,
-  /** If `true`, all events will be disabled and the color will be changed. */
+  /** prevent all event and change color if true */
   disabled: PropTypes.bool,
-  /** If `true`, all events will be disabled. */
+  /** prevent all event if true */
   readOnly: PropTypes.bool,
-  /** Function to be called after removing the component. */
+  /** the function to get ref of Chip */
+  refs: PropTypes.func,
+  /** the function will run after remove chip */
   onRemove: PropTypes.func,
-  /** Function to be called when the component is clicked. */
+  /** the function will run when click on chip */
   onClick: PropTypes.func,
-  /** Function to be called when the component is double-clicked. */
+  /** the function will run when double click on chip */
   onDbClick: PropTypes.func,
-  /** Function to be called when the component is double-clicked (priority over onDbClick). */
+  /** like onDbClick (priority onDbClick) */
   onDoubleClick: PropTypes.func,
-  /** Content to display on the Chip (same as label). */
+  /** content to display on Chip (the same to label) */
   children: PropTypes.node,
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography--title) applied to the `Typography` label. */
+  /** props for Typography of label */
   labelProps: PropTypes.object
 };
 export default Chip;

package/components/form-control/calendar/function.js

@@ -655,7 +655,7 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
     color: 'primary',
     type: 'h3',
     ref: refs.content,
-    format: ['sentence']
+    format: ['lowercase']
   }))), jsx("div", {
     className: className.navigator.around
   }, jsx(ButtonIcon, {