diginet-core-ui 1.3.66 → 1.3.68

package/components/card/body.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 CardBody = /*#__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-Body`, className].join(' ').trim().replace(/\s+/g, ' ')
+    }, children);
+  }, [children, className, id, style, title]);
+}));
+CardBody.defaultProps = {
+  className: '',
+  style: {}
+};
+CardBody.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 { CardBody };
+export default OptionWrapper(CardBody);

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';
       }
     }
   };

package/components/form-control/calendar/function.js

@@ -637,6 +637,8 @@ const renderNavigatorContent = time => {
 
 
 const onUpdateNavigator = (time, refs, min, max) => {
+  var _refs$doubleLeft$curr, _refs$doubleLeft$curr2, _refs$doubleRight$cur, _refs$doubleRight$cur2, _refs$left$current, _refs$left$current$in, _refs$right$current, _refs$right$current$i;
+
   const el = refs.content.current;
   const vl = renderNavigatorContent(time);
   const year = locale.get() === 'vi' ? ` ${getGlobal(['year'])} ` : '';
@@ -647,30 +649,38 @@ const onUpdateNavigator = (time, refs, min, max) => {
 
   const firstDayOfMin = new Date(new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0));
   const firstDayOfMax = new Date(new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0));
-  refs.doubleLeft.current.disabled = false;
-  refs.doubleRight.current.disabled = false;
-  refs.left.current.disabled = false;
-  refs.right.current.disabled = false;
+  (_refs$doubleLeft$curr = refs.doubleLeft.current) === null || _refs$doubleLeft$curr === void 0 ? void 0 : (_refs$doubleLeft$curr2 = _refs$doubleLeft$curr.instance) === null || _refs$doubleLeft$curr2 === void 0 ? void 0 : _refs$doubleLeft$curr2.option('disabled', false);
+  (_refs$doubleRight$cur = refs.doubleRight.current) === null || _refs$doubleRight$cur === void 0 ? void 0 : (_refs$doubleRight$cur2 = _refs$doubleRight$cur.instance) === null || _refs$doubleRight$cur2 === void 0 ? void 0 : _refs$doubleRight$cur2.option('disabled', false);
+  (_refs$left$current = refs.left.current) === null || _refs$left$current === void 0 ? void 0 : (_refs$left$current$in = _refs$left$current.instance) === null || _refs$left$current$in === void 0 ? void 0 : _refs$left$current$in.option('disabled', false);
+  (_refs$right$current = refs.right.current) === null || _refs$right$current === void 0 ? void 0 : (_refs$right$current$i = _refs$right$current.instance) === null || _refs$right$current$i === void 0 ? void 0 : _refs$right$current$i.option('disabled', false);
 
   if (min && isValidDate(min)) {
     if (moment(time).diff(firstDayOfMin) < 365) {
-      refs.doubleLeft.current.disabled = true;
+      var _refs$doubleLeft$curr3, _refs$doubleLeft$curr4;
+
+      (_refs$doubleLeft$curr3 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr3 === void 0 ? void 0 : (_refs$doubleLeft$curr4 = _refs$doubleLeft$curr3.instance) === null || _refs$doubleLeft$curr4 === void 0 ? void 0 : _refs$doubleLeft$curr4.option('disabled', true);
     }
 
     if (moment(time).diff(firstDayOfMin) <= 28) {
-      refs.doubleLeft.current.disabled = true;
-      refs.left.current.disabled = true;
+      var _refs$doubleLeft$curr5, _refs$doubleLeft$curr6, _refs$left$current2, _refs$left$current2$i;
+
+      (_refs$doubleLeft$curr5 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr5 === void 0 ? void 0 : (_refs$doubleLeft$curr6 = _refs$doubleLeft$curr5.instance) === null || _refs$doubleLeft$curr6 === void 0 ? void 0 : _refs$doubleLeft$curr6.option('disabled', true);
+      (_refs$left$current2 = refs.left.current) === null || _refs$left$current2 === void 0 ? void 0 : (_refs$left$current2$i = _refs$left$current2.instance) === null || _refs$left$current2$i === void 0 ? void 0 : _refs$left$current2$i.option('disabled', true);
     }
   }
 
   if (max && isValidDate(max)) {
     if (moment(time).diff(firstDayOfMax) > -334) {
-      refs.doubleRight.current.disabled = true;
+      var _refs$doubleRight$cur3, _refs$doubleRight$cur4;
+
+      (_refs$doubleRight$cur3 = refs.doubleRight.current) === null || _refs$doubleRight$cur3 === void 0 ? void 0 : (_refs$doubleRight$cur4 = _refs$doubleRight$cur3.instance) === null || _refs$doubleRight$cur4 === void 0 ? void 0 : _refs$doubleRight$cur4.option('disabled', true);
     }
 
     if (moment(time).diff(firstDayOfMax) > -1) {
-      refs.doubleRight.current.disabled = true;
-      refs.right.current.disabled = true;
+      var _refs$doubleRight$cur5, _refs$doubleRight$cur6, _refs$right$current2, _refs$right$current2$;
+
+      (_refs$doubleRight$cur5 = refs.doubleRight.current) === null || _refs$doubleRight$cur5 === void 0 ? void 0 : (_refs$doubleRight$cur6 = _refs$doubleRight$cur5.instance) === null || _refs$doubleRight$cur6 === void 0 ? void 0 : _refs$doubleRight$cur6.option('disabled', true);
+      (_refs$right$current2 = refs.right.current) === null || _refs$right$current2 === void 0 ? void 0 : (_refs$right$current2$ = _refs$right$current2.instance) === null || _refs$right$current2$ === void 0 ? void 0 : _refs$right$current2$.option('disabled', true);
     }
   }
 };

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

@@ -41,8 +41,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       limit: 'DGN-UI-Calendar-Day-limit'
     }
   };
-  /**
-   * START REFERENCE
+  /**
+   * START REFERENCE
    */
 
   const ref = useRef(null);
@@ -61,12 +61,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const firstDayOfMax = new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
   const firstDayOfMin = new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
-  /**
-   * END REFERENCE
+  /**
+   * END REFERENCE
    */
 
-  /**
-   * START FUNCTION
+  /**
+   * START FUNCTION
    */
 
   const onUpdateNavigatorValue = useCallback(value => {
@@ -152,12 +152,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-  /**
-   * END FUNCTION
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START EFFECT
+  /**
+   * START EFFECT
    */
 
 
@@ -198,12 +198,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdate(activeValue.current);
     }
   }, [onClick, min, max]);
-  /**
-   * END FUNCTION
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START COMPONENT
+  /**
+   * START COMPONENT
    */
 
   const tableMemo = jsx("div", {
@@ -212,8 +212,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.table.table,
     ref: tableRef
   }, renderHeader(unique), jsx("tbody", null)));
-  /**
-   * END COMPONENT
+  /**
+   * END COMPONENT
    */
 
   return jsx("div", { ...props,