diginet-core-ui 1.3.55 → 1.3.56

package/components/paging/page-selector2.js

@@ -0,0 +1,373 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { getGlobal } from '../../global';
+import theme from '../../theme/settings';
+import { alignCenter, borderBox, flexRow, parseHeight } from '../../styles/general';
+import { ButtonIcon } from '..';
+import { useElementSize } from '../../utils/useElementSize';
+const {
+  colors: {
+    system: {
+      white
+    },
+    line: {
+      system
+    }
+  },
+  typography: {
+    paragraph2
+  },
+  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(({
+  className,
+  currentPage,
+  hideEllipsis,
+  id,
+  itemsPerPage,
+  onChangePage,
+  onChangePerPage,
+  onChangingPage,
+  onChangingPerPage,
+  style,
+  totalItems
+}, reference) => {
+  const ref = useRef(null);
+  const timer = useRef(null);
+  const currentPageRef = useRef(null);
+  const [totalItemsState, setTotalItemsState] = useState(totalItems);
+  const [itemsPerPageState, setItemsPerPageState] = useState(itemsPerPage || 10);
+  const [currentPageState, setCurrentPageState] = useState(currentPage);
+  const [disablePrevState, setDisablePrevState] = useState(true);
+  const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
+  const [refSize, {
+    width: componentWidth
+  }] = useElementSize();
+  const lastPage = getLastPage(totalItemsState, itemsPerPageState);
+
+  const _onChangePage = async (page, isInit = false, e) => {
+    let disablePrev = false;
+    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 (page + 1 >= lastPage) {
+      disableNext = true;
+    } // If current page = 0. Disable Previous and First
+
+
+    if (page === 0) {
+      disablePrev = true;
+    }
+
+    if (onChangingPage && !isInit) {
+      const event = { ...e,
+        cancel: false,
+        prevPage: currentPageState,
+        newPage: page
+      };
+      await onChangingPage(event);
+
+      if (event.cancel) {
+        if (e !== null && e !== void 0 && e.reset) e.reset();
+        setCurrentPageState(currentPageState);
+        return;
+      }
+    }
+
+    currentPageRef.current = page;
+    setCurrentPageState(page);
+    setDisablePrevState(disablePrev);
+    setDisableNextState(disableNext);
+    if (onChangePage && !isInit) onChangePage(page);
+  };
+
+  const _onChangePerPage = async per => {
+    const lastPage = getLastPage(totalItemsState, per);
+    per = parseInt(per, 10);
+    let disableNext = false; // If last page = 1. Disable all
+
+    if (lastPage === 1) {
+      disableNext = true;
+    }
+
+    if (onChangingPerPage) {
+      const event = {
+        cancel: false,
+        prevPerPage: itemsPerPageState,
+        newPerPage: per
+      };
+      await onChangingPerPage(event);
+
+      if (event.cancel) {
+        return;
+      }
+    }
+
+    currentPageRef.current = 0;
+    setItemsPerPageState(per);
+    setCurrentPageState(0);
+    setDisablePrevState(true);
+    setDisableNextState(disableNext);
+    if (onChangePerPage) onChangePerPage(per);
+  };
+
+  useEffect(() => {
+    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);
+  }, [itemsPerPage]);
+  useEffect(() => {
+    setCurrentPageState(currentPage);
+
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+
+    timer.current = setTimeout(() => {
+      _onChangePage(currentPage, true);
+    }, delayOnInput);
+  }, [currentPage]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {
+      onChangePage: page => _onChangePage(page),
+      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;
+  });
+
+  const renderButton = (key, page, isSelected, customDisplay) => {
+    if (page >= lastPage || page < 0) return;
+    return jsx(ButtonIcon, {
+      key: key,
+      css: ButtonIconCSS,
+      circular: true,
+      viewType: isSelected ? 'filled' : 'text',
+      size: 'small',
+      color: 'primary',
+      style: {
+        fontWeight: 'normal'
+      },
+      onClick: e => page !== currentPageState && _onChangePage(page, false, e)
+    }, customDisplay || page + 1);
+  };
+
+  return useMemo(() => {
+    const count = componentWidth >= 368 ? 10 : componentWidth >= 208 ? 5 : 1;
+    const pageArr = Array.from(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", {
+      css: PageSelectorCSS,
+      ref: node => {
+        ref.current = node;
+        refSize(node);
+      },
+      id: id,
+      style: style,
+      className: ['DGN-UI-PagingSelector', className].join(' ').trim().replace(/\s+/g, ' ')
+    }, jsx(ButtonIcon, {
+      circular: true,
+      viewType: 'text',
+      size: 'small',
+      name: 'ArrowLeft',
+      disabled: disablePrevState,
+      onClick: e => {
+        currentPageRef.current = currentPageRef.current - 1;
+
+        if (timer.current) {
+          clearTimeout(timer.current);
+        }
+
+        timer.current = setTimeout(() => {
+          _onChangePage(currentPageRef.current, false, e);
+        }, delayOnInput);
+      }
+    }), pageArr.map((_, idx) => {
+      if (currentPageState < halfArrLength) {
+        // các trang đầu
+        if (showEllipsis) {
+          if (idx === count - 1 && lastPage - 1 >= 10) {
+            return renderButton(idx, lastPage - 1);
+          } else {
+            return renderButton(idx, idx, idx === currentPageState, idx === count - 2 && '...');
+          }
+        } else return renderButton(idx, idx, idx === currentPageState);
+      } else if (currentPageState >= lastPage - halfArrLength) {
+        // các trang cuối
+        if (showEllipsis) {
+          if (idx === 0) {
+            return renderButton(idx, idx);
+          } else {
+            return renderButton(idx, lastPage - count + idx, lastPage - count + idx === currentPageState, idx === 1 && '...');
+          }
+        } else {
+          return renderButton(idx, lastPage - count + idx, lastPage - count + idx === currentPageState);
+        }
+      } else {
+        // các trang giữa
+        if (idx < quarterArrLength) {
+          if (showEllipsis) {
+            if (idx === 0) {
+              return renderButton(idx, idx);
+            } else {
+              return renderButton(idx, currentPageState - quarterArrLength + idx, false, idx === 1 && '...');
+            }
+          } else return renderButton(idx, currentPageState - quarterArrLength + idx);
+        } else if (idx === quarterArrLength) {
+          return renderButton(idx, currentPageState, true);
+        } else {
+          if (showEllipsis) {
+            if (idx === count - 1) {
+              return renderButton(idx, lastPage - 1);
+            } else {
+              return renderButton(idx, currentPageState - quarterArrLength + idx, false, idx === count - 2 && '...');
+            }
+          } else return renderButton(idx, currentPageState - quarterArrLength + idx);
+        }
+      }
+    }), jsx(ButtonIcon, {
+      circular: true,
+      viewType: 'text',
+      size: 'small',
+      name: 'ArrowRight',
+      disabled: disableNextState,
+      onClick: e => {
+        currentPageRef.current = currentPageRef.current + 1;
+
+        if (timer.current) {
+          clearTimeout(timer.current);
+        }
+
+        timer.current = setTimeout(() => {
+          _onChangePage(currentPageRef.current, false, e);
+        }, delayOnInput);
+      }
+    }));
+  }, [id, style, className, hideEllipsis, totalItemsState, itemsPerPageState, currentPageState, disablePrevState, disableNextState, componentWidth]);
+}));
+const PageSelectorCSS = css`
+    ${flexRow};
+    ${alignCenter};
+    ${borderBox};
+    ${parseHeight(40)};
+    padding: ${spacing([1])};
+    background: ${white};
+    width: 100%;
+    border-top: 1px solid ${system};
+`;
+const ButtonIconCSS = css`
+    ${paragraph2};
+`;
+PagingSelector.defaultProps = {
+  style: {},
+  className: '',
+  totalItems: 0,
+  currentPage: 0,
+  hideEllipsis: false
+};
+PagingSelector.propTypes = {
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Specifies the current page. */
+  currentPage: PropTypes.number,
+
+  /** If `true`, hide ellipsis. */
+  hideEllipsis: PropTypes.bool,
+
+  /** 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
+   */
+  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
+   */
+  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
+   */
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
+};
+export default PagingSelector;

package/package.json

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

package/readme.md

@@ -38,6 +38,13 @@ npm test
 ```
 
 ## Changelog
+## 1.3.56
+- \[Changed\]: PagingSelector – Update PagingSelector with new design
+- \[Changed\]: NumberInput – Return e.valueString
+- \[Fixed\]: Modal – Fix bug not set overflow when close
+- \[Fixed\]: Dropdown – Replace keyExpr with renderSelectedItem; Fix clear icon show wrong when not use prop value
+- \[Fixed\]: Dropdown – Fix bug search, load more
+
 ## 1.3.55
 - \[Added\]: MenuIcon – MHRM09N1040
 - \[Added\]: Icon – CalendarAdd

package/utils/useElementSize.js

@@ -0,0 +1,48 @@
+import { useCallback, useLayoutEffect, useState } from 'react';
+import { useEventListener } from './useEventListener'; // Usage:
+// export const Component = () => {
+//     const [isVisible, setVisible] = useState(true);
+//     const [squareRef, { width, height }] = useElementSize();
+//     const toggleVisibility = () => setVisible(x => !x);
+//     return (
+//         <>
+//             <p>{`The square width is ${width}px and height ${height}px`}</p>
+//             <p>Try, resize your window and-or click on the button.</p>
+//             <button onClick={toggleVisibility}>{isVisible ? 'Hide' : 'Show'} square</button>
+//             {isVisible && (
+//                 <div
+//                     ref={squareRef}
+//                     style={{
+//                         width: '50%',
+//                         paddingTop: '50%',
+//                         backgroundColor: 'aquamarine',
+//                         margin: 'auto',
+//                     }}
+//                 />
+//             )}
+//         </>
+//     );
+// }
+
+export const useElementSize = () => {
+  // Mutable values like 'ref.current' aren't valid dependencies
+  // because mutating them doesn't re-render the component.
+  // Instead, we use a state as a ref to be reactive.
+  const [ref, setRef] = useState(null);
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0
+  }); // Prevent too many rendering using useCallback
+
+  const handleSize = useCallback(() => {
+    setSize({
+      width: (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0,
+      height: (ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0
+    });
+  }, [ref === null || ref === void 0 ? void 0 : ref.offsetHeight, ref === null || ref === void 0 ? void 0 : ref.offsetWidth]);
+  useEventListener('resize', handleSize);
+  useLayoutEffect(() => {
+    handleSize();
+  }, [ref === null || ref === void 0 ? void 0 : ref.offsetHeight, ref === null || ref === void 0 ? void 0 : ref.offsetWidth]);
+  return [setRef, size];
+};

package/utils/useEventListener.js

@@ -0,0 +1,45 @@
+import { useEffect, useLayoutEffect, useRef } from 'react'; // Usage:
+// export const Component = () => {
+//     // Define button ref
+//     const buttonRef = useRef < HTMLButtonElement > null;
+//     const onScroll = (event: Event) => {
+//         console.log("window scrolled!", event);
+//     };
+//     const onClick = (event: Event) => {
+//         console.log("button clicked!", event);
+//     };
+//     // example with window based event
+//     useEventListener("scroll", onScroll);
+//     // example with element based event
+//     useEventListener("click", onClick, buttonRef);
+//     return (
+//         <div style={{ minHeight: "200vh" }}>
+//             <button ref={buttonRef}>Click me</button>
+//         </div>
+//     );
+// };
+
+export const useEventListener = (eventName, handler, element) => {
+  // Create a ref that stores handler
+  const savedHandler = useRef(handler);
+  useLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  useEffect(() => {
+    // Define the listening target
+    const targetElement = (element === null || element === void 0 ? void 0 : element.current) || window;
+
+    if (!(targetElement && targetElement.addEventListener)) {
+      return;
+    } // Create event listener that calls handler function stored in ref
+
+
+    const eventListener = event => savedHandler.current(event);
+
+    targetElement.addEventListener(eventName, eventListener); // Remove event listener on cleanup
+
+    return () => {
+      targetElement.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element]);
+};

package/utils/useInput.js

@@ -7,7 +7,7 @@ const useInput = props => {
     delayOnChange,
     onChange,
     onInput
-  } = props;
+  } = props || {};
   const [value, setValue] = useState(defaultValue || valueProp);
   const timer = useRef(null);
   delayOnChange = Number(delayOnChange || 0);