diginet-core-ui 1.3.67 → 1.3.68

package/components/paging/page-info.js

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
+import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle, useLayoutEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 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, noMargin, noPadding, border, textCenter, cursorPointer, parseHeight } from '../../styles/general';
+import { alignCenter, borderBox, flexRow, noPadding, textCenter, cursorPointer, parseHeight, whiteSpaceNoWrap, justifyCenter } from '../../styles/general';
 const {
   colors: {
     system: {
@@ -42,37 +42,42 @@ const getLastPage = (totalItems, itemsPerPage) => {
 
 const delayOnInput = getGlobal('delayOnInput');
 const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  id,
-  typeShort,
   bgColor,
-  style,
   className,
-  totalItems,
-  itemsPerPage,
   currentPage,
+  hideWithPage,
+  id,
+  itemsPerPage,
   listPerPage,
   onChangePage,
   onChangePerPage,
   onChangingPage,
-  onChangingPerPage
+  onChangingPerPage,
+  style,
+  totalItems,
+  typeShort
 }, reference) => {
-  var _currentPageState$toS;
-
-  const ref = useRef(null);
+  let ref = useRef(null);
   const timer = useRef(null);
   const currentPageRef = useRef(null);
+  const numberRef = useRef(null);
+  const totalRef = useRef(null);
   const [totalItemsState, setTotalItemsState] = useState(totalItems);
   const [itemsPerPageState, setItemsPerPageState] = useState(itemsPerPage || listPerPage[0] || 10);
   const [currentPageState, setCurrentPageState] = useState(currentPage);
   const [listPerPageState, setListPerPageState] = useState(listPerPage);
   const [disablePrevState, setDisablePrevState] = useState(true);
   const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
+  const [inputPageValue, setInputPageValue] = useState(currentPage);
 
-  const _pagingInfoCSS = pagingInfoCSS(bgColor, typeShort);
+  const _pagingInfoCSS = pagingInfoCSS(bgColor, typeShort); // const _dynamicWidthCSS = dynamicWidthCSS(currentPageState.toString()?.length || 3);
 
-  const _dynamicWidthCSS = dynamicWidthCSS(((_currentPageState$toS = currentPageState.toString()) === null || _currentPageState$toS === void 0 ? void 0 : _currentPageState$toS.length) || 3);
 
-  const _onChangePage = async (page, isInit = false, e) => {
+  const _onChangePage = async ({
+    page,
+    e,
+    changeBy
+  }) => {
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     let disablePrev = false;
     let disableNext = false; // If last page = 1. Disable all
@@ -92,29 +97,36 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disablePrev = true;
     }
 
-    if (onChangingPage && !isInit) {
+    setDisablePrevState(disablePrev);
+    setDisableNextState(disableNext);
+    if (page === currentPageState) return;
+
+    if (onChangingPage) {
       const event = { ...e,
         cancel: false,
         prevPage: currentPageState,
-        newPage: page
+        newPage: page,
+        changeBy: changeBy
       };
       await onChangingPage(event);
 
       if (event.cancel) {
         if (e !== null && e !== void 0 && e.reset) e.reset();
+        currentPageRef.current = currentPageState;
         setCurrentPageState(currentPageState);
+        setInputPageValue(currentPageState);
         return;
       }
     }
 
     currentPageRef.current = page;
     setCurrentPageState(page);
-    setDisablePrevState(disablePrev);
-    setDisableNextState(disableNext);
-    if (onChangePage && !isInit) onChangePage(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
@@ -136,14 +148,20 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    currentPageRef.current = 0;
-    setItemsPerPageState(per);
+    setItemsPerPageState(per); // currentPageRef.current = 0;
+    // setCurrentPageState(0);
+    // setInputPageValue(0);
+
+    _onChangePage({
+      page: 0
+    });
+
     setDisablePrevState(true);
     setDisableNextState(disableNext);
     if (onChangePerPage) onChangePerPage(per);
   };
 
-  const onTypePaging = (e, isInit = false) => {
+  const onTypePaging = e => {
     var _e$value;
 
     if (timer.current) {
@@ -155,7 +173,10 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const page = !value || parseInt(value) < 0 ? 1 : parseInt(value) > lastPage ? lastPage : parseInt(value);
     currentPage = page - 1;
     timer.current = setTimeout(() => {
-      _onChangePage(page - 1, isInit, e);
+      _onChangePage({
+        page: page - 1,
+        e: e
+      });
     }, delayOnInput);
   };
 
@@ -169,35 +190,127 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setTotalItemsState(totalItems);
   }, [totalItems]);
   useEffect(() => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-
-    timer.current = setTimeout(() => {
-      _onChangePage(0, true);
-    }, delayOnInput);
-  }, [totalItemsState, itemsPerPageState]);
-  useEffect(() => {
-    setItemsPerPageState(itemsPerPage);
+    _onChangePerPage(itemsPerPage);
   }, [itemsPerPage]);
   useEffect(() => {
-    setCurrentPageState(currentPage);
-    onTypePaging(currentPage + 1, true);
+    _onChangePage({
+      page: currentPage,
+      changeBy: 'currentPage'
+    });
   }, [currentPage]);
   useEffect(() => {
     setListPerPageState(listPerPage);
   }, [listPerPage]);
+  useEffect(() => {
+    _onChangePage({
+      page: totalItemsState / itemsPerPageState < currentPageState - 1 ? 0 : currentPageState,
+      changeBy: 'totalItems'
+    });
+  }, [totalItemsState]);
+  useEffect(() => {
+    _onChangePage({
+      page: totalItemsState / itemsPerPageState < currentPageState - 1 ? 0 : currentPageState,
+      changeBy: 'itemsPerPage'
+    });
+  }, [itemsPerPageState]);
   useImperativeHandle(reference, () => ({
     element: ref.current,
     instance: {
-      onChangePage: page => _onChangePage(page),
+      onChangePage: page => _onChangePage({
+        page: page,
+        changeBy: 'ref'
+      }),
       onChangePerPage: per => _onChangePerPage(per),
       setTotalItems: items => setTotalItemsState(items)
     },
-    onChangePage: page => _onChangePage(page),
+    onChangePage: page => _onChangePage({
+      page: page,
+      changeBy: 'ref'
+    }),
     onChangePerPage: per => _onChangePerPage(per),
     setTotalItems: items => setTotalItemsState(items)
   }));
+
+  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
+
+      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) {
+        child.style.opacity = 0;
+        child.style.setProperty('display', 'none', 'important');
+      } else {
+        child.style.opacity = 1;
+      }
+
+      return infoChild.right >= infoParent.width;
+    });
+  };
+
+  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) ? [{
@@ -210,7 +323,8 @@ 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);
-    return jsx("div", {
+    const showPaging = checkShowPaging();
+    return showPaging && jsx("div", {
       ref: ref,
       css: _pagingInfoCSS,
       id: id,
@@ -218,73 +332,127 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: ['DGN-UI-PagingInfo', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx(ButtonIcon, {
       circular: true,
-      viewType: 'text',
+      viewType: 'ghost',
       size: 'small',
       name: 'ArrowDoubleLeft',
       disabled: disablePrevState,
-      onClick: e => _onChangePage(0, false, e)
+      onClick: e => {
+        setInputPageValue(0);
+        currentPageRef.current = 0;
+
+        if (timer.current) {
+          clearTimeout(timer.current);
+        }
+
+        timer.current = setTimeout(() => {
+          _onChangePage({
+            page: 0,
+            e: e
+          });
+        }, delayOnInput);
+      }
     }), jsx(ButtonIcon, {
       circular: true,
-      viewType: 'text',
+      viewType: 'ghost',
       size: 'small',
       name: 'ArrowLeft',
       disabled: disablePrevState,
       onClick: e => {
-        currentPageRef.current = currentPageRef.current - 1;
+        setInputPageValue(inputPageValue - 1);
+        currentPageRef.current = currentPageRef.current === 0 ? 0 : currentPageRef.current - 1;
 
         if (timer.current) {
           clearTimeout(timer.current);
         }
 
         timer.current = setTimeout(() => {
-          _onChangePage(currentPageRef.current, false, e);
+          _onChangePage({
+            page: currentPageRef.current,
+            e: e
+          });
         }, delayOnInput);
       }
-    }), jsx(NumberInput, {
-      css: _dynamicWidthCSS,
+    }), jsx("div", {
+      css: ViewNumberInput,
+      ref: refs => {
+        numberRef.current = refs;
+        setWithNumber(null, refs);
+      }
+    }, jsx(NumberInput, {
       disabledNegative: true,
       className: 'inputPage',
-      value: currentPageState ? String(currentPageState + 1) : '1',
+      value: inputPageValue ? String(inputPageValue + 1) : '1',
       min: 1,
+      autoWidth: true,
+      inputStyle: {
+        minWidth: 10
+      },
+      width: 'auto',
+      placeholder: '',
       max: lastPage,
       onKeyDown: checkKeyPress,
-      onChange: e => onTypePaging(e, false)
+      onChange: e => onTypePaging(e)
     }), "/", jsx(Typography, {
-      type: 'p2',
-      style: {
-        margin: '0 2px'
-      }
-    }, lastPage), jsx(ButtonIcon, {
+      ref: refs => {
+        totalRef.current = refs;
+        setWithNumber(refs, null);
+      },
+      css: css`
+                                        ${whiteSpaceNoWrap}
+                                    `,
+      type: 'p2'
+    }, lastPage)), jsx(ButtonIcon, {
       circular: true,
-      viewType: 'text',
+      viewType: 'ghost',
       size: 'small',
       name: 'ArrowRight',
       disabled: disableNextState,
       onClick: e => {
-        currentPageRef.current = currentPageRef.current + 1;
+        setInputPageValue(inputPageValue + 1);
+        currentPageRef.current = currentPageRef.current === lastPage ? lastPage : currentPageRef.current + 1;
 
         if (timer.current) {
           clearTimeout(timer.current);
         }
 
         timer.current = setTimeout(() => {
-          _onChangePage(currentPageRef.current, false, e);
+          _onChangePage({
+            page: currentPageRef.current,
+            e: e
+          });
         }, delayOnInput);
       }
     }), jsx(ButtonIcon, {
       circular: true,
-      viewType: 'text',
+      viewType: 'ghost',
       size: 'small',
       name: 'ArrowDoubleRight',
       disabled: disableNextState,
-      onClick: e => _onChangePage(lastPage - 1, false, e)
-    }), typeShort && jsx(Divider, {
+      onClick: e => {
+        setInputPageValue(lastPage - 1);
+        currentPageRef.current = lastPage - 1;
+
+        if (timer.current) {
+          clearTimeout(timer.current);
+        }
+
+        timer.current = setTimeout(() => {
+          _onChangePage({
+            page: lastPage - 1,
+            e: e
+          });
+        }, delayOnInput);
+      }
+    }), jsx(Typography, {
+      type: 'p2',
+      ref: hiddenEle,
+      className: "txt-line-number"
+    }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
       color: category
-    }), !typeShort && jsx("span", {
-      className: "txt-line-number"
-    }, getGlobal('lineNumber')), jsx(Dropdown, {
+    }) : getGlobal('lineNumber'), jsx(Dropdown, {
+      allowSearch: false,
       viewType: 'underlined',
       dataSource: listPerPageData,
       value: itemsPerPageState,
@@ -298,32 +466,38 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       dropdownItemStyle: {
         color: active
       }
-    }), typeShort && jsx(Divider, {
+    })), jsx(Typography, {
+      type: 'p2',
+      ref: hiddenEle,
+      className: 'total-items'
+    }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
       color: category
-    }), jsx("span", {
-      className: 'total-items'
-    }, !typeShort && getGlobal('total') + ':', " ", totalItemsState));
-  }, [typeShort, bgColor, style, className, totalItemsState, itemsPerPageState, currentPageState, listPerPageState, disablePrevState, disableNextState]);
+    }) : getGlobal('total') + ':', totalItemsState));
+  }, [typeShort, bgColor, style, className, hideWithPage, totalItemsState, itemsPerPageState, currentPageState, listPerPageState, disablePrevState, disableNextState, inputPageValue]);
 }));
+const ViewNumberInput = css`
+    ${flexRow};
+    ${alignCenter};
+    ${justifyCenter};
+    transition: all 0.1s;
+    margin: ${spacing([0, 1])};
+`;
 
 const pagingInfoCSS = (bgColor, typeShort) => css`
     ${flexRow};
     ${alignCenter};
     ${paragraph2};
     ${borderBox};
-    ${border(1, system)};
     ${parseHeight(40)}
-    border-left: none;
-    border-right: none;
+    border-top: solid 1px ${system};
     padding: ${spacing([1, 0])};
     background-color: ${bgColor};
     color: ${main};
     .inputPage {
-        ${noMargin};
         ${textCenter};
-        min-width: 28px;
+        margin: ${spacing([0, 0.5])};
         .DGN-UI-InputBase {
             ${noPadding};
             input {
@@ -335,7 +509,11 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
         }
     }
     .txt-line-number {
-        margin-left: ${spacing([4])};
+        ${whiteSpaceNoWrap};
+        ${alignCenter};
+        opacity: 0;
+        display: flex !important;
+        transition: opacity 0.3s ease;
     }
     .DGN-UI-Divider {
         margin: ${spacing([0, 2])};
@@ -347,7 +525,8 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
         .DGN-UI-Dropdown-Form {
             min-height: 24px;
             padding: 0;
-            input {
+            input,
+            span {
                 ${paragraph2};
                 ${noPadding};
                 ${cursorPointer};
@@ -366,14 +545,15 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
         }
     }
     .total-items {
+        ${whiteSpaceNoWrap};
+        ${flexRow};
+        ${alignCenter};
         margin-left: ${`${spacing(typeShort ? [0] : [4])}`};
+        opacity: 0;
+        transition: opacity 0.3s ease;
     }
 `;
 
-const dynamicWidthCSS = characters => css`
-    width: ${characters}ch;
-`;
-
 PagingInfo.defaultProps = {
   typeShort: false,
   bgColor: white,
@@ -381,7 +561,8 @@ PagingInfo.defaultProps = {
   className: '',
   totalItems: 0,
   currentPage: 0,
-  listPerPage: [10, 15, 20, 30, 50]
+  listPerPage: [10, 15, 20, 30, 50],
+  hideWithPage: 'none'
 };
 PagingInfo.propTypes = {
   /** Background color for component. */
@@ -393,6 +574,9 @@ PagingInfo.propTypes = {
   /** 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,
 
@@ -405,23 +589,23 @@ PagingInfo.propTypes = {
   /** 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,
 
@@ -434,15 +618,15 @@ PagingInfo.propTypes = {
   /** 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: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)