diginet-core-ui 1.3.78 → 1.3.79

package/components/others/extra/index.js

@@ -1,7 +1,5 @@
 /* eslint-disable react/prop-types */
-
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useState, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -16,7 +14,6 @@ const icons = {
         <path fillRule="evenodd" clip-rule="evenodd" d="M7.00011 6.99993C7.22711 6.99993 7.45511 7.07693 7.64011 7.23193L13.6401 12.2319C14.0641 12.5859 14.1211 13.2159 13.7681 13.6399C13.4141 14.0649 12.7851 14.1209 12.3601 13.7679L6.98911 9.29293L1.62711 13.6069C1.19711 13.9529 0.566109 13.8849 0.221108 13.4549C-0.125891 13.0249 -0.0568903 12.3959 0.373109 12.0489L6.37311 7.22093C6.55611 7.07393 6.77811 6.99993 7.00011 6.99993ZM6.98901 2.29243L1.62701 6.60743C1.19701 6.95243 0.56601 6.88443 0.22101 6.45543C-0.12499 6.02443 -0.0569899 5.39543 0.37301 5.04843L6.37301 0.220434C6.55601 0.0734332 6.77801 0.000434244 7.00001 0.000434264C7.22801 0.000434283 7.45501 0.077434 7.64001 0.232434L13.64 5.23243C14.065 5.58543 14.122 6.21543 13.768 6.64043C13.415 7.06443 12.785 7.12243 12.36 6.76843L6.98901 2.29243Z" fill="currentColor"/>
     </svg>`
 };
-
 const Extra = ({
   type,
   displayText,
@@ -28,8 +25,8 @@ const Extra = ({
   const textRef = useRef(null);
   const iconRef = useRef(null);
   const [typeState, setTypeState] = useState(type);
-  /* Start styled */
 
+  /* Start styled */
   const extraIcon = css`
         display: flex;
         align-items: center;
@@ -64,7 +61,6 @@ const Extra = ({
   /* End styled */
 
   /* Start handler */
-
   const handleClick = () => {
     if (typeState === 'expand') {
       iconRef.current.innerHTML = icons.collapse;
@@ -75,12 +71,10 @@ const Extra = ({
       textRef.current.innerHTML = displayText || 'Xem thêm';
       setTypeState('expand');
     }
-
     if (onClick) onClick({
       type: typeState === 'expand' ? 'collapse' : 'expand'
     });
   };
-
   useEffect(() => {
     iconRef.current.innerHTML = type === 'expand' ? icons.expand : icons.collapse;
     setTypeState(type);
@@ -91,7 +85,6 @@ const Extra = ({
   /* End handler */
 
   /* Start component */
-
   const iconComp = useMemo(() => jsx("div", {
     ref: iconRef,
     css: extraIcon
@@ -102,14 +95,14 @@ const Extra = ({
   }, displayText), []);
   /* End component */
 
-  return jsx("div", { ...props,
+  return jsx("div", {
+    ...props,
     ref: extraRef,
     css: extra,
     onClick: handleClick,
     style: style
   }, iconComp, textComp);
 };
-
 Extra.defaultProps = {
   type: 'expand'
 };

package/components/others/import/index.js

@@ -1,21 +1,17 @@
 import React from 'react';
 import { Button, Typography, Notify as AlertNotify } from '../..';
 import PropTypes from 'prop-types';
-
 const ImportComp = ({
   components,
   from = 'components',
   importDefault = false
 }) => {
   let text = Array.isArray(components) ? components.join(', ') : components;
-
   if (!importDefault) {
     text = `{ ${text} }`;
   }
-
   const importText = `import ${text} from 'diginet-core-ui/${from}';`;
   let Notify = null;
-
   const onCopyImport = () => {
     if (!components) {
       Notify(`Không có components để copy`, {
@@ -23,7 +19,6 @@ const ImportComp = ({
       });
       return;
     }
-
     const el = document.createElement('input');
     el.value = importText;
     document.body.appendChild(el);
@@ -32,7 +27,6 @@ const ImportComp = ({
     document.body.removeChild(el);
     Notify(`Đã copy ${text} from ${from}`);
   };
-
   return components ? /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -69,7 +63,6 @@ const ImportComp = ({
     color: 'warning'
   }, "(Khoan h\u1EB5n d\xF9ng)"));
 };
-
 ImportComp.propTypes = {
   components: PropTypes.string,
   from: PropTypes.string,

package/components/others/option-wrapper/index.js

@@ -1,13 +1,10 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { useState, forwardRef, useEffect } from 'react';
 import { jsx } from '@emotion/core';
-
 const OptionWrapper = WrappedComponent => {
   return /*#__PURE__*/forwardRef((props, ref) => {
     const [options, setOptions] = useState({});
-
     const option = (option, optionValue) => {
       if (typeof option === 'undefined') {
         return props;
@@ -16,16 +13,17 @@ const OptionWrapper = WrappedComponent => {
           [option]: optionValue
         });
       } else if (typeof option === 'object') {
-        setOptions({ ...options,
+        setOptions({
+          ...options,
           ...option
         });
       }
     };
-
     useEffect(() => {
       setOptions({});
     }, [props]);
-    return jsx(WrappedComponent, { ...props,
+    return jsx(WrappedComponent, {
+      ...props,
       ...options,
       action: {
         option
@@ -34,5 +32,4 @@ const OptionWrapper = WrappedComponent => {
     });
   });
 };
-
 export default OptionWrapper;

package/components/others/scrollbar/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo } from 'react';
 import PropTypes from 'prop-types';
@@ -19,7 +18,6 @@ const getPosition = {
 		text-align: left;
 	`
 };
-
 const scrollbar = ({
   backgroundScroll,
   backgroundThumb,
@@ -72,7 +70,6 @@ const scrollbar = ({
     ...props
   }, children);
 };
-
 scrollbar.defaultProps = {
   backgroundScroll: white,
   backgroundThumb: dark12,

package/components/paging/page-info.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle, useLayoutEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
@@ -28,18 +27,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 PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -70,9 +65,8 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [disablePrevState, setDisablePrevState] = useState(true);
   const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
   const [inputPageValue, setInputPageValue] = useState(currentPage);
-
-  const _pagingInfoCSS = pagingInfoCSS(bgColor, typeShort); // const _dynamicWidthCSS = dynamicWidthCSS(currentPageState.toString()?.length || 3);
-
+  const _pagingInfoCSS = pagingInfoCSS(bgColor, typeShort);
+  // const _dynamicWidthCSS = dynamicWidthCSS(currentPageState.toString()?.length || 3);
 
   const _onChangePage = async ({
     page,
@@ -81,36 +75,35 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }) => {
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     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;
@@ -119,23 +112,21 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         return;
       }
     }
-
     currentPageRef.current = page;
     setCurrentPageState(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
+    let disableNext = false;
 
+    // If last page = 1. Disable all
     if (lastPage === 1) {
       disableNext = true;
     }
-
     if (onChangingPerPage) {
       const event = {
         cancel: false,
@@ -143,32 +134,26 @@ const PagingInfo = /*#__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);
     // setInputPageValue(0);
-
     _onChangePage({
       page: 0
     });
-
     setDisablePrevState(true);
     setDisableNextState(disableNext);
     if (onChangePerPage) onChangePerPage(per);
   };
-
   const onTypePaging = e => {
     var _e$value;
-
     if (timer.current) {
       clearTimeout(timer.current);
     }
-
     const value = (_e$value = e === null || e === void 0 ? void 0 : e.value) !== null && _e$value !== void 0 ? _e$value : e;
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     const page = !value || parseInt(value) < 0 ? 1 : parseInt(value) > lastPage ? lastPage : parseInt(value);
@@ -180,13 +165,11 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }, delayOnInput);
   };
-
   const checkKeyPress = e => {
     if (/,/.test(e.key)) {
       e.preventDefault();
     }
   };
-
   useEffect(() => {
     setTotalItemsState(totalItems);
   }, [totalItems]);
@@ -226,103 +209,81 @@ const PagingInfo = /*#__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 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
+      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) ? [{
@@ -351,11 +312,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: e => {
         setInputPageValue(0);
         currentPageRef.current = 0;
-
         if (timer.current) {
           clearTimeout(timer.current);
         }
-
         timer.current = setTimeout(() => {
           _onChangePage({
             page: 0,
@@ -372,11 +331,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: e => {
         setInputPageValue(inputPageValue - 1);
         currentPageRef.current = currentPageRef.current === 0 ? 0 : currentPageRef.current - 1;
-
         if (timer.current) {
           clearTimeout(timer.current);
         }
-
         timer.current = setTimeout(() => {
           _onChangePage({
             page: currentPageRef.current,
@@ -422,11 +379,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: e => {
         setInputPageValue(inputPageValue + 1);
         currentPageRef.current = currentPageRef.current === lastPage ? lastPage : currentPageRef.current + 1;
-
         if (timer.current) {
           clearTimeout(timer.current);
         }
-
         timer.current = setTimeout(() => {
           _onChangePage({
             page: currentPageRef.current,
@@ -443,11 +398,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: e => {
         setInputPageValue(lastPage - 1);
         currentPageRef.current = lastPage - 1;
-
         if (timer.current) {
           clearTimeout(timer.current);
         }
-
         timer.current = setTimeout(() => {
           _onChangePage({
             page: lastPage - 1,
@@ -496,7 +449,6 @@ const ViewNumberInput = css`
     transition: all 0.1s;
     margin: ${spacing([0, 1])};
 `;
-
 const pagingInfoCSS = (bgColor, typeShort) => css`
     ${flexRow};
     ${alignCenter};
@@ -565,7 +517,6 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
         transition: opacity 0.3s ease;
     }
 `;
-
 PagingInfo.defaultProps = {
   typeShort: false,
   bgColor: white,
@@ -579,66 +530,53 @@ PagingInfo.defaultProps = {
 PagingInfo.propTypes = {
   /** Background color for component. */
   bgColor: PropTypes.string,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** 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,
-
   /** The list to choose the number of elements to display per page. */
   listPerPage: PropTypes.array,
-
   /** 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,
-
   /** 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)