diginet-core-ui 1.3.43-beta.2 → 1.3.43-beta.5

package/components/paging/page-info.js

@@ -5,26 +5,29 @@ import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHa
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
-import { ButtonIcon, NumberInput, Dropdown } from '../';
+import { ButtonIcon, NumberInput, Dropdown, Typography, Divider } from '../';
 import { getGlobal } from '../../global';
-import { typography } from '../../styles/typography';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 import { alignCenter, borderBox, flexRow, noMargin, noPadding, border, textCenter, cursorPointer } from '../../styles/general';
 const {
-  paragraph2
-} = typography;
-const {
-  system: {
-    active,
-    white
+  colors: {
+    system: {
+      active,
+      white
+    },
+    line: {
+      system,
+      category
+    },
+    text: {
+      main
+    }
   },
-  line: {
-    system
+  typography: {
+    paragraph2
   },
-  text: {
-    main
-  }
-} = colors;
+  spacing
+} = theme;
 
 const getLastPage = (totalItems, itemsPerPage) => {
   let _lastPage = 0;
@@ -39,6 +42,7 @@ const getLastPage = (totalItems, itemsPerPage) => {
 
 let timeout = null;
 const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   typeShort,
   bgColor,
   style,
@@ -50,6 +54,8 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onChangePage,
   onChangePerPage
 }, reference) => {
+  var _currentPageState$toS;
+
   const ref = useRef(null);
   const [totalItemsState, setTotalItemsState] = useState(totalItems);
   const [itemsPerPageState, setItemsPerPageState] = useState(itemsPerPage || listPerPage[0] || 10);
@@ -58,7 +64,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [disablePrevState, setDisablePrevState] = useState(true);
   const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
 
-  const _pagingInfoCSS = pagingInfoCSS(bgColor);
+  const _pagingInfoCSS = pagingInfoCSS(bgColor, typeShort);
+
+  const _dynamicWidthCSS = dynamicWidthCSS(((_currentPageState$toS = currentPageState.toString()) === null || _currentPageState$toS === void 0 ? void 0 : _currentPageState$toS.length) || 3);
 
   const _onChangePage = (page, isInit = false) => {
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
@@ -171,6 +179,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("div", {
       ref: ref,
       css: _pagingInfoCSS,
+      id: id,
       style: style,
       className: ['DGN-UI-PagingInfo', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx(ButtonIcon, {
@@ -188,6 +197,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disabled: disablePrevState,
       onClick: () => _onChangePage(currentPageState - 1)
     }), jsx(NumberInput, {
+      css: _dynamicWidthCSS,
       disabledNegative: true,
       className: 'inputPage',
       value: currentPageState ? String(currentPageState + 1) : '1',
@@ -195,7 +205,12 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       max: lastPage,
       onKeyDown: checkKeyPress,
       onChange: e => onTypePaging(e === null || e === void 0 ? void 0 : e.value)
-    }), "/", ` ${lastPage}`, jsx(ButtonIcon, {
+    }), "/", jsx(Typography, {
+      type: 'p2',
+      style: {
+        margin: '0 2px'
+      }
+    }, lastPage), jsx(ButtonIcon, {
       circular: true,
       viewType: 'text',
       size: 'small',
@@ -209,10 +224,14 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       name: 'ArrowDoubleRight',
       disabled: disableNextState,
       onClick: () => _onChangePage(lastPage - 1)
+    }), typeShort && jsx(Divider, {
+      direction: 'vertical',
+      height: 24,
+      color: category
     }), !typeShort && jsx("span", {
       className: "txt-line-number"
-    }, getGlobal('lineNumber')), !typeShort && jsx(Dropdown, {
-      viewType: 'outlined',
+    }, getGlobal('lineNumber')), jsx(Dropdown, {
+      viewType: 'underlined',
       dataSource: listPerPageData,
       value: itemsPerPageState,
       onChange: e => _onChangePerPage(e === null || e === void 0 ? void 0 : e.value),
@@ -225,13 +244,17 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       dropdownItemStyle: {
         color: active
       }
+    }), typeShort && jsx(Divider, {
+      direction: 'vertical',
+      height: 24,
+      color: category
     }), jsx("span", {
       className: 'total-items'
-    }, getGlobal('total') + ':', " ", totalItemsState));
+    }, !typeShort && getGlobal('total') + ':', " ", totalItemsState));
   }, [typeShort, bgColor, style, className, totalItemsState, itemsPerPageState, currentPageState, listPerPageState, disablePrevState, disableNextState]);
 }));
 
-const pagingInfoCSS = bgColor => css`
+const pagingInfoCSS = (bgColor, typeShort) => css`
     ${flexRow};
     ${alignCenter};
     ${paragraph2};
@@ -240,33 +263,36 @@ const pagingInfoCSS = bgColor => css`
     height: 40px;
     border-left: none;
     border-right: none;
-    padding: 4px 0;
+    padding: ${spacing()}px 0;
     background-color: ${bgColor};
     color: ${main};
     .inputPage {
         ${noMargin};
         ${textCenter};
-        width: 1%;
-        min-width: 24px;
+        min-width: 28px;
         .DGN-UI-InputBase {
             ${noPadding};
             input {
                 ${paragraph2};
                 ${textCenter};
                 color: ${active};
+                text-align: left;
             }
         }
     }
     .txt-line-number {
-        margin-left: 16px;
+        margin-left: ${spacing(4)}px;
+    }
+    .DGN-UI-Divider {
+        margin: 0px ${spacing(2)}px;
     }
     .DGN-UI-Dropdown {
-        margin-left: 8px;
+        margin-left: ${typeShort ? '0px' : `${spacing(2)}px`};
         margin-bottom: 0;
-        min-width: 56px;
+        min-width: 52px;
         .DGN-UI-Dropdown-Form {
-            min-height: 32px;
-            padding: 0 0 0 8px;
+            min-height: 24px;
+            padding: 0;
             input {
                 ${paragraph2};
                 ${noPadding};
@@ -274,15 +300,26 @@ const pagingInfoCSS = bgColor => css`
             }
             .DGN-UI-Dropdown-Icon {
                 margin-left: 6px;
-                margin-right: 6px;
+                div,
+                span,
+                svg {
+                    width: 20px;
+                    min-width: 20px;
+                    height: 20px;
+                    min-height: 20px;
+                }
             }
         }
     }
     .total-items {
-        margin-left: 16px;
+        margin-left: ${typeShort ? '0px' : `${spacing(4)}px`};
     }
 `;
 
+const dynamicWidthCSS = characters => css`
+    width: ${characters}ch;
+`;
+
 PagingInfo.defaultProps = {
   typeShort: false,
   bgColor: white,
@@ -293,34 +330,34 @@ PagingInfo.defaultProps = {
   listPerPage: [10, 15, 20, 30, 50]
 };
 PagingInfo.propTypes = {
-  /** compact type for mobile */
+  /** Compact type for mobile. */
   typeShort: PropTypes.bool,
 
-  /** background color for paging */
+  /** Background color for paging. */
   bgColor: PropTypes.string,
 
-  /** style inline for Paging */
+  /** Style inline of component. */
   style: PropTypes.object,
 
-  /** className for Paging */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** current of paging */
+  /** Specifies the current page. */
   currentPage: PropTypes.number,
 
-  /** total items of paging */
+  /** Total items of paging. */
   totalItems: PropTypes.number,
 
-  /** the quantity of items on per page */
+  /** The quantity of items per page. */
   itemsPerPage: PropTypes.number,
 
-  /** the list to choose the number of elements to display per page */
+  /** The list to choose the number of elements to display per page. */
   listPerPage: PropTypes.array,
 
-  /** the function will run after change page number */
+  /** The function will run after change page number. */
   onChangePage: PropTypes.func,
 
-  /** the function will run after change quantity on per page */
+  /** The function will run after change quantity on per page. */
   onChangePerPage: PropTypes.func,
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.43-beta.2",
+  "version": "1.3.43-beta.5",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",