diginet-core-ui 1.3.55 → 1.3.56

package/components/form-control/number-input/index2.js

@@ -142,6 +142,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     const returnValue = convertMoneyToNumber(valueT);
     e.value = globalRef.current.value = !isNaN(parseFloat(returnValue)) ? parseFloat(returnValue) : null;
     e.target.value = globalRef.current.valueString = valueT || '';
+    globalRef.current.returnValue = returnValue || '';
     onInput === null || onInput === void 0 ? void 0 : onInput(e);
     setValue(valueT);
   };
@@ -294,7 +295,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       onChange({ ...e,
         value: globalRef.current.value,
         target: { ...e.target,
-          value: globalRef.current.valueString
+          value: globalRef.current.valueString,
+          valueString: globalRef.current.returnValue
         }
       });
     },

package/components/index.js

@@ -72,7 +72,7 @@ export { default as ModalBody } from './modal/body';
 export { default as ModalFooter } from './modal/footer'; // PAGING
 
 export { default as PagingInfo } from './paging/page-info';
-export { default as PagingSelector } from './paging/page-selector'; // PAPER
+export { default as PagingSelector } from './paging/page-selector2'; // PAPER
 
 export { default as Paper } from './paper'; // POPOVER
 

package/components/modal/body.js

@@ -1,69 +1,79 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useMemo, useEffect, forwardRef } from 'react';
+import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { useTheme } from '../../theme';
+import { borderBox, displayBlock, overflowAuto, positionRelative } from '../../styles/general';
+import theme from '../../theme/settings';
 const {
   colors: {
-    scrollbar
-  }
-} = useTheme();
+    fill: {
+      'scrollbar-rest': scrollbarRest,
+      'scrollbar-active': scrollbarActive
+    }
+  },
+  spacing
+} = theme;
 const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
-  style,
-  refs,
-  ...props
-}, ref) => {
-  const ModalBodyBox = css`
-        display: block;
-        position: relative;
-        width: 100%;
-        height: auto;
-        padding: 2px 24px;
-        margin: 10px 0;
-        box-sizing: border-box;
-        overflow: auto;
-        order: 2;
-        &::-webkit-scrollbar {
-            width: 24px;
-        }
-        &::-webkit-scrollbar-thumb{
-                border-radius: 10px;
-                mix-blend-mode: normal;
-                background-color: ${scrollbar};
-                background-clip: content-box;
-                border: 8px solid transparent;
-        }
-    `;
-  useEffect(() => {
-    !!refs && refs(ref);
-  }, []);
-  const Body = useMemo(() => jsx("div", {
-    css: ModalBodyBox,
-    className: 'DGN-UI-Modal-Body ' + className,
-    ...props,
+  id,
+  style
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => jsx("div", {
+    css: ModalBodyCSS,
+    id: id,
+    className: ['DGN-UI-Modal-Body', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
     ref: ref
-  }, children), [children, style]);
-  return Body;
+  }, children), [children, className, id, style]);
 }));
+const ModalBodyCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    ${borderBox};
+    ${overflowAuto};
+    width: 100%;
+    height: auto;
+    padding: ${spacing([2, 4])};
+    order: 2;
+    &::-webkit-scrollbar {
+        width: 24px;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        mix-blend-mode: normal;
+        background-color: ${scrollbarRest};
+        background-clip: content-box;
+        border: 8px solid transparent;
+        :hover {
+            background-color: ${scrollbarActive};
+        }
+    }
+`;
 ModalBody.defaultProps = {
-  className: ''
+  className: '',
+  style: {}
 };
 ModalBody.propTypes = {
-  /** customize style inline */
-  style: PropTypes.object,
+  /** The content of the component. */
+  children: PropTypes.node,
 
-  /** class of ModalBody */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** get modal header ref by function */
-  refs: PropTypes.func,
-
-  /** child content in header (like title) */
-  children: PropTypes.node
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default ModalBody;

package/components/modal/footer.js

@@ -1,61 +1,63 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
+import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
+import { alignCenter, borderBox, flexRow, justifyEnd, positionRelative } from '../../styles/general';
+import theme from '../../theme/settings';
+const {
+  spacing
+} = theme;
 const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
-  style,
-  refs,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
+  id,
+  style
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
 
-  const ModalFooterBox = css`
-        display: flex;
-        position: relative;
-        width: 100%;
-        min-height: 56px;
-        margin-top: 2px;
-        padding: 16px 24px;
-        align-items: center;
-        justify-content: flex-end;
-        border-radius: 0px 0px 4px 4px;
-        box-sizing: border-box;
-        /* box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.25); */
-        box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
-        order: 3;
-    `;
-  useEffect(() => {
-    !!refs && refs(ref);
-  }, []);
-  const Footer = useMemo(() => jsx("div", {
-    css: ModalFooterBox,
-    className: 'DGN-UI-Modal-Footer ' + className,
-    ...props,
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => jsx("div", {
+    css: ModalFooterCSS,
+    id: id,
+    className: ['DGN-UI-Modal-Footer', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
     ref: ref
-  }, children), [children, style]);
-  return Footer;
+  }, children), [children, className, id, style]);
 }));
+const ModalFooterCSS = css`
+    ${flexRow};
+    ${positionRelative};
+    ${alignCenter};
+    ${justifyEnd};
+    ${borderBox};
+    width: 100%;
+    min-height: 56px;
+    padding: ${spacing([4, 6])};
+    border-radius: 0px 0px 4px 4px;
+    box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
+    order: 3;
+`;
 ModalFooter.defaultProps = {
-  className: ''
+  className: '',
+  style: {}
 };
 ModalFooter.propTypes = {
-  /** customize style inline */
-  style: PropTypes.object,
+  /** The content of the component. */
+  children: PropTypes.node,
 
-  /** class of ModalFooter */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** get modal header ref by function */
-  refs: PropTypes.func,
-
-  /** child content in header (like title) */
-  children: PropTypes.node
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default ModalFooter;

package/components/modal/header.js

@@ -7,13 +7,17 @@ import { jsx, css } from '@emotion/core';
 import ModalContext from './context';
 import { ButtonIcon, Typography } from '../';
 import { alignCenter, borderBox, flexRow, justifyBetween, positionRelative } from '../../styles/general';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  fill: {
-    headerbar
-  }
-} = colors;
+  colors: {
+    fill: {
+      headerbar
+    }
+  },
+  spacing
+} = theme;
 const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   title,
   className,
   children,
@@ -36,6 +40,7 @@ const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => jsx("div", {
     css: _ModalHeaderCSS,
+    id: id,
     className: ['DGN-UI-Modal-Header', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
     onMouseDown: modal.onMoveModal,
@@ -52,10 +57,10 @@ const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     viewType: 'ghost',
     name: 'Close',
     style: {
-      marginLeft: 16
+      marginLeft: spacing(4)
     },
     onClick: modal.close
-  })), [children, title, style, className, showClose]);
+  })), [children, className, id, showClose, style, title]);
 }));
 
 const ModalHeaderCSS = modal => css`
@@ -67,8 +72,7 @@ const ModalHeaderCSS = modal => css`
     background-color: ${headerbar};
     width: 100%;
     height: 56px;
-    padding: 16px 24px;
-    margin-bottom: 2px;
+    padding: ${spacing([4, 6])};
     border-radius: 4px 4px 0px 0px;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
     cursor: ${modal.onMoveModal ? 'move' : 'inherit'};
@@ -82,19 +86,19 @@ ModalHeader.defaultProps = {
   showClose: true
 };
 ModalHeader.propTypes = {
-  /**  style inline of component */
-  style: PropTypes.object,
+  /** The content of the component. */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** class for component */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** content for header (not work when have children) */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** If `true`, button close is shown. */
+  showClose: PropTypes.bool,
 
-  /** content in header (priority) */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** show close modal button */
-  showClose: PropTypes.bool
+  /** The content of the component if not have prop `children`. */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 export default ModalHeader;

package/components/modal/modal.js

@@ -5,25 +5,26 @@ import { memo, useState, useRef, forwardRef, useEffect, useMemo, useImperativeHa
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
+import useDelayUnmount from '../../utils/useDelayUnmount';
 import ModalContext from './context';
 import { animations } from '../../styles/animation';
-import { typography } from '../../styles/typography';
 import { borderBox, borderRadius4px, flexCol, flexRow, justifyCenter, parseWidth, positionFixed, positionRelative } from '../../styles/general';
-import { color as colors } from '../../styles/colors';
-const {
-  paragraph1
-} = typography;
-const {
-  system: {
-    white
-  }
-} = colors;
-const fadeInDown = animations.fadeInDown;
-import { useTheme } from '../../theme';
+import theme from '../../theme/settings';
 const {
+  colors: {
+    system: {
+      white
+    }
+  },
+  typography: {
+    paragraph1
+  },
   zIndex: zIndexCORE
-} = useTheme();
+} = theme;
+const fadeInDown = animations.fadeInDown;
+const fadeOutUp = animations.fadeOutUp;
 const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   open,
   moveable,
   dragAnyWhere,
@@ -40,8 +41,10 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className
 }, reference) => {
   const ref = useRef(null);
+  const overflow = useRef(null);
   const modalBoxRef = useRef(null);
   const [openState, setOpenState] = useState(open);
+  const showModal = useDelayUnmount(openState, 200);
 
   const _ModalContainerCSS = ModalContainerCSS(zIndex, alignment, darkTheme);
 
@@ -52,12 +55,10 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onCloseModal = () => {
+    document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
+
     onClose && onClose();
     setOpenState(false);
-
-    if (pressESCToClose) {
-      document.removeEventListener('keydown', pressESCHandler);
-    }
   };
 
   const pressESCHandler = event => {
@@ -127,6 +128,11 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   };
 
+  useEffect(() => {
+    return () => {
+      document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
+    };
+  }, []);
   useEffect(() => {
     setOpenState(open);
   }, [open]);
@@ -147,13 +153,21 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
 
-      document.documentElement.style.overflow = 'hidden'; // Allow press ESC to close popup
+      overflow.current = document.body.style.overflow; // overflow of <body /> before open modal
+
+      document.body.style.overflow = 'hidden'; // Allow press ESC to close popup
 
       if (pressESCToClose) {
         document.addEventListener('keydown', pressESCHandler);
       }
-    } else {
-      document.documentElement.style.overflow = null;
+
+      return () => {
+        document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
+
+        if (pressESCToClose) {
+          document.removeEventListener('keydown', pressESCHandler);
+        }
+      };
     }
   }, [openState]);
   useImperativeHandle(reference, () => {
@@ -166,7 +180,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   return useMemo(() => {
-    if (openState) {
+    if (showModal) {
       const node = jsx("div", {
         className: 'DGN-UI-Portal DGN-UI-Modal',
         style: {
@@ -175,6 +189,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           inset: 0
         }
       }, jsx("div", {
+        id: id,
         css: _ModalContainerCSS,
         className: 'DGN-UI-Modal-Container',
         ref: ref
@@ -182,7 +197,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         css: _ModalBoxCSS,
         ref: modalBoxRef,
         onMouseDown: moveable && dragAnyWhere ? dragMouseDown : null,
-        className: ['DGN-UI-Modal-Box', className].join(' ').trim().replace(/\s+/g, ' '),
+        className: [`DGN-UI-Modal-Box ${openState ? 'DGN-UI-Modal-Show' : 'DGN-UI-Modal-Hide'}`, className].join(' ').trim().replace(/\s+/g, ' '),
         style: style
       }, jsx(ModalContext.Provider, {
         value: {
@@ -195,7 +210,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return null;
-  }, [moveable, dragAnyWhere, style, className, children, openState]);
+  }, [id, moveable, dragAnyWhere, style, className, children, openState, showModal]);
 }));
 
 const ModalContainerCSS = (zIndex, alignment, darkTheme) => css`
@@ -231,6 +246,13 @@ const ModalBoxCSS = (width, moveable, dragAnyWhere) => css`
     -webkit-box-direction: normal;
     animation: ${fadeInDown} 0.2s ease;
     animation-fill-mode: forwards;
+    &.DGN-UI-Modal-Show {
+        animation: ${fadeInDown} 0.2s ease;
+    }
+    &.DGN-UI-Modal-Hide {
+        animation: ${fadeOutUp} 0.3s ease;
+        animation-fill-mode: forwards;
+    }
 `;
 
 Modal.defaultProps = {
@@ -248,46 +270,46 @@ Modal.defaultProps = {
   className: ''
 };
 Modal.propTypes = {
-  /** Set the position on the component. */
+  /** The component alignment. */
   alignment: PropTypes.oneOf(['top', 'center']),
 
-  /** park a good colored background under the modal box if true */
-  darkTheme: PropTypes.bool,
+  /** If `true`, focus when component is shown. */
+  autoFocus: PropTypes.bool,
 
-  /** show modal if true */
-  open: PropTypes.bool,
+  /** The content of the component. */
+  children: PropTypes.node,
 
-  /** allow press ESC to close Modal component */
-  pressESCToClose: PropTypes.bool,
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** allow move the modal by drag and move */
-  moveable: PropTypes.bool,
+  /** If `true`, dark backdrop when component is shown. */
+  darkTheme: PropTypes.bool,
 
-  /** allow move the modal at any position on Modal */
+  /** If `true`, allow drag the component at any position. */
   dragAnyWhere: PropTypes.bool,
 
-  /** allows you to drag the Modal out of the screen */
+  /** 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,
 
-  /** focusing after open modal */
-  autoFocus: PropTypes.bool,
+  /** Callback fired when the component requests to be closed. */
+  onClose: PropTypes.func,
 
-  /** z-index style of Modal */
-  zIndex: PropTypes.number,
+  /** If `true`, the component is shown. */
+  open: PropTypes.bool,
 
-  /** width of the modal */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** If `true`, hitting escape will close component. */
+  pressESCToClose: PropTypes.bool,
 
-  /** customize style inline */
+  /** Style inline of component. */
   style: PropTypes.object,
 
-  /** className of component */
-  className: PropTypes.string,
-
-  /** the function to run when close modal */
-  onClose: PropTypes.func,
+  /** Width of the component. */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /** child content in body */
-  children: PropTypes.node
+  /** The z-index of component. */
+  zIndex: PropTypes.number
 };
 export default Modal;