diginet-core-ui 1.4.39 → 1.4.40

package/components/paging/page-selector.js

@@ -1,381 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon } from "./..";
-import OptionWrapper from "../others/option-wrapper";
-import { getGlobal } from "../../global";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { bgColor, borderTop, boxBorder, displayFlex, flexRow, itemsCenter, parseWidthHeight } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { classNames, getProp, useElementSize } from "../../utils";
-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 PagingSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  action = {},
-  className,
-  currentPage,
-  hideEllipsis,
-  hideWithPage,
-  id,
-  itemsPerPage,
-  onChangePage,
-  onChangePerPage,
-  onChangingPage,
-  onChangingPerPage,
-  style,
-  totalItems
-}, reference) => {
-  const delayOnInput = getGlobal('delayOnInput');
-  const ref = useRef(null);
-  const timer = useRef(null);
-  const currentPageRef = useRef(currentPage);
-  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 theme = useTheme();
-  const _PageSelectorCSS = PageSelectorCSS(theme);
-  const lastPage = getLastPage(totalItemsState, itemsPerPageState);
-  const _onChangePage = async ({
-    page,
-    e,
-    changeBy
-  }) => {
-    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;
-    }
-    setDisablePrevState(disablePrev);
-    setDisableNextState(disableNext);
-    if (page === currentPageState) return;
-    if (onChangingPage) {
-      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;
-        setCurrentPageState(currentPageState);
-        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
-    if (lastPage === 1) {
-      disableNext = true;
-    }
-    if (onChangingPerPage) {
-      const event = {
-        cancel: false,
-        prevPerPage: itemsPerPageState,
-        newPerPage: per
-      };
-      await onChangingPerPage(event);
-      if (event.cancel) {
-        return;
-      }
-    }
-    setItemsPerPageState(per);
-    // currentPageRef.current = 0;
-    // setCurrentPageState(0);
-    _onChangePage({
-      page: 0
-    });
-    setDisablePrevState(true);
-    setDisableNextState(disableNext);
-    if (onChangePerPage) onChangePerPage(per);
-  };
-  useEffect(() => {
-    setTotalItemsState(totalItems);
-  }, [totalItems]);
-  useEffect(() => {
-    _onChangePerPage(itemsPerPage);
-  }, [itemsPerPage]);
-  useEffect(() => {
-    _onChangePage({
-      page: currentPage,
-      changeBy: 'currentPage'
-    });
-  }, [currentPage]);
-  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, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      onChangePage: page => _onChangePage({
-        page: page,
-        changeBy: 'ref'
-      }),
-      onChangePerPage: per => _onChangePerPage(per),
-      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, {
-      key: key,
-      css: theme.typography.paragraph2,
-      circular: true,
-      viewType: isSelected ? 'filled' : 'text',
-      size: 'small',
-      color: 'primary',
-      style: {
-        fontWeight: 'normal'
-      },
-      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(count).keys()];
-    const halfArrLength = Math.floor(count / 2);
-    const quarterArrLength = Math.floor(count / 2.5);
-    const showEllipsis = !hideEllipsis && count !== lastPage && count >= 5;
-    const showSelector = checkShowSelector();
-    return showSelector && jsx("div", {
-      css: _PageSelectorCSS,
-      ref: node => {
-        ref.current = node;
-        refSize(node);
-      },
-      id: id,
-      style: style,
-      className: classNames('DGN-UI-PagingSelector', className)
-    }, jsx(ButtonIcon, {
-      circular: true,
-      viewType: 'text',
-      size: 'small',
-      name: 'ArrowLeft',
-      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,
-            e: 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 === lastPage ? lastPage : currentPageRef.current + 1;
-        if (timer.current) {
-          clearTimeout(timer.current);
-        }
-        timer.current = setTimeout(() => {
-          _onChangePage({
-            page: currentPageRef.current,
-            e: e
-          });
-        }, delayOnInput);
-      }
-    }));
-  }, [className, hideEllipsis, hideWithPage, id, style, componentWidth, currentPageState, disableNextState, disablePrevState, itemsPerPageState, theme, totalItemsState]);
-}));
-const PageSelectorCSS = ({
-  colors,
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${itemsCenter};
-    ${boxBorder};
-    ${parseWidthHeight('100%', 40)};
-    padding: ${spacing([1])};
-    ${bgColor(getProp(colors, 'system/standard'))};
-    ${borderTop(1, getProp(colors, 'line/system'))};
-`;
-PagingSelector.defaultProps = {
-  className: '',
-  currentPage: 0,
-  hideEllipsis: false,
-  hideWithPage: 'none',
-  style: {},
-  totalItems: 0
-};
-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
-   */
-  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
-   *
-   * * 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
-   */
-};
-export { PagingSelector };
-export default OptionWrapper(PagingSelector);

package/components/paper/index.js

@@ -1,112 +0,0 @@
-/** @jsxRuntime classic */
-import { css } from '@emotion/core';
-import { bool, func, node, number, oneOfType, string } from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, border, borderRadius, parseMaxHeight, parseWidth, parseWidthHeight, shadowSmall } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { classNames, getProp, renderHTML } from "../../utils";
-const Paper = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  width,
-  height,
-  mapping,
-  bg,
-  className,
-  square,
-  scrollAble,
-  children,
-  ...props
-}, reference) => {
-  if (!reference) reference = useRef(null);
-  const ref = useRef(null);
-  const theme = useTheme();
-  const PaperRoot = css`
-            ${parseWidthHeight(width, height)};
-            ${border(1, getProp(theme.colors, 'line/normal'))};
-            ${borderRadius(4)};
-            ${bgColor(getProp(theme.colors, bg, bg))};
-            ${shadowSmall};
-            &.square {
-                ${borderRadius(0)};
-            }
-            &.scroll-able {
-                ${parseMaxHeight(height)};
-                overflow-y: auto;
-                &::-webkit-scrollbar {
-                    ${parseWidth(8)};
-                    ${bgColor(getProp(theme.colors, 'system/standard'))};
-                    ${borderRadius(4)};
-                }
-                &::-webkit-scrollbar-thumb {
-                    ${borderRadius(4)};
-                    mix-blend-mode: normal;
-                    ${bgColor(getProp(theme.colors, 'fill/disabled'))};
-                    background-clip: content-box;
-                }
-            }
-        `;
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {}; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  useEffect(() => {
-    if (square) {
-      ref.current.classList.add('square');
-    }
-    return () => {
-      if (square && ref.current) {
-        ref.current.classList.remove('square');
-      }
-    };
-  }, [square]);
-  useEffect(() => {
-    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');
-      }
-    };
-  }, [scrollAble]);
-  const PaperView = useMemo(() => renderHTML(children, mapping, {
-    ref,
-    css: PaperRoot,
-    className: classNames(className, scrollAble && 'scroll-able'),
-    ...props
-  }), [children, theme]);
-  return PaperView;
-}));
-Paper.defaultProps = {
-  width: 240,
-  height: 240,
-  mapping: 'div',
-  bg: 'system/standard',
-  className: '',
-  square: false,
-  scrollAble: false
-};
-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
-};
-export default Paper;

package/components/popover/body.js

@@ -1,86 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
-import { bgColor, border, borderRadius, displayFlex, flexCol, order, overflowAuto, parseWidth, positionRelative } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-const PopoverBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'PopoverBody'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    id,
-    style
-  } = props;
-  const ref = useRef(null);
-  const _PopoverBodyCSS = PopoverBodyCSS(theme);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return jsx("div", {
-    css: _PopoverBodyCSS,
-    ref: ref,
-    id: id,
-    style: style,
-    className: classNames('DGN-UI-Popover-Body', className)
-  }, children);
-}));
-const PopoverBodyCSS = ({
-  colors,
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexCol};
-    ${positionRelative};
-    ${overflowAuto};
-    padding: ${spacing([4])};
-    ${order(2)};
-    &::-webkit-scrollbar {
-        ${parseWidth(24)};
-    }
-    &::-webkit-scrollbar-thumb {
-        ${borderRadius(10)};
-        mix-blend-mode: normal;
-        ${bgColor(getProp(colors, 'fill/scrollbar_rest'))};
-        background-clip: content-box;
-        ${border(8, 'transparent')};
-        :hover {
-            ${bgColor(getProp(colors, 'fill/scrollbar_hover'))};
-        }
-    }
-`;
-
-// PopoverBody.defaultProps = {
-//     className: '',
-//     style: {},
-// };
-
-PopoverBody.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** Style inline of component. */
-  style: PropTypes.object
-};
-export { PopoverBody };
-export default OptionWrapper(PopoverBody);

package/components/popover/footer.js

@@ -1,84 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
-import { bgColor, borderRadius, boxBorder, displayFlex, flexRow, itemsCenter, justifyEnd, order, parseMinHeight, parseWidth, positionRelative } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-const PopoverFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'PopoverFooter'
-  });
-  const {
-    action = {},
-    boxShadow,
-    children,
-    className,
-    id,
-    style
-  } = props;
-  const ref = useRef(null);
-  const _PopoverFooterCSS = PopoverFooterCSS(boxShadow, theme);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return jsx("div", {
-    css: _PopoverFooterCSS,
-    ref: ref,
-    id: id,
-    style: style,
-    className: classNames('DGN-UI-Popover-Footer', className)
-  }, children);
-}));
-const PopoverFooterCSS = (boxShadow, {
-  colors,
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${positionRelative};
-    ${itemsCenter};
-    ${justifyEnd};
-    ${boxBorder};
-    ${parseWidth('100%')};
-    ${parseMinHeight(56)};
-    padding: ${spacing([4])};
-    ${bgColor(getProp(colors, 'system/standard'))};
-    ${borderRadius('0px 0px 4px 4px')};
-    box-shadow: ${boxShadow ? '0px -2px 2px rgba(0, 0, 0, 0.1)' : 'none'};
-    ${order(3)};
-`;
-
-// PopoverFooter.defaultProps = {
-//     className: '',
-//     style: {},
-//     boxShadow: true,
-// };
-
-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
-};
-export { PopoverFooter };
-export default OptionWrapper(PopoverFooter);