diginet-core-ui 1.3.38 → 1.3.40

package/components/paging/page-info.js

@@ -4,25 +4,22 @@
 import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
 import { ButtonIcon, NumberInput, Dropdown } from '../';
 import { getGlobal } from '../../global';
 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';
+import { alignCenter, borderBox, flexRow, noMargin, noPadding, border, textCenter, cursorPointer } from '../../styles/general';
 const {
   paragraph2
 } = typography;
 const {
   system: {
-    active
-  },
-  semantic: {
-    info
+    active,
+    white
   },
   line: {
-    system,
-    normal
+    system
   },
   text: {
     main
@@ -52,98 +49,16 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   listPerPage,
   onChangePage,
   onChangePerPage
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+}, reference) => {
+  const 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`
-        ${flexRow}
-        ${alignCenter}
-        ${paragraph2}
-        ${borderBox}
-        ${border(1, system)}
-        height: 40px;
-        border-left: none;
-        border-right: none;
-        padding: 4px 0;
-        background-color: ${bgColor};
-        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 _pagingInfoCSS = pagingInfoCSS(bgColor);
 
   const _onChangePage = (page, isInit = false) => {
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
@@ -221,8 +136,17 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     setListPerPageState(listPerPage);
   }, [listPerPage]);
-  useImperativeHandle(ref, () => {
+  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);
 
@@ -234,16 +158,21 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
-    let listPerPageData = [];
+    let listPerPageData = !listPerPageState.includes(itemsPerPageState) ? [{
+      name: itemsPerPageState,
+      id: itemsPerPageState
+    }] : [];
     listPerPageState.map(item => listPerPageData = [...listPerPageData, {
       name: item,
       id: item
     }]);
+    listPerPageData = [...new Map(listPerPageData.map(v => [JSON.stringify(v), v])).values()];
+    listPerPageData.sort((a, b) => a.id - b.id);
     return jsx("div", {
       ref: ref,
-      css: pagingInfo,
+      css: _pagingInfoCSS,
       style: style,
-      className: ['DGN-UI-PageInfo', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: ['DGN-UI-PagingInfo', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx(ButtonIcon, {
       circular: true,
       viewType: 'text',
@@ -280,35 +209,83 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       name: 'ArrowDoubleRight',
       disabled: disableNextState,
       onClick: () => _onChangePage(lastPage - 1)
-    }), typeShort && jsx("span", {
-      className: 'slash'
-    }, "|"), !typeShort && jsx("span", {
+    }), !typeShort && jsx("span", {
       className: "txt-line-number"
-    }, getGlobal('lineNumber')), jsx(Dropdown, {
+    }, getGlobal('lineNumber')), !typeShort && jsx(Dropdown, {
       viewType: 'outlined',
       dataSource: listPerPageData,
-      defaultValue: itemsPerPageState,
+      value: 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", {
+    }), jsx("span", {
       className: 'total-items'
-    }, !typeShort ? getGlobal('total') + ':' : '', " ", totalItemsState));
+    }, getGlobal('total') + ':', " ", totalItemsState));
   }, [typeShort, bgColor, style, className, totalItemsState, itemsPerPageState, currentPageState, listPerPageState, disablePrevState, disableNextState]);
 }));
+
+const pagingInfoCSS = bgColor => css`
+    ${flexRow};
+    ${alignCenter};
+    ${paragraph2};
+    ${borderBox};
+    ${border(1, system)};
+    height: 40px;
+    border-left: none;
+    border-right: none;
+    padding: 4px 0;
+    background-color: ${bgColor};
+    color: ${main};
+    .inputPage {
+        ${noMargin};
+        ${textCenter};
+        width: 1%;
+        min-width: 24px;
+        .DGN-UI-InputBase {
+            ${noPadding};
+            input {
+                ${paragraph2};
+                ${textCenter};
+                color: ${active};
+            }
+        }
+    }
+    .txt-line-number {
+        margin-left: 16px;
+    }
+    .DGN-UI-Dropdown {
+        margin-left: 8px;
+        margin-bottom: 0;
+        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;
+            }
+        }
+    }
+    .total-items {
+        margin-left: 16px;
+    }
+`;
+
 PagingInfo.defaultProps = {
   typeShort: false,
-  bgColor: '#FFF',
+  bgColor: white,
   style: {},
   className: '',
   totalItems: 0,
@@ -325,7 +302,7 @@ PagingInfo.propTypes = {
   /** style inline for Paging */
   style: PropTypes.object,
 
-  /** style inline for Paging */
+  /** className for Paging */
   className: PropTypes.string,
 
   /** current of paging */
@@ -344,6 +321,21 @@ PagingInfo.propTypes = {
   onChangePage: PropTypes.func,
 
   /** the function will run after change quantity on per page */
-  onChangePerPage: PropTypes.func
+  onChangePerPage: PropTypes.func,
+
+  /**
+   * 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 PagingInfo;
+export { PagingInfo };
+export default OptionWrapper(PagingInfo);

package/components/slider/slider-item.js

@@ -53,7 +53,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             `,
     frame: css`
                 display: block;
-                height: 100%;
+                height: 85vh;
                 margin: 0;
                 padding: 0;
                 width: 100%;
@@ -91,11 +91,9 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (googleDocsRegex.test(link)) {
         return `https://docs.google.com/viewer?srcid=${link.split('=')[1]}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
       }
-
-      return link;
     }
 
-    return null;
+    return link;
   };
 
   const getViewer = (filePath, fileType) => {
@@ -116,7 +114,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             className: IDs.frame,
             css: styles.frame,
             frameBorder: 0,
-            src: `http://view.officeapps.live.com/op/view.aspx?src=${filePath}`,
+            src: `https://view.officeapps.live.com/op/view.aspx?src=${filePath}`,
             title: fileName
           });
         }

package/components/typography/index.js

@@ -177,7 +177,7 @@ const TextRoot = (color, type, lineClamp) => css`
     ${positionRelative};
     ${breakWord};
     ${paragraph1};
-    white-space: normal;
+    white-space: break-spaces;
     color: ${colorMap.get(color) || colors[color] || color};
     max-width: max-content;
     &.DGN-Typography-${type} {

package/package.json

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

package/readme.md

@@ -38,8 +38,15 @@ npm test
 ```
 
 ## Changelog
-## 1.3.38
+## 1.3.40
+\[Fixed\]: Slider - Fix bug can't view https file
+\[Fixed\]: Typhography - Fix word-wrap css
+\[Fixed\]: Slider - Fix bug not showing pdf file with blob url
+
+## 1.3.39
 \[Added\]: MenuIcon - MHRM29N0003
+
+## 1.3.38
 \[Added\]: System - Phát triển chuẩn zIndex
 \[Changed\]: NumberInput - Phát triển lại component NumberInput
 \[Fixed\]: Accordion - Fix bug Accordion auto expand when render; Add prop style, id; Fix css