diginet-core-ui 1.3.24 → 1.3.29

package/components/paging/page-info.js

@@ -1,275 +1,332 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, useEffect, useMemo, forwardRef as _nonUse } from 'react';
+import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import theme from '../../theme/settings';
-import { Typography } from '../';
-import { ArrowLeft, ArrowRight } from '../../icons';
-import locale from '../../locale';
+import { ButtonIcon, NumberInput, Dropdown } from '../';
 import { getGlobal } from '../../global';
-let timer = null;
-const PagingInfo = /*#__PURE__*/memo(({
-  fullWidth,
-  size,
+import { typography } from '../../styles/typography';
+import { color as colors } from '../../styles/colors';
+import { alignCenter, borderBox, borderRadius4px, flexRow, noMargin, noPadding, border, textCenter, outlineNone, backgroundTransparent, cursorPointer } from '../../styles/general';
+import { hexToRGBA } from '../../styles/color-helper';
+const {
+  paragraph2
+} = typography;
+const {
+  system: {
+    active
+  },
+  semantic: {
+    info
+  },
+  line: {
+    system,
+    normal
+  },
+  text: {
+    main
+  }
+} = colors;
+
+const getLastPage = (totalItems, itemsPerPage) => {
+  let _lastPage = 0;
+
+  if (totalItems && totalItems >= 0 && itemsPerPage && itemsPerPage > 0) {
+    _lastPage = Math.ceil(totalItems / itemsPerPage);
+    return _lastPage;
+  }
+
+  return _lastPage + 1;
+};
+
+let timeout = null;
+const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  typeShort,
   bgColor,
   style,
-  language,
-  currentPage,
+  className,
   totalItems,
   itemsPerPage,
-  listItemsPerPage,
+  currentPage,
+  listPerPage,
   onChangePage,
-  onChangeItemsPerPage,
-  ...props
-}) => {
-  const pageNumberRef = useRef(null);
-  const ItemsPerPageRef = useRef(null);
-  const totalItemRef = useRef(null);
-  let currentPageNumber = null;
+  onChangePerPage
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const [totalItemsState, setTotalItemsState] = useState(totalItems);
+  const [itemsPerPageState, setItemsPerPageState] = useState(itemsPerPage || listPerPage[0] || 10);
+  const [currentPageState, setCurrentPageState] = useState(currentPage);
+  const [listPerPageState, setListPerPageState] = useState(listPerPage);
+  const [disablePrevState, setDisablePrevState] = useState(true);
+  const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
   const pagingInfo = css`
-        display: ${fullWidth ? '' : 'inline-'}flex;
-        align-items: center;
-        font-family: ${theme.typography.fontFamily};
-        font-size: ${size === 'small' ? '14px' : '16px'};
+        ${flexRow}
+        ${alignCenter}
+        ${paragraph2}
+        ${borderBox}
+        ${border(1, system)}
+        height: 40px;
+        border-left: none;
+        border-right: none;
+        padding: 4px 0;
         background-color: ${bgColor};
-    `;
-  const totalPage = css`
-        display: flex;
-        align-items: center;
-    `;
-  const iconPageCss = css`
-        display: flex;
-        cursor: pointer;
-    `;
-  const pageNumber = css`
-        display: flex;
-        margin: 0 ${size === 'small' ? 5 : 7}px;
-        font-family: inherit;
-        font-style: normal;
-        font-weight: 500;
-        font-size: inherit;
-        color: ${theme.colors.primary};
-    `;
-  const currentPageNum = css`
-        outline: none;
-        margin-right: 5px;
-        border-bottom: 1px solid transparent;
-        text-align: center;
-        min-width: 27px;
-        border-bottom: 1px solid ${theme.colors.primary};
-        &:focus {
-            border-bottom-color: ${theme.colors.primary};
+        color: ${main};
+        .inputPage {
+            ${noMargin}
+            ${textCenter}
+            width: 1%;
+            min-width: 24px;
+            .DGN-UI-InputBase {
+                ${noPadding}
+                input {
+                    ${paragraph2}
+                    ${textCenter}
+                    color: ${active};
+                }
+            }
+        }
+        .slash {
+            margin: 0 4px;
+        }
+        .txt-line-number {
+            margin-left: 16px;
+        }
+        .DGN-UI-Dropdown {
+            margin-bottom: 0;
+            margin-left: ${typeShort ? 0 : '8px'};
+            min-width: 56px;
+            .DGN-UI-Dropdown-Form {
+                min-height: 32px;
+                padding: 0 0 0 8px;
+                input {
+                    ${paragraph2}
+                    ${noPadding}
+                    ${cursorPointer}
+                }
+                .DGN-UI-Dropdown-Icon {
+                    margin-left: 6px;
+                    margin-right: 6px;
+                }
+            }
+        }
+        /* .pagePer {
+            ${borderRadius4px}
+            ${borderBox}
+            ${paragraph2}
+            ${outlineNone}
+            ${backgroundTransparent}
+            ${border(1, normal)}
+            color: ${active};
+            margin-left: ${typeShort ? 0 : '8px'};
+            padding: 6px 6px 6px 8px;
+            min-width: 56px;
+            min-height: 32px;
+            width: max-content;
+            &:hover {
+                border-color: ${active};
+                background-color: ${hexToRGBA(active, 0.8)};
+            }
+            &:active,
+            &:focus {
+                border-color: ${info};
+            }
+            option {
+                ${paragraph2}
+                color: ${active};
+                background-color: white;
+            }
+        } */
+        .total-items {
+            margin-left: ${typeShort ? 0 : '16px'};
         }
-    `;
-  const lineNumberStyle = css`
-        display: inline-flex;
-        outline: none;
-        color: ${theme.colors.input};
-        margin: 0 16px;
-        font-family: inherit;
-    `;
-  const listItemsPerPageStyle = css`
-        height: 19px;
-        min-width: 44px;
-        width: max-content;
-        font-family: inherit;
-        font-style: normal;
-        font-weight: 500;
-        font-size: inherit;
-        color: ${theme.colors.primary};
-        background-color: inherit;
-        border: none;
-        outline: none;
     `;
 
-  const onChangePageHandler = page => {
-    const currentPageInput = pageNumberRef.current.textContent;
-    const newPage = +currentPageInput + page;
-    const lastPage = +pageNumberRef.current.parentNode.lastChild.textContent.replace('/ ', '');
-    if (newPage < 1 || newPage > lastPage) return;
-    pageNumberRef.current.textContent = newPage;
-    currentPageNumber = newPage;
-    !!onChangePage && onChangePage(newPage);
-  };
+  const _onChangePage = (page, isInit = false) => {
+    const lastPage = getLastPage(totalItemsState, itemsPerPageState);
+    let disablePrev = false;
+    let disableNext = false; // If last page = 1. Disable all
 
-  const onChangePageNumber = e => {
-    let value = e.target.textContent;
-    const lastPage = +pageNumberRef.current.parentNode.lastChild.textContent.replace('/ ', '');
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => {
-      if (value !== '' && !isNaN(value)) {
-        if (value.includes('.')) {
-          const index = value.indexOf('.');
-
-          if (index !== -1) {
-            value = value.slice(0, index);
-          }
-        }
+    if (lastPage === 1) {
+      disablePrev = true;
+      disableNext = true;
+    } // If current page = last page. Disable Next and Last
 
-        if (+value < 0) {
-          value = -value;
-        } else if (+value === 0) {
-          value = 1;
-        }
 
-        if (+value > lastPage) {
-          value = lastPage;
-        }
-      } else {
-        value = currentPage;
-      }
+    if (page + 1 >= lastPage) {
+      disableNext = true;
+    } // If current page = 0. Disable Previous and First
 
-      pageNumberRef.current.textContent = +value;
 
-      if (currentPageNumber !== +value) {
-        currentPageNumber = +value;
-        !!onChangePage && onChangePage(+value);
-      }
-    }, [700]);
+    if (page === 0) {
+      disablePrev = true;
+    }
+
+    setCurrentPageState(page);
+    setDisablePrevState(disablePrev);
+    setDisableNextState(disableNext);
+    if (onChangePage && !isInit) onChangePage(page);
   };
 
-  const onChangeItemsPerPageHandler = e => {
-    const value = +e.target.value;
-    const currentPageInput = +pageNumberRef.current.textContent;
-    const newLastPage = Math.ceil(totalItems / value);
-    pageNumberRef.current.parentNode.lastChild.textContent = '/ ' + newLastPage;
+  const _onChangePerPage = per => {
+    const lastPage = getLastPage(totalItemsState, per);
+    per = parseInt(per, 10);
+    let disableNext = false; // If last page = 1. Disable all
 
-    if (currentPageInput > newLastPage) {
-      onChangePageHandler(newLastPage - currentPageInput);
+    if (lastPage === 1) {
+      disableNext = true;
     }
 
-    if (onChangeItemsPerPage) onChangeItemsPerPage(value, e.target);
+    setItemsPerPageState(per);
+    setCurrentPageState(0);
+    setDisablePrevState(true);
+    setDisableNextState(disableNext);
+    if (onChangePerPage) onChangePerPage(per);
+  };
+
+  const onTypePaging = (value, isInit = false) => {
+    clearTimeout(timeout);
+    const lastPage = getLastPage(totalItemsState, itemsPerPageState);
+    const page = !value || parseInt(value) < 0 ? 1 : parseInt(value) > lastPage ? lastPage : parseInt(value);
+    currentPage = page - 1;
+    timeout = setTimeout(() => {
+      _onChangePage(page - 1, isInit);
+    }, 500);
   };
 
   const checkKeyPress = e => {
-    if (!/(\d)|(Arrow)|(Delete)|(Backspace)/.test(e.key)) {
+    if (/,/.test(e.key)) {
       e.preventDefault();
     }
   };
 
   useEffect(() => {
-    const currentPageInput = pageNumberRef.current.textContent;
-    const itemsPerPageInput = listItemsPerPage.some(i => +i === +itemsPerPage) ? itemsPerPage : listItemsPerPage[0];
-    const newLastPage = Math.ceil(totalItems / itemsPerPageInput);
-
-    if (currentPageInput > newLastPage) {
-      onChangePageHandler(newLastPage - currentPageInput);
-    }
-
-    pageNumberRef.current.parentNode.lastChild.textContent = '/ ' + newLastPage;
-    ItemsPerPageRef.current.value = itemsPerPageInput;
-    totalItemRef.current.textContent = totalItems;
+    setTotalItemsState(totalItems);
+  }, [totalItems]);
+  useEffect(() => {
+    timeout = setTimeout(() => {
+      _onChangePage(0, true);
+    }, 500);
+  }, [totalItemsState, itemsPerPageState]);
+  useEffect(() => {
+    setItemsPerPageState(itemsPerPage);
   }, [itemsPerPage]);
   useEffect(() => {
-    const currentPageInput = +pageNumberRef.current.textContent;
-    const itemsPerPageInput = ItemsPerPageRef.current.value;
-    const newLastPage = Math.ceil(totalItems / itemsPerPageInput);
+    setCurrentPageState(currentPage);
+    onTypePaging(currentPage + 1, true);
+  }, [currentPage]);
+  useEffect(() => {
+    setListPerPageState(listPerPage);
+  }, [listPerPage]);
+  useImperativeHandle(ref, () => {
+    const currentRef = ref.current || {};
 
-    if (currentPageInput > newLastPage) {
-      onChangePageHandler(newLastPage - currentPageInput);
-    }
+    currentRef.onChangePage = page => _onChangePage(page);
 
-    pageNumberRef.current.parentNode.lastChild.textContent = '/ ' + newLastPage;
-    totalItemRef.current.textContent = totalItems;
-    ItemsPerPageRef.current.addEventListener('change', onChangeItemsPerPageHandler);
-    return () => {
-      ItemsPerPageRef.current && ItemsPerPageRef.current.removeEventListener('change', onChangeItemsPerPageHandler);
-    };
-  }, [totalItems]);
-  useEffect(() => {
-    if (typeof currentPage === 'number') {
-      const lastPage = +pageNumberRef.current.parentNode.lastChild.textContent.replace('/ ', '');
-      const currentPageInput = pageNumberRef.current.textContent;
-
-      if (currentPage > lastPage && currentPageInput) {
-        onChangePageHandler(lastPage - +currentPageInput);
-      } else if (currentPage < 1) {
-        pageNumberRef.current.textContent = 1;
-        !!onChangePage && onChangePage(1);
-      } else {
-        pageNumberRef.current.textContent = currentPage;
-      }
-    }
-  }, [currentPage]);
-  const TotalPageComp = useMemo(() => {
-    return jsx("div", {
-      css: totalPage
-    }, jsx("div", {
-      css: iconPageCss,
-      onClick: () => onChangePageHandler(-1)
-    }, jsx(ArrowLeft, {
-      height: size === 'small' ? 20 : 24,
-      width: size === 'small' ? 20 : 24,
-      viewBox: true
-    })), jsx("div", {
-      css: pageNumber
-    }, jsx("div", {
-      ref: pageNumberRef,
-      css: currentPageNum,
-      contentEditable: true,
-      onInput: onChangePageNumber,
-      onKeyDown: checkKeyPress
-    }), jsx("span", null)), jsx("div", {
-      css: iconPageCss,
-      onClick: () => onChangePageHandler(1)
-    }, jsx(ArrowRight, {
-      height: size === 'small' ? 20 : 24,
-      width: size === 'small' ? 20 : 24,
-      viewBox: true
-    })));
-  }, [size]);
-  const LineNumber = useMemo(() => {
+    currentRef.onChangePerPage = per => _onChangePerPage(per);
+
+    currentRef.setTotalItems = items => setTotalItemsState(items);
+
+    return currentRef;
+  });
+  return useMemo(() => {
+    const lastPage = getLastPage(totalItemsState, itemsPerPageState);
+    let listPerPageData = [];
+    listPerPageState.map(item => listPerPageData = [...listPerPageData, {
+      name: item,
+      id: item
+    }]);
     return jsx("div", {
-      css: lineNumberStyle
-    }, jsx(Typography, {
-      type: size === 'small' ? 'p2' : 'p1'
-    }, getGlobal('lineNumber')), ": ", jsx("select", {
-      css: listItemsPerPageStyle,
-      defaultValue: itemsPerPage,
-      ref: ItemsPerPageRef
-    }, listItemsPerPage.map((list, index) => jsx("option", {
-      key: list + index,
-      value: list
-    }, list))));
-  }, [listItemsPerPage]);
-  const TotalItemsComp = useMemo(() => {
-    return jsx(Typography, {
-      type: size === 'small' ? 'p2' : 'p1'
-    }, getGlobal('total'), ": ", jsx("span", {
-      ref: totalItemRef
-    }));
-  }, [size]);
-  return jsx("div", _extends({
-    css: pagingInfo,
-    style: style
-  }, props), TotalPageComp, LineNumber, TotalItemsComp);
-});
+      ref: ref,
+      css: pagingInfo,
+      style: style,
+      className: ['DGN-UI-PageInfo', className].join(' ').trim().replace(/\s+/g, ' ')
+    }, jsx(ButtonIcon, {
+      circular: true,
+      viewType: 'text',
+      size: 'small',
+      name: 'ArrowDoubleLeft',
+      disabled: disablePrevState,
+      onClick: () => _onChangePage(0)
+    }), jsx(ButtonIcon, {
+      circular: true,
+      viewType: 'text',
+      size: 'small',
+      name: 'ArrowLeft',
+      disabled: disablePrevState,
+      onClick: () => _onChangePage(currentPageState - 1)
+    }), jsx(NumberInput, {
+      disabledNegative: true,
+      className: 'inputPage',
+      value: currentPageState ? String(currentPageState + 1) : '1',
+      min: 1,
+      max: lastPage,
+      onKeyDown: checkKeyPress,
+      onChange: e => onTypePaging(e === null || e === void 0 ? void 0 : e.value)
+    }), "/", ` ${lastPage}`, jsx(ButtonIcon, {
+      circular: true,
+      viewType: 'text',
+      size: 'small',
+      name: 'ArrowRight',
+      disabled: disableNextState,
+      onClick: () => _onChangePage(currentPageState + 1)
+    }), jsx(ButtonIcon, {
+      circular: true,
+      viewType: 'text',
+      size: 'small',
+      name: 'ArrowDoubleRight',
+      disabled: disableNextState,
+      onClick: () => _onChangePage(lastPage - 1)
+    }), typeShort && jsx("span", {
+      className: 'slash'
+    }, "|"), !typeShort && jsx("span", {
+      className: "txt-line-number"
+    }, getGlobal('lineNumber')), jsx(Dropdown, {
+      viewType: 'outlined',
+      dataSource: listPerPageData,
+      defaultValue: itemsPerPageState,
+      onChange: e => _onChangePerPage(e === null || e === void 0 ? void 0 : e.value),
+      inputStyle: {
+        width: `${Math.max(...listPerPageState).toString().length}ch`
+      },
+      inputProps: {
+        readOnly: true
+      } // dropdownItemStyle={{padding: '4px 8px', minHeight: 18, color: active}}
+      ,
+      dropdownItemStyle: {
+        color: active
+      }
+    }), typeShort && jsx("span", {
+      className: 'slash'
+    }, "|"), jsx("span", {
+      className: 'total-items'
+    }, !typeShort ? getGlobal('total') + ':' : '', " ", totalItemsState));
+  }, [typeShort, bgColor, style, className, totalItemsState, itemsPerPageState, currentPageState, listPerPageState, disablePrevState, disableNextState]);
+}));
 PagingInfo.defaultProps = {
-  size: 'medium',
+  typeShort: false,
   bgColor: '#FFF',
-  language: locale.get(),
-  fullWidth: false,
-  currentPage: 1,
+  style: {},
+  className: '',
   totalItems: 0,
-  itemsPerPage: 10,
-  listItemsPerPage: [10, 20, 40, 50]
+  currentPage: 0,
+  listPerPage: [10, 15, 20, 30, 50]
 };
 PagingInfo.propTypes = {
-  /** allows maximum screen width if true */
-  fullWidth: PropTypes.bool,
+  /** compact type for mobile */
+  typeShort: PropTypes.bool,
 
   /** background color for paging */
   bgColor: PropTypes.string,
 
-  /** size of paging */
-  size: PropTypes.oneOf(['small', 'medium']),
+  /** style inline for Paging */
+  style: PropTypes.object,
 
-  /** language to display text on paging */
-  language: PropTypes.oneOf(['vi', 'en']),
+  /** style inline for Paging */
+  className: PropTypes.string,
 
   /** current of paging */
   currentPage: PropTypes.number,
@@ -281,18 +338,12 @@ PagingInfo.propTypes = {
   itemsPerPage: PropTypes.number,
 
   /** the list to choose the number of elements to display per page */
-  listItemsPerPage: PropTypes.array,
-
-  /** style inline for Paging */
-  style: PropTypes.object,
+  listPerPage: PropTypes.array,
 
   /** the function will run after change page number */
   onChangePage: PropTypes.func,
 
   /** the function will run after change quantity on per page */
-  onChangeItemsPerPage: PropTypes.func,
-
-  /** any props else */
-  props: PropTypes.func
+  onChangePerPage: PropTypes.func
 };
 export default PagingInfo;

package/components/paging/page-selector.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -7,6 +5,7 @@ import React, { memo, useRef, useState, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from '../../theme/settings';
+import { typography } from '../../styles/typography';
 const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   size,
   style,
@@ -25,9 +24,7 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [paging, setPaging] = useState([1]);
   const PageItemNum = css`
         color: #FFF;
-        font-family: ${theme.typography.fontFamily};
-        font-style: normal;
-        font-weight: bold;
+        ${typography.heading3};
         z-index: 1502;
     `;
   const morePaging = css`
@@ -238,13 +235,13 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: PageItemNum
     }, page)))), jsx("p", null, "...")) : pageNum));
   });
-  return jsx("div", _extends({}, props, {
+  return jsx("div", { ...props,
     ref: ref,
     style: {
       display: 'inline-flex',
       ...style
     }
-  }), paging.map((pageNum, index) => jsx(RenderPageItem, {
+  }, paging.map((pageNum, index) => jsx(RenderPageItem, {
     key: index,
     pageNum: pageNum,
     style: pageItemStyle

package/components/popover/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -8,7 +6,7 @@ import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { randomString } from '../../utils';
-import theme from '../../theme/settings';
+import { typography } from "../../styles/typography";
 const timer = {};
 const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
@@ -55,7 +53,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: block;
         position: relative;
         background-color: ${bgColor};
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph1};
         width: 100%;
         height: 100%;
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
@@ -360,10 +358,11 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           inset: 0,
           pointerEvents: fullScreen ? 'initial' : 'none'
         }
-      }, jsx("div", _extends({
+      }, jsx("div", {
         css: PopoverContainer,
-        ref: ref
-      }, props), jsx("div", {
+        ref: ref,
+        ...props
+      }, jsx("div", {
         css: PopoverRoot,
         style: style
       }, arrow && jsx("span", {