diginet-core-ui 1.3.88 → 1.3.89

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,33 +19,32 @@ 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'};
-        border: 1px solid ${theme.colors.border};
-        border-radius: 4px;
-        background-color: ${bg};
-        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-        &.square {
-            border-radius: 0;
-        }
-        &.scroll-able {
-            max-height: ${isNaN(height) ? height : height + 'px'};
-            overflow-y: auto;
-            &::-webkit-scrollbar {
-                width: 8px;
-                background-color: #FFF !important;
-                border-radius: 4px;
+            width: ${isNaN(width) ? width : width + 'px'};
+            height: ${isNaN(height) ? height : height + 'px'};
+            border: 1px solid ${theme.colors.line.normal};
+            border-radius: 4px;
+            background-color: ${bg};
+            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+            &.square {
+                border-radius: 0;
             }
-            &::-webkit-scrollbar-thumb {
-                border-radius: 4px;
-                mix-blend-mode: normal;
-                background-color: ${theme.colors.dark12} !important;
-                background-clip: content-box;
+            &.scroll-able {
+                max-height: ${isNaN(height) ? height : height + 'px'};
+                overflow-y: auto;
+                &::-webkit-scrollbar {
+                    width: 8px;
+                    background-color: #fff !important;
+                    border-radius: 4px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 4px;
+                    mix-blend-mode: normal;
+                    background-color: ${theme.colors.dark12} !important;
+                    background-clip: content-box;
+                }
             }
-        }
-    `;
+        `;
   useEffect(() => {
     refs && refs(ref);
   }, []);
@@ -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 { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
@@ -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 { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
@@ -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 { css, jsx } from '@emotion/core';
 import { Typography } from "./..";
@@ -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])
 };