diginet-core-ui 1.3.88 → 1.3.89

package/components/paging/page-info.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { ButtonIcon, Divider, Dropdown, NumberInput, Typography } from "./..";
@@ -29,18 +28,14 @@ const {
   },
   spacing
 } = useTheme();
-
 const getLastPage = (totalItems, itemsPerPage) => {
   let _lastPage = 0;
-
   if (totalItems && totalItems >= 0 && itemsPerPage && itemsPerPage > 0) {
     _lastPage = Math.ceil(totalItems / itemsPerPage);
     return _lastPage;
   }
-
   return _lastPage + 1;
 };
-
 const delayOnInput = getGlobal('delayOnInput');
 const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -72,9 +67,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [disablePrevState, setDisablePrevState] = useState(true);
   const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
   const [inputPageValue, setInputPageValue] = useState(currentPage);
-
   const _pagingInfoCSS = pagingInfoCSS(bgColor, typeShort);
-
   const _onChangePage = async ({
     page,
     e,
@@ -82,36 +75,35 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }) => {
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     let disablePrev = false;
-    let disableNext = false; // If last page = 1. Disable all
+    let disableNext = false;
 
+    // If last page = 1. Disable all
     if (lastPage === 1) {
       disablePrev = true;
       disableNext = true;
-    } // If current page = last page. Disable Next and Last
-
+    }
 
+    // If current page = last page. Disable Next and Last
     if (page + 1 >= lastPage) {
       disableNext = true;
-    } // If current page = 0. Disable Previous and First
-
+    }
 
+    // If current page = 0. Disable Previous and First
     if (page === 0) {
       disablePrev = true;
     }
-
     setDisablePrevState(disablePrev);
     setDisableNextState(disableNext);
     if (page === currentPageState) return;
-
     if (onChangingPage) {
-      const event = { ...e,
+      const event = {
+        ...e,
         cancel: false,
         prevPage: currentPageState,
         newPage: page,
         changeBy: changeBy
       };
       await onChangingPage(event);
-
       if (event.cancel) {
         if (e !== null && e !== void 0 && e.reset) e.reset();
         currentPageRef.current = currentPageState;
@@ -120,23 +112,21 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         return;
       }
     }
-
     currentPageRef.current = page;
     setCurrentPageState(page);
     setInputPageValue(page);
     if (onChangePage) onChangePage(page);
   };
-
   const _onChangePerPage = async per => {
     if (per === itemsPerPageState) return;
     const lastPage = getLastPage(totalItemsState, per);
     per = parseInt(per, 10);
-    let disableNext = false; // If last page = 1. Disable all
+    let disableNext = false;
 
+    // If last page = 1. Disable all
     if (lastPage === 1) {
       disableNext = true;
     }
-
     if (onChangingPerPage) {
       const event = {
         cancel: false,
@@ -144,30 +134,23 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         newPerPage: per
       };
       await onChangingPerPage(event);
-
       if (event.cancel) {
         return;
       }
     }
-
     setItemsPerPageState(per);
-
     _onChangePage({
       page: 0
     });
-
     setDisablePrevState(true);
     setDisableNextState(disableNext);
     if (onChangePerPage) onChangePerPage(per);
   };
-
   const onTypePaging = e => {
     var _e$value;
-
     if (timer.current) {
       clearTimeout(timer.current);
     }
-
     const value = (_e$value = e === null || e === void 0 ? void 0 : e.value) !== null && _e$value !== void 0 ? _e$value : e;
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     const page = !value || parseInt(value) < 0 ? 1 : parseInt(value) > lastPage ? lastPage : parseInt(value);
@@ -179,13 +162,11 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }, delayOnInput);
   };
-
   const checkKeyPress = e => {
     if (/,/.test(e.key)) {
       e.preventDefault();
     }
   };
-
   useEffect(() => {
     setTotalItemsState(totalItems);
   }, [totalItems]);
@@ -225,103 +206,81 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       setTotalItems: items => setTotalItemsState(items),
       ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
-
     currentRef.onChangePage = page => _onChangePage({
       page: page,
       changeBy: 'ref'
     });
-
     currentRef.onChangePerPage = per => _onChangePerPage(per);
-
     currentRef.setTotalItems = items => setTotalItemsState(items);
-
     return currentRef;
   });
-
   const updateSize = () => {
     if (timer.current) {
       clearTimeout(timer.current);
     }
-
     timer.current = setTimeout(() => {
       var _ref$current;
-
       let conti = true;
       [...(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.children) || [])].reverse().forEach(item => {
         if (item !== null && item !== void 0 && item.style) {
           item.style.display = 'flex';
-
           if (!conti) {
             item.style.opacity = 1;
             return;
           }
         }
-
         conti = hiddenEle(item);
       });
     }, 300);
   };
-
   useLayoutEffect(() => {
     window.addEventListener('resize', updateSize);
     updateSize();
     return () => window.removeEventListener('resize', updateSize);
   }, []);
-
   const hiddenEle = child => {
     setTimeout(() => {
       var _ref$current2;
-
       const infoChild = child === null || child === void 0 ? void 0 : child.getBoundingClientRect();
       const infoParent = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getBoundingClientRect();
-      if (!infoChild || !infoParent) return; // getBoundingClientRect includes margin => phải trừ đi margin
+      if (!infoChild || !infoParent) return;
 
+      // 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.right) {
         child.style.opacity = 0;
         child.style.setProperty('display', 'none', 'important');
       } else {
         child.style.opacity = 1;
       }
-
       return infoChild.right >= infoParent.right;
     });
   };
-
   const setWithNumber = useCallback((totalRefs = totalRef, numberRefs = numberRef) => {
     var _totalRefs;
-
     if (!totalRefs) totalRefs = totalRef.current;
     if (!numberRefs) numberRefs = numberRef.current;
     if (!totalRefs || !numberRefs) return;
     const infoText = (_totalRefs = totalRefs) === null || _totalRefs === void 0 ? void 0 : _totalRefs.getBoundingClientRect();
-
     if (infoText && numberRefs) {
       numberRefs.style.width = `${infoText.width * 2 + 6}px`;
       numberRefs.style.minWidth = `${infoText.width * 2 + 6}px`;
     }
   }, [totalRef, numberRef]);
-
   const checkShowPaging = () => {
     switch (hideWithPage) {
       case 'empty':
         return totalItemsState !== 0;
-
       case 'single':
         return totalItemsState / itemsPerPageState > 1;
-
       case 'none':
       default:
         return true;
     }
   };
-
   return useMemo(() => {
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     let listPerPageData = !listPerPageState.includes(itemsPerPageState) ? [{
@@ -350,11 +309,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: e => {
         setInputPageValue(0);
         currentPageRef.current = 0;
-
         if (timer.current) {
           clearTimeout(timer.current);
         }
-
         timer.current = setTimeout(() => {
           _onChangePage({
             page: 0,
@@ -371,11 +328,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: e => {
         setInputPageValue(inputPageValue - 1);
         currentPageRef.current = currentPageRef.current === 0 ? 0 : currentPageRef.current - 1;
-
         if (timer.current) {
           clearTimeout(timer.current);
         }
-
         timer.current = setTimeout(() => {
           _onChangePage({
             page: currentPageRef.current,
@@ -421,11 +376,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: e => {
         setInputPageValue(inputPageValue + 1);
         currentPageRef.current = currentPageRef.current === lastPage ? lastPage : currentPageRef.current + 1;
-
         if (timer.current) {
           clearTimeout(timer.current);
         }
-
         timer.current = setTimeout(() => {
           _onChangePage({
             page: currentPageRef.current,
@@ -442,11 +395,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: e => {
         setInputPageValue(lastPage - 1);
         currentPageRef.current = lastPage - 1;
-
         if (timer.current) {
           clearTimeout(timer.current);
         }
-
         timer.current = setTimeout(() => {
           _onChangePage({
             page: lastPage - 1,
@@ -495,7 +446,6 @@ const ViewNumberInput = css`
     transition: all 0.1s;
     margin: ${spacing([0, 1])};
 `;
-
 const pagingInfoCSS = (bgColor, typeShort) => css`
     ${flexRow};
     ${itemsCenter};
@@ -562,7 +512,6 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
         transition: opacity 0.3s ease;
     }
 `;
-
 PagingInfo.defaultProps = {
   bgColor: systemWhite,
   className: '',
@@ -576,66 +525,53 @@ PagingInfo.defaultProps = {
 PagingInfo.propTypes = {
   /** Background color for component. */
   bgColor: PropTypes.string,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** Specifies the current page. */
   currentPage: PropTypes.number,
-
   /** Hidden mode for page selector. */
   hideWithPage: PropTypes.oneOf(['none', 'empty', 'single']),
-
   /** The quantity of items per page. */
   itemsPerPage: PropTypes.number,
-
   /** The list to choose the number of elements to display per page. */
   listPerPage: PropTypes.array,
-
   /** Callback fired when page number changed. */
   onChangePage: PropTypes.func,
-
   /** Callback fired when quantity on per page changed. */
   onChangePerPage: PropTypes.func,
-
-  /**
-   * Callback fired when page number is changing.
-   *
-   * * prevPage: Page before changed
-   * * newPage: Page after changed
-   * * cancel(value): Function cancel change page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when page number is changing.
+   *
+   * * prevPage: Page before changed
+   * * newPage: Page after changed
+   * * cancel(value): Function cancel change page
+   *  * @param {value} - bool
    */
   onChangingPage: PropTypes.func,
-
-  /**
-   * Callback fired when quantity on item per page is changing.
-   *
-   * * prevPerPage: Items per page before changed
-   * * newPerPage: Items per page after changed
-   * * cancel(value): Function cancel change items per page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when quantity on item per page is changing.
+   *
+   * * prevPerPage: Items per page before changed
+   * * newPerPage: Items per page after changed
+   * * cancel(value): Function cancel change items per page
+   *  * @param {value} - bool
    */
   onChangingPerPage: PropTypes.func,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** Total items. */
   totalItems: PropTypes.number,
-
   /** Compact type for mobile. */
   typeShort: PropTypes.bool,
-
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * onChangePage(page): Change page number
-   *  * @param {page} - number
-   * * onChangePerPage(per): Change quantity on per page
-   *  * @param {per} - number
-   * * setTotalItems(items): Set total items
-   *  * @param {items} - number
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * onChangePage(page): Change page number
+   *  * @param {page} - number
+   * * onChangePerPage(per): Change quantity on per page
+   *  * @param {per} - number
+   * * setTotalItems(items): Set total items
+   *  * @param {items} - number
    */
   reference: ref
 };

package/components/paging/page-selector.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import React, { memo, useRef, useState, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -23,7 +22,6 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const [currentPage, setCurrentPage] = useState(currentPageProps);
   const [paging, setPaging] = useState([1]);
   const PageItemNum = css`
@@ -58,7 +56,7 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 width: ${size === 'small' ? 20 : 24}px;
                 height: ${size === 'small' ? 20 : 24}px;
                 font-size: ${size === 'small' ? 12 : 14}px;
-                background-color: ${theme.colors.border};
+                background-color: ${theme.colors.system.rest};
                 border-radius: 50%;
                 text-align: center;
                 display: flex;
@@ -69,36 +67,29 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 cursor: pointer;
                 position: relative;
                 &:hover {
-                    background-color: ${theme.colors.hover};
+                    background-color: ${theme.colors.fill.hover};
                     &:not(.active) .css-${PageItemNum.name} {
-                        color: ${theme.colors.primary};
+                        color: ${theme.colors.system.active};
                     }
                 }
                 &.active {
                     background-color: ${theme.colors.brand};
                 }
             `;
-
   const setPagination = (newCurrentPage = 1) => {
     const newLastPage = Math.ceil(totalItems / itemsPerPage);
-
     if (newCurrentPage > newLastPage || newCurrentPage < 0) {
       newCurrentPage = 1;
     }
-
     setCurrentPage(newCurrentPage);
-
     if (newLastPage > 1) {
       const newPaging = [1];
-
       if (newLastPage > 5) {
         if (newCurrentPage < 4) {
           newPaging.push(...[2, 3]);
           let morePageRight = [];
-
           if (newCurrentPage === 3) {
             newPaging.push(4);
-
             for (let r = newCurrentPage + 2; r < newLastPage; r++) {
               morePageRight.push(r);
             }
@@ -107,15 +98,12 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               morePageRight.push(r);
             }
           }
-
           if (morePageRight.length === 1) {
             morePageRight = morePageRight[0];
           }
-
           newPaging.push(...[morePageRight, newLastPage]);
         } else if (newCurrentPage > newLastPage - 3) {
           let morePageLeft = [];
-
           if (newCurrentPage - 2 === 2) {
             morePageLeft = 2;
           } else {
@@ -123,18 +111,14 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               morePageLeft.push(l);
             }
           }
-
           newPaging.push(morePageLeft);
-
           if (newCurrentPage === newLastPage - 2) {
             newPaging.push(newLastPage - 3);
           }
-
           newPaging.push(...[newLastPage - 2, newLastPage - 1, newLastPage]);
         } else {
           let morePageLeft = [],
-              morePageRight = [];
-
+            morePageRight = [];
           if (newCurrentPage - 2 === 2) {
             morePageLeft = 2;
           } else {
@@ -142,7 +126,6 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               morePageLeft.push(l);
             }
           }
-
           if (newLastPage - 1 === newCurrentPage + 2) {
             morePageRight = newCurrentPage + 2;
           } else {
@@ -150,7 +133,6 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               morePageRight.push(r);
             }
           }
-
           newPaging.push(...[morePageLeft, newCurrentPage - 1, newCurrentPage, newCurrentPage + 1, morePageRight, newLastPage]);
         }
       } else {
@@ -158,41 +140,36 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           newPaging.push(i);
         }
       }
-
       return newPaging;
     } else if (paging.length !== 1) {
       return [1];
     }
   };
-
   const onChangePageHandler = (e, pageNum) => {
     if (!e.currentTarget.classList.contains('active')) {
       if (isNaN(pageNum)) {
         const el = e.currentTarget.querySelector(`.css-${morePaging.name}`);
-
         if (!el.classList.contains('visible')) {
           el.classList.add('visible');
         }
-
         el.setAttribute('tabIndex', -1);
         el.focus();
       } else {
         setCurrentPage(pageNum);
-        setPaging(setPagination(pageNum)); // paginationRef.current.querySelector('.active').classList.remove('active');
-
+        setPaging(setPagination(pageNum));
+        // paginationRef.current.querySelector('.active').classList.remove('active');
         if (onChangePage) onChangePage(pageNum);
       }
     }
   };
-
   const closeMorePaging = e => {
     if (e.currentTarget.classList.contains('visible')) {
       e.currentTarget.classList.remove('visible');
       e.currentTarget.blur();
     }
-  }; // Get totalItems, itemsPerPage to set last page
-
+  };
 
+  // Get totalItems, itemsPerPage to set last page
   useEffect(() => {
     setPaging(setPagination(currentPageProps));
   }, [currentPageProps]);
@@ -239,7 +216,8 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: PageItemNum
     }, page)))), jsx("p", null, "...")) : pageNum));
   });
-  return jsx("div", { ...props,
+  return jsx("div", {
+    ...props,
     ref: ref,
     style: {
       display: 'inline-flex',
@@ -260,22 +238,16 @@ PagingSelector.defaultProps = {
 PagingSelector.propTypes = {
   /** size of paging */
   size: PropTypes.oneOf(['small', 'medium']),
-
   /** current of paging */
   currentPage: PropTypes.number,
-
   /** total items of paging */
   totalItems: PropTypes.number.isRequired,
-
   /** the quantity of items on per page */
   itemsPerPage: PropTypes.number,
-
   /** style inline for PagingSelector */
   style: PropTypes.object,
-
   /** style inline for page number element */
   pageItemStyle: PropTypes.object,
-
   /** the function will run after change page number */
   onChangePage: PropTypes.func
 };