diginet-core-ui 1.3.66 → 1.3.67

package/components/card/extra.js

@@ -0,0 +1,47 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
+const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  id,
+  style,
+  title
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  return useMemo(() => {
+    return jsx("div", {
+      id: id,
+      ref: ref,
+      style: style,
+      className: [`DGN-UI-Card-Extra`, className].join(' ').trim().replace(/\s+/g, ' ')
+    }, children);
+  }, [children, className, id, style, title]);
+}));
+CardExtra.defaultProps = {
+  className: '',
+  style: {}
+};
+CardExtra.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
+  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+
+  /** If `true`, will have divider between body and footer. */
+  style: PropTypes.object,
+
+  /** The title of the component's header. */
+  title: PropTypes.string
+};
+export { CardExtra };
+export default OptionWrapper(CardExtra);

package/components/card/footer.js

@@ -0,0 +1,47 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
+const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  id,
+  style,
+  title
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  return useMemo(() => {
+    return jsx("div", {
+      id: id,
+      ref: ref,
+      style: style,
+      className: [`DGN-UI-Card-Footer`, className].join(' ').trim().replace(/\s+/g, ' ')
+    }, children);
+  }, [children, className, id, style, title]);
+}));
+CardFooter.defaultProps = {
+  className: '',
+  style: {}
+};
+CardFooter.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
+  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+
+  /** If `true`, will have divider between body and footer. */
+  style: PropTypes.object,
+
+  /** The title of the component's header. */
+  title: PropTypes.string
+};
+export { CardFooter };
+export default OptionWrapper(CardFooter);

package/components/card/header.js

@@ -0,0 +1,50 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
+import Typography from '../typography';
+const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  id,
+  style,
+  title
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  return useMemo(() => {
+    return jsx("div", {
+      id: id,
+      ref: ref,
+      style: style,
+      className: [`DGN-UI-Card-Header`, className].join(' ').trim().replace(/\s+/g, ' ')
+    }, children || jsx(Typography, {
+      type: 'h3'
+    }, title));
+  }, [children, className, id, style, title]);
+}));
+CardHeader.defaultProps = {
+  className: '',
+  style: {}
+};
+CardHeader.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
+  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+
+  /** If `true`, will have divider between body and footer. */
+  style: PropTypes.object,
+
+  /** The title of the component's header. */
+  title: PropTypes.string
+};
+export { CardHeader };
+export default OptionWrapper(CardHeader);

package/components/card/index.js

@@ -1,50 +1,188 @@
-/* eslint-disable react/display-name */
-import React, { memo, useEffect, useRef, forwardRef } from 'react';
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import Card from './card';
-import BodyCard from './body-card';
-const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  style,
+import { jsx, css } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
+import theme from '../../theme/settings';
+import { borderBox, borderRadius4px, flexCol, flexRow, justifyEnd, overflowHidden, parseWidth, parseWidthHeight, positionAbsolute, positionRelative } from '../../styles/general';
+import CardHeader from './header';
+import { CardFooter } from './footer';
+import { CardBody } from './body';
+import { getColor } from '../../styles/utils';
+const {
+  colors: {
+    system: {
+      white
+    },
+    line: {
+      category
+    }
+  },
+  spacing
+} = theme;
+const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  body: bodyProp,
   bodyStyle,
-  refs,
   children,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
-  useEffect(() => {
-    if (refs) refs(ref);
-  }, []);
-  return /*#__PURE__*/React.createElement(Card, {
-    ref: ref,
-    style: style,
-    ...props
-  }, /*#__PURE__*/React.createElement(BodyCard, {
+  className,
+  dividerColor,
+  footer,
+  footerDivider,
+  footerStyle,
+  header,
+  headerDivider,
+  headerStyle,
+  height,
+  id,
+  style,
+  title,
+  width
+}, reference) => {
+  const ref = useRef(null);
+
+  const _CardCSS = CardCSS(width, height, headerDivider, footerDivider, dividerColor);
+
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  const head = header || title ? jsx(CardHeader, {
+    className: (className === null || className === void 0 ? void 0 : className.header) || '',
+    style: headerStyle,
+    title: title
+  }, header) : null;
+  const foot = footer ? jsx(CardFooter, {
+    className: (className === null || className === void 0 ? void 0 : className.footer) || '',
+    style: footerStyle
+  }, footer) : null;
+  const body = bodyProp || children && (head || foot) ? jsx(CardBody, {
+    className: (className === null || className === void 0 ? void 0 : className.body) || '',
     style: bodyStyle
-  }, children));
+  }, bodyProp || children) : null;
+  return useMemo(() => {
+    return jsx("div", {
+      id: id,
+      ref: ref,
+      css: _CardCSS,
+      style: style,
+      className: [`DGN-UI-Card`, (className === null || className === void 0 ? void 0 : className.container) || className].join(' ').trim().replace(/\s+/g, ' ')
+    }, head, body || children, foot);
+  }, [bodyProp, bodyStyle, children, className, dividerColor, footer, footerDivider, footerStyle, header, headerDivider, headerStyle, height, id, style, title, width]);
 }));
-Popup.defaultProps = {
-  title: ''
+
+const CardCSS = (width, height, headerDivider, footerDivider, dividerColor) => css`
+    ${flexCol};
+    ${positionRelative};
+    ${borderBox};
+    ${borderRadius4px};
+    ${overflowHidden}
+    ${parseWidthHeight(width || spacing([64.5]), height || 'max-content')};
+    ${parseWidth(width)};
+    background: ${white};
+    .DGN-UI-Card-Header {
+        ${flexRow};
+        ${positionRelative};
+        ${borderBox};
+        order: 1;
+        padding: ${spacing([4])};
+        &:after {
+            ${positionAbsolute};
+            content: '';
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: ${spacing([0, 4])};
+            border-bottom: ${headerDivider ? `1px solid ${getColor(dividerColor)}` : 'none'};
+        }
+    }
+    .DGN-UI-Card-Body {
+        ${flexCol};
+        ${positionRelative};
+        ${borderBox};
+        order: 2;
+        padding: ${headerDivider ? spacing([4]) : spacing([0, 4, 4])};
+    }
+    .DGN-UI-Card-Footer {
+        ${flexRow};
+        ${justifyEnd};
+        ${positionRelative};
+        ${borderBox};
+        order: 3;
+        padding: ${footerDivider ? spacing([4]) : spacing([0, 4, 4])};
+        &:before {
+            ${positionAbsolute};
+            content: '';
+            left: 0;
+            right: 0;
+            top: 0;
+            margin: ${spacing([0, 4])};
+            border-top: ${footerDivider ? `1px solid ${getColor(dividerColor)}` : 'none'};
+        }
+    }
+    .DGN-UI-Card-Extra {
+        ${flexCol};
+        ${positionRelative};
+        ${borderBox};
+    }
+`;
+
+Card.defaultProps = {
+  bodyStyle: {},
+  className: '',
+  dividerColor: category,
+  footerDivider: false,
+  footerStyle: {},
+  headerDivider: true,
+  headerStyle: {},
+  style: {}
 };
-Popup.propTypes = {
-  /** customize style inline */
-  style: PropTypes.object,
+Card.propTypes = {
+  /** The content of the component's body. */
+  body: PropTypes.node,
 
-  /** custom style inline for body */
+  /** The content of the component's body. */
   bodyStyle: PropTypes.object,
 
-  /** get card ref by function */
-  refs: PropTypes.func,
+  /** The content of the component. */
+  children: PropTypes.node,
 
-  /** title for header */
-  title: PropTypes.node,
+  /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
+  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 
-  /** child content in body */
-  children: PropTypes.node,
+  /** Color of divider. */
+  dividerColor: PropTypes.string,
+
+  /** The content of the component's footer. */
+  footer: PropTypes.node,
+
+  /** If `true`, will have divider between body and footer. */
+  footerDivider: PropTypes.bool,
+
+  /** Style inline of component's footer. */
+  footerStyle: PropTypes.object,
+
+  /** The content of the component's header. */
+  header: PropTypes.node,
+
+  /** If `true`, will have divider between header and body. */
+  headerDivider: PropTypes.bool,
+
+  /** Style inline of component's header. */
+  headerStyle: PropTypes.object,
+
+  /** Height of the component. */
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** The title of the component's header. */
+  title: PropTypes.string,
 
-  /** any props else */
-  props: PropTypes.any
+  /** Width of the component. */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
-export default Popup;
+export { Card };
+export default OptionWrapper(Card);

package/components/chart/Pie-v2/Sector.js

@@ -94,8 +94,8 @@ Sector.propTypes = {
   onTouchEnd: PropTypes.func,
   onTouchStart: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
   path: PropTypes.string.isRequired,

package/components/chip/attach.js

@@ -156,11 +156,11 @@ const AttachChip = /*#__PURE__*/memo(({
   }))), attachView);
 });
 AttachChip.propTypes = {
-  /** the file info, such as:<br/>
-   * {<br/>
-   *  URL: https://url.com/pathname,<br/>
-   *  FileName: file.name,<br/>
-   * }
+  /** the file info, such as:<br/>
+   * {<br/>
+   *  URL: https://url.com/pathname,<br/>
+   *  FileName: file.name,<br/>
+   * }
    */
   file: PropTypes.shape({
     URL: PropTypes.string.isRequired,

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

@@ -234,6 +234,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const afterChangeFile = (length = 0) => {
+    var _sortIconRef$current;
+
     if (!length) {
       if (!attachmentImageRef.current.classList.contains('hint-center')) {
         attachmentImageRef.current.classList.add('hint-center');
@@ -242,11 +244,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       attachmentImageRef.current.classList.remove('hint-center');
     }
 
-    if (sortIconRef.current) {
+    if ((_sortIconRef$current = sortIconRef.current) !== null && _sortIconRef$current !== void 0 && _sortIconRef$current.element) {
       if (length > 1) {
-        sortIconRef.current.style.display = null;
+        sortIconRef.current.element.style.display = null;
       } else {
-        sortIconRef.current.style.display = 'none';
+        sortIconRef.current.element.style.display = 'none';
       }
     }
   };
@@ -1784,17 +1786,17 @@ Attachment.propTypes = {
   /** 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,
 
@@ -1837,16 +1839,16 @@ Attachment.propTypes = {
   /** 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,