diginet-core-ui 1.3.67 → 1.3.68

package/components/paging/page-selector2.js

@@ -4,6 +4,7 @@
 import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
 import { getGlobal } from '../../global';
 import theme from '../../theme/settings';
 import { alignCenter, borderBox, flexRow, parseHeight } from '../../styles/general';
@@ -40,6 +41,7 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   currentPage,
   hideEllipsis,
+  hideWithPage,
   id,
   itemsPerPage,
   onChangePage,
@@ -62,7 +64,11 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }] = useElementSize();
   const lastPage = getLastPage(totalItemsState, itemsPerPageState);
 
-  const _onChangePage = async (page, isInit = false, e) => {
+  const _onChangePage = async ({
+    page,
+    e,
+    changeBy
+  }) => {
     let disablePrev = false;
     let disableNext = false; // If last page = 1. Disable all
 
@@ -81,16 +87,22 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disablePrev = true;
     }
 
-    if (onChangingPage && !isInit) {
+    setDisablePrevState(disablePrev);
+    setDisableNextState(disableNext);
+    if (page === currentPageState) return;
+
+    if (onChangingPage) {
       const event = { ...e,
         cancel: false,
         prevPage: currentPageState,
-        newPage: page
+        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;
       }
@@ -98,12 +110,11 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     currentPageRef.current = page;
     setCurrentPageState(page);
-    setDisablePrevState(disablePrev);
-    setDisableNextState(disableNext);
-    if (onChangePage && !isInit) onChangePage(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
@@ -125,9 +136,13 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    currentPageRef.current = 0;
-    setItemsPerPageState(per);
-    setCurrentPageState(0);
+    setItemsPerPageState(per); // currentPageRef.current = 0;
+    // setCurrentPageState(0);
+
+    _onChangePage({
+      page: 0
+    });
+
     setDisablePrevState(true);
     setDisableNextState(disableNext);
     if (onChangePerPage) onChangePerPage(per);
@@ -137,48 +152,43 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setTotalItemsState(totalItems);
   }, [totalItems]);
   useEffect(() => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-
-    timer.current = setTimeout(() => {
-      _onChangePage(currentPageState !== null && currentPageState !== void 0 ? currentPageState : 0, true);
-    }, delayOnInput);
-  }, [totalItemsState, itemsPerPageState]);
-  useEffect(() => {
-    setItemsPerPageState(itemsPerPage);
+    _onChangePerPage(itemsPerPage);
   }, [itemsPerPage]);
   useEffect(() => {
-    setCurrentPageState(currentPage);
-
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-
-    timer.current = setTimeout(() => {
-      _onChangePage(currentPage, true);
-    }, delayOnInput);
+    _onChangePage({
+      page: currentPage,
+      changeBy: 'currentPage'
+    });
   }, [currentPage]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {
-      onChangePage: page => _onChangePage(page),
+  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, () => ({
+    element: ref.current,
+    instance: {
+      onChangePage: page => _onChangePage({
+        page: page,
+        changeBy: 'ref'
+      }),
       onChangePerPage: per => _onChangePerPage(per),
       setTotalItems: items => setTotalItemsState(items)
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-
-    currentRef.onChangePage = page => _onChangePage(page);
-
-    currentRef.onChangePerPage = per => _onChangePerPage(per);
-
-    currentRef.setTotalItems = items => setTotalItemsState(items);
-
-    return currentRef;
-  });
+    },
+    onChangePage: page => _onChangePage({
+      page: page,
+      changeBy: 'ref'
+    }),
+    onChangePerPage: per => _onChangePerPage(per),
+    setTotalItems: items => setTotalItemsState(items)
+  }));
 
   const renderButton = (key, page, isSelected, customDisplay) => {
     if (page >= lastPage || page < 0) return;
@@ -192,17 +202,35 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: {
         fontWeight: 'normal'
       },
-      onClick: e => page !== currentPageState && _onChangePage(page, false, e)
+      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;
+    }
+  };
+
   return useMemo(() => {
     const count = componentWidth >= 368 ? 10 : componentWidth >= 208 ? 5 : 1;
-    const pageArr = Array.from(Array(count).keys());
+    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;
-    return jsx("div", {
+    const showSelector = checkShowSelector();
+    return showSelector && jsx("div", {
       css: PageSelectorCSS,
       ref: node => {
         ref.current = node;
@@ -218,14 +246,17 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       name: 'ArrowLeft',
       disabled: disablePrevState,
       onClick: e => {
-        currentPageRef.current = currentPageRef.current - 1;
+        currentPageRef.current = currentPageRef.current === 0 ? 0 : currentPageRef.current - 1;
 
         if (timer.current) {
           clearTimeout(timer.current);
         }
 
         timer.current = setTimeout(() => {
-          _onChangePage(currentPageRef.current, false, e);
+          _onChangePage({
+            page: currentPageRef.current,
+            e: e
+          });
         }, delayOnInput);
       }
     }), pageArr.map((_, idx) => {
@@ -278,18 +309,21 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       name: 'ArrowRight',
       disabled: disableNextState,
       onClick: e => {
-        currentPageRef.current = currentPageRef.current + 1;
+        currentPageRef.current = currentPageRef.current === lastPage ? lastPage : currentPageRef.current + 1;
 
         if (timer.current) {
           clearTimeout(timer.current);
         }
 
         timer.current = setTimeout(() => {
-          _onChangePage(currentPageRef.current, false, e);
+          _onChangePage({
+            page: currentPageRef.current,
+            e: e
+          });
         }, delayOnInput);
       }
     }));
-  }, [id, style, className, hideEllipsis, totalItemsState, itemsPerPageState, currentPageState, disablePrevState, disableNextState, componentWidth]);
+  }, [id, style, className, hideEllipsis, hideWithPage, totalItemsState, itemsPerPageState, currentPageState, disablePrevState, disableNextState, componentWidth]);
 }));
 const PageSelectorCSS = css`
     ${flexRow};
@@ -309,7 +343,8 @@ PagingSelector.defaultProps = {
   className: '',
   totalItems: 0,
   currentPage: 0,
-  hideEllipsis: false
+  hideEllipsis: false,
+  hideWithPage: 'none'
 };
 PagingSelector.propTypes = {
   /** Class for component. */
@@ -321,6 +356,9 @@ PagingSelector.propTypes = {
   /** 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,
 
@@ -370,4 +408,5 @@ PagingSelector.propTypes = {
     current: PropTypes.instanceOf(Element)
   })])
 };
-export default PagingSelector;
+export { PagingSelector };
+export default OptionWrapper(PagingSelector);

package/components/popover/index.js

@@ -488,9 +488,9 @@ Popover.propTypes = {
   /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
   anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node]),
 
-  /**
-   * This is the point on the anchor where the popover's anchor will attach to.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the anchor where the popover's anchor will attach to.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -509,14 +509,14 @@ Popover.propTypes = {
   /** If `true`, click outside will close component. */
   clickOutsideToClose: PropTypes.bool,
 
-  /**
-   * Direction when Popover shown.
-   * Note: This prop will overwrite anchorOrigin & transformOrigin.
-   *
-   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
-   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
-   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
-   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
+  /**
+   * Direction when Popover shown.
+   * Note: This prop will overwrite anchorOrigin & transformOrigin.
+   *
+   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
+   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
+   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
+   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
 
@@ -532,9 +532,9 @@ Popover.propTypes = {
   /** Style inline of component. */
   style: PropTypes.object,
 
-  /**
-   * This is the point on the popover which will attach to the anchor's origin.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the popover which will attach to the anchor's origin.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   transformOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -547,13 +547,13 @@ Popover.propTypes = {
   /** Config z-index of the component. */
   zIndex: PropTypes.number,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show: Show popover
-   * * close: Close popover
-   * * setPosition(element): Set position of popover
-   *  * @param {element} - element
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show: Show popover
+   * * close: Close popover
+   * * setPosition(element): Set position of popover
+   *  * @param {element} - element
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/icons/effect.js

@@ -89,8 +89,8 @@ Icon.propTypes = {
   /** name of icon in icons store */
   name: PropTypes.string.isRequired,
 
-  /** color of icon<br />
-   * default: #7F828E
+  /** color of icon<br />
+   * default: #7F828E
    */
   color: PropTypes.string,
 
@@ -112,19 +112,19 @@ Icon.propTypes = {
   /** have view box if true */
   onClick: PropTypes.func,
 
-  /**
-   * ref methods
-   *
-   * * 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 methods
+   *
+   * * 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
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.67",
+  "version": "1.3.68",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.3.68
+- \[Changed\]: PagingInfo – Update design
+- \[Changed\]: InputBase – Add func auto scale width, apply for NumberInput, TextInput
+- \[Changed\]: PagingSelector – Update functions in PagingSelector
+- \[Changed\]: NumberInput, MoneyInput, PhoneInput – Add prop labelProps
+
 ## 1.3.67
 - \[Added\]: Icon – ListAlt, PersonSetting, Undo, ViewHeadline
 - \[Changed\]: OptionWrapper – Update OptionWrapper

package/styles/utils.js

@@ -1,20 +1,20 @@
 import { color as colors } from './colors';
-/**
- * Parse to pixel
- *
- * @param {number} vl
- * @returns {string}
+/**
+ * Parse to pixel
+ *
+ * @param {number} vl
+ * @returns {string}
  */
 
 export const parseToPixel = vl => {
   if (!vl) return '1px';
   return typeof vl === 'string' ? vl : `${vl}px`;
 };
-/**
- * Get color from CORE colors
- *
- * @param {string} cl
- * @returns {string}
+/**
+ * Get color from CORE colors
+ *
+ * @param {string} cl
+ * @returns {string}
  */
 
 export const getColor = cl => {

package/utils/classNames.js

@@ -0,0 +1,30 @@
+const hasOwn = {}.hasOwnProperty;
+
+const classNames = (...args) => {
+  args = args.flat();
+  let classes = [];
+
+  for (let i = 0; i < args.length; i++) {
+    let arg = args[i];
+    if (!arg) continue;
+    let argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (argType === 'object') {
+      if (arg.toString === Object.prototype.toString) {
+        for (let key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes.push(key);
+          }
+        }
+      } else {
+        classes.push(arg.toString());
+      }
+    }
+  }
+
+  return classes.join(' ');
+};
+
+export default classNames;

package/utils/index.js

@@ -19,4 +19,5 @@ export { default as useOnClickOutside } from './useOnClickOutside';
 export { default as usePortal } from './usePortal';
 export * from './validate';
 export { default as onValidate } from './validate';
+export { default as classNames } from './classNames';
 export default utils;

package/utils/useInput.js

@@ -1,13 +1,6 @@
 import { useState, useRef } from 'react';
 
-const useInput = props => {
-  let {
-    defaultValue,
-    valueProp,
-    delayOnChange,
-    onChange,
-    onInput
-  } = props || {};
+const useInput = (defaultValue, valueProp, onChange, onInput, delayOnChange) => {
   const [value, setValue] = useState(defaultValue || valueProp);
   const timer = useRef(null);
   delayOnChange = Number(delayOnChange || 0);