diginet-core-ui 1.3.78 → 1.3.79

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`
@@ -78,27 +76,20 @@ 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);
             }
@@ -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
 };

package/components/paging/page-selector2.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -24,18 +23,14 @@ const {
   },
   spacing
 } = theme;
-
 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(({
   action = {},
@@ -64,43 +59,41 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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
+    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;
@@ -108,22 +101,20 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         return;
       }
     }
-
     currentPageRef.current = page;
     setCurrentPageState(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,
@@ -131,24 +122,20 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         newPerPage: per
       };
       await onChangingPerPage(event);
-
       if (event.cancel) {
         return;
       }
     }
-
-    setItemsPerPageState(per); // currentPageRef.current = 0;
+    setItemsPerPageState(per);
+    // currentPageRef.current = 0;
     // setCurrentPageState(0);
-
     _onChangePage({
       page: 0
     });
-
     setDisablePrevState(true);
     setDisableNextState(disableNext);
     if (onChangePerPage) onChangePerPage(per);
   };
-
   useEffect(() => {
     setTotalItemsState(totalItems);
   }, [totalItems]);
@@ -185,23 +172,16 @@ const PagingSelector = /*#__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 renderButton = (key, page, isSelected, customDisplay) => {
     if (page >= lastPage || page < 0) return;
     return jsx(ButtonIcon, {
@@ -220,21 +200,17 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       })
     }, customDisplay || page + 1);
   };
-
   const checkShowSelector = () => {
     switch (hideWithPage) {
       case 'empty':
         return totalItemsState !== 0;
-
       case 'single':
         return totalItemsState / itemsPerPageState > 1;
-
       case 'none':
       default:
         return true;
     }
   };
-
   return useMemo(() => {
     const count = componentWidth >= 368 ? 10 : componentWidth >= 208 ? 5 : 1;
     const pageArr = [...Array(count).keys()];
@@ -259,11 +235,9 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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,
@@ -322,11 +296,9 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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,
@@ -361,60 +333,49 @@ PagingSelector.defaultProps = {
 PagingSelector.propTypes = {
   /** Class for component. */
   className: PropTypes.string,
-
   /** Specifies the current page. */
   currentPage: PropTypes.number,
-
   /** 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,
-
   /** 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,
-
-  /**
-   * 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)

package/components/paper/index.js

@@ -19,7 +19,6 @@ const Paper = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const PaperRoot = css`
         width: ${isNaN(width) ? width : width + 'px'};
         height: ${isNaN(height) ? height : height + 'px'};
@@ -53,7 +52,6 @@ const Paper = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (square) {
       ref.current.classList.add('square');
     }
-
     return () => {
       if (square && ref.current) {
         ref.current.classList.remove('square');
@@ -64,7 +62,6 @@ const Paper = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (scrollAble && !ref.current.classList.contains('scroll-able')) {
       ref.current.classList.add('scroll-able');
     }
-
     return () => {
       if (scrollAble && ref.current) {
         ref.current.classList.remove('scroll-able');
@@ -91,28 +88,20 @@ Paper.defaultProps = {
 Paper.propTypes = {
   /** the width of Paper */
   width: oneOfType([string, number]),
-
   /** the height of Paper */
   height: oneOfType([string, number]),
-
   /** html tag to render */
   mapping: string,
-
   /** background color of Paper */
   bg: string,
-
   /** className of Paper component */
   className: string,
-
   /** rounded Paper if false */
   square: bool,
-
   /** Allow to roll if the height exceeds the limit */
   scrollAble: bool,
-
   /** the function to get ref of Paper */
   refs: func,
-
   /** content to display in Paper */
   children: node
 };

package/components/popover/body.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -28,11 +27,10 @@ const PopoverBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -71,10 +69,8 @@ PopoverBody.defaultProps = {
 PopoverBody.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/popover/footer.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -25,17 +24,14 @@ const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style
 }, reference) => {
   const ref = useRef(null);
-
   const _PopoverFooterCSS = PopoverFooterCSS(boxShadow);
-
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -47,7 +43,6 @@ const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: classNames('DGN-UI-Popover-Footer', className)
   }, children), [boxShadow, children, className, id, style]);
 }));
-
 const PopoverFooterCSS = boxShadow => css`
     ${flexRow};
     ${positionRelative};
@@ -62,7 +57,6 @@ const PopoverFooterCSS = boxShadow => css`
     box-shadow: ${boxShadow ? '0px -2px 2px rgba(0, 0, 0, 0.1)' : 'none'};
     order: 3;
 `;
-
 PopoverFooter.defaultProps = {
   className: '',
   style: {},
@@ -71,13 +65,10 @@ PopoverFooter.defaultProps = {
 PopoverFooter.propTypes = {
   /** The box-shadow of component. */
   boxShadow: PropTypes.bool,
-
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/popover/header.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -30,11 +29,10 @@ const PopoverHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -75,13 +73,10 @@ PopoverHeader.defaultProps = {
 PopoverHeader.propTypes = {
   /** The content of the component. */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** The content of the component if not have prop `children`. */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };