diginet-core-ui 1.3.94-beta.4 → 1.3.94-beta.6

package/components/paging/page-selector.js

@@ -1,254 +1,382 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import React, { memo, useRef, useState, useEffect, forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon } from "./..";
+import OptionWrapper from "../others/option-wrapper";
+import { getGlobal } from "../../global";
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import theme from "../../theme/settings";
-import { typography } from "../../styles/typography";
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { bgColor, borderTop, boxBorder, displayFlex, flexRow, itemsCenter, parseWidthHeight, pd } from "../../styles/general";
 import { useTheme } from "../../theme";
+import { useElementSize } from "../../utils";
 const {
-  zIndex
+  typography: {
+    paragraph2
+  }
 } = 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 PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  size,
-  style,
-  pageItemStyle,
-  currentPage: currentPageProps = 1,
-  totalItems = 0,
-  itemsPerPage = 10,
+  action = {},
+  className,
+  currentPage,
+  hideEllipsis,
+  hideWithPage,
+  id,
+  itemsPerPage,
   onChangePage,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-  const [currentPage, setCurrentPage] = useState(currentPageProps);
-  const [paging, setPaging] = useState([1]);
-  const PageItemNum = css`
-                color: #fff;
-                ${typography.heading3};
-                z-index: ${zIndex(2)};
-            `;
-  const morePaging = css`
-                position: absolute;
-                display: inline-flex;
-                opacity: 0;
-                transform: scaleX(0);
-                transition: all 0.5s;
-                z-index: ${zIndex(3)};
-                max-width: 176px;
-                overflow: scroll hidden;
-                padding-bottom: 2px;
-                outline: none;
-                &.visible {
-                    opacity: 1;
-                    transform: scaleX(1);
-                }
-                &::-webkit-scrollbar {
-                    height: 4px;
-                }
-                &::-webkit-scrollbar-thumb {
-                    border-radius: 10px;
-                    background-color: #c1c1c1;
-                }
-            `;
-  const PageItem = css`
-                width: ${size === 'small' ? 20 : 24}px;
-                height: ${size === 'small' ? 20 : 24}px;
-                font-size: ${size === 'small' ? 12 : 14}px;
-                background-color: ${theme.colors.system.rest};
-                border-radius: 50%;
-                text-align: center;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin: 0px 4px;
-                user-select: none;
-                cursor: pointer;
-                position: relative;
-                &:hover {
-                    background-color: ${theme.colors.fill.hover};
-                    &:not(.active) .css-${PageItemNum.name} {
-                        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;
+  onChangePerPage,
+  onChangingPage,
+  onChangingPerPage,
+  style,
+  totalItems
+}, reference) => {
+  const ref = useRef(null);
+  const timer = useRef(null);
+  const currentPageRef = useRef(currentPage);
+  const [totalItemsState, setTotalItemsState] = useState(totalItems);
+  const [itemsPerPageState, setItemsPerPageState] = useState(itemsPerPage || 10);
+  const [currentPageState, setCurrentPageState] = useState(currentPage);
+  const [disablePrevState, setDisablePrevState] = useState(true);
+  const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
+  const [refSize, {
+    width: componentWidth
+  }] = useElementSize();
+  const lastPage = getLastPage(totalItemsState, itemsPerPageState);
+  const _onChangePage = async ({
+    page,
+    e,
+    changeBy
+  }) => {
+    let disablePrev = false;
+    let disableNext = false;
+
+    // If last page = 1. Disable all
+    if (lastPage === 1) {
+      disablePrev = true;
+      disableNext = true;
     }
-    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);
-            }
-          } else {
-            for (let r = 4; r < newLastPage; r++) {
-              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 {
-            for (let l = 2; l < newCurrentPage - 1 - (newCurrentPage - newLastPage + 1); l++) {
-              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 = [];
-          if (newCurrentPage - 2 === 2) {
-            morePageLeft = 2;
-          } else {
-            for (let l = 2; l < newCurrentPage - 1; l++) {
-              morePageLeft.push(l);
-            }
-          }
-          if (newLastPage - 1 === newCurrentPage + 2) {
-            morePageRight = newCurrentPage + 2;
-          } else {
-            for (let r = newCurrentPage + 2; r < newLastPage; r++) {
-              morePageRight.push(r);
-            }
-          }
-          newPaging.push(...[morePageLeft, newCurrentPage - 1, newCurrentPage, newCurrentPage + 1, morePageRight, newLastPage]);
-        }
-      } else {
-        for (let i = 2; i <= newLastPage; i++) {
-          newPaging.push(i);
-        }
-      }
-      return newPaging;
-    } else if (paging.length !== 1) {
-      return [1];
+
+    // If current page = last page. Disable Next and Last
+    if (page + 1 >= lastPage) {
+      disableNext = true;
     }
-  };
-  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');
-        if (onChangePage) onChangePage(pageNum);
+
+    // 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,
+        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;
+        setCurrentPageState(currentPageState);
+        return;
       }
     }
+    currentPageRef.current = page;
+    setCurrentPageState(page);
+    if (onChangePage) onChangePage(page);
   };
-  const closeMorePaging = e => {
-    if (e.currentTarget.classList.contains('visible')) {
-      e.currentTarget.classList.remove('visible');
-      e.currentTarget.blur();
+  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
+    if (lastPage === 1) {
+      disableNext = true;
+    }
+    if (onChangingPerPage) {
+      const event = {
+        cancel: false,
+        prevPerPage: itemsPerPageState,
+        newPerPage: per
+      };
+      await onChangingPerPage(event);
+      if (event.cancel) {
+        return;
+      }
     }
+    setItemsPerPageState(per);
+    // currentPageRef.current = 0;
+    // setCurrentPageState(0);
+    _onChangePage({
+      page: 0
+    });
+    setDisablePrevState(true);
+    setDisableNextState(disableNext);
+    if (onChangePerPage) onChangePerPage(per);
   };
-
-  // Get totalItems, itemsPerPage to set last page
   useEffect(() => {
-    setPaging(setPagination(currentPageProps));
-  }, [currentPageProps]);
+    setTotalItemsState(totalItems);
+  }, [totalItems]);
   useEffect(() => {
-    setPaging(setPagination(currentPage));
-  }, [totalItems, itemsPerPage]);
-  const RenderPageItem = /*#__PURE__*/memo(({
-    pageNum,
-    style
-  }) => {
-    return jsx("div", {
-      css: PageItem,
-      className: pageNum === currentPage ? 'active' : '',
-      style: style,
-      onClick: e => onChangePageHandler(e, pageNum)
-    }, jsx("div", {
-      css: PageItemNum
-    }, isNaN(pageNum) ? jsx(React.Fragment, null, jsx("div", {
-      css: morePaging,
-      onBlur: closeMorePaging,
-      style: {
-        top: '-100%',
-        ...(pageNum[0] > currentPage ? {
-          right: 3,
-          transformOrigin: 'right'
-        } : {
-          left: 1,
-          transformOrigin: 'left'
-        })
-      }
-    }, pageNum.map(page => jsx("div", {
-      key: page,
-      css: PageItem,
+    _onChangePerPage(itemsPerPage);
+  }, [itemsPerPage]);
+  useEffect(() => {
+    _onChangePage({
+      page: currentPage,
+      changeBy: 'currentPage'
+    });
+  }, [currentPage]);
+  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, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      onChangePage: page => _onChangePage({
+        page: page,
+        changeBy: 'ref'
+      }),
+      onChangePerPage: per => _onChangePerPage(per),
+      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 renderButton = (key, page, isSelected, customDisplay) => {
+    if (page >= lastPage || page < 0) return;
+    return jsx(ButtonIcon, {
+      key: key,
+      css: paragraph2,
+      circular: true,
+      viewType: isSelected ? 'filled' : 'text',
+      size: 'small',
+      color: 'primary',
       style: {
-        width: 18,
-        height: 18,
-        minWidth: 18,
-        minHeight: 18,
-        fontSize: 8,
-        margin: '0px 2px'
+        fontWeight: 'normal'
       },
-      onClick: e => onChangePageHandler(e, page)
-    }, jsx("span", {
-      css: PageItemNum
-    }, page)))), jsx("p", null, "...")) : pageNum));
-  });
-  return jsx("div", {
-    ...props,
-    ref: ref,
-    style: {
-      display: 'inline-flex',
-      ...style
+      onClick: e => page !== currentPageState && _onChangePage({
+        page: page,
+        e: e
+      })
+    }, customDisplay || page + 1);
+  };
+  const checkShowSelector = () => {
+    switch (hideWithPage) {
+      case 'empty':
+        return totalItemsState !== 0;
+      case 'single':
+        return totalItemsState / itemsPerPageState > 1;
+      case 'none':
+      default:
+        return true;
     }
-  }, paging.map((pageNum, index) => jsx(RenderPageItem, {
-    key: index,
-    pageNum: pageNum,
-    style: pageItemStyle
-  })));
+  };
+  return useMemo(() => {
+    const count = componentWidth >= 368 ? 10 : componentWidth >= 208 ? 5 : 1;
+    const pageArr = [...Array(count).keys()];
+    const halfArrLength = Math.floor(count / 2);
+    const quarterArrLength = Math.floor(count / 2.5);
+    const showEllipsis = !hideEllipsis && count !== lastPage && count >= 5;
+    const showSelector = checkShowSelector();
+    return showSelector && jsx("div", {
+      css: PageSelectorCSS,
+      ref: node => {
+        ref.current = node;
+        refSize(node);
+      },
+      id: id,
+      style: style,
+      className: ['DGN-UI-PagingSelector', className].join(' ').trim().replace(/\s+/g, ' ')
+    }, jsx(ButtonIcon, {
+      circular: true,
+      viewType: 'text',
+      size: 'small',
+      name: 'ArrowLeft',
+      disabled: disablePrevState,
+      onClick: e => {
+        currentPageRef.current = currentPageRef.current === 0 ? 0 : currentPageRef.current - 1;
+        if (timer.current) {
+          clearTimeout(timer.current);
+        }
+        timer.current = setTimeout(() => {
+          _onChangePage({
+            page: currentPageRef.current,
+            e: e
+          });
+        }, delayOnInput);
+      }
+    }), pageArr.map((_, idx) => {
+      if (currentPageState < halfArrLength) {
+        // các trang đầu
+        if (showEllipsis) {
+          if (idx === count - 1 && lastPage - 1 >= 10) {
+            return renderButton(idx, lastPage - 1);
+          } else {
+            return renderButton(idx, idx, idx === currentPageState, idx === count - 2 && '...');
+          }
+        } else return renderButton(idx, idx, idx === currentPageState);
+      } else if (currentPageState >= lastPage - halfArrLength) {
+        // các trang cuối
+        if (showEllipsis) {
+          if (idx === 0) {
+            return renderButton(idx, idx);
+          } else {
+            return renderButton(idx, lastPage - count + idx, lastPage - count + idx === currentPageState, idx === 1 && '...');
+          }
+        } else {
+          return renderButton(idx, lastPage - count + idx, lastPage - count + idx === currentPageState);
+        }
+      } else {
+        // các trang giữa
+        if (idx < quarterArrLength) {
+          if (showEllipsis) {
+            if (idx === 0) {
+              return renderButton(idx, idx);
+            } else {
+              return renderButton(idx, currentPageState - quarterArrLength + idx, false, idx === 1 && '...');
+            }
+          } else return renderButton(idx, currentPageState - quarterArrLength + idx);
+        } else if (idx === quarterArrLength) {
+          return renderButton(idx, currentPageState, true);
+        } else {
+          if (showEllipsis) {
+            if (idx === count - 1) {
+              return renderButton(idx, lastPage - 1);
+            } else {
+              return renderButton(idx, currentPageState - quarterArrLength + idx, false, idx === count - 2 && '...');
+            }
+          } else return renderButton(idx, currentPageState - quarterArrLength + idx);
+        }
+      }
+    }), jsx(ButtonIcon, {
+      circular: true,
+      viewType: 'text',
+      size: 'small',
+      name: 'ArrowRight',
+      disabled: disableNextState,
+      onClick: e => {
+        currentPageRef.current = currentPageRef.current === lastPage ? lastPage : currentPageRef.current + 1;
+        if (timer.current) {
+          clearTimeout(timer.current);
+        }
+        timer.current = setTimeout(() => {
+          _onChangePage({
+            page: currentPageRef.current,
+            e: e
+          });
+        }, delayOnInput);
+      }
+    }));
+  }, [className, hideEllipsis, hideWithPage, id, style, componentWidth, currentPageState, disableNextState, disablePrevState, itemsPerPageState, totalItemsState]);
 }));
+const PageSelectorCSS = css`
+    ${displayFlex};
+    ${flexRow};
+    ${itemsCenter};
+    ${boxBorder};
+    ${parseWidthHeight('100%', 40)};
+    ${pd([1])};
+    ${bgColor('system/white')};
+    ${borderTop(1, 'line/system')};
+`;
 PagingSelector.defaultProps = {
-  size: 'medium',
-  currentPage: 1,
-  totalItems: 0,
-  itemsPerPage: 10
+  className: '',
+  currentPage: 0,
+  hideEllipsis: false,
+  hideWithPage: 'none',
+  style: {},
+  totalItems: 0
 };
 PagingSelector.propTypes = {
-  /** size of paging */
-  size: PropTypes.oneOf(['small', 'medium']),
-  /** current of paging */
+  /** Class for component. */
+  className: PropTypes.string,
+  /** Specifies the current page. */
   currentPage: PropTypes.number,
-  /** total items of paging */
-  totalItems: PropTypes.number.isRequired,
-  /** the quantity of items on per page */
+  /** If `true`, hide ellipsis. */
+  hideEllipsis: PropTypes.bool,
+  /** Hidden mode for page selector. */
+  hideWithPage: PropTypes.oneOf(['none', 'empty', 'single']),
+  /** The quantity of items per page. */
   itemsPerPage: PropTypes.number,
-  /** style inline for PagingSelector */
+  /** 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
+   */
+  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
+   */
+  onChangingPerPage: PropTypes.func,
+  /** Style inline of component. */
   style: PropTypes.object,
-  /** style inline for page number element */
-  pageItemStyle: PropTypes.object,
-  /** the function will run after change page number */
-  onChangePage: PropTypes.func
+  /** Total items. */
+  totalItems: PropTypes.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
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
+   */
 };
-export default PagingSelector;
+
+export { PagingSelector };
+export default OptionWrapper(PagingSelector);

package/components/popover/index.js

@@ -619,6 +619,17 @@ Popover.propTypes = {
    * * close: Close popover
    * * setPosition(element): Set position of popover
    *  * @param {element} - element
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   ref: ref
 };

package/components/typography/index.js

@@ -143,16 +143,16 @@ Typography.defaultProps = {
   type: 'p1'
 };
 
-/** type of text<br/>
- * h1: Title <br/>
- * h2: Header Popup <br/>
- * h3: Header popup <br/>
- * h4: Button, Tab, Title group <br/>
- * h5: Label column, Title group <br/>
- * h6: Label form <br/>
- * p1: Body text <br/>
- * p2: Body text <br/>
- * p3: Notice, Tooltip <br/>
+/** type of text<br/>
+ * h1: Title <br/>
+ * h2: Header Popup <br/>
+ * h3: Header popup <br/>
+ * h4: Button, Tab, Title group <br/>
+ * h5: Label column, Title group <br/>
+ * h6: Label form <br/>
+ * p1: Body text <br/>
+ * p2: Body text <br/>
+ * p3: Notice, Tooltip <br/>
  */
 export const arrTypeTypography = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
 Typography.propTypes = {