diginet-core-ui 1.4.14-beta.2 → 1.4.14-beta.3

package/components/collapse/index.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { displayBlock, parseWidthHeight, positionRelative } from "../../styles/general";
 const Collapse = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,

package/components/dialogs/colors.js

@@ -1,11 +1,13 @@
-export const iconDefault = '#687799';
-export const iconHover = '#111d5e';
-export const iconDisabled = '#8f9bb3';
-export const fillHover = '#eff5ff';
-export const fillDisabled = '#e7eaf0';
-export const fillDefault = '#8f9bb3';
-export const fillPath = '#fff';
-export const uiSuccess = '#00c875';
-export const uiWarning = '#ffaa00';
-export const uiDanger = '#ff3d71';
-export const uiInfo = '#0095ff';
+// export const iconDefault  = '#687799';
+// export const iconHover    = '#111d5e';
+// export const iconDisabled = '#8f9bb3';
+
+// export const fillHover    = '#eff5ff';
+// export const fillDisabled = '#e7eaf0';
+// export const fillDefault  = '#8f9bb3';
+// export const fillPath     = '#fff';
+
+// export const uiSuccess    = '#00c875';
+// export const uiWarning    = '#ffaa00';
+// export const uiDanger     = '#ff3d71';
+// export const uiInfo       = '#0095ff';

package/components/divider/index.js

@@ -4,22 +4,36 @@ import { css, jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, borderNone, flexShrink0, mg, parseWidthHeight } from "../../styles/general";
-import { classNames } from "../../utils";
-const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  className,
-  color,
-  direction,
-  height,
-  id,
-  style,
-  width
-}, reference) => {
+import { bgColor, borderNone, flexShrink0, parseWidthHeight } from "../../styles/general";
+import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { classNames, getProp } from "../../utils";
+const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
+  const theme = useTheme();
+  const {
+    colors
+  } = theme;
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'Divider'
+  });
+  const {
+    action = {},
+    className,
+    color: colorProp,
+    direction,
+    height,
+    id,
+    style,
+    width
+  } = props;
   const ref = useRef(null);
   const isVertical = direction === 'vertical';
-  const _DividerRoot = DividerRoot(color, width, height, isVertical);
+  const color = getProp(colors, colorProp, colorProp);
+  const _DividerRoot = DividerRoot(color, width, height, isVertical, theme);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -38,21 +52,25 @@ const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       className: classNames('DGN-UI-Divider', className)
     });
-  }, [className, color, direction, height, id, style, width]);
+  }, [className, color, direction, height, id, style, width, theme]);
 }));
-const DividerRoot = (color, width, height, isVertical) => css`
+const DividerRoot = (color, width, height, isVertical, {
+  spacing
+}) => css`
     ${borderNone};
     ${flexShrink0};
-    ${mg(0)};
+    margin: ${spacing([0])};
     ${bgColor(color)};
     ${parseWidthHeight(width || (isVertical ? 1 : '100%'), height || (isVertical ? 'auto' : 1))};
 `;
-Divider.defaultProps = {
-  className: '',
-  color: 'system.disabled',
-  direction: 'horizontal',
-  style: {}
-};
+
+// Divider.defaultProps = {
+//     className: '',
+//     color: 'system/disabled',
+//     direction: 'horizontal',
+//     style: {},
+// };
+
 Divider.propTypes = {
   /** Class for component. */
   className: PropTypes.string,

package/components/form-control/attachment/index.js

@@ -6,7 +6,7 @@ import { ButtonIcon, Grid, HelperText, Icon, Image, Label, LinearProgress, List,
 import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { aspectSquare, bgColor, border, borderDashed, borderRadius4px, borderRadius50, borderRight, bottom, boxBorder, cursorPointer, displayFlex, displayInlineBlock, displayNone, flexCol, floatRight, gap, itemsCenter, justifyBetween, justifyCenter, justifyEnd, justifyStart, left, mg, mgl, mgr, overflowHidden, parseHeight, parseMaxWidth, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, textCenter, textColor, textLeft, textRight, top, truncate, userSelectNone } from "../../../styles/general";
+import { aspectSquare, bgColor, border, borderDashed, borderRadius4px, borderRadius50, borderRight, bottom, boxBorder, cursorPointer, displayFlex, displayInlineBlock, displayNone, flexCol, floatRight, itemsCenter, justifyBetween, justifyCenter, justifyEnd, justifyStart, left, overflowHidden, parseHeight, parseMaxWidth, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, positionAbsolute, positionRelative, textCenter, textColor, textLeft, textRight, top, truncate, userSelectNone } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames, getFileType, getProp, date as moment } from "../../../utils";
 const oldAttached = [];
@@ -181,19 +181,24 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const isSpecialCase = viewTypeState === 'picture' && maxFile === 1;
   const isEnable = !readOnly && !disabled;
   const isEmpty = !((dataState === null || dataState === void 0 ? void 0 : dataState.length) + (newDataState === null || newDataState === void 0 ? void 0 : newDataState.length));
+  const theme = useTheme();
   const {
-    colors
+    colors,
+    spacing
   } = useTheme();
   const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable, height, colors);
-  const _AttachmentHandleIconCSS = AttachmentHandleIconCSS(colors);
-  const _ButtonAttachmentCSS = ButtonAttachmentCSS(colors);
+  const _AttachmentHandleIconCSS = AttachmentHandleIconCSS(theme);
+  const _ButtonAttachmentCSS = ButtonAttachmentCSS(theme);
   const _DotNewFileDetailCSS = DotNewFileDetailCSS(colors);
   const _DotNewFileIconCSS = DotNewFileIconCSS(colors);
   const _AttachedItemOwnerCSS = AttachedItemOwnerCSS(colors);
   const _AttachedLinearCSS = AttachedLinearCSS(colors);
   const _AttachedItemCSS = AttachedItemCSS(colors);
   const _AttachedItemPictureCSS = AttachedItemPictureCSS(colors);
-  const _ItemPictureInfoCSS = ItemPictureInfoCSS(colors);
+  const _ItemPictureInfoCSS = ItemPictureInfoCSS(theme);
+  const _AttachmentInfoCSS = AttachmentInfoCSS(theme);
+  const _AttachedItemInfoCSS = AttachedItemInfoCSS(theme);
+  const _AttachmentListCSS = AttachmentListCSS(theme);
 
   // Start handler
   const onSortElement = (e, type) => {
@@ -843,10 +848,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   // Start view
   const AttachHeaderView = useMemo(() => {
     return jsx("div", {
-      css: AttachmentHeaderCSS,
+      css: AttachmentHeaderCSS(theme),
       className: 'DGN-UI-Attachment-Header'
     }, jsx("div", {
-      css: AttachmentInfoCSS
+      css: _AttachmentInfoCSS
     }, jsx(Label, {
       uppercase: true,
       required: required,
@@ -873,7 +878,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       name: 'delete',
       onClick: onShowPopup
     }) : null), jsx("div", {
-      css: isEmpty ? AttachmentImageEmptyCSS : mgr([isSpecialCase ? 0 : 2])
+      css: isEmpty ? AttachmentImageEmptyCSS : css`
+                                              margin-right: ${spacing([isSpecialCase ? 0 : 2])};
+                                          `
     }, jsx("div", {
       css: [AttachmentImageCenterCSS, !isEnable && [parseHeight('calc(100% - 32px)'), justifyEnd]]
     }, isEnable ? jsx("div", {
@@ -962,9 +969,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onDoubleClick: e => onView(e.currentTarget, isNew ? null : item.AttachmentID),
       className: classNames('DGN-UI-Attachment-List-Attached-Row', 'attachment-row')
     }, jsx("div", {
-      css: [_AttachedItemCSS, AttachedItemDetailCSS]
+      css: [_AttachedItemCSS, AttachedItemDetailCSS(theme)]
     }, jsx("span", {
-      css: AttachedItemInfoCSS
+      css: _AttachedItemInfoCSS
     }, jsx(Icon, {
       css: (item.lastModifiedDate || isNew) && _DotNewFileDetailCSS,
       width: 16,
@@ -975,7 +982,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'filetype'
     }, type), jsx(Typography, {
       className: 'filename',
-      css: [mgl([3])],
+      css: css`
+                                        margin-left: ${spacing([3])};
+                                    `,
       type: 'p1',
       lineClamp: 1
     }, name)), jsx("span", {
@@ -1018,7 +1027,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx("div", {
       css: _AttachedItemCSS
     }, jsx("span", {
-      css: AttachedItemIconInfoCSS
+      css: AttachedItemIconInfoCSS(theme)
     }, jsx(Icon, {
       css: [(item.lastModifiedDate || isNew) && _DotNewFileIconCSS],
       width: 40,
@@ -1133,7 +1142,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const AttachedView = useMemo(() => {
     return jsx(ScrollBar, {
-      css: AttachmentListCSS,
+      css: _AttachmentListCSS,
       className: 'DGN-UI-Attachment-List'
     }, jsx(Grid, {
       container: true,
@@ -1191,26 +1200,33 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     color: 'danger'
   }));
 }));
-const AttachmentHandleIconCSS = colors => css`
+const AttachmentHandleIconCSS = ({
+  colors,
+  spacing
+}) => css`
     ${displayNone};
     ${parseHeight(24)};
-    ${mgr([2])};
+    margin-right: ${spacing([2])};
     ${borderRight(1, getProp(colors, 'line/normal'))};
     button {
-        ${mgr([2])};
+        margin-right: ${spacing([2])};
     }
 `;
-const AttachmentHeaderCSS = css`
+const AttachmentHeaderCSS = ({
+  spacing
+}) => css`
     ${displayFlex};
     ${itemsCenter};
     ${justifyBetween};
     ${boxBorder};
     ${parseWidth('100%')};
-    ${pd([4, 4])};
+    padding: ${spacing([4, 4])};
 `;
-const AttachmentInfoCSS = css`
+const AttachmentInfoCSS = ({
+  spacing
+}) => css`
     ${displayFlex};
-    ${gap([2])};
+    gap: ${spacing([2])};
 `;
 const AttachmentHeaderIconCSS = css`
     ${displayFlex};
@@ -1223,10 +1239,13 @@ const AttachmentImageCenterCSS = css`
     ${itemsCenter};
     ${parseWidthHeight('100%')};
 `;
-const ButtonAttachmentCSS = colors => css`
+const ButtonAttachmentCSS = ({
+  colors,
+  spacing
+}) => css`
     ${border(1, getProp(colors, 'line/normal'))};
     ${borderDashed};
-    ${mg([0, 'auto', 4])};
+    margin: ${spacing([0, 'auto', 4])};
 `;
 const AttachmentImageEmptyCSS = css`
     ${positionAbsolute};
@@ -1234,12 +1253,14 @@ const AttachmentImageEmptyCSS = css`
     ${top(0)};
     ${left(0)};
 `;
-const AttachedItemInfoCSS = css`
+const AttachedItemInfoCSS = ({
+  spacing
+}) => css`
     ${displayFlex};
     ${itemsCenter};
     ${userSelectNone};
     ${parseMinWidth('calc(50% - 10px)')};
-    ${mgr([2])};
+    margin-right: ${spacing([2])};
 `;
 const DotNewFileDetailCSS = colors => css`
     :after {
@@ -1288,7 +1309,7 @@ const DetailInfoCSS = css`
     .filesize {
         ${floatRight};
         ${textRight};
-        ${mgl(['auto'])};
+        margin-left: auto;
     }
 `;
 const AttachedLinearCSS = colors => css`
@@ -1314,25 +1335,31 @@ const AttachedItemCSS = colors => css`
         ${bgColor(getProp(colors, 'fill/focus'))};
     }
 `;
-const AttachedItemDetailCSS = css`
+const AttachedItemDetailCSS = ({
+  spacing
+}) => css`
     ${displayFlex};
     ${justifyBetween};
     ${itemsCenter};
     ${parseMinHeight(24)};
-    ${pd([0, 2])};
+    padding: ${spacing([0, 2])};
 `;
-const AttachedItemIconInfoCSS = css`
+const AttachedItemIconInfoCSS = ({
+  spacing
+}) => css`
     ${displayFlex};
     ${flexCol};
     ${itemsCenter};
     ${positionRelative};
     ${textCenter};
-    ${pd([1, 2])};
+    padding: ${spacing([1, 2])};
 `;
-const AttachmentListCSS = css`
+const AttachmentListCSS = ({
+  spacing
+}) => css`
     ${boxBorder};
-    ${mgr([1.25])};
-    ${pd([0, 1, 2, 4])};
+    margin-right: ${spacing([1.25])};
+    padding: ${spacing([0, 1, 2, 4])};
     overflow-y: scroll;
 `;
 const AttachmentRootCSS = (isEmpty, isEnable, height, colors) => css`
@@ -1372,28 +1399,38 @@ const AttachedItemPictureImageCSS = css`
     ${justifyCenter};
     ${aspectSquare};
 `;
-const ItemPictureInfoCSS = colors => css`
+const ItemPictureInfoCSS = ({
+  colors,
+  spacing
+}) => css`
     ${positionAbsolute};
     ${boxBorder};
     ${bottom(0)};
     ${left(0)};
-    ${pd([1, 2])};
+    padding: ${spacing([1, 2])};
     ${bgColor(getProp(colors, 'fill/tooltip'))};
     ${parseWidth('100%')};
 `;
 Attachment.defaultProps = {
+  allowSort: true,
+  className: '',
+  data: [],
   deleteNotifyText: getGlobal('deleteNotifyText'),
+  disabled: false,
+  height: 280,
   hintText: getGlobal('dropFileHere'),
   label: getGlobal('attachText'),
   maxSize: getGlobal('maxSizeUpload'),
+  maxFile: Infinity,
+  multiple: true,
+  style: {},
   uploadErrorInfo: {
     maxFile: getGlobal(['errorDefault', 'maxFile']),
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
   },
-  height: 280,
-  ...getGlobal(['components', 'attachment', 'defaultProps'])
+  viewType: 'detail'
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */
@@ -1402,17 +1439,17 @@ Attachment.propTypes = {
   allowSort: PropTypes.bool,
   /** Class for component. */
   className: PropTypes.string,
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
   /** The message to display when deleting files. */
@@ -1443,16 +1480,16 @@ Attachment.propTypes = {
   onChange: PropTypes.func,
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
   /** View attached event, if not it will use default. */