diginet-core-ui 1.3.84 → 1.3.85

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

@@ -1078,6 +1078,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     title: "",
     onDrop: onDropInput,
     onDragLeave: onDropInput,
+    onClick: e => e.target.value = null // Fix not fire onChange when select same file
+    ,
     ...inputProps
   })), [inputProps]);
   const AttachedView = useMemo(() => jsx(ScrollBar, {

package/components/paging/page-info.js

@@ -1,32 +1,33 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle, useLayoutEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Divider, Dropdown, NumberInput, Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
-import { ButtonIcon, NumberInput, Dropdown, Typography, Divider } from "../";
 import { getGlobal } from "../../global";
-import theme from "../../theme/settings";
-import { alignCenter, borderBox, flexRow, noPadding, textCenter, cursorPointer, parseHeight, whiteSpaceNoWrap, justifyCenter } from "../../styles/general";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { alignCenter, borderBox, cursorPointer, flexRow, justifyCenter, noPadding, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, textCenter, whiteSpaceNoWrap } from "../../styles/general";
+import { useTheme } from "../../theme";
+import { classNames, refType as ref } from "../../utils";
 const {
   colors: {
     system: {
-      active,
-      white
+      active: systemActive,
+      white: systemWhite
     },
     line: {
-      system,
-      category
+      system: lineSystem,
+      category: lineCategory
     },
     text: {
-      main
+      main: textMain
     }
   },
   typography: {
     paragraph2
   },
   spacing
-} = theme;
+} = useTheme();
 const getLastPage = (totalItems, itemsPerPage) => {
   let _lastPage = 0;
   if (totalItems && totalItems >= 0 && itemsPerPage && itemsPerPage > 0) {
@@ -53,7 +54,8 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   totalItems,
   typeShort
 }, reference) => {
-  let ref = useRef(null);
+  if (!reference) reference = useRef(null);
+  const ref = useRef(null);
   const timer = useRef(null);
   const currentPageRef = useRef(null);
   const numberRef = useRef(null);
@@ -66,8 +68,6 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
   const [inputPageValue, setInputPageValue] = useState(currentPage);
   const _pagingInfoCSS = pagingInfoCSS(bgColor, typeShort);
-  // const _dynamicWidthCSS = dynamicWidthCSS(currentPageState.toString()?.length || 3);
-
   const _onChangePage = async ({
     page,
     e,
@@ -139,9 +139,6 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
     setItemsPerPageState(per);
-    // currentPageRef.current = 0;
-    // setCurrentPageState(0);
-    // setInputPageValue(0);
     _onChangePage({
       page: 0
     });
@@ -253,13 +250,13 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // getBoundingClientRect includes margin => phải trừ đi margin
       const style = window.getComputedStyle(child) || child.currentStyle;
       const margin = parseInt((style === null || style === void 0 ? void 0 : style.marginLeft) || 0) + parseInt((style === null || style === void 0 ? void 0 : style.marginRight) || 0);
-      if (infoChild.right - margin >= infoParent.width) {
+      if (infoChild.right - margin >= infoParent.right) {
         child.style.opacity = 0;
         child.style.setProperty('display', 'none', 'important');
       } else {
         child.style.opacity = 1;
       }
-      return infoChild.right >= infoParent.width;
+      return infoChild.right >= infoParent.right;
     });
   };
   const setWithNumber = useCallback((totalRefs = totalRef, numberRefs = numberRef) => {
@@ -297,12 +294,12 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     listPerPageData = [...new Map(listPerPageData.map(v => [JSON.stringify(v), v])).values()];
     listPerPageData.sort((a, b) => a.id - b.id);
     const showPaging = checkShowPaging();
-    return showPaging && jsx("div", {
+    return showPaging ? jsx("div", {
       ref: ref,
       css: _pagingInfoCSS,
       id: id,
       style: style,
-      className: ['DGN-UI-PagingInfo', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-PagingInfo', className)
     }, jsx(ButtonIcon, {
       circular: true,
       viewType: 'ghost',
@@ -360,15 +357,15 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       placeholder: '',
       max: lastPage,
       onKeyDown: checkKeyPress,
-      onChange: e => onTypePaging(e)
+      onChange: onTypePaging
     }), "/", jsx(Typography, {
       ref: refs => {
         totalRef.current = refs;
         setWithNumber(refs, null);
       },
       css: css`
-                                        ${whiteSpaceNoWrap}
-                                    `,
+                                    ${whiteSpaceNoWrap}
+                                `,
       type: 'p2'
     }, lastPage)), jsx(ButtonIcon, {
       circular: true,
@@ -415,7 +412,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
-      color: category
+      color: lineCategory
     }) : getGlobal('lineNumber'), jsx(Dropdown, {
       allowSearch: false,
       viewType: 'underlined',
@@ -429,7 +426,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         readOnly: true
       },
       dropdownItemStyle: {
-        color: active
+        color: systemActive
       }
     })), jsx(Typography, {
       type: 'p2',
@@ -438,9 +435,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
-      color: category
-    }) : getGlobal('total') + ':', totalItemsState));
-  }, [typeShort, bgColor, style, className, hideWithPage, totalItemsState, itemsPerPageState, currentPageState, listPerPageState, disablePrevState, disableNextState, inputPageValue]);
+      color: lineCategory
+    }) : getGlobal('total') + ':', totalItemsState)) : null;
+  }, [bgColor, className, hideWithPage, style, typeShort, currentPageState, disableNextState, disablePrevState, inputPageValue, itemsPerPageState, listPerPageState, totalItemsState]);
 }));
 const ViewNumberInput = css`
     ${flexRow};
@@ -454,11 +451,11 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     ${alignCenter};
     ${paragraph2};
     ${borderBox};
-    ${parseHeight(40)}
-    border-top: solid 1px ${system};
+    ${parseHeight(40)};
+    border-top: solid 1px ${lineSystem};
     padding: ${spacing([1, 0])};
     background-color: ${bgColor};
-    color: ${main};
+    color: ${textMain};
     .inputPage {
         ${textCenter};
         margin: ${spacing([0, 0.5])};
@@ -467,7 +464,7 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
             input {
                 ${paragraph2};
                 ${textCenter};
-                color: ${active};
+                color: ${systemActive};
                 text-align: left;
             }
         }
@@ -485,9 +482,9 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     .DGN-UI-Dropdown {
         margin-left: ${`${spacing(typeShort ? [0] : [2])}`};
         margin-bottom: 0;
-        min-width: 52px;
+        ${parseMinWidth(52)};
         .DGN-UI-Dropdown-Form {
-            min-height: 24px;
+            ${parseMinHeight(24)};
             padding: 0;
             input,
             span {
@@ -496,14 +493,12 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
                 ${cursorPointer};
             }
             .DGN-UI-Dropdown-Icon {
-                margin-left: 6px;
+                margin-left: ${spacing([1.5])};
                 div,
                 span,
                 svg {
-                    width: 20px;
-                    min-width: 20px;
-                    height: 20px;
-                    min-height: 20px;
+                    ${parseWidthHeight(20)};
+                    ${parseMinWidthHeight(20)};
                 }
             }
         }
@@ -518,14 +513,14 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     }
 `;
 PagingInfo.defaultProps = {
-  typeShort: false,
-  bgColor: white,
-  style: {},
+  bgColor: systemWhite,
   className: '',
-  totalItems: 0,
   currentPage: 0,
+  hideWithPage: 'none',
   listPerPage: [10, 15, 20, 30, 50],
-  hideWithPage: 'none'
+  style: {},
+  totalItems: 0,
+  typeShort: false
 };
 PagingInfo.propTypes = {
   /** Background color for component. */
@@ -578,9 +573,7 @@ PagingInfo.propTypes = {
    * * setTotalItems(items): Set total items
    *  * @param {items} - number
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export { PagingInfo };
 export default OptionWrapper(PagingInfo);

package/components/status/index.js

@@ -1,51 +1,46 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { Icon, Typography } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { Typography } from "../";
-import Icon from "../../icons";
-import { alignCenter, backgroundTransparent, borderBox, flexRow } from "../../styles/general";
-import theme from "../../theme/settings";
-import OptionWrapper from "../others/option-wrapper";
+import { alignCenter, backgroundTransparent, borderBox, flexRow, parseMinHeight, parseWidth } from "../../styles/general";
+import { useTheme, useColor as colors } from "../../theme";
+import { classNames } from "../../utils";
 const {
   colors: {
     system: {
-      active,
-      rest
-    },
-    semantic: {
-      success,
-      warning,
-      danger,
-      info
+      rest: systemRest
     },
     fill: {
-      sidebar
+      sidebar: fillSidebar
     }
-  }
-} = theme;
-const colorMap = new Map([['default', rest], ['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+  },
+  spacing
+} = useTheme();
+const colorMap = new Map([['default', systemRest]]);
 const iconSizeMap = new Map([['small', '16px'], ['medium', '20px'], ['large', '24px']]);
 const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
-const filledPaddingSizeMap = new Map([['small', '2px 8px'], ['medium', '2px 12px'], ['large', '2px 12px']]);
+const filledPaddingSizeMap = new Map([['small', spacing([0.5, 2])], ['medium', spacing([0.5, 2])], ['large', spacing([0.5, 3])]]);
 const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   className,
-  color,
+  color: colorProp,
   icon,
+  id,
   size,
+  style,
   text,
-  viewType,
-  id,
-  style
+  viewType
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const outlinedPaddingSize = filledPaddingSizeMap.get(size);
-  const _color = colorMap.get(color) || color || rest;
+  const color = colorMap.get(colorProp) || colors[colorProp] || colorProp || systemRest;
   const iconSize = iconSizeMap.get(size);
   const typographySize = typographySizeMap.get(size);
-  const _StatusRoot = StatusRoot(iconSize, _color, size, outlinedPaddingSize);
+  const _StatusRootCSS = StatusRootCSS(iconSize, color, size, outlinedPaddingSize);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -56,40 +51,41 @@ const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const StatusIcon = typeof icon === 'string' ? jsx(Icon, {
+  const StatusIconView = typeof icon === 'string' ? jsx(Icon, {
     name: icon,
     width: iconSize,
     height: iconSize,
     color: 'currentColor',
     viewBox: true
   }) : icon;
-  const StatusText = jsx(Typography, {
+  const StatusTextView = jsx(Typography, {
     css: TextCSS,
     type: typographySize,
     color: 'inherit'
   }, text);
   return useMemo(() => {
     return jsx("div", {
-      css: _StatusRoot,
+      css: _StatusRootCSS,
       ref: ref,
       id: id,
       style: style,
-      className: ['DGN-UI-Status', viewType, size, className].join(' ').trim().replace(/\s+/g, ' ')
-    }, StatusIcon, StatusText);
-  }, [className, color, icon, size, text, viewType, id, style]);
+      className: classNames('DGN-UI-Status', viewType, size, className)
+    }, StatusIconView, StatusTextView);
+  }, [className, colorProp, icon, id, size, style, text, viewType]);
 }));
-const StatusRoot = (iconSize, color, size, outlinedPaddingSize) => css`
+const StatusRootCSS = (iconSize, color, size, outlinedPaddingSize) => css`
     ${flexRow};
     ${alignCenter};
     ${backgroundTransparent};
     ${borderBox};
-    gap: ${size === 'small' ? '2px' : '4px'};
-    min-height: ${iconSize};
+    ${parseWidth('fit-content')};
+    ${parseMinHeight(iconSize)};
+    gap: ${spacing([size === 'small' ? 0.5 : 1])};
     color: ${color};
     &.filled {
-        color: ${sidebar};
+        color: ${fillSidebar};
         background-color: ${color};
-        border-radius: 12px;
+        border-radius: 20px;
         &.${size} {
             padding: ${outlinedPaddingSize};
         }
@@ -99,12 +95,12 @@ const TextCSS = css`
     white-space: nowrap;
 `;
 Status.defaultProps = {
-  viewType: 'ghost',
-  text: '',
+  className: '',
   icon: '',
   size: 'medium',
-  className: '',
-  style: {}
+  style: {},
+  text: '',
+  viewType: 'ghost'
 };
 Status.propTypes = {
   /** Class for component. */
@@ -115,12 +111,12 @@ Status.propTypes = {
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /** The size of the component. */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Style inline of component. */
+  style: PropTypes.object,
   /** The content of the component. */
   text: PropTypes.string,
   /** The variant to use. */
-  viewType: PropTypes.oneOf(['filled', 'default', 'ghost']),
-  /** Style inline of component. */
-  style: PropTypes.object
+  viewType: PropTypes.oneOf(['filled', 'ghost'])
 };
 export { Status };
 export default OptionWrapper(Status);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.84",
+  "version": "1.3.85",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,11 @@ npm test
 ```
 
 ## Changelog
+## 1.3.85
+- \[Fixed\]: Attachment – Fix not fire onChange when select same file
+- \[Fixed\]: PagingInfo – Fix responsive auto hide element wrong
+- \[Fixed\]: Status – Fix css not match design
+
 ## 1.3.84
 - \[Fixed\]: Badge – Remove animation, conditional rendering with prop invisible
 - \[Fixed\]: InputBase – Fix css focus when readOnly