diginet-core-ui 1.3.87 → 1.3.88

package/components/paging/page-selector2.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -23,14 +24,18 @@ 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 = {},
@@ -59,41 +64,43 @@ 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;
+    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;
@@ -101,20 +108,22 @@ 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;
+    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,
@@ -122,20 +131,24 @@ 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]);
@@ -172,16 +185,23 @@ 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, {
@@ -200,17 +220,21 @@ 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()];
@@ -235,9 +259,11 @@ 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,
@@ -296,9 +322,11 @@ 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,
@@ -333,49 +361,60 @@ 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,6 +19,7 @@ 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'};
@@ -52,6 +53,7 @@ const Paper = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (square) {
       ref.current.classList.add('square');
     }
+
     return () => {
       if (square && ref.current) {
         ref.current.classList.remove('square');
@@ -62,6 +64,7 @@ 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');
@@ -88,20 +91,28 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
@@ -27,10 +28,11 @@ 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;
   });
@@ -69,8 +71,10 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
@@ -24,14 +25,17 @@ 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;
   });
@@ -43,6 +47,7 @@ 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};
@@ -57,6 +62,7 @@ const PopoverFooterCSS = boxShadow => css`
     box-shadow: ${boxShadow ? '0px -2px 2px rgba(0, 0, 0, 0.1)' : 'none'};
     order: 3;
 `;
+
 PopoverFooter.defaultProps = {
   className: '',
   style: {},
@@ -65,10 +71,13 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Typography } from "./..";
@@ -29,10 +30,11 @@ 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;
   });
@@ -73,10 +75,13 @@ 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])
 };