diginet-core-ui 1.3.88 → 1.3.89

package/components/modal/body.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -27,11 +26,10 @@ const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -72,10 +70,8 @@ ModalBody.defaultProps = {
 ModalBody.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/modal/footer.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -16,17 +15,14 @@ const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style
 }, reference) => {
   const ref = useRef(null);
-
   const _ModalFooterCSS = ModalFooterCSS(boxShadow);
-
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -38,7 +34,6 @@ const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: ref
   }, children), [boxShadow, children, className, id, style]);
 }));
-
 const ModalFooterCSS = boxShadow => css`
     ${flexRow};
     ${positionRelative};
@@ -52,7 +47,6 @@ const ModalFooterCSS = boxShadow => css`
     order: 3;
     ${responsivePaddingCSS};
 `;
-
 ModalFooter.defaultProps = {
   boxShadow: '0px -1px 1px rgba(0, 0, 0, 0.25)',
   className: '',
@@ -61,13 +55,10 @@ ModalFooter.defaultProps = {
 ModalFooter.propTypes = {
   /** The box-shadow of component. */
   boxShadow: PropTypes.string,
-
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/modal/header.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useContext, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -37,17 +36,14 @@ const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const modal = useContext(ModalContext);
   const ref = useRef(null);
-
   const _ModalHeaderCSS = ModalHeaderCSS(modal);
-
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -75,7 +71,6 @@ const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClick: modal.close
   })), [children, className, id, showClose, style, title]);
 }));
-
 const ModalHeaderCSS = modal => css`
     ${flexRow};
     ${positionRelative};
@@ -90,7 +85,6 @@ const ModalHeaderCSS = modal => css`
     order: 1;
     ${responsivePaddingCSS};
 `;
-
 ModalHeader.defaultProps = {
   className: '',
   showClose: true,
@@ -100,16 +94,12 @@ ModalHeader.defaultProps = {
 ModalHeader.propTypes = {
   /** The content of the component. */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** If `true`, button close is shown. */
   showClose: PropTypes.bool,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** The content of the component if not have prop `children`. */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };

package/components/modal/index.js

@@ -20,11 +20,10 @@ const ModalSample = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -46,25 +45,18 @@ ModalSample.defaultProps = {
 ModalSample.propTypes = {
   /** Style inline of the body component. */
   bodyStyle: PropTypes.object,
-
   /** The content of the body component. */
   children: PropTypes.node,
-
   /** The content of the footer component. */
   footer: PropTypes.node,
-
   /** Style inline of the footer component. */
   footerStyle: PropTypes.object,
-
   /** Style inline of the header component. */
   headerStyle: PropTypes.object,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** The content of the header component. */
   title: PropTypes.node,
-
   /** Any props else. */
   props: PropTypes.any
 };

package/components/modal/modal.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useState, useRef, forwardRef, useEffect, useMemo, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
@@ -48,44 +47,34 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const modalBoxRef = useRef(null);
   const [openState, setOpenState] = useState(open);
   const showModal = useDelayUnmount(openState, 200);
-
   const _ModalContainerCSS = ModalContainerCSS(zIndex, alignment, darkTheme);
-
   const _ModalBoxCSS = ModalBoxCSS(width, moveable, dragAnyWhere);
-
   const onShowModal = () => {
     setOpenState(true);
   };
-
   const onCloseModal = () => {
     document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
-
     onClose && onClose();
     setOpenState(false);
   };
-
   const pressESCHandler = event => {
     if (event.key === 'Escape') {
       const modals = document.querySelectorAll('.DGN-UI-Portal');
-
       if ((modals === null || modals === void 0 ? void 0 : modals.length) > 1 && Array.from(modals)[modals.length - 1] && !Array.from(modals)[modals.length - 1].contains(ref.current)) {
         return;
       }
-
       onCloseModal();
     }
   };
-
   const dragMouseDown = e => {
     let pos1 = 0,
-        pos2 = 0,
-        pos3 = 0,
-        pos4 = 0;
+      pos2 = 0,
+      pos3 = 0,
+      pos4 = 0;
     pos3 = e.clientX;
     pos4 = e.clientY;
     const maxTop = window.innerHeight - modalBoxRef.current.offsetHeight;
     const maxLeft = window.innerWidth - modalBoxRef.current.offsetWidth;
-
     if (modalBoxRef.current.style.display !== 'block') {
       const top = modalBoxRef.current.offsetTop;
       const left = modalBoxRef.current.offsetLeft;
@@ -95,14 +84,12 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       modalBoxRef.current.style.top = top + 'px';
       modalBoxRef.current.style.left = left + 'px';
     }
-
     document.onmouseup = () => {
       /* stop moving when mouse button is released:*/
       document.onmouseup = null;
       document.onmousemove = null;
-    }; // call a function whenever the cursor moves:
-
-
+    };
+    // call a function whenever the cursor moves:
     document.onmousemove = el => {
       pos1 = pos3 - el.clientX;
       pos2 = pos4 - el.clientY;
@@ -110,27 +97,23 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       pos4 = el.clientY;
       let newTop = modalBoxRef.current.offsetTop - pos2;
       let newLeft = modalBoxRef.current.offsetLeft - pos1;
-
       if (!moveOutScreen) {
         if (newTop > maxTop) {
           newTop = maxTop;
         } else if (newTop < 0) {
           newTop = 0;
         }
-
         if (newLeft > maxLeft) {
           newLeft = maxLeft;
         } else if (newLeft < 0) {
           newLeft = 0;
         }
-      } // set the element's new position:
-
-
+      }
+      // set the element's new position:
       modalBoxRef.current.style.top = newTop + 'px';
       modalBoxRef.current.style.left = newLeft + 'px';
     };
   };
-
   useEffect(() => {
     return () => {
       document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
@@ -143,11 +126,9 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (openState) {
       if (ref.current) {
         const modals = document.querySelectorAll('.DGN-UI-Modal');
-
         if (!darkTheme && modals && modals.length > 1) {
           ref.current.style.backgroundColor = 'transparent';
         }
-
         if (autoFocus) {
           if (!ref.current.contains(document.activeElement)) {
             ref.current.tabIndex = -1;
@@ -155,18 +136,14 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }
         }
       }
-
       overflow.current = document.body.style.overflow; // overflow of <body /> before open modal
-
-      document.body.style.overflow = 'hidden'; // Allow press ESC to close popup
-
+      document.body.style.overflow = 'hidden';
+      // Allow press ESC to close popup
       if (pressESCToClose) {
         document.addEventListener('keydown', pressESCHandler);
       }
-
       return () => {
         document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
-
         if (pressESCToClose) {
           document.removeEventListener('keydown', pressESCHandler);
         }
@@ -176,11 +153,10 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -213,11 +189,9 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, children))));
       return /*#__PURE__*/createPortal(node, document.body);
     }
-
     return null;
   }, [children, className, dragAnyWhere, id, moveable, moveOutScreen, onClose, style, openState, showModal]);
 }));
-
 const ModalContainerCSS = (zIndex, alignment, darkTheme) => css`
     ${flexRow};
     ${positionFixed};
@@ -230,7 +204,6 @@ const ModalContainerCSS = (zIndex, alignment, darkTheme) => css`
     top: 0;
     left: 0;
 `;
-
 const ModalBoxCSS = (width, moveable, dragAnyWhere) => css`
     ${paragraph1};
     ${flexCol};
@@ -258,7 +231,6 @@ const ModalBoxCSS = (width, moveable, dragAnyWhere) => css`
         animation-fill-mode: forwards;
     }
 `;
-
 Modal.defaultProps = {
   alignment: 'top',
   autoFocus: true,
@@ -276,43 +248,30 @@ Modal.defaultProps = {
 Modal.propTypes = {
   /** The component alignment. */
   alignment: PropTypes.oneOf(['top', 'center']),
-
   /** If `true`, focus when component is shown. */
   autoFocus: PropTypes.bool,
-
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** If `true`, dark backdrop when component is shown. */
   darkTheme: PropTypes.bool,
-
   /** If `true`, allow drag the component at any position. */
   dragAnyWhere: PropTypes.bool,
-
   /** If `true`, allow move the component by drag and move. */
   moveable: PropTypes.bool,
-
   /** If `true`, allows drag the component out of the screen. */
   moveOutScreen: PropTypes.bool,
-
   /** Callback fired when the component requests to be closed. */
   onClose: PropTypes.func,
-
   /** If `true`, the component is shown. */
   open: PropTypes.bool,
-
   /** If `true`, hitting escape will close component. */
   pressESCToClose: PropTypes.bool,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** The z-index of component. */
   zIndex: PropTypes.number
 };

package/components/others/extra/index.js

@@ -1,7 +1,5 @@
 /* eslint-disable react/prop-types */
-
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useState, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -16,7 +14,6 @@ const icons = {
         <path fillRule="evenodd" clip-rule="evenodd" d="M7.00011 6.99993C7.22711 6.99993 7.45511 7.07693 7.64011 7.23193L13.6401 12.2319C14.0641 12.5859 14.1211 13.2159 13.7681 13.6399C13.4141 14.0649 12.7851 14.1209 12.3601 13.7679L6.98911 9.29293L1.62711 13.6069C1.19711 13.9529 0.566109 13.8849 0.221108 13.4549C-0.125891 13.0249 -0.0568903 12.3959 0.373109 12.0489L6.37311 7.22093C6.55611 7.07393 6.77811 6.99993 7.00011 6.99993ZM6.98901 2.29243L1.62701 6.60743C1.19701 6.95243 0.56601 6.88443 0.22101 6.45543C-0.12499 6.02443 -0.0569899 5.39543 0.37301 5.04843L6.37301 0.220434C6.55601 0.0734332 6.77801 0.000434244 7.00001 0.000434264C7.22801 0.000434283 7.45501 0.077434 7.64001 0.232434L13.64 5.23243C14.065 5.58543 14.122 6.21543 13.768 6.64043C13.415 7.06443 12.785 7.12243 12.36 6.76843L6.98901 2.29243Z" fill="currentColor"/>
     </svg>`
 };
-
 const Extra = ({
   type,
   displayText,
@@ -28,8 +25,8 @@ const Extra = ({
   const textRef = useRef(null);
   const iconRef = useRef(null);
   const [typeState, setTypeState] = useState(type);
-  /* Start styled */
 
+  /* Start styled */
   const extraIcon = css`
         display: flex;
         align-items: center;
@@ -64,7 +61,6 @@ const Extra = ({
   /* End styled */
 
   /* Start handler */
-
   const handleClick = () => {
     if (typeState === 'expand') {
       iconRef.current.innerHTML = icons.collapse;
@@ -75,12 +71,10 @@ const Extra = ({
       textRef.current.innerHTML = displayText || 'Xem thêm';
       setTypeState('expand');
     }
-
     if (onClick) onClick({
       type: typeState === 'expand' ? 'collapse' : 'expand'
     });
   };
-
   useEffect(() => {
     iconRef.current.innerHTML = type === 'expand' ? icons.expand : icons.collapse;
     setTypeState(type);
@@ -91,7 +85,6 @@ const Extra = ({
   /* End handler */
 
   /* Start component */
-
   const iconComp = useMemo(() => jsx("div", {
     ref: iconRef,
     css: extraIcon
@@ -102,14 +95,14 @@ const Extra = ({
   }, displayText), []);
   /* End component */
 
-  return jsx("div", { ...props,
+  return jsx("div", {
+    ...props,
     ref: extraRef,
     css: extra,
     onClick: handleClick,
     style: style
   }, iconComp, textComp);
 };
-
 Extra.defaultProps = {
   type: 'expand'
 };

package/components/others/import/index.js

@@ -1,21 +1,17 @@
 import React from 'react';
 import { Button, Typography, Notify as AlertNotify } from "../..";
 import PropTypes from 'prop-types';
-
 const ImportComp = ({
   components,
   from = 'components',
   importDefault = false
 }) => {
   let text = Array.isArray(components) ? components.join(', ') : components;
-
   if (!importDefault) {
     text = `{ ${text} }`;
   }
-
   const importText = `import ${text} from 'diginet-core-ui/${from}';`;
   let Notify = null;
-
   const onCopyImport = () => {
     if (!components) {
       Notify(`Không có components để copy`, {
@@ -23,7 +19,6 @@ const ImportComp = ({
       });
       return;
     }
-
     const el = document.createElement('input');
     el.value = importText;
     document.body.appendChild(el);
@@ -32,7 +27,6 @@ const ImportComp = ({
     document.body.removeChild(el);
     Notify(`Đã copy ${text} from ${from}`);
   };
-
   return components ? /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -69,7 +63,6 @@ const ImportComp = ({
     color: 'warning'
   }, "(Khoan h\u1EB5n d\xF9ng)"));
 };
-
 ImportComp.propTypes = {
   components: PropTypes.string,
   from: PropTypes.string,

package/components/others/option-wrapper/index.js

@@ -1,13 +1,10 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { useState, forwardRef, useEffect } from 'react';
 import { jsx } from '@emotion/core';
-
 const OptionWrapper = WrappedComponent => {
   return /*#__PURE__*/forwardRef((props, ref) => {
     const [options, setOptions] = useState({});
-
     const option = (option, optionValue) => {
       if (typeof option === 'undefined') {
         return props;
@@ -16,16 +13,17 @@ const OptionWrapper = WrappedComponent => {
           [option]: optionValue
         });
       } else if (typeof option === 'object') {
-        setOptions({ ...options,
+        setOptions({
+          ...options,
           ...option
         });
       }
     };
-
     useEffect(() => {
       setOptions({});
     }, [props]);
-    return jsx(WrappedComponent, { ...props,
+    return jsx(WrappedComponent, {
+      ...props,
       ...options,
       action: {
         option
@@ -34,5 +32,4 @@ const OptionWrapper = WrappedComponent => {
     });
   });
 };
-
 export default OptionWrapper;

package/components/others/scrollbar/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo } from 'react';
 import PropTypes from 'prop-types';
@@ -19,7 +18,6 @@ const getPosition = {
 		text-align: left;
 	`
 };
-
 const scrollbar = ({
   backgroundScroll,
   backgroundThumb,
@@ -70,7 +68,6 @@ const scrollbar = ({
     ...props
   }, children);
 };
-
 scrollbar.defaultProps = {
   backgroundScroll: white,
   backgroundThumb: dark12,