diginet-core-ui 1.3.36 → 1.3.38

package/components/modal/modal.js

@@ -1,129 +1,65 @@
 /** @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 { 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: ${zIndex};
-            `;
-  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;
       }
 
@@ -187,30 +123,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) {
@@ -225,18 +142,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',
@@ -246,13 +170,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: {
@@ -265,9 +190,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,
@@ -276,11 +236,14 @@ Modal.defaultProps = {
   dragAnyWhere: false,
   moveOutScreen: false,
   autoFocus: true,
-  top: '',
+  alignment: 'top',
   width: '80%',
   zIndex: 9000
 };
 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,
 
@@ -305,25 +268,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/components/paging/page-selector.js

@@ -6,6 +6,10 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from '../../theme/settings';
 import { typography } from '../../styles/typography';
+import { useTheme } from '../../theme';
+const {
+  zIndex
+} = useTheme();
 const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   size,
   style,
@@ -23,57 +27,57 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [currentPage, setCurrentPage] = useState(currentPageProps);
   const [paging, setPaging] = useState([1]);
   const PageItemNum = css`
-        color: #FFF;
-        ${typography.heading3};
-        z-index: 1502;
-    `;
+                color: #fff;
+                ${typography.heading3};
+                z-index: ${zIndex(2)};
+            `;
   const morePaging = css`
-        position: absolute;
-        display: inline-flex;
-        opacity: 0;
-        transform: scaleX(0);
-        transition: all 0.5s;
-        z-index: 1503;
-        max-width: 176px;
-        overflow: scroll hidden;
-        padding-bottom: 2px;
-        outline: none;
-        &.visible {
-            opacity: 1;
-            transform: scaleX(1);
-        }
-        &::-webkit-scrollbar {
-            height: 4px;
-        }
-        &::-webkit-scrollbar-thumb {
-            border-radius: 10px;
-            background-color: #c1c1c1;
-        }
-    `;
+                position: absolute;
+                display: inline-flex;
+                opacity: 0;
+                transform: scaleX(0);
+                transition: all 0.5s;
+                z-index: ${zIndex(3)};
+                max-width: 176px;
+                overflow: scroll hidden;
+                padding-bottom: 2px;
+                outline: none;
+                &.visible {
+                    opacity: 1;
+                    transform: scaleX(1);
+                }
+                &::-webkit-scrollbar {
+                    height: 4px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 10px;
+                    background-color: #c1c1c1;
+                }
+            `;
   const PageItem = css`
-        width: ${size === 'small' ? 20 : 24}px;
-        height: ${size === 'small' ? 20 : 24}px;
-        font-size: ${size === 'small' ? 12 : 14}px;
-        background-color: ${theme.colors.border};
-        border-radius: 50%;
-        text-align: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: 0px 4px;
-        user-select: none;
-        cursor: pointer;
-        position: relative;
-        &:hover {
-            background-color: ${theme.colors.hover};
-            &:not(.active) .css-${PageItemNum.name} {
-                color: ${theme.colors.primary};
-            }
-        }
-        &.active {
-            background-color: ${theme.colors.brand};
-        }
-    `;
+                width: ${size === 'small' ? 20 : 24}px;
+                height: ${size === 'small' ? 20 : 24}px;
+                font-size: ${size === 'small' ? 12 : 14}px;
+                background-color: ${theme.colors.border};
+                border-radius: 50%;
+                text-align: center;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 0px 4px;
+                user-select: none;
+                cursor: pointer;
+                position: relative;
+                &:hover {
+                    background-color: ${theme.colors.hover};
+                    &:not(.active) .css-${PageItemNum.name} {
+                        color: ${theme.colors.primary};
+                    }
+                }
+                &.active {
+                    background-color: ${theme.colors.brand};
+                }
+            `;
 
   const setPagination = (newCurrentPage = 1) => {
     const newLastPage = Math.ceil(totalItems / itemsPerPage);

package/components/popup/index.js

@@ -10,6 +10,10 @@ import { Info, ApprovalFilled, Warning, Failed } from '../../icons';
 import theme from '../../theme/settings';
 import { getGlobal } from '../../global';
 import { typography } from '../../styles/typography';
+import { useTheme } from '../../theme';
+const {
+  zIndex
+} = useTheme();
 export const icons = {
   info: jsx(Info, {
     viewBox: true
@@ -72,7 +76,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 pointer-events: ${!fullScreen ? 'none' : 'auto'};
                 opacity: 0;
                 transition: opacity 0.3s ease;
-                z-index: 9001;
+                z-index: ${zIndex(1)};
             `;
   const fadeInDown = keyframes`
         from {

package/components/popup/proposals_popup.js

@@ -8,6 +8,10 @@ import theme from '../../theme/settings';
 import { Button, ButtonIcon } from '../';
 import { Close, Approval } from '../../icons';
 import TextInput from '../form-control/text-input';
+import { useTheme } from '../../theme';
+const {
+  zIndex
+} = useTheme();
 const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
   clearAble,
@@ -42,7 +46,7 @@ const ProposalsPopup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 position: fixed;
                 width: 80%;
                 max-width: 480px;
-                z-index: 1000;
+                z-index: ${zIndex()};
                 transform: scale(0);
                 transition: transform 0.2s linear;
                 &.open {

package/components/popup/v2/index.js

@@ -13,6 +13,10 @@ import { capitalize, renderIcon } from '../../../utils';
 import { animations } from '../../../styles/animation';
 import { color as colors } from '../../../styles/colors';
 import { alignCenter, border, borderBox, borderRadius4px, cursorPointer, displayBlock, ellipsis, flexCol, flexRow, justifyCenter, justifyEnd, overflowHidden, positionFixed, positionRelative } from '../../../styles/general';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 const {
   system: {
     white
@@ -102,7 +106,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 background-color: rgba(21, 26, 48, 0.5);
                 opacity: 0;
                 transition: opacity 0.3s ease;
-                z-index: 9002;
+                z-index: ${zIndex(2)};
                 word-break: break-word;
                 .DGN-UI-Popup {
                     ${flexCol}
@@ -461,13 +465,13 @@ Popup.propTypes = {
   /** the function will run when click on cancel button */
   onCancel: func,
 
-  /**
-   * named ref: get ref of Popup component, insist:<br />
-   * * element<br />
-   * * show: the method to show Popup (ref.current.show(options, callback))<br />
-   * &nbsp;&nbsp; + options: {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}<br />
-   * &nbsp;&nbsp; + callback: the function will run after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options<br />
-   * * close: the method to close Popup<br />
+  /**
+   * named ref: get ref of Popup component, insist:<br />
+   * * element<br />
+   * * show: the method to show Popup (ref.current.show(options, callback))<br />
+   * &nbsp;&nbsp; + options: {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}<br />
+   * &nbsp;&nbsp; + callback: the function will run after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options<br />
+   * * close: the method to close Popup<br />
    */
   reference: oneOfType([func, shape({
     current: instanceOf(elementType)

package/components/progress/circular.js

@@ -63,8 +63,8 @@ const getDimension = size => {
     strokeWidth
   };
 };
-/**
- * Determinate circular progress
+/**
+ * Determinate circular progress
  */
 
 
@@ -113,8 +113,8 @@ const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return angle;
   };
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -216,8 +216,8 @@ Determinate.propTypes = {
   width: PropTypes.number
 };
 export const DeterminateCircularProgress = Determinate;
-/**
- * Indeterminate circular progress
+/**
+ * Indeterminate circular progress
  */
 
 const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -254,8 +254,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-dashoffset: -${r * 124 / 200};
         }
     `;
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -286,8 +286,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-linecap: round;
             stroke-width: ${circleStrokeW};
         `;
-  /**
-   * component
+  /**
+   * component
    */
 
   const CircleBackgroundMemo = useMemo(() => jsx("circle", {
@@ -330,8 +330,8 @@ Indeterminate.propTypes = {
   width: PropTypes.number
 };
 export const IndeterminateCircularProgress = Indeterminate;
-/**
- * Circular progress
+/**
+ * Circular progress
  */
 
 const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({

package/components/rating/index.js

@@ -264,9 +264,9 @@ Rating.propTypes = {
   /** style inline of stars icon */
   starStyle: PropTypes.object,
 
-  /**
-   * the function for rating handler, return e:{value, ...element}<br />
-   * value: the quantity of star was selected (insist half)
+  /**
+   * the function for rating handler, return e:{value, ...element}<br />
+   * value: the quantity of star was selected (insist half)
    */
   onRating: PropTypes.func
 };