diginet-core-ui 1.3.24

package/components/modal/index.js

@@ -0,0 +1,69 @@
+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); }
+
+import React, { memo, useEffect, useRef, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import Modal from './modal';
+import Header from './header';
+import Body from './body';
+import Footer from './footer';
+const ModalSample = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  title,
+  style,
+  headerStyle,
+  bodyStyle,
+  footerStyle,
+  refs,
+  children,
+  footer,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  return /*#__PURE__*/React.createElement(Modal, _extends({
+    ref: ref,
+    style: style
+  }, props), /*#__PURE__*/React.createElement(Header, {
+    style: headerStyle
+  }, title), /*#__PURE__*/React.createElement(Body, {
+    style: bodyStyle
+  }, children), footer && /*#__PURE__*/React.createElement(Footer, {
+    style: footerStyle
+  }, footer));
+}));
+ModalSample.defaultProps = {
+  title: ''
+};
+ModalSample.propTypes = {
+  /** customize style inline */
+  style: PropTypes.object,
+
+  /** custom style inline for header */
+  headerStyle: PropTypes.object,
+
+  /** custom style inline for body */
+  bodyStyle: PropTypes.object,
+
+  /** custom style inline for footer */
+  footerStyle: PropTypes.object,
+
+  /** get modal ref by function */
+  refs: PropTypes.func,
+
+  /** title for header */
+  title: PropTypes.node,
+
+  /** an element at footer */
+  footer: PropTypes.node,
+
+  /** child content in body */
+  children: PropTypes.node,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default ModalSample;

package/components/modal/modal.js

@@ -0,0 +1,339 @@
+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, useRef, forwardRef, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import { jsx, css, keyframes } from '@emotion/core';
+import ModalContext from './context';
+import { useTheme } from '../../theme';
+const {
+  typography: {
+    fontFamily
+  }
+} = useTheme();
+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);
+  }
+
+  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;
+        font-family: ${fontFamily};
+        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 onShowModal = () => {
+    setOpenState(true);
+  };
+
+  const onCloseModal = () => {
+    if (onClose) onClose();else {
+      setTimeout(() => {
+        setOpenState(false);
+      }, 500);
+    }
+    ;
+
+    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)) {
+        return;
+      }
+
+      onCloseModal();
+    }
+
+    ;
+  };
+
+  const dragMouseDown = e => {
+    let pos1 = 0,
+        pos2 = 0,
+        pos3 = 0,
+        pos4 = 0;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    const maxTop = window.innerHeight - modalBoxRef.current.offsetHeight;
+    const maxLeft = window.innerWidth - modalBoxRef.current.offsetWidth;
+
+    if (modalBoxRef.current.style.display !== 'block') {
+      const top = modalBoxRef.current.offsetTop;
+      const left = modalBoxRef.current.offsetLeft;
+      modalBoxRef.current.style.display = 'block';
+      modalBoxRef.current.style.position = 'absolute';
+      modalBoxRef.current.style.margin = '0px';
+      modalBoxRef.current.style.top = top + "px";
+      modalBoxRef.current.style.left = left + "px";
+    }
+
+    document.onmouseup = () => {
+      /* stop moving when mouse button is released:*/
+      document.onmouseup = null;
+      document.onmousemove = null;
+    }; // call a function whenever the cursor moves:
+
+
+    document.onmousemove = el => {
+      pos1 = pos3 - el.clientX;
+      pos2 = pos4 - el.clientY;
+      pos3 = el.clientX;
+      pos4 = el.clientY;
+      let newTop = modalBoxRef.current.offsetTop - pos2;
+      let newLeft = modalBoxRef.current.offsetLeft - pos1;
+
+      if (!moveOutScreen) {
+        if (newTop > maxTop) {
+          newTop = maxTop;
+        } else if (newTop < 0) {
+          newTop = 0;
+        }
+
+        if (newLeft > maxLeft) {
+          newLeft = maxLeft;
+        } else if (newLeft < 0) {
+          newLeft = 0;
+        }
+      } // set the element's new position:
+
+
+      modalBoxRef.current.style.top = newTop + "px";
+      modalBoxRef.current.style.left = newLeft + "px";
+    };
+  };
+
+  useEffect(() => {
+    if (open) {
+      setOpenState(open);
+    }
+
+    return () => {
+      if (open && ref.current) {
+        setTimeout(() => {
+          setOpenState(!open);
+        }, 500);
+      }
+    };
+  }, [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) {
+          ref.current.style.backgroundColor = 'transparent';
+        }
+
+        if (autoFocus) {
+          if (!ref.current.contains(document.activeElement)) {
+            ref.current.tabIndex = -1;
+            ref.current.focus();
+          }
+        }
+      }
+
+      document.body.style.overflow = 'hidden'; // Allow press ESC to close popup
+
+      if (pressESCToClose) {
+        document.addEventListener('keydown', pressESCHandler);
+      }
+
+      return () => {
+        document.body.style.overflow = null;
+      };
+    }
+  }, [openState]);
+  const ModalView = useMemo(() => {
+    if (openState) {
+      const node = jsx("div", {
+        className: 'DGN-UI-Portal DGN-UI-Modal',
+        style: {
+          position: 'fixed',
+          zIndex,
+          inset: 0
+        }
+      }, jsx("div", {
+        css: ModalContainer,
+        ref: ref
+      }, jsx("div", _extends({
+        css: ModalBox,
+        ref: modalBoxRef
+      }, props, {
+        onMouseDown: moveable && dragAnyWhere ? dragMouseDown : null,
+        style: style
+      }), jsx(ModalContext.Provider, {
+        value: {
+          show: onShowModal,
+          close: onCloseModal,
+          onMoveModal: moveable && !dragAnyWhere ? dragMouseDown : null
+        }
+      }, children))));
+      return /*#__PURE__*/createPortal(node, document.body);
+    }
+
+    return null;
+  });
+  return ModalView;
+}));
+Modal.defaultProps = {
+  darkTheme: true,
+  open: false,
+  pressESCToClose: true,
+  moveable: false,
+  dragAnyWhere: false,
+  moveOutScreen: false,
+  autoFocus: true,
+  top: '',
+  width: '80%',
+  zIndex: 9000
+};
+Modal.propTypes = {
+  /** park a good colored background under the modal box if true */
+  darkTheme: PropTypes.bool,
+
+  /** show modal if true */
+  open: PropTypes.bool,
+
+  /** allow press ESC to close Modal component */
+  pressESCToClose: PropTypes.bool,
+
+  /** allow move the modal by drag and move */
+  moveable: PropTypes.bool,
+
+  /** allow move the modal at any position on Modal */
+  dragAnyWhere: PropTypes.bool,
+
+  /** allows you to drag the Modal out of the screen */
+  moveOutScreen: PropTypes.bool,
+
+  /** focusing after open modal */
+  autoFocus: PropTypes.bool,
+
+  /** 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
+};
+export default Modal;

package/components/others/extra/index.js

@@ -0,0 +1,124 @@
+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 } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { brand, dark11, dark6, blue13 } from '../../../styles/colors';
+const icons = {
+  expand: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clip-rule="evenodd" d="M11.9999 12.0001C11.7729 12.0001 11.5449 11.9231 11.3599 11.7681L5.35989 6.76807C4.93589 6.41407 4.87889 5.78407 5.23189 5.36007C5.58589 4.93507 6.21489 4.87907 6.63989 5.23207L12.0109 9.70707L17.3729 5.39307C17.8029 5.04707 18.4339 5.11507 18.7789 5.54507C19.1259 5.97507 19.0569 6.60407 18.6269 6.95107L12.6269 11.7791C12.4439 11.9261 12.2219 12.0001 11.9999 12.0001ZM12.011 16.7076L17.373 12.3926C17.803 12.0476 18.434 12.1156 18.779 12.5446C19.125 12.9756 19.057 13.6046 18.627 13.9516L12.627 18.7796C12.444 18.9266 12.222 18.9996 12 18.9996C11.772 18.9996 11.545 18.9226 11.36 18.7676L5.35999 13.7676C4.93499 13.4146 4.87799 12.7846 5.23199 12.3596C5.58499 11.9356 6.21499 11.8776 6.63999 12.2316L12.011 16.7076Z" fill="currentColor"/>
+    </svg>`,
+  collapse: `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clip-rule="evenodd" d="M7.00011 6.99993C7.22711 6.99993 7.45511 7.07693 7.64011 7.23193L13.6401 12.2319C14.0641 12.5859 14.1211 13.2159 13.7681 13.6399C13.4141 14.0649 12.7851 14.1209 12.3601 13.7679L6.98911 9.29293L1.62711 13.6069C1.19711 13.9529 0.566109 13.8849 0.221108 13.4549C-0.125891 13.0249 -0.0568903 12.3959 0.373109 12.0489L6.37311 7.22093C6.55611 7.07393 6.77811 6.99993 7.00011 6.99993ZM6.98901 2.29243L1.62701 6.60743C1.19701 6.95243 0.56601 6.88443 0.22101 6.45543C-0.12499 6.02443 -0.0569899 5.39543 0.37301 5.04843L6.37301 0.220434C6.55601 0.0734332 6.77801 0.000434244 7.00001 0.000434264C7.22801 0.000434283 7.45501 0.077434 7.64001 0.232434L13.64 5.23243C14.065 5.58543 14.122 6.21543 13.768 6.64043C13.415 7.06443 12.785 7.12243 12.36 6.76843L6.98901 2.29243Z" fill="currentColor"/>
+    </svg>`
+};
+
+const Extra = ({
+  type,
+  displayText,
+  style,
+  onClick,
+  ...props
+}) => {
+  const extraRef = useRef(null);
+  const textRef = useRef(null);
+  const iconRef = useRef(null);
+  const [typeState, setTypeState] = useState(type);
+  /* Start styled */
+
+  const extraIcon = css`
+        display: flex;
+        align-items: center;
+    `;
+  const extraText = css`
+        margin-left: 9px;
+        font-family: sans-serif;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 14px;
+        color: ${dark6};
+    `;
+  const extra = css`
+        width: 100%;
+        height: 40px;
+        background-color: ${dark11};
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: ${dark6};
+        cursor: pointer;
+        &:hover {
+            background-color: ${blue13};
+            .css-${extraIcon.name} {
+                color: ${brand};
+                path: {
+                    fill: ${brand};
+                }
+            }
+            .css-${extraText.name} {
+                color: ${brand};
+            }
+        }
+    `;
+  /* End styled */
+
+  /* Start handler */
+
+  const handleClick = () => {
+    if (typeState === 'expand') {
+      iconRef.current.innerHTML = icons.collapse;
+      textRef.current.innerHTML = displayText || 'Thu gọn';
+      setTypeState('collapse');
+    } else {
+      iconRef.current.innerHTML = icons.expand;
+      textRef.current.innerHTML = displayText || 'Xem thêm';
+      setTypeState('expand');
+    }
+
+    if (onClick) onClick({
+      type: typeState === 'expand' ? 'collapse' : 'expand'
+    });
+  };
+
+  useEffect(() => {
+    iconRef.current.innerHTML = type === 'expand' ? icons.expand : icons.collapse;
+    setTypeState(type);
+  }, [type]);
+  useEffect(() => {
+    textRef.current.innerHTML = displayText || (type === 'expand' ? 'Xem thêm' : 'Thu gọn');
+  }, [displayText, type]);
+  /* End handler */
+
+  /* Start component */
+
+  const iconComp = useMemo(() => jsx("div", {
+    ref: iconRef,
+    css: extraIcon
+  }), []);
+  const textComp = useMemo(() => jsx("div", {
+    ref: textRef,
+    css: extraText
+  }, displayText), []);
+  /* End component */
+
+  return jsx("div", _extends({}, props, {
+    ref: extraRef,
+    css: extra,
+    onClick: handleClick,
+    style: style
+  }), iconComp, textComp);
+};
+
+Extra.defaultProps = {
+  type: 'expand'
+};
+Extra.proptypes = {
+  type: PropTypes.string,
+  displayText: PropTypes.string,
+  style: PropTypes.object,
+  onClick: PropTypes.func
+};
+export default /*#__PURE__*/memo(Extra);