diginet-core-ui 1.3.82-beta.2 → 1.3.82-beta.4

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 } 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) {
@@ -66,8 +67,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,
@@ -253,13 +252,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) => {
@@ -302,7 +301,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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',
@@ -415,7 +414,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 +428,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         readOnly: true
       },
       dropdownItemStyle: {
-        color: active
+        color: systemActive
       }
     })), jsx(Typography, {
       type: 'p2',
@@ -438,7 +437,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
-      color: category
+      color: lineCategory
     }) : getGlobal('total') + ':', totalItemsState));
   }, [typeShort, bgColor, style, className, hideWithPage, totalItemsState, itemsPerPageState, currentPageState, listPerPageState, disablePrevState, disableNextState, inputPageValue]);
 }));
@@ -454,11 +453,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 +466,7 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
             input {
                 ${paragraph2};
                 ${textCenter};
-                color: ${active};
+                color: ${systemActive};
                 text-align: left;
             }
         }
@@ -485,9 +484,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 {
@@ -500,10 +499,8 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
                 div,
                 span,
                 svg {
-                    width: 20px;
-                    min-width: 20px;
-                    height: 20px;
-                    min-height: 20px;
+                    ${parseWidthHeight(20)};
+                    ${parseMinWidthHeight(20)};
                 }
             }
         }
@@ -519,7 +516,7 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
 `;
 PagingInfo.defaultProps = {
   typeShort: false,
-  bgColor: white,
+  bgColor: systemWhite,
   style: {},
   className: '',
   totalItems: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.82-beta.2",
+  "version": "1.3.82-beta.4",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",