diginet-core-ui 1.3.24

package/components/others/scrollbar/index.js

@@ -0,0 +1,95 @@
+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 } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { white, dark12, brand13 } from '../../../styles/colors';
+const getPosition = {
+  bottom: `
+		overflow-x: auto;
+		word-wrap: no-wrap;
+	`,
+  right: `
+		overflow-x: auto;
+	`,
+  left: `
+		overflow-x: auto;
+		direction: rtl;
+		text-align: left;
+	`
+};
+
+const scrollbar = ({
+  backgroundScroll,
+  backgroundThumb,
+  backgroundThumbHover,
+  children,
+  maxWidth,
+  maxHeight,
+  width,
+  height,
+  style,
+  position,
+  custom,
+  ...props
+}) => {
+  const Scrollbar = css`
+		position: relative;
+		display: block;
+		padding: 8px 8px;
+		margin-right: 8px;
+		max-width: ${maxWidth ? isNaN(maxWidth) ? maxWidth : maxWidth + 'px' : '100%'};
+		max-height: ${maxHeight ? isNaN(maxHeight) ? maxHeight : maxHeight + 'px' : '100%'};
+		&::-webkit-scrollbar{
+				width: ${width ? isNaN(width) ? width : width + 'px' : '8px'};
+				height: ${height ? isNaN(height) ? height : height + 'px' : '8px'};
+				background-color: ${backgroundScroll};
+		}
+		&::-webkit-scrollbar-thumb{
+				border-radius: 10px;
+				mix-blend-mode: normal;
+				background-color: ${backgroundThumb};
+				background-clip: content-box;
+		}
+		&::-webkit-scrollbar-thumb:hover{
+				border-radius: 10px;
+				background-color: ${backgroundThumbHover};
+				background-clip: content-box;
+		}
+		${/tract/i.test(custom) ? `&::-webkit-scrollbar-track {
+						border-radius: 10px;
+						mix-blend-mode: normal;
+						background: rgba(21, 26, 48, 0.02);
+					}` : ''}
+		${getPosition[position]}
+	`;
+  return jsx("div", _extends({
+    css: Scrollbar,
+    custom: custom,
+    position: position,
+    style: style
+  }, props), children);
+};
+
+scrollbar.defaultProps = {
+  backgroundScroll: white,
+  backgroundThumb: dark12,
+  backgroundThumbHover: brand13,
+  position: 'right',
+  width: 8
+};
+scrollbar.propTypes = {
+  custom: PropTypes.string,
+  position: PropTypes.string,
+  position: PropTypes.oneOf(['bottom', 'right', 'left']),
+  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  style: PropTypes.object,
+  children: PropTypes.node
+};
+export default /*#__PURE__*/memo(scrollbar);

package/components/paging/page-info.js

@@ -0,0 +1,298 @@
+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 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 { getGlobal } from '../../global';
+let timer = null;
+const PagingInfo = /*#__PURE__*/memo(({
+  fullWidth,
+  size,
+  bgColor,
+  style,
+  language,
+  currentPage,
+  totalItems,
+  itemsPerPage,
+  listItemsPerPage,
+  onChangePage,
+  onChangeItemsPerPage,
+  ...props
+}) => {
+  const pageNumberRef = useRef(null);
+  const ItemsPerPageRef = useRef(null);
+  const totalItemRef = useRef(null);
+  let currentPageNumber = null;
+  const pagingInfo = css`
+        display: ${fullWidth ? '' : 'inline-'}flex;
+        align-items: center;
+        font-family: ${theme.typography.fontFamily};
+        font-size: ${size === 'small' ? '14px' : '16px'};
+        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};
+        }
+    `;
+  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 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 (+value < 0) {
+          value = -value;
+        } else if (+value === 0) {
+          value = 1;
+        }
+
+        if (+value > lastPage) {
+          value = lastPage;
+        }
+      } else {
+        value = currentPage;
+      }
+
+      pageNumberRef.current.textContent = +value;
+
+      if (currentPageNumber !== +value) {
+        currentPageNumber = +value;
+        !!onChangePage && onChangePage(+value);
+      }
+    }, [700]);
+  };
+
+  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;
+
+    if (currentPageInput > newLastPage) {
+      onChangePageHandler(newLastPage - currentPageInput);
+    }
+
+    if (onChangeItemsPerPage) onChangeItemsPerPage(value, e.target);
+  };
+
+  const checkKeyPress = e => {
+    if (!/(\d)|(Arrow)|(Delete)|(Backspace)/.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;
+  }, [itemsPerPage]);
+  useEffect(() => {
+    const currentPageInput = +pageNumberRef.current.textContent;
+    const itemsPerPageInput = ItemsPerPageRef.current.value;
+    const newLastPage = Math.ceil(totalItems / itemsPerPageInput);
+
+    if (currentPageInput > newLastPage) {
+      onChangePageHandler(newLastPage - currentPageInput);
+    }
+
+    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(() => {
+    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);
+});
+PagingInfo.defaultProps = {
+  size: 'medium',
+  bgColor: '#FFF',
+  language: locale.get(),
+  fullWidth: false,
+  currentPage: 1,
+  totalItems: 0,
+  itemsPerPage: 10,
+  listItemsPerPage: [10, 20, 40, 50]
+};
+PagingInfo.propTypes = {
+  /** allows maximum screen width if true */
+  fullWidth: PropTypes.bool,
+
+  /** background color for paging */
+  bgColor: PropTypes.string,
+
+  /** size of paging */
+  size: PropTypes.oneOf(['small', 'medium']),
+
+  /** language to display text on paging */
+  language: PropTypes.oneOf(['vi', 'en']),
+
+  /** current of paging */
+  currentPage: PropTypes.number,
+
+  /** total items of paging */
+  totalItems: PropTypes.number,
+
+  /** the quantity of items on per page */
+  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,
+
+  /** 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
+};
+export default PagingInfo;

package/components/paging/page-selector.js

@@ -0,0 +1,281 @@
+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 React, { memo, useRef, useState, useEffect, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  size,
+  style,
+  pageItemStyle,
+  currentPage: currentPageProps = 1,
+  totalItems = 0,
+  itemsPerPage = 10,
+  onChangePage,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const [currentPage, setCurrentPage] = useState(currentPageProps);
+  const [paging, setPaging] = useState([1]);
+  const PageItemNum = css`
+        color: #FFF;
+        font-family: ${theme.typography.fontFamily};
+        font-style: normal;
+        font-weight: bold;
+        z-index: 1502;
+    `;
+  const morePaging = css`
+        position: absolute;
+        display: inline-flex;
+        opacity: 0;
+        transform: scaleX(0);
+        transition: all 0.5s;
+        z-index: 1503;
+        max-width: 176px;
+        overflow: scroll hidden;
+        padding-bottom: 2px;
+        outline: none;
+        &.visible {
+            opacity: 1;
+            transform: scaleX(1);
+        }
+        &::-webkit-scrollbar {
+            height: 4px;
+        }
+        &::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            background-color: #c1c1c1;
+        }
+    `;
+  const PageItem = css`
+        width: ${size === 'small' ? 20 : 24}px;
+        height: ${size === 'small' ? 20 : 24}px;
+        font-size: ${size === 'small' ? 12 : 14}px;
+        background-color: ${theme.colors.border};
+        border-radius: 50%;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0px 4px;
+        user-select: none;
+        cursor: pointer;
+        position: relative;
+        &:hover {
+            background-color: ${theme.colors.hover};
+            &:not(.active) .css-${PageItemNum.name} {
+                color: ${theme.colors.primary};
+            }
+        }
+        &.active {
+            background-color: ${theme.colors.borderHover};
+        }
+    `;
+
+  const setPagination = (newCurrentPage = 1) => {
+    const newLastPage = Math.ceil(totalItems / itemsPerPage);
+
+    if (newCurrentPage > newLastPage || newCurrentPage < 0) {
+      newCurrentPage = 1;
+    }
+
+    setCurrentPage(newCurrentPage);
+
+    if (newLastPage > 1) {
+      const newPaging = [1];
+
+      if (newLastPage > 5) {
+        if (newCurrentPage < 4) {
+          newPaging.push(...[2, 3]);
+          let morePageRight = [];
+
+          if (newCurrentPage === 3) {
+            newPaging.push(4);
+
+            for (let r = newCurrentPage + 2; r < newLastPage; r++) {
+              morePageRight.push(r);
+            }
+          } else {
+            for (let r = 4; r < newLastPage; r++) {
+              morePageRight.push(r);
+            }
+          }
+
+          if (morePageRight.length === 1) {
+            morePageRight = morePageRight[0];
+          }
+
+          newPaging.push(...[morePageRight, newLastPage]);
+        } else if (newCurrentPage > newLastPage - 3) {
+          let morePageLeft = [];
+
+          if (newCurrentPage - 2 === 2) {
+            morePageLeft = 2;
+          } else {
+            for (let l = 2; l < newCurrentPage - 1 - (newCurrentPage - newLastPage + 1); l++) {
+              morePageLeft.push(l);
+            }
+          }
+
+          newPaging.push(morePageLeft);
+
+          if (newCurrentPage === newLastPage - 2) {
+            newPaging.push(newLastPage - 3);
+          }
+
+          newPaging.push(...[newLastPage - 2, newLastPage - 1, newLastPage]);
+        } else {
+          let morePageLeft = [],
+              morePageRight = [];
+
+          if (newCurrentPage - 2 === 2) {
+            morePageLeft = 2;
+          } else {
+            for (let l = 2; l < newCurrentPage - 1; l++) {
+              morePageLeft.push(l);
+            }
+          }
+
+          if (newLastPage - 1 === newCurrentPage + 2) {
+            morePageRight = newCurrentPage + 2;
+          } else {
+            for (let r = newCurrentPage + 2; r < newLastPage; r++) {
+              morePageRight.push(r);
+            }
+          }
+
+          newPaging.push(...[morePageLeft, newCurrentPage - 1, newCurrentPage, newCurrentPage + 1, morePageRight, newLastPage]);
+        }
+      } else {
+        for (let i = 2; i <= newLastPage; i++) {
+          newPaging.push(i);
+        }
+      }
+
+      return newPaging;
+    } else if (paging.length !== 1) {
+      return [1];
+    }
+  };
+
+  const onChangePageHandler = (e, pageNum) => {
+    if (!e.currentTarget.classList.contains('active')) {
+      if (isNaN(pageNum)) {
+        const el = e.currentTarget.querySelector(`.css-${morePaging.name}`);
+
+        if (!el.classList.contains('visible')) {
+          el.classList.add('visible');
+        }
+
+        el.setAttribute('tabIndex', -1);
+        el.focus();
+      } else {
+        setCurrentPage(pageNum);
+        setPaging(setPagination(pageNum)); // paginationRef.current.querySelector('.active').classList.remove('active');
+
+        if (onChangePage) onChangePage(pageNum);
+      }
+    }
+  };
+
+  const closeMorePaging = e => {
+    if (e.currentTarget.classList.contains('visible')) {
+      e.currentTarget.classList.remove('visible');
+      e.currentTarget.blur();
+    }
+  }; // Get totalItems, itemsPerPage to set last page
+
+
+  useEffect(() => {
+    setPaging(setPagination(currentPageProps));
+  }, [currentPageProps]);
+  useEffect(() => {
+    setPaging(setPagination(currentPage));
+  }, [totalItems, itemsPerPage]);
+  const RenderPageItem = /*#__PURE__*/memo(({
+    pageNum,
+    style
+  }) => {
+    return jsx("div", {
+      css: PageItem,
+      className: pageNum === currentPage ? 'active' : '',
+      style: style,
+      onClick: e => onChangePageHandler(e, pageNum)
+    }, jsx("div", {
+      css: PageItemNum
+    }, isNaN(pageNum) ? jsx(React.Fragment, null, jsx("div", {
+      css: morePaging,
+      onBlur: closeMorePaging,
+      style: {
+        top: '-100%',
+        ...(pageNum[0] > currentPage ? {
+          right: 3,
+          transformOrigin: 'right'
+        } : {
+          left: 1,
+          transformOrigin: 'left'
+        })
+      }
+    }, pageNum.map(page => jsx("div", {
+      key: page,
+      css: PageItem,
+      style: {
+        width: 18,
+        height: 18,
+        minWidth: 18,
+        minHeight: 18,
+        fontSize: 8,
+        margin: '0px 2px'
+      },
+      onClick: e => onChangePageHandler(e, page)
+    }, jsx("span", {
+      css: PageItemNum
+    }, page)))), jsx("p", null, "...")) : pageNum));
+  });
+  return jsx("div", _extends({}, props, {
+    ref: ref,
+    style: {
+      display: 'inline-flex',
+      ...style
+    }
+  }), paging.map((pageNum, index) => jsx(RenderPageItem, {
+    key: index,
+    pageNum: pageNum,
+    style: pageItemStyle
+  })));
+}));
+PagingSelector.defaultProps = {
+  size: 'medium',
+  currentPage: 1,
+  totalItems: 0,
+  itemsPerPage: 10
+};
+PagingSelector.propTypes = {
+  /** size of paging */
+  size: PropTypes.oneOf(['small', 'medium']),
+
+  /** current of paging */
+  currentPage: PropTypes.number,
+
+  /** total items of paging */
+  totalItems: PropTypes.number.isRequired,
+
+  /** the quantity of items on per page */
+  itemsPerPage: PropTypes.number,
+
+  /** style inline for PagingSelector */
+  style: PropTypes.object,
+
+  /** style inline for page number element */
+  pageItemStyle: PropTypes.object,
+
+  /** the function will run after change page number */
+  onChangePage: PropTypes.func
+};
+export default PagingSelector;