diginet-core-ui 1.4.39 → 1.4.40

package/components/modal/header.js

@@ -1,128 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Typography } from "./..";
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useContext, useImperativeHandle, useRef } from 'react';
-import { bgColor, boxBorder, cursorMove, displayFlex, flexRow, itemsCenter, justifyBetween, order, parseWidth, parseWidthHeight, positionRelative, shadowSmall, textColor, truncate } from "../../styles/general";
-import sx from "../../styles/sx";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-import ModalContext from "./context";
-export const sxResponsivePadding = {
-  padding: {
-    xs: [4, 4],
-    md: [4, 6]
-  }
-};
-const ModalHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    spacing
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'ModalHeader'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    id,
-    showClose,
-    style,
-    title
-  } = props;
-  const modal = useContext(ModalContext);
-  const ref = useRef(null);
-  const _ModalHeaderCSS = ModalHeaderCSS(modal, theme);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const renderTitle = content => {
-    if (!content) return null;
-    return jsx(Typography, {
-      css: [truncate, parseWidth('100%')],
-      fullWidth: false,
-      type: 'h3'
-    }, content);
-  };
-  return jsx("div", {
-    css: [_ModalHeaderCSS, sx(sxResponsivePadding)],
-    ref: ref,
-    id: id,
-    className: classNames('DGN-UI-Modal-Header', className),
-    style: style,
-    onMouseDown: modal.onMoveModal
-  }, typeof children === 'string' ? renderTitle(children) : children, title || showClose ? jsx("div", {
-    css: [TitleContainerCSS, title && parseWidth('100%')],
-    className: 'DGN-UI-Modal-Header-Title'
-  }, renderTitle(title), showClose ? jsx(ButtonIcon, {
-    css: css`
-                                    margin-left: ${spacing([children || title ? 4 : 'auto'])};
-                                `,
-    viewType: 'ghost',
-    name: 'Close',
-    onClick: modal.close
-  }) : null) : null);
-}));
-const ModalHeaderCSS = (modal, {
-  colors,
-  typography
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${positionRelative};
-    ${justifyBetween};
-    ${itemsCenter};
-    ${boxBorder};
-    ${typography.heading3};
-    ${parseWidthHeight('100%', 56)};
-    ${bgColor(getProp(colors, 'fill/headerbar'))}
-    ${textColor(getProp(colors, 'text/main'))}
-    ${modal.onMoveModal && cursorMove};
-    ${order(1)};
-    border-radius: 4px 4px 0px 0px;
-    ${shadowSmall};
-`;
-const TitleContainerCSS = css`
-    ${displayFlex};
-    ${flexRow};
-    ${positionRelative};
-    ${justifyBetween};
-    ${itemsCenter};
-`;
-
-// ModalHeader.defaultProps = {
-//     className: '',
-//     showClose: true,
-//     style: {},
-//     title: '',
-// };
-
-ModalHeader.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /** Class for component. */
-  className: PropTypes.string,
-  /** If `true`, button close is shown. */
-  showClose: PropTypes.bool,
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** The content of the component if not have prop `children`. */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-};
-export { ModalHeader };
-export default OptionWrapper(ModalHeader);

package/components/modal/index.js

@@ -1,63 +0,0 @@
-/* eslint-disable react/display-name */
-import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useImperativeHandle, useRef } from 'react';
-import Body from "./body";
-import Footer from "./footer";
-import Header from "./header";
-import Modal from "./modal";
-const ModalSample = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  action = {},
-  bodyStyle,
-  children,
-  footer,
-  footerStyle,
-  headerStyle,
-  style,
-  title,
-  ...props
-}, reference) => {
-  const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return /*#__PURE__*/React.createElement(Modal, {
-    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 = {
-  /** Style inline of the body component. */
-  bodyStyle: PropTypes.object,
-  /** The content of the body component. */
-  children: PropTypes.node,
-  /** The content of the footer component. */
-  footer: PropTypes.node,
-  /** Style inline of the footer component. */
-  footerStyle: PropTypes.object,
-  /** Style inline of the header component. */
-  headerStyle: PropTypes.object,
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** The content of the header component. */
-  title: PropTypes.node,
-  /** Any props else. */
-  props: PropTypes.any
-};
-export default ModalSample;

package/components/modal/modal.js

@@ -1,292 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { animations } from "../../styles/animation";
-import { bgColor, borderRadius, boxBorder, cursorMove, displayFlex, flexCol, flexRow, inset, justifyCenter, left, parseMaxWidthHeight, parseMinWidth, parseWidthHeight, positionAbsolute, positionFixed, positionRelative, shadowLarge, top } from "../../styles/general";
-import { makeStyles, useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp, hexToRGBA, useDelayUnmount } from "../../utils";
-import ModalContext from "./context";
-const fadeInDown = animations.fadeInDown;
-const fadeOutUp = animations.fadeOutUp;
-const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    breakpoints,
-    zIndex: zIndexTheme
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Modal'
-  });
-  const {
-    action = {},
-    alignment,
-    autoFocus,
-    children,
-    className,
-    dragAnyWhere,
-    id,
-    moveable,
-    moveOutScreen,
-    onClose,
-    open,
-    pressESCToClose,
-    size,
-    style,
-    width,
-    zIndex = zIndexTheme()
-  } = props;
-  const ref = useRef(null);
-
-  // const overflow = useRef(null);
-  const modalBoxRef = useRef(null);
-  const [openState, setOpenState] = useState(open);
-  const showModal = useDelayUnmount(openState, 200);
-  const useStyles = makeStyles({
-    noScroll: {
-      key: props => `DGN-Modal-${props}`,
-      overflow: 'hidden',
-      paddingRight: `${Math.abs(window.innerWidth - document.documentElement.clientWidth) +
-      // scrollbar width
-      parseInt(getComputedStyle(document.body).getPropertyValue('padding-right')) // body padding-right
-      }px`
-    }
-  });
-  const _size = breakpoints.values[size];
-  const _ModalCSS = ModalCSS(zIndex);
-  const _ModalContainerCSS = ModalContainerCSS(zIndex, alignment, theme);
-  const _ModalBoxCSS = ModalBoxCSS(width, moveable, dragAnyWhere, _size, theme);
-  const onShowModal = () => {
-    setOpenState(true);
-  };
-  const onCloseModal = () => {
-    onClose && onClose();
-    setOpenState(false);
-  };
-  const pressESCHandler = event => {
-    if (event.key === 'Escape') {
-      const modals = document.querySelectorAll('.DGN-UI-Portal');
-      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;
-      }
-      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(() => {
-    setOpenState(open);
-  }, [open]);
-  useEffect(() => {
-    if (openState && ref.current) {
-      if (autoFocus) {
-        if (!ref.current.contains(document.activeElement)) {
-          ref.current.tabIndex = -1;
-          ref.current.focus();
-        }
-      }
-      const timestamp = Date.now();
-      const classes = useStyles(timestamp);
-      const noScrollClass = classes.noScroll.split(' ');
-      document.body.classList.add(...noScrollClass);
-      // overflow.current = document.body.style.overflow; // overflow of <body /> before open modal
-      // document.body.style.overflow = 'hidden';
-      // Allow press ESC to close popup
-      if (pressESCToClose) {
-        document.addEventListener('keydown', pressESCHandler);
-      }
-      return () => {
-        document.body.classList.remove(...noScrollClass);
-        // document.body.style.overflow = overflow.current; // reset overflow of <body /> before open modal
-        if (pressESCToClose) {
-          document.removeEventListener('keydown', pressESCHandler);
-        }
-      };
-    }
-  }, [openState]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  if (showModal) {
-    const node = jsx("div", {
-      className: 'DGN-UI-Portal DGN-UI-Modal',
-      css: _ModalCSS
-    }, jsx("div", {
-      id: id,
-      css: _ModalContainerCSS,
-      className: 'DGN-UI-Modal-Container',
-      ref: ref
-    }, jsx("div", {
-      css: _ModalBoxCSS,
-      ref: modalBoxRef,
-      onMouseDown: moveable && dragAnyWhere ? dragMouseDown : null,
-      className: classNames('DGN-UI-Modal-Box', openState ? 'DGN-UI-Modal-Show' : 'DGN-UI-Modal-Hide', className),
-      style: style
-    }, jsx(ModalContext.Provider, {
-      value: {
-        show: onShowModal,
-        close: onCloseModal,
-        onMoveModal: moveable && !dragAnyWhere ? dragMouseDown : null
-      }
-    }, children))));
-    return /*#__PURE__*/createPortal(node, document.body);
-  }
-  return null;
-}));
-const ModalCSS = zIndex => css`
-    ${positionFixed};
-    z-index: ${zIndex};
-    ${inset(0)};
-`;
-const ModalContainerCSS = (zIndex, alignment, {
-  colors,
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${positionAbsolute}
-    ${justifyCenter};
-    ${parseWidthHeight('100%')};
-    padding-top: ${spacing(alignment === 'top' ? [3] : [0])};
-    ${bgColor(hexToRGBA(getProp(colors, 'system/on-standard'), 0.5))};
-    ${top(0)};
-    ${left(0)};
-    z-index: ${zIndex};
-    align-items: ${alignment === 'top' ? 'inherit' : 'center'};
-`;
-const ModalBoxCSS = (width, moveable, dragAnyWhere, size, {
-  colors,
-  typography
-}) => css`
-    ${typography.paragraph1};
-    ${displayFlex};
-    ${flexCol};
-    ${positionRelative};
-    ${borderRadius(4)};
-    ${boxBorder};
-    ${parseWidthHeight(size || width, 'max-content')};
-    ${parseMaxWidthHeight('90%', 'calc(100% - 12px)')};
-    ${parseMinWidth(150)};
-    ${moveable && dragAnyWhere && cursorMove};
-    ${bgColor(getProp(colors, 'system/standard'))};
-    ${shadowLarge};
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    animation: ${fadeInDown} 0.2s ease;
-    animation-fill-mode: forwards;
-    &.DGN-UI-Modal-Show {
-        animation: ${fadeInDown} 0.2s ease;
-    }
-    &.DGN-UI-Modal-Hide {
-        animation: ${fadeOutUp} 0.3s ease;
-        animation-fill-mode: forwards;
-    }
-`;
-
-// Modal.defaultProps = {
-//     alignment: 'top',
-//     autoFocus: true,
-//     className: '',
-//     dragAnyWhere: false,
-//     moveable: false,
-//     moveOutScreen: false,
-//     open: false,
-//     pressESCToClose: true,
-//     style: {},
-//     width: '80%',
-//     zIndex: zIndexCORE(),
-// };
-
-Modal.propTypes = {
-  /** The component alignment. */
-  alignment: PropTypes.oneOf(['top', 'center']),
-  /** If `true`, focus when component is shown. */
-  autoFocus: PropTypes.bool,
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** If `true`, allow drag the component at any position. */
-  dragAnyWhere: PropTypes.bool,
-  /** If `true`, allow move the component by drag and move. */
-  moveable: PropTypes.bool,
-  /** If `true`, allows drag the component out of the screen. */
-  moveOutScreen: PropTypes.bool,
-  /** Callback fired when the component requests to be closed. */
-  onClose: PropTypes.func,
-  /** If `true`, the component is shown. */
-  open: PropTypes.bool,
-  /** If `true`, hitting escape will close component. */
-  pressESCToClose: PropTypes.bool,
-  /** The size of components according to breakpoints. */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** Width of the component. */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** The z-index of component. */
-  zIndex: PropTypes.number
-};
-export { Modal };
-export default OptionWrapper(Modal);

package/components/others/extra/index.js

@@ -1,116 +0,0 @@
-/* eslint-disable react/prop-types */
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { bgColor, cursorPointer, displayFlex, fill, itemsCenter, justifyCenter, parseWidthHeight, textColor } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import { getProp } from "../../../utils";
-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);
-  const theme = useTheme();
-
-  /* Start styled */
-  const ExtraIconCSS = css`
-        ${displayFlex};
-        ${itemsCenter};
-    `;
-  const ExtraTextCSS = css`
-        margin-left: 9px;
-        ${theme.typography.heading4};
-        ${textColor(getProp(theme.colors, 'text/sub'))};
-    `;
-  const ExtraCSS = css`
-        ${parseWidthHeight('100%', 40)};
-        ${bgColor(getProp(theme.colors, 'fill/background'))};
-        ${displayFlex};
-        ${justifyCenter};
-        ${itemsCenter};
-        ${textColor(getProp(theme.colors, 'text/sub'))};
-        ${cursorPointer};
-        &:hover {
-            ${bgColor(getProp(theme.colors, 'fill/hover'))};
-            .css-${ExtraIconCSS.name} {
-                ${textColor(getProp(theme.colors, 'system/active'))};
-                path: {
-                    ${fill(getProp(theme.colors, 'system/active'))}
-                }
-            }
-            .css-${ExtraTextCSS.name} {
-                ${textColor(getProp(theme.colors, 'system/active'))};
-            }
-        }
-    `;
-  /* 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: ExtraIconCSS
-  }), [theme]);
-  const textComp = useMemo(() => jsx("div", {
-    ref: textRef,
-    css: ExtraTextCSS
-  }, displayText), [theme]);
-  /* End component */
-
-  return jsx("div", {
-    ...props,
-    ref: extraRef,
-    css: ExtraCSS,
-    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);

package/components/others/import/index.js

@@ -1,71 +0,0 @@
-import { Notify as AlertNotify, Button, Typography } from "../..";
-import PropTypes from 'prop-types';
-import React from 'react';
-const ImportComp = ({
-  components,
-  from = 'components',
-  importDefault = false
-}) => {
-  let text = Array.isArray(components) ? components.join(', ') : components;
-  if (!importDefault) {
-    text = `{ ${text} }`;
-  }
-  const importText = `import ${text} from 'diginet-core-ui/${from}';`;
-  let Notify = null;
-  const onCopyImport = () => {
-    if (!components) {
-      Notify(`Không có components để copy`, {
-        color: 'warning'
-      });
-      return;
-    }
-    const el = document.createElement('input');
-    el.value = importText;
-    document.body.appendChild(el);
-    el.select();
-    document.execCommand('copy');
-    document.body.removeChild(el);
-    Notify(`Đã copy ${text} from ${from}`);
-  };
-  return components ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      position: 'sticky',
-      justifyContent: 'flex-end',
-      alignItems: 'center',
-      top: 0,
-      textAlign: 'right'
-    }
-  }, /*#__PURE__*/React.createElement(Typography, {
-    type: 'h3',
-    color: 'primary',
-    style: {
-      fontSize: 14
-    }
-  }, importText), /*#__PURE__*/React.createElement(Button, {
-    onClick: onCopyImport,
-    text: 'Copy',
-    viewType: 'filled',
-    color: 'info',
-    size: 'tiny'
-  }), /*#__PURE__*/React.createElement(AlertNotify, {
-    getAddNotify: func => Notify = func,
-    progressing: true,
-    autoDisappear: true,
-    maxWidth: '500px',
-    color: 'success'
-  })) : /*#__PURE__*/React.createElement(Typography, {
-    type: 'h1',
-    color: 'danger',
-    center: true
-  }, "DEVELOPING", ' ', /*#__PURE__*/React.createElement(Typography, {
-    type: 'h3',
-    color: 'warning'
-  }, "(Khoan h\u1EB5n d\xF9ng)"));
-};
-ImportComp.propTypes = {
-  components: PropTypes.string,
-  from: PropTypes.string,
-  importDefault: PropTypes.bool
-};
-export default ImportComp;