diginet-core-ui 1.3.87 → 1.3.88

package/components/paging/page-info.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { ButtonIcon, Divider, Dropdown, NumberInput, Typography } from "./..";
@@ -28,14 +29,18 @@ 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 = {},
@@ -67,7 +72,9 @@ 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,
@@ -75,35 +82,36 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }) => {
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     let disablePrev = false;
-    let disableNext = false;
+    let disableNext = false; // If last page = 1. Disable all
 
-    // 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;
@@ -112,21 +120,23 @@ 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;
+    let disableNext = false; // If last page = 1. Disable all
 
-    // If last page = 1. Disable all
     if (lastPage === 1) {
       disableNext = true;
     }
+
     if (onChangingPerPage) {
       const event = {
         cancel: false,
@@ -134,23 +144,30 @@ 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);
@@ -162,11 +179,13 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }, delayOnInput);
   };
+
   const checkKeyPress = e => {
     if (/,/.test(e.key)) {
       e.preventDefault();
     }
   };
+
   useEffect(() => {
     setTotalItemsState(totalItems);
   }, [totalItems]);
@@ -206,81 +225,103 @@ 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;
+      if (!infoChild || !infoParent) return; // getBoundingClientRect includes margin => phải trừ đi margin
 
-      // 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) ? [{
@@ -309,9 +350,11 @@ 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,
@@ -328,9 +371,11 @@ 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,
@@ -376,9 +421,11 @@ 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,
@@ -395,9 +442,11 @@ 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,
@@ -446,6 +495,7 @@ const ViewNumberInput = css`
     transition: all 0.1s;
     margin: ${spacing([0, 1])};
 `;
+
 const pagingInfoCSS = (bgColor, typeShort) => css`
     ${flexRow};
     ${itemsCenter};
@@ -512,6 +562,7 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
         transition: opacity 0.3s ease;
     }
 `;
+
 PagingInfo.defaultProps = {
   bgColor: systemWhite,
   className: '',
@@ -525,53 +576,66 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import React, { memo, useRef, useState, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -22,6 +23,7 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
+
   const [currentPage, setCurrentPage] = useState(currentPageProps);
   const [paging, setPaging] = useState([1]);
   const PageItemNum = css`
@@ -76,20 +78,27 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     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);
             }
@@ -98,12 +107,15 @@ 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 {
@@ -111,14 +123,18 @@ 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 {
@@ -126,6 +142,7 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               morePageLeft.push(l);
             }
           }
+
           if (newLastPage - 1 === newCurrentPage + 2) {
             morePageRight = newCurrentPage + 2;
           } else {
@@ -133,6 +150,7 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               morePageRight.push(r);
             }
           }
+
           newPaging.push(...[morePageLeft, newCurrentPage - 1, newCurrentPage, newCurrentPage + 1, morePageRight, newLastPage]);
         }
       } else {
@@ -140,36 +158,41 @@ 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]);
@@ -216,8 +239,7 @@ 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',
@@ -238,16 +260,22 @@ 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
 };