diginet-core-ui 1.3.35 → 1.3.36

package/components/popover/index.js

@@ -6,24 +6,118 @@ import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { typography } from '../../styles/typography';
-import { borderRadius4px, displayBlock, flexRow, positionAbsolute, positionFixed, positionRelative } from '../../styles/general';
+import { borderRadius4px, displayBlock, flexRow, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from '../../styles/general';
 const {
   paragraph1
 } = typography;
+
+const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
+  if (anchorOrigin.horizontal === 'right' && transformOrigin.horizontal === 'left') {
+    translate.left = -6;
+    translate.transform = 'rotateZ(270deg)';
+    return 'left';
+  } else if (anchorOrigin.horizontal === 'left' && transformOrigin.horizontal === 'right') {
+    translate.left = 6;
+    translate.transform = 'rotateZ(90deg)';
+    return 'right';
+  } else if (transformOrigin.vertical === 'bottom') {
+    translate.top = 6;
+    translate.transform = 'rotateZ(180deg)';
+    return 'bottom';
+  } else {
+    translate.top = -6;
+    return 'top';
+  }
+};
+
+const calPosition = (position, originBounding) => {
+  const {
+    width,
+    height
+  } = originBounding;
+
+  switch (position) {
+    case 'bottom':
+    case 'right':
+      {
+        return [height, width];
+      }
+
+    case 'center':
+      {
+        return [height / 2, width / 2];
+      }
+
+    default:
+      return [0, 0];
+  }
+};
+
+const getDirectionPopover = direction => {
+  switch (direction) {
+    case 'top':
+      return {
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        }
+      };
+
+    case 'left':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        }
+      };
+
+    case 'right':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        }
+      };
+
+    default:
+      return {
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        }
+      };
+  }
+};
+
 const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
   pressESCToClose,
-  removeAfterClose,
   fullScreen,
   arrow,
   style,
   anchor,
   anchorOrigin,
   transformOrigin,
+  direction,
   width,
   height,
   bgColor,
-  refs,
   onClose,
   zIndex,
   children,
@@ -32,47 +126,16 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
-  const PopoverContainer = css`
-                ${flexRow}
-                ${positionFixed}
-        width: ${isNaN(width) ? width : width + 'px'};
-                max-width: 100%;
-                max-height: 100%;
-                height: ${isNaN(height) ? height : height + 'px'};
-                z-index: 1000;
-                transform: scale(0);
-                transition: transform 0.2s linear;
-                pointer-events: initial;
-                &.open {
-                    transform: scale(1);
-                }
-            `;
-  const PopoverRoot = css`
-                ${displayBlock}
-                ${positionRelative}
-        ${borderRadius4px}
-        ${paragraph1};
-                background-color: ${bgColor};
-                width: 100%;
-                height: 100%;
-                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-            `;
-  const PopoverArrow = css`
-                ${displayBlock}
-                ${positionAbsolute}
-        height: 0;
-                width: 0;
-                border-left: 6px solid transparent;
-                border-right: 6px solid transparent;
-                border-bottom: 6px solid ${bgColor};
-            `;
+
+  if (direction) {
+    const directionObject = getDirectionPopover(direction);
+    anchorOrigin = directionObject.anchorOrigin;
+    transformOrigin = directionObject.transformOrigin;
+  }
 
   const onClosePopover = () => {
-    // const popovers = document.querySelectorAll('.DGN-UI-Portal');
-    // if (popovers && popovers.length > 1 && Array.from(popovers)[popovers.length - 1] && Array.from(popovers)[popovers.length - 1].contains(ref.current)) {
-    //     return;
-    // }
     if (openState) {
+      ref.current.style.opacity = 0;
       onClose && onClose();
       setOpenState(false);
     }
@@ -95,53 +158,11 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
-    if (anchorOrigin.horizontal === 'right' && transformOrigin.horizontal === 'left') {
-      translate.left = -6;
-      translate.transform = 'rotateZ(270deg)';
-      return 'left';
-    } else if (anchorOrigin.horizontal === 'left' && transformOrigin.horizontal === 'right') {
-      translate.left = 6;
-      translate.transform = 'rotateZ(90deg)';
-      return 'right';
-    } else if (transformOrigin.vertical === 'bottom') {
-      translate.top = 6;
-      translate.transform = 'rotateZ(180deg)';
-      return 'bottom';
-    } else {
-      translate.top = -6;
-      return 'top';
-    }
-  };
-
-  const calPosition = (position, originBounding) => {
-    const {
-      width,
-      height
-    } = originBounding;
-
-    switch (position) {
-      case 'bottom':
-      case 'right':
-        {
-          return [height, width];
-        }
-
-      case 'center':
-        {
-          return [height / 2, width / 2];
-        }
-
-      default:
-        return [0, 0];
-    }
-  };
-
   const updatePositionPopover = (el = null) => {
     setElement(el instanceof Element ? el : null);
 
     if (!ref.current) {
-      window.removeEventListener('scroll', updatePositionPopover);
+      window.removeEventListener('resize', updatePositionPopover);
       return;
     }
 
@@ -247,7 +268,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           break;
       }
 
-      Object.assign(ref.current.querySelector(`.css-${PopoverArrow.name}`).style, arrowPosition, {
+      Object.assign(ref.current.querySelector(`.css-${PopoverArrowCSS(bgColor).name}`).style, arrowPosition, {
         transform: translate.transform
       });
     }
@@ -255,17 +276,17 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref.current.style.top = top + 'px';
     ref.current.style.left = left + 'px';
     ref.current.style.transformOrigin = `${transformOrigin.horizontal || 'left'} ${transformOrigin.vertical || 'top'}`;
+    ref.current.style.opacity = 1;
   };
 
   useEffect(() => {
-    if (refs) refs(ref);
     return () => {
       if (pressESCToClose) {
         document.removeEventListener('keydown', pressESCHandler);
       }
 
       document.removeEventListener('click', clickOutOfPopover);
-      window.removeEventListener('scroll', updatePositionPopover);
+      window.removeEventListener('resize', updatePositionPopover);
     };
   }, []);
   useEffect(() => {
@@ -274,33 +295,26 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (openState && ref.current) {
       // Position's anchor
-      updatePositionPopover();
-
-      if (fullScreen && !removeAfterClose) {
-        ref.current.parentNode.style.pointerEvents = 'initial';
-      } // Allow press ESC to close popup
-
+      updatePositionPopover(); // Allow press ESC to close popup
 
       if (pressESCToClose) {
         document.addEventListener('keydown', pressESCHandler);
       } // Click out popover to close popover
 
 
-      document.addEventListener('click', clickOutOfPopover); // Update position popover on scroll
+      document.addEventListener('click', clickOutOfPopover); // Update position popover on resize
 
-      window.addEventListener('scroll', updatePositionPopover);
+      window.addEventListener('resize', updatePositionPopover);
       return () => {
         if (pressESCToClose) {
           document.removeEventListener('keydown', pressESCHandler);
         }
 
         document.removeEventListener('click', clickOutOfPopover);
-        window.removeEventListener('scroll', updatePositionPopover);
+        window.removeEventListener('resize', updatePositionPopover);
       };
-    } else if (ref.current) {
-      if (fullScreen && !removeAfterClose) {
-        ref.current.parentNode.style.pointerEvents = 'none';
-      }
+    } else if (!openState) {
+      document.documentElement.style.overflow = 'auto';
     }
   }, [openState]);
   useImperativeHandle(reference, () => {
@@ -324,36 +338,70 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   const PopoverView = useMemo(() => {
-    if (openState || !removeAfterClose) {
+    if (openState) {
       const node = jsx("div", {
         className: 'DGN-UI-Portal DGN-UI-Popover',
-        style: {
-          position: 'fixed',
-          zIndex,
-          inset: 0,
-          pointerEvents: fullScreen ? 'initial' : 'none'
-        }
+        css: PortalPopoverCSS(zIndex, fullScreen)
       }, jsx("div", {
-        css: PopoverContainer,
+        css: PopoverContainerCSS(width, height),
         ref: ref,
-        className: openState ? 'open' : '',
         ...props
       }, jsx("div", {
-        css: PopoverRoot,
+        css: PopoverRootCSS(bgColor),
         style: style
       }, arrow && jsx("span", {
-        css: PopoverArrow
+        css: PopoverArrowCSS(bgColor)
       }), children)));
       return /*#__PURE__*/createPortal(node, document.body);
     }
 
     return null;
-  }, [openState, fullScreen, style, arrow, children]);
+  }, [openState, zIndex, fullScreen, style, arrow, children, width, height, bgColor]);
   return PopoverView;
 }));
+
+const PortalPopoverCSS = (zIndex, fullScreen) => css`
+    ${positionFixed};
+    z-index: ${zIndex};
+    pointer-events: ${fullScreen ? 'initial' : 'none'};
+    inset: 0;
+`;
+
+const PopoverContainerCSS = (width, height) => css`
+    ${flexRow};
+    ${positionFixed};
+    ${parseWidthHeight(width, height)};
+    max-width: 100%;
+    max-height: 100%;
+    z-index: 1000;
+    transition: opacity 0.3s ease;
+    pointer-events: initial;
+    opacity: 0;
+`;
+
+const PopoverRootCSS = bgColor => css`
+    ${displayBlock};
+    ${positionRelative};
+    ${borderRadius4px};
+    ${paragraph1};
+    background-color: ${bgColor};
+    width: 100%;
+    height: 100%;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+`;
+
+const PopoverArrowCSS = bgColor => css`
+    ${displayBlock};
+    ${positionAbsolute};
+    height: 0;
+    width: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid ${bgColor};
+`;
+
 Popover.defaultProps = {
   pressESCToClose: true,
-  removeAfterClose: false,
   fullScreen: true,
   arrow: false,
   width: 150,
@@ -367,25 +415,82 @@ Popover.defaultProps = {
   transformOrigin: {
     vertical: 'top',
     horizontal: 'center'
-  }
+  },
+  style: {}
 };
 Popover.propTypes = {
+  /** If true, the component is shown. */
   open: PropTypes.bool,
+
+  /** If true, arrow is shown. */
   arrow: PropTypes.bool,
+
+  /** allow close Popover when press ESC. */
   pressESCToClose: PropTypes.bool,
-  removeAfterClose: PropTypes.bool,
+
+  /** background color of Popover. */
   bgColor: PropTypes.string,
+
+  /** style inline of component. */
   style: PropTypes.object,
-  anchor: PropTypes.object,
-  anchorOrigin: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  // {vertical: 'top', horizontal: 'left'}
-  transformOrigin: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  // {vertical: 'bottom', horizontal: 'right'}
+
+  /** 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].
+   */
+  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].
+   */
+  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: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
+
+  /** width of popover */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** height of popover */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** z-index of popover */
   zIndex: PropTypes.number,
-  refs: PropTypes.func,
+
+  /** Callback fired when the component requests to be closed. */
   onClose: PropTypes.func,
-  children: PropTypes.node
+
+  /** 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
+   */
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
 };
 export default Popover;

package/components/popup/v2/index.js

@@ -461,13 +461,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/tab/tab-container.js

@@ -93,8 +93,8 @@ TabContainer.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab-header.js

@@ -157,8 +157,8 @@ TabHeader.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab-panel.js

@@ -87,8 +87,8 @@ TabPanel.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab.js

@@ -213,8 +213,8 @@ TabItem.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)