diginet-core-ui 1.3.24

package/components/paper/index.js

@@ -0,0 +1,119 @@
+/** @jsxRuntime classic */
+import { memo, useEffect, useMemo, useRef, forwardRef } from 'react';
+import { string, number, bool, node, oneOfType, func } from 'prop-types';
+import { css } from '@emotion/core';
+import { renderHTML } from '../../utils';
+import theme from '../../theme/settings';
+const Paper = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  width,
+  height,
+  mapping,
+  bg,
+  className,
+  square,
+  scrollAble,
+  refs,
+  children,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const PaperRoot = css`
+        width: ${isNaN(width) ? width : width + 'px'};
+        height: ${isNaN(height) ? height : height + 'px'};
+        border: 1px solid ${theme.colors.border};
+        border-radius: 4px;
+        background-color: ${bg};
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+        &.square {
+            border-radius: 0;
+        }
+        &.scroll-able {
+            max-height: ${isNaN(height) ? height : height + 'px'};
+            overflow-y: auto;
+            &::-webkit-scrollbar {
+                width: 8px;
+                background-color: #FFF !important;
+                border-radius: 4px;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 4px;
+                mix-blend-mode: normal;
+                background-color: ${theme.colors.bgDisabled} !important;
+                background-clip: content-box;
+            }
+        }
+    `;
+  useEffect(() => {
+    refs && refs(ref);
+  }, []);
+  useEffect(() => {
+    if (square) {
+      ref.current.classList.add('square');
+    }
+
+    return () => {
+      if (square && ref.current) {
+        ref.current.classList.remove('square');
+      }
+    };
+  }, [square]);
+  useEffect(() => {
+    if (scrollAble && !ref.current.classList.contains('scroll-able')) {
+      ref.current.classList.add('scroll-able');
+    }
+
+    return () => {
+      if (scrollAble && ref.current) {
+        ref.current.classList.remove('scroll-able');
+      }
+    };
+  }, [scrollAble]);
+  const PaperView = useMemo(() => renderHTML(children, mapping, {
+    ref,
+    css: PaperRoot,
+    className: [className, scrollAble ? 'scroll-able' : ''].join(' ').trim(),
+    ...props
+  }), [children]);
+  return PaperView;
+}));
+Paper.defaultProps = {
+  width: 240,
+  height: 240,
+  mapping: 'div',
+  bg: 'white',
+  className: '',
+  square: false,
+  scrollAble: false
+};
+Paper.propTypes = {
+  /** the width of Paper */
+  width: oneOfType([string, number]),
+
+  /** the height of Paper */
+  height: oneOfType([string, number]),
+
+  /** html tag to render */
+  mapping: string,
+
+  /** background color of Paper */
+  bg: string,
+
+  /** className of Paper component */
+  className: string,
+
+  /** rounded Paper if false */
+  square: bool,
+
+  /** Allow to roll if the height exceeds the limit */
+  scrollAble: bool,
+
+  /** the function to get ref of Paper */
+  refs: func,
+
+  /** content to display in Paper */
+  children: node
+};
+export default Paper;

package/components/popover/index.js

@@ -0,0 +1,417 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useState, useEffect, useMemo, useRef, forwardRef, useImperativeHandle, Fragment } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { randomString } from '../../utils';
+import theme from '../../theme/settings';
+const timer = {};
+const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  open,
+  pressESCToClose,
+  removeAfterClose,
+  fullScreen,
+  arrow,
+  style,
+  anchor,
+  anchorOrigin,
+  transformOrigin,
+  width,
+  height,
+  bgColor,
+  refs,
+  onClose,
+  zIndex,
+  children,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+  const [unique] = useState(randomString(6, {
+    allowNumber: false,
+    allowSymbol: false
+  }));
+  const [openState, setOpenState] = useState(open);
+  const [element, setElement] = useState(null);
+  const PopoverContainer = css`
+        display: flex;
+        position: fixed;
+        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`
+        display: block;
+        position: relative;
+        background-color: ${bgColor};
+        font-family: ${theme.typography.fontFamily};
+        width: 100%;
+        height: 100%;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 4px;
+    `;
+  const PopoverArrow = css`
+        display: block;
+        position: absolute;
+        height: 0;
+        width: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-bottom: 6px solid ${bgColor};
+    `;
+
+  const onClosePopover = byOpenProps => {
+    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 (!byOpenProps && onClose) onClose();
+
+    if (ref.current) {
+      var _ref$current;
+
+      setOpenState(false);
+      if (ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.classList) ref.current.classList.remove('open');
+    }
+  };
+
+  const pressESCHandler = event => {
+    if (event.key === 'Escape') {
+      onClosePopover();
+    }
+
+    ;
+  };
+
+  const clickOutOfPopover = event => {
+    if (!ref.current) {
+      document.removeEventListener('click', clickOutOfPopover);
+      return;
+    }
+
+    if (!ref.current.contains(event.target) && (!fullScreen || ref.current.parentNode.contains(event.target)) && ref.current.classList.contains('open')) {
+      onClosePopover();
+    }
+  };
+
+  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);
+      return;
+    }
+
+    let top = 0,
+        left = 0,
+        vertical = 0,
+        horizontal = 0,
+        arrowPosition = {},
+        translate = {
+      left: 0,
+      top: 0
+    },
+        anchorBounding = null,
+        aPosition = '';
+
+    if (transformOrigin === 'center') {
+      transformOrigin = {
+        vertical: 'center',
+        horizontal: 'center'
+      };
+    }
+
+    if (element || anchor) {
+      if (element) anchor = element;else if (anchor.current) {
+        anchor = anchor.current;
+      }
+
+      if (anchorOrigin === 'center') {
+        anchorOrigin = {
+          vertical: 'center',
+          horizontal: 'center'
+        };
+      }
+
+      if (arrow && anchorOrigin.vertical !== anchorOrigin.horizontal && transformOrigin.vertical !== transformOrigin.horizontal) {
+        aPosition = getArrowPosition(anchorOrigin, transformOrigin, translate);
+      }
+
+      anchorBounding = anchor.getBoundingClientRect();
+      vertical = anchorBounding.y + calPosition(anchorOrigin.vertical, anchorBounding)[0] - translate.top;
+      horizontal = anchorBounding.x + calPosition(anchorOrigin.horizontal, anchorBounding)[1] - translate.left;
+    } // Position's transform
+
+
+    const offsetHeight = ref.current.offsetHeight;
+    const offsetWidth = ref.current.offsetWidth;
+
+    switch (transformOrigin.vertical) {
+      case 'center':
+        top = vertical - offsetHeight / 2;
+        break;
+
+      case 'bottom':
+        top = vertical - offsetHeight;
+        break;
+
+      default:
+        top = vertical;
+    }
+
+    switch (transformOrigin.horizontal) {
+      case 'center':
+        left = horizontal - offsetWidth / 2;
+        break;
+
+      case 'right':
+        left = horizontal - offsetWidth;
+        break;
+
+      default:
+        left = horizontal;
+    } // Reset position if the element overflow window screen size
+
+
+    if (top < 0) {
+      top = 0;
+    } else if (top + offsetHeight > window.innerHeight) {
+      top = window.innerHeight - offsetHeight;
+    }
+
+    if (left < 0) {
+      left = 0;
+    } else if (left + offsetWidth > window.innerWidth) {
+      left = window.innerWidth - offsetWidth;
+    } // Get arrow's position
+
+
+    if (arrow && translate) {
+      switch (aPosition) {
+        case 'top':
+        case 'bottom':
+          arrowPosition.left = anchorBounding.width / 2 + anchorBounding.left - left - 6 + 'px';
+          arrowPosition[aPosition] = `-6px`;
+          break;
+
+        case 'left':
+        case 'right':
+          arrowPosition.top = Math.max(4, anchorBounding.height / 2 + anchorBounding.top - top - 2 * Math.sqrt(2)) + 'px';
+          arrowPosition[aPosition] = `-9px`;
+          break;
+
+        default:
+          break;
+      }
+
+      Object.assign(ref.current.querySelector(`.css-${PopoverArrow.name}`).style, arrowPosition, {
+        transform: translate.transform
+      });
+    }
+
+    ref.current.style.top = top + 'px';
+    ref.current.style.left = left + 'px';
+    ref.current.style.transformOrigin = `${transformOrigin.horizontal || 'left'} ${transformOrigin.vertical || 'top'}`;
+  };
+
+  useEffect(() => {
+    if (refs) refs(ref);
+    return () => {
+      if (pressESCToClose) {
+        document.removeEventListener('keydown', pressESCHandler);
+      }
+
+      document.removeEventListener('click', clickOutOfPopover);
+      window.removeEventListener('scroll', updatePositionPopover);
+
+      if (timer[unique]) {
+        clearTimeout(timer[unique]);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (open) {
+      if (timer[unique]) {
+        clearTimeout(timer[unique]);
+
+        if (ref.current) {
+          ref.current.classList.add('open');
+        }
+      }
+
+      setOpenState(open);
+    }
+
+    return () => {
+      if (open && ref.current) {
+        timer[unique] = setTimeout(() => {
+          setOpenState(false);
+        }, 500);
+        onClosePopover(true);
+      }
+    };
+  }, [open]);
+  useEffect(() => {
+    if (openState && ref.current) {
+      // Position's anchor
+      updatePositionPopover();
+      ref.current.classList.add('open');
+
+      if (fullScreen && !removeAfterClose) {
+        ref.current.parentNode.style.pointerEvents = 'initial';
+      } // 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
+
+      window.addEventListener('scroll', updatePositionPopover);
+      return () => {
+        if (pressESCToClose) {
+          document.removeEventListener('keydown', pressESCHandler);
+        }
+
+        document.removeEventListener('click', clickOutOfPopover);
+        window.removeEventListener('scroll', updatePositionPopover);
+      };
+    } else if (ref.current) {
+      if (fullScreen && !removeAfterClose) {
+        ref.current.parentNode.style.pointerEvents = 'none';
+      }
+    }
+  }, [openState]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+
+    currentRef.show = () => setOpenState(true);
+
+    currentRef.close = () => onClosePopover();
+
+    currentRef.setPosition = el => updatePositionPopover(el);
+
+    return currentRef;
+  });
+  const PopoverView = useMemo(() => {
+    if (openState || !removeAfterClose) {
+      const node = jsx("div", {
+        className: 'DGN-UI-Portal DGN-UI-Popover',
+        style: {
+          position: 'fixed',
+          zIndex,
+          inset: 0,
+          pointerEvents: fullScreen ? 'initial' : 'none'
+        }
+      }, jsx("div", _extends({
+        css: PopoverContainer,
+        ref: ref
+      }, props), jsx("div", {
+        css: PopoverRoot,
+        style: style
+      }, arrow && jsx("span", {
+        css: PopoverArrow
+      }), children)));
+      return /*#__PURE__*/createPortal(node, document.body);
+    }
+
+    return null;
+  });
+  return PopoverView;
+}));
+Popover.defaultProps = {
+  open: false,
+  pressESCToClose: true,
+  removeAfterClose: true,
+  fullScreen: true,
+  arrow: false,
+  width: 150,
+  height: 'auto',
+  bgColor: '#FFF',
+  zIndex: 9001,
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'center'
+  },
+  transformOrigin: {
+    vertical: 'top',
+    horizontal: 'center'
+  }
+};
+Popover.propTypes = {
+  open: PropTypes.bool,
+  arrow: PropTypes.bool,
+  pressESCToClose: PropTypes.bool,
+  removeAfterClose: PropTypes.bool,
+  bgColor: PropTypes.string,
+  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'}
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  zIndex: PropTypes.number,
+  refs: PropTypes.func,
+  onClose: PropTypes.func,
+  children: PropTypes.node
+};
+export default Popover;