diginet-core-ui 1.3.24 → 1.3.29

package/components/tab/tab.js

@@ -1,23 +1,31 @@
-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 { forwardRef, memo, useMemo, useContext } from 'react';
 import { jsx, css } from '@emotion/core';
-import { string, number, node, bool, object, func, any } from 'prop-types';
-import * as Icons from '../../icons';
+import PropTypes from 'prop-types';
+import Icon from '../../icons';
 import { color as colors } from '../../styles/colors';
-import { capitalize } from '../../utils';
 import Ripple from '../button/ripple-effect';
 import Typography from '../typography';
 import TabContext from './context';
+import { alignCenter, backgroundTransparent, borderBox, cursorPointer, flexRow, justifyCenter, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative } from '../../styles/general';
+const {
+  system: {
+    active,
+    disabled: systemDisabled,
+    rest,
+    white
+  }
+} = colors;
 const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   index,
   children,
   color,
   disabled,
   iconStyle,
+  style,
+  className,
   startIcon,
   endIcon,
   label,
@@ -30,26 +38,25 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setTabIndexState
   } = useContext(TabContext);
   const TabButton = css`
+            ${flexRow}
+            ${overflowHidden}
+            ${alignCenter}
+            ${justifyCenter}
+            ${borderBox}
+            ${cursorPointer}
+            ${positionRelative}
+            ${outlineNone}
             flex: 0 0 auto;
-            overflow: hidden;
-            align-items: center;
             appearance: none;
-            background-color: #fff;
+            background-color: ${white};
             border: 0;
             box-shadow: none;
-            box-sizing: border-box;
-            color: ${color || colors.system.rest};
-            display: flex;
-            cursor: pointer;
-            justify-content: center;
-            line-height: 1.4285;
+            color: ${color || rest};
             max-width: 320px;
             min-width: 80px;
             word-break: break-word;
-            outline: none;
             padding: 10px 16px;
             pointer-events: auto;
-            position: relative;
             text-decoration: none;
             text-rendering: auto;
             transition: all 0.2s ease-in-out, background-color 0.2s ease-in-out;
@@ -57,44 +64,44 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             scroll-snap-align: auto;
             white-space: nowrap;
             :disabled {
-                background-color: transparent;
-                color: ${colors.system.disabled};
+                ${pointerEventsNone}
+                ${backgroundTransparent}
+                color: ${systemDisabled};
                 cursor: default;
-                pointer-events: none;
             }
             :hover,:focus:not(.selected):not(:disabled) {
-                background-color: #fff;
-                color: ${colors.system.rest};
+                background-color: ${white};
+                color: ${rest};
                 .Indicator {
-                    background-color: ${colors.system.rest};
+                    background-color: ${rest};
                     transform: scaleX(1);
                 }
             }
             &.selected {
-                background-color: #fff;
-                color: ${colors.fill['tabbar-active']};
+                background-color: ${white};
+                color: ${active};
                 .Indicator {
-                    background-color: ${colors.fill['tabbar-active']};
+                    background-color: ${active};
                     transform: scaleX(1);
                 }
             }
         `;
   const Indicator = css`
+            ${positionAbsolute}
             height: 4px;
             width: 100%;
             bottom: 0;
-            position: absolute;
             transform: scaleX(0);
             transition: transform 0.2s ease-in-out;
             border-radius: 1px;
         `;
   const ButtonIcon = css`
-            display: flex;
-            position: relative;
-            box-sizing: border-box;
-            justify-content: center;
-            align-items: center;
-            max-height: 12px;
+            ${flexRow}
+            ${alignCenter}
+            ${justifyCenter}
+            ${positionRelative}
+            ${borderBox}
+            max-height: 24px;
             max-width: 24px;
             margin-right: 4px;
             &.end-icon {
@@ -102,26 +109,20 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 margin-left: 4px;
             }
         `;
+
+  const _onClick = () => {
+    if (disabled) return;
+    onClick ? onClick() : setTabIndexState(index);
+  };
+
   const StartIcon = useMemo(() => {
     let node = startIcon;
 
     if (typeof node === 'string') {
-      const IconComp = Icons[capitalize(node)];
-
-      if (IconComp) {
-        node = jsx(IconComp, {
-          color: 'currentColor',
-          viewBox: true,
-          width: 16,
-          height: 16,
-          iconStyle: label ? { ...iconStyle
-          } : {
-            marginLeft: 0,
-            marginRight: 0,
-            ...iconStyle
-          }
-        });
-      }
+      node = jsx(Icon, {
+        color: 'currentColor',
+        name: startIcon
+      });
     }
 
     return jsx("span", {
@@ -132,22 +133,10 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let node = endIcon;
 
     if (typeof node === 'string') {
-      const IconComp = Icons[capitalize(node)];
-
-      if (IconComp) {
-        node = jsx(IconComp, {
-          color: 'currentColor',
-          viewBox: true,
-          width: 16,
-          height: 16,
-          iconStyle: label ? { ...iconStyle
-          } : {
-            marginLeft: 0,
-            marginRight: 0,
-            ...iconStyle
-          }
-        });
-      }
+      node = jsx(Icon, {
+        color: 'currentColor',
+        name: endIcon
+      });
     }
 
     return jsx("span", {
@@ -155,14 +144,16 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'end-icon'
     }, " ", node, " ");
   }, [endIcon]);
-  return jsx("button", _extends({
+  return jsx("button", {
     css: TabButton,
-    className: index === tabIndexState && !disabled ? 'selected' : '',
+    className: ['DGN-UI-Tab-Item', index === tabIndexState && !disabled ? 'selected' : ''].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
     disabled: disabled,
-    onClick: onClick ? onClick : () => setTabIndexState(index),
+    onClick: _onClick,
     ref: ref,
-    index: index
-  }, props), startIcon && StartIcon, jsx(Typography, {
+    index: index,
+    ...props
+  }, startIcon && StartIcon, jsx(Typography, {
     type: level,
     color: 'inherit'
   }, label), children, endIcon && EndIcon, jsx(Ripple, null), jsx("span", {
@@ -172,35 +163,43 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 TabItem.defaultProps = {
   disabled: false,
-  label: ""
+  label: "",
+  className: '',
+  style: {}
 };
 TabItem.propTypes = {
   /** color for Tabs */
-  color: string,
+  color: PropTypes.string,
 
   /** prevent all event if true */
-  disabled: bool,
+  disabled: PropTypes.bool,
 
   /** object passed to add effects and to change location icons */
-  iconStyle: object,
+  iconStyle: PropTypes.object,
 
   /** index received in position of TabHeaderButton */
-  index: number,
+  index: PropTypes.number,
 
   /** data string, if any */
-  label: string,
+  label: PropTypes.string,
 
   /** element to display in Tabs (like text) */
-  children: node,
+  children: PropTypes.node,
 
   /** icon to the left of the button */
-  startIcon: node,
+  startIcon: PropTypes.node,
 
   /** icon to the right of the button */
-  endIcon: node,
-  onClick: func,
+  endIcon: PropTypes.node,
+  onClick: PropTypes.func,
+
+  /** class for component */
+  className: PropTypes.string,
+
+  /** style inline of component */
+  style: PropTypes.object,
 
   /** any props else */
-  props: any
+  props: PropTypes.any
 };
 export default TabItem;

package/components/tooltip/index.js

@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useRef, useState } from 'react';
 import Portal from './portal';
 import { randomString } from '../../utils';
-import theme from '../../theme/settings';
 import { jsx, css } from '@emotion/core';
+import { typography } from "../../styles/typography";
 const defaultColor = 'rgba(255, 255, 255, 0.9)';
 const defaultBg = 'rgba(21, 26, 48, 0.9)';
 const defaultViewPadding = 4;
@@ -124,8 +124,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
             box-sizing      : border-box;
             color           : ${color};
             display         : inline-block;
-            font-family     : ${theme.typography.fontFamily};
-            font-size       : ${size === 'small' ? 12 : 14}px;
+            ${size === 'small' ? typography.paragraph3 : typography.paragraph2};
             opacity         : 0;
             padding         : ${padding};
             position        : absolute;
@@ -527,7 +526,8 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
       clearTimeout(hoverTimeout);
     };
   }, []);
-  return jsx(TagCreatedName, containerProps, children, tooltip);
+  return jsx(TagCreatedName, { ...containerProps
+  }, children, tooltip);
 }));
 Tooltip.defaultProps = {
   alignMode: 'middle',

package/components/transfer/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 */
@@ -428,17 +426,18 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: rightPaperRef,
     "data-side": 'right'
   }, chosenList.map((item, index) => renderItemDefault(item, index))), [chosenList]);
-  const TransferView = useMemo(() => jsx("div", _extends({
-    css: TransferRoot
-  }, props), jsx(Paper, _extends({
-    width: width
-  }, paperProps, {
+  const TransferView = useMemo(() => jsx("div", {
+    css: TransferRoot,
+    ...props
+  }, jsx(Paper, {
+    width: width,
+    ...paperProps,
     scrollAble: !selectAll
-  }), jsx(Fragment, null, selectAll && LeftSelectAll, LeftTransferList)), Dashboard, jsx(Paper, _extends({
-    height: height
-  }, paperProps, {
+  }, jsx(Fragment, null, selectAll && LeftSelectAll, LeftTransferList)), Dashboard, jsx(Paper, {
+    height: height,
+    ...paperProps,
     scrollAble: !selectAll
-  }), jsx(Fragment, null, selectAll && RightSelectAll, RightTransferList))), [choicesList, chosenList, disabledAllLeft, disabledLeft, disabledRight, disabledAllRight, determinateLeft, determinateRight, selectAllLeft, selectAllRight]);
+  }, jsx(Fragment, null, selectAll && RightSelectAll, RightTransferList))), [choicesList, chosenList, disabledAllLeft, disabledLeft, disabledRight, disabledAllRight, determinateLeft, determinateRight, selectAllLeft, selectAllRight]);
   return TransferView;
 }));
 Transfer.defaultProps = {

package/components/tree-view/css.js

@@ -13,6 +13,7 @@ export const TreeViewRoot = css`
             background-color: ${theme.colors.focus};
             }
             .Accordion-Icon-Root {
+                display: flex;
                 margin-right: 4px;
             }
         }
@@ -22,6 +23,7 @@ export const TreeViewRoot = css`
             border-radius: 0;
         }
         .Accordion-Icon-Root {
+            display: flex;
             transition: opacity 0.2s ease-out;
             opacity: 1;
             &.DGN-Invisible {

package/components/tree-view/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,8 +6,7 @@ import { render } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import { TreeViewRoot } from './css';
-import { Accordion, AccordionSummary, AccordionDetails, Typography, Checkbox, Divider, InputBase } from '..';
-import Icon from '../../icons';
+import { Accordion, AccordionSummary, AccordionDetails, Typography, Checkbox, Divider, InputBase, ButtonIcon } from '..';
 import { mapParent, randomString, removeUnicode } from '../../utils';
 import { getGlobal } from '../../global';
 const separatorPattern = /\{\w+\}/g;
@@ -98,6 +95,8 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               }
             });
           } else {
+            var _node$lastChild, _node$lastChild$first;
+
             const checkedLeastOfOne = Array.from(node.querySelectorAll('input')).some(el => el.checked);
 
             if (checkedLeastOfOne) {
@@ -110,7 +109,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               input.checked = false;
             }
 
-            const childNodes = Array.from(node.lastChild.firstChild.childNodes);
+            const childNodes = Array.from((node === null || node === void 0 ? void 0 : (_node$lastChild = node.lastChild) === null || _node$lastChild === void 0 ? void 0 : (_node$lastChild$first = _node$lastChild.firstChild) === null || _node$lastChild$first === void 0 ? void 0 : _node$lastChild$first.childNodes) || '');
             checkedParentFollowValue(childNodes);
           }
         }
@@ -823,26 +822,28 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         overflow: 'hidden',
         textOverflow: 'ellipsis'
       },
-      endIcon: jsx(Icon, {
+      endIcon: jsx(ButtonIcon, {
+        viewType: 'ghost',
         ref: clearIconRef,
         name: 'Cancel',
         onClick: clearAllValue
       })
-    }), allowSearch && jsx(InputBase, _extends({
+    }), allowSearch && jsx(InputBase, {
       startIcon: 'Search',
       onChange: onChangeHandler,
-      viewType: 'outlined'
-    }, searchProps)), multiple && selectAll && jsx(Fragment, null, jsx("div", {
+      viewType: 'outlined',
+      ...searchProps
+    }), multiple && selectAll && jsx(Fragment, null, jsx("div", {
       className: 'TreeView-All'
     }, jsx(Checkbox, {
       label: selectAllLabel,
       onChange: onSelectAll,
       inputRef: selectAllRef
-    })), jsx(Divider, null)), jsx("div", _extends({
-      ref: ref
-    }, props, {
+    })), jsx(Divider, null)), jsx("div", {
+      ref: ref,
+      ...props,
       className: ['TreeView-Content', disabled ? 'disabled' : '', className].join(' ').trim()
-    }), disabledMap ? dataSource : mapParent(dataSource, id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
+    }, disabledMap ? dataSource : mapParent(dataSource, id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
   }, [dataSource, value, multiple, selectBox, disabledBoldResult, autoExpandToResult, showChildrenOfResult, searchMode, onChange, searchProps]);
   return TreeViewComp;
 }));

package/components/typography/index.js

@@ -4,27 +4,9 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import { renderHTML } from '../../utils';
 import { useTheme } from '../../theme';
+import { typography } from '../../styles/typography';
 const {
-  colors,
-  typography: {
-    fontFamily,
-    fontFamilyBold,
-    fontFamilyMedium,
-    fontSize,
-    title1,
-    title2,
-    title3,
-    title4,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    p1,
-    p2,
-    p3
-  }
+  colors
 } = useTheme();
 const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
@@ -42,105 +24,17 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref = useRef(null);
   }
 
+  const typographyMap = new Map([['title1', typography.title1], ['title2', typography.title2], ['title3', typography.title3], ['title4', typography.title4], ['h1', typography.heading1], ['h2', typography.heading2], ['h3', typography.heading3], ['h4', typography.heading4], ['h5', typography.heading5], ['h6', typography.heading6], ['p1', typography.paragraph1], ['p2', typography.paragraph2], ['p3', typography.paragraph3]]);
   const TextRoot = css`
         display: inline-block;
         position: relative;
         color: ${colors[color] || color};
-        font-family: ${fontFamily};
-        font-size: ${fontSize};
+        ${typography.paragraph1};
         max-width: max-content;
         word-break: break-word;
         white-space: normal;
-        &.DGN-Typography-title1 {
-            font-family   : ${fontFamilyBold};
-            font-style    : ${title1.fontStyle};
-            font-weight   : ${title1.fontWeight};
-            font-size     : ${title1.fontSize};
-            line-height   : ${title1.lineHeight};
-        }
-        &.DGN-Typography-title2 {
-            font-family   : ${fontFamilyBold};
-            font-style    : ${title2.fontStyle};
-            font-weight   : ${title2.fontWeight};
-            font-size     : ${title2.fontSize};
-            line-height   : ${title2.lineHeight};
-        }
-        &.DGN-Typography-title3 {
-            font-family   : ${fontFamilyBold};
-            font-style    : ${title3.fontStyle};
-            font-weight   : ${title3.fontWeight};
-            font-size     : ${title3.fontSize};
-            line-height   : ${title3.lineHeight};
-        }
-        &.DGN-Typography-title4 {
-            font-family   : ${fontFamilyBold};
-            font-style    : ${title4.fontStyle};
-            font-weight   : ${title4.fontWeight};
-            font-size     : ${title4.fontSize};
-            line-height   : ${title4.lineHeight};
-        }
-        &.DGN-Typography-h1 {
-            font-family   : ${fontFamilyBold};
-            font-style    : ${h1.fontStyle};
-            font-weight   : ${h1.fontWeight};
-            font-size     : ${h1.fontSize};
-            line-height   : ${h1.lineHeight};
-        }
-        &.DGN-Typography-h2 {
-            font-family   : ${fontFamilyBold};
-            font-style    : ${h2.fontStyle};
-            font-weight   : ${h2.fontWeight};
-            font-size     : ${h2.fontSize};
-            line-height   : ${h2.lineHeight};
-        }
-        &.DGN-Typography-h3 {
-            font-family   : ${fontFamilyBold};
-            font-style    : ${h3.fontStyle};
-            font-weight   : ${h3.fontWeight};
-            font-size     : ${h3.fontSize};
-            line-height   : ${h3.lineHeight};
-        }
-        &.DGN-Typography-h4 {
-            font-family   : ${fontFamilyBold};
-            font-style    : ${h4.fontStyle};
-            font-weight   : ${h4.fontWeight};
-            font-size     : ${h4.fontSize};
-            line-height   : ${h4.lineHeight};
-        }
-        &.DGN-Typography-h5 {
-            font-family   : ${fontFamilyMedium};
-            font-style    : ${h5.fontStyle};
-            font-weight   : ${h5.fontWeight};
-            font-size     : ${h5.fontSize};
-            line-height   : ${h5.lineHeight};
-        }
-        &.DGN-Typography-h6 {
-            font-family   : ${fontFamilyMedium};
-            font-style    : ${h6.fontStyle};
-            font-weight   : ${h6.fontWeight};
-            font-size     : ${h6.fontSize};
-            line-height   : ${h6.lineHeight};
-        }
-        &.DGN-Typography-p1 {
-            font-family   : ${fontFamily};
-            font-style    : ${p1.fontStyle};
-            font-weight   : ${p1.fontWeight};
-            font-size     : ${p1.fontSize};
-            line-height   : ${p1.lineHeight};
-        }
-        &.DGN-Typography-p2 {
-            font-family   : ${fontFamily};
-            font-style    : ${p2.fontStyle};
-            font-weight   : ${p2.fontWeight};
-            font-size     : ${p2.fontSize};
-            line-height   : ${p2.lineHeight};
-        }
-        &.DGN-Typography-p3 {
-            font-family   : ${fontFamily};
-            font-style    : ${p3.fontStyle};
-            font-weight   : ${p3.fontWeight};
-            font-size     : ${p3.fontSize};
-            line-height   : ${p3.lineHeight};
+        &.DGN-Typography-${type} {
+            ${typographyMap.get(type)};
         }
         &.DGN-Typography-center {
             text-align: center;

package/css/styles.css

@@ -1 +1 @@
-b{font-weight:bold !important}/*# sourceMappingURL=styles.css.map */
+html *{color:#000 !important;font-family:"SF Pro Display",Arial,sans-serif;font-size:16px}b{font-weight:bold !important}/*# sourceMappingURL=styles.css.map */

package/css/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/scss/styles.scss"],"names":[],"mappings":"AAAA,EACI","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/scss/styles.scss"],"names":[],"mappings":"AAAA,OAEE,sBACA,8CACA,eAGF,EACI","file":"styles.css"}

package/global/index.js

@@ -16,6 +16,7 @@ const globalObject = {
     yes: 'Có',
     warning: 'Cảnh Báo',
     // attachment
+    dropFileHere: 'Kéo và thả tập tin vào đây',
     deleteNotifyText: 'Bạn có chắc muốn xóa (những) đính kèm này?',
     attachText: 'Đính kèm',
     errorDefault: {
@@ -79,6 +80,7 @@ const globalObject = {
     yes: 'Yes',
     warning: 'Warning',
     // attachment
+    dropFileHere: 'Drop files here',
     deleteNotifyText: 'Are you sure you want to delete this attachment(s)?',
     attachText: 'Attachment',
     errorDefault: {