diginet-core-ui 1.3.35-beta.3 → 1.3.35-beta.4

package/components/form-control/date-range-picker/index.js

@@ -12,6 +12,10 @@ import { randomString, updatePosition, date as moment, capitalizeSentenceCase, i
 import { getGlobal } from '../../../global';
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from '../calendar/function';
 import locale from '../../../locale';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actionIconAt,
   controls,

package/components/form-control/time-picker/index.js

@@ -9,6 +9,10 @@ import { randomString, useOnClickOutside } from '../../../utils';
 import theme from '../../../theme/settings';
 import Swiper from './swiper';
 import { typography } from '../../../styles/typography';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 
 const formatDimension = x => {
   const regexPercent = /^\d+%$/;

package/components/modal/modal.js

@@ -1,133 +1,69 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useState, useRef, forwardRef, useEffect, useMemo } from 'react';
+import { memo, useState, useRef, forwardRef, useEffect, useMemo, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
-import { jsx, css, keyframes } from '@emotion/core';
+import { jsx, css } from '@emotion/core';
 import ModalContext from './context';
+import { animations } from '../../styles/animation';
 import { typography } from '../../styles/typography';
 import { useTheme } from '../../theme';
 const {
   zIndex: zIndexCORE
 } = useTheme();
+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;
 const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
-  type,
-  title,
   moveable,
   dragAnyWhere,
   moveOutScreen,
   style,
-  top,
   zIndex,
   pressESCToClose,
   darkTheme,
   autoFocus,
-  refs,
   onClose,
-  onConfirm,
-  onCancel,
   children,
   width,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+  alignment
+}, reference) => {
+  const ref = useRef(null);
   const modalBoxRef = useRef(null);
   const [openState, setOpenState] = useState(open);
-  const ModalContainer = css`
-                position: fixed;
-                display: flex;
-                width: 100%;
-                height: 100vh;
-                background-color: ${darkTheme ? 'rgba(21, 26, 48, 0.5)' : 'transparent'};
-                top: 0;
-                left: 0;
-                justify-content: center;
-                align-items: ${top ? 'inherit' : 'center'};
-                padding-top: ${top ? isNaN(top) ? top : top + 'px' : 0};
-                opacity: 0;
-                transition: opacity 0.3s ease;
-                z-index: ${zIndexCORE()};
-            `;
-  const fadeInDown = keyframes`
-        0% {
-            opacity: 0;
-            -webkit-transform: translate3d(0, -30px, 0);
-            transform: translate3d(0, -30px, 0);
-        }
-        to {
-            opacity: 1;
-            -webkit-transform: translateZ(0);
-            transform: translateZ(0);
-        }
-    `;
-  const fadeOutUp = keyframes`
-        0% {
-            opacity: 1;
-        }
-        to {
-            opacity: 0;
-            -webkit-transform: translate3d(0, -30px, 0);
-            transform: translate3d(0, -30px, 0);
-        }
-    `;
-  const ModalBox = css`
-                display: flex;
-                flex-direction: column;
-                position: relative;
-                background-color: white;
-                ${typography.paragraph1};
-                height: max-content;
-                max-height: calc(100% - ${isNaN(top) ? top : +top + 'px'});
-                min-width: 150px;
-                max-width: 90%;
-                /* min-height: 152px; */
-                margin: 0 auto;
-                border-radius: 4px;
-                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-                box-sizing: border-box;
-                -webkit-box-orient: vertical;
-                -webkit-box-direction: normal;
-                width: ${isNaN(width) ? width : width + 'px'};
-                animation: ${fadeOutUp} 0.2s ease;
-                animation-fill-mode: forwards;
-                cursor: ${moveable && dragAnyWhere ? 'move' : 'initial'};
-                &.show {
-                    display: flex !important;
-                    animation: ${fadeInDown} 0.2s ease;
-                }
-            `;
+
+  const _ModalContainerCSS = ModalContainerCSS(zIndex, alignment, darkTheme);
+
+  const _ModalBoxCSS = ModalBoxCSS(width, moveable, dragAnyWhere);
 
   const onShowModal = () => {
     setOpenState(true);
   };
 
   const onCloseModal = () => {
-    if (onClose) onClose();else {
-      setTimeout(() => {
-        setOpenState(false);
-      }, 500);
-    }
+    onClose && onClose();
+    setOpenState(false);
 
     if (pressESCToClose) {
       document.removeEventListener('keydown', pressESCHandler);
     }
-
-    if (ref.current) {
-      ref.current.style.opacity = null;
-      ref.current.firstChild.classList.remove('show');
-    }
   };
 
   const pressESCHandler = event => {
     if (event.key === 'Escape') {
       const modals = document.querySelectorAll('.DGN-UI-Portal');
 
-      if (modals && modals.length > 1 && Array.from(modals)[modals.length - 1] && !Array.from(modals)[modals.length - 1].contains(ref.current)) {
+      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;
       }
 
@@ -191,30 +127,11 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   useEffect(() => {
-    if (open) {
-      setOpenState(open);
-    }
-
-    return () => {
-      if (open && ref.current) {
-        setTimeout(() => {
-          setOpenState(!open);
-        }, 500);
-      }
-    };
+    setOpenState(open);
   }, [open]);
-  useEffect(() => {
-    return () => {
-      if (pressESCToClose) {
-        document.removeEventListener('keydown', pressESCHandler);
-      }
-    };
-  }, []);
   useEffect(() => {
     if (openState) {
       if (ref.current) {
-        ref.current.style.opacity = 1;
-        ref.current.firstChild.classList.add('show');
         const modals = document.querySelectorAll('.DGN-UI-Modal');
 
         if (!darkTheme && modals && modals.length > 1) {
@@ -229,18 +146,25 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
 
-      document.body.style.overflow = 'hidden'; // Allow press ESC to close popup
+      document.documentElement.style.overflow = 'hidden'; // Allow press ESC to close popup
 
       if (pressESCToClose) {
         document.addEventListener('keydown', pressESCHandler);
       }
-
-      return () => {
-        document.body.style.overflow = null;
-      };
+    } else {
+      document.documentElement.style.overflow = null;
     }
   }, [openState]);
-  const ModalView = useMemo(() => {
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => {
     if (openState) {
       const node = jsx("div", {
         className: 'DGN-UI-Portal DGN-UI-Modal',
@@ -250,13 +174,14 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           inset: 0
         }
       }, jsx("div", {
-        css: ModalContainer,
+        css: _ModalContainerCSS,
+        className: 'DGN-UI-Modal-Container',
         ref: ref
       }, jsx("div", {
-        css: ModalBox,
+        css: _ModalBoxCSS,
         ref: modalBoxRef,
-        ...props,
         onMouseDown: moveable && dragAnyWhere ? dragMouseDown : null,
+        className: 'DGN-UI-Modal-Box',
         style: style
       }, jsx(ModalContext.Provider, {
         value: {
@@ -269,9 +194,44 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return null;
-  });
-  return ModalView;
+  }, [moveable, dragAnyWhere, style, children, openState]);
 }));
+
+const ModalContainerCSS = (zIndex, alignment, darkTheme) => css`
+    ${flexRow};
+    ${positionFixed};
+    ${justifyCenter};
+    z-index: ${zIndex};
+    align-items: ${alignment === 'top' ? 'inherit' : 'center'};
+    padding-top: ${alignment === 'top' ? '12px' : 0};
+    background-color: ${darkTheme ? 'rgba(21, 26, 48, 0.5)' : 'transparent'};
+    width: 100%;
+    height: 100vh;
+    top: 0;
+    left: 0;
+`;
+
+const ModalBoxCSS = (width, moveable, dragAnyWhere) => css`
+    ${paragraph1};
+    ${flexCol};
+    ${positionRelative};
+    ${borderRadius4px}
+    ${borderBox};
+    ${parseWidth(width)}
+    cursor: ${moveable && dragAnyWhere ? 'move' : 'initial'};
+    max-height: calc(100% - 12px);
+    height: max-content;
+    background-color: ${white};
+    min-width: 150px;
+    max-width: 90%;
+    margin: 0 auto;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    animation: ${fadeInDown} 0.2s ease;
+    animation-fill-mode: forwards;
+`;
+
 Modal.defaultProps = {
   darkTheme: true,
   open: false,
@@ -280,11 +240,14 @@ Modal.defaultProps = {
   dragAnyWhere: false,
   moveOutScreen: false,
   autoFocus: true,
-  top: '',
+  alignment: 'top',
   width: '80%',
   zIndex: zIndexCORE()
 };
 Modal.propTypes = {
+  /** Set the position on the component. */
+  alignment: PropTypes.oneOf(['top', 'center']),
+
   /** park a good colored background under the modal box if true */
   darkTheme: PropTypes.bool,
 
@@ -309,25 +272,16 @@ Modal.propTypes = {
   /** z-index style of Modal */
   zIndex: PropTypes.number,
 
-  /** customize the vertical position of the screen, if not set, the modal will be fixed in the middle of the screen */
-  top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** width of the modal */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /** customize style inline */
   style: PropTypes.object,
 
-  /** get modal ref by function */
-  refs: PropTypes.func,
-
   /** the function to run when close modal */
   onClose: PropTypes.func,
 
   /** child content in body */
-  children: PropTypes.node,
-
-  /** any props else */
-  props: PropTypes.any
+  children: PropTypes.node
 };
 export default Modal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.35-beta.3",
+  "version": "1.3.35-beta.4",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",