diginet-core-ui 1.3.36 → 1.3.37

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/popover/index.js

@@ -437,32 +437,32 @@ Popover.propTypes = {
   /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
   anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object]),
 
-  /**
-   * This is the point on the anchor where the popover's anchor will attach to.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the anchor where the popover's anchor will attach to.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   }),
 
-  /**
-   * This is the point on the popover which will attach to the anchor's origin.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the popover which will attach to the anchor's origin.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   transformOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   }),
 
-  /**
-   * Direction when Popover shown.
-   * Note: This prop will overwrite anchorOrigin & transformOrigin.
-   *
-   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
-   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
-   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
-   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
+  /**
+   * Direction when Popover shown.
+   * Note: This prop will overwrite anchorOrigin & transformOrigin.
+   *
+   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
+   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
+   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
+   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
 
@@ -481,13 +481,13 @@ Popover.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show: Show popover
-   * * close: Close popover
-   * * setPosition(element): Set position of popover
-   *  * @param {element} - element
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show: Show popover
+   * * close: Close popover
+   * * setPosition(element): Set position of popover
+   *  * @param {element} - element
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/slider/slider-item.js

@@ -1,10 +1,11 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { forwardRef, memo, useRef } from 'react';
+import { forwardRef, memo, useEffect, useState, useRef } from 'react';
 import { jsx, css, keyframes } from '@emotion/core';
 import { randomString, getFileType } from '../../utils';
 import PropTypes from 'prop-types';
+import { IndeterminateCircularProgress } from '../progress/circular';
 const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   active,
   animation,
@@ -23,6 +24,8 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     itemContainer: 'DGN-UI-Slider-item-container-' + Id,
     video: 'DGN-UI-Slider-video' + Id
   };
+  const [iframeTimeoutId, setIframeTimeoutId] = useState(null);
+  const iframeRef = useRef(null);
   /**@reference */
 
   if (!ref) ref = useRef(null);
@@ -40,29 +43,35 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const styles = {
     itemContainer: css`
-			display: none;
-			justify-content: center;
-			height: 100%;
-			width: 100%;
-			&.item-animation {
-				animation: ${anime.fade} 1s;
-			}
-		`,
+                display: none;
+                justify-content: center;
+                height: 100%;
+                width: 100%;
+                &.item-animation {
+                    animation: ${anime.fade} 1s;
+                }
+            `,
     frame: css`
-			display: block;
-			height: 100%;
-			margin: 0;
-			padding: 0;
-			width: 100%;
-		`,
+                display: block;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+            `,
     image: css`
-			display: block;
-			height: auto;
-			margin: auto;
-			max-height: 100%;
-			max-width: 100%;
-			width: auto;
-		`
+                display: block;
+                height: auto;
+                margin: auto;
+                max-height: 100%;
+                max-width: 100%;
+                width: auto;
+            `,
+    loading: css`
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            `
   };
   /**@function */
 
@@ -115,11 +124,14 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       case 'pdf':
         {
           return jsx("iframe", { ...props,
+            ref: iframeRef,
             className: IDs.frame,
             css: styles.frame,
             frameBorder: 0,
-            src: `https://docs.google.com/gview?url=${filePath}&embedded=true`,
-            title: fileName
+            src: getIframeLink(),
+            title: fileName,
+            onLoad: iframeLoaded,
+            onError: updateIframeSrc
           });
         }
 
@@ -161,12 +173,40 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
+  useEffect(() => {
+    const fileType = getFileType(url, undefined, false);
+
+    if (fileType === 'pdf') {
+      const intervalId = setInterval(updateIframeSrc, 2000);
+      setIframeTimeoutId(intervalId);
+    }
+  }, []);
+
+  function iframeLoaded() {
+    clearInterval(iframeTimeoutId);
+    setIframeTimeoutId(null);
+  }
+
+  function getIframeLink() {
+    return `https://docs.google.com/gview?url=${url}&embedded=true`;
+  }
+
+  function updateIframeSrc() {
+    if (iframeRef.current) {
+      iframeRef.current.src = getIframeLink();
+    }
+  }
+
   return jsx("div", {
     className: [IDs.itemContainer, active ? 'active' : '', animation ? 'item-animation' : ''].join(' '),
     css: styles.itemContainer,
     id: IDs.itemContainer,
     ref: ref
-  }, getViewer(url, getFileType(url, undefined, false)));
+  }, iframeTimeoutId && getFileType(url, undefined, false) === 'pdf' && jsx("div", {
+    css: styles.loading
+  }, jsx(IndeterminateCircularProgress, {
+    size: 'xs'
+  })), getViewer(url, getFileType(url, undefined, false)));
 }));
 SliderItem.defaultProps = {
   active: false,