diginet-core-ui 1.4.39 → 1.4.40

package/components/slider/slider-container.js

@@ -1,340 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon } from "./..";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, borderRadius, boxBorder, cursorPointer, displayNone, flexCol, flexRow, itemsCenter, justifyCenter, left, overflowHidden, parseHeight, parseWidthHeight, positionAbsolute, positionRelative, right, top, userSelectNone } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { classNames, getProp, randomString } from "../../utils";
-import SliderItem from "./slider-item";
-const styles = {
-  iconLeft: {
-    left: 0,
-    position: 'absolute',
-    top: '50%',
-    transform: 'translate(0, -50%)'
-  },
-  iconRight: {
-    right: 0,
-    position: 'absolute',
-    top: '50%',
-    transform: 'translate(0, -50%)'
-  }
-};
-const SliderContainer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  animation,
-  active,
-  autoChangeTime,
-  children,
-  className,
-  data,
-  onShowNavigation,
-  style
-}, reference) => {
-  let autoChange;
-  let currentItemIndex = 0;
-  const Id = randomString(7, {
-    allowSymbol: false,
-    allowNumber: false
-  });
-  const IDs = {
-    container: 'DGN-UI-Slider-container-' + Id,
-    icon: 'DGN-UI-Slider-icon',
-    iconLeft: 'DGN-UI-Slider-icon-left',
-    iconRight: 'DGN-UI-Slider-icon-right',
-    navigation: 'DGN-UI-Slider-navigation-' + Id,
-    navigationList: 'DGN-UI-Slider-navigation-list-' + Id,
-    navigationItem: 'DGN-UI-Slider-navigation-item',
-    slideContainer: 'DGN-UI-Slider-slide-container'
-  };
-  const ref = useRef(null);
-  const slideContainerRef = useRef(null);
-  const navigationRef = useRef(null);
-  const navigationListRef = useRef(null);
-  const iconLeftRef = useRef(null);
-  const iconRightRef = useRef(null);
-  const theme = useTheme();
-  const _containerCSS = ContainerCSS(IDs, theme);
-  const _navigationListCSS = NavigationListCSS(IDs, theme);
-  const _navigationCSS = NavigationCSS(theme);
-  const removeClass = (className, selector) => {
-    const array = document.querySelectorAll(`.${selector}`) || document.querySelectorAll(selector);
-    array.forEach(a => {
-      a.classList.remove(className);
-    });
-  };
-  const onChangeActiveItem = (childNodeList, e, i) => {
-    removeClass('item-focused', IDs.navigationItem);
-    e.classList.add('item-focused');
-    childNodeList.forEach(node => {
-      node.style.display = 'none';
-    });
-    childNodeList[i].style.display = 'block';
-    currentItemIndex = i;
-  };
-  const onNextItem = childNodeList => {
-    if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
-      clearInterval(autoChange);
-      autoChange = setInterval(() => onNextItem(childNodeList), autoChangeTime * 1000);
-    }
-    childNodeList[currentItemIndex].style.display = 'none';
-    if (currentItemIndex === childNodeList.length - 1) {
-      currentItemIndex = 0;
-    } else {
-      currentItemIndex += 1;
-    }
-    childNodeList[currentItemIndex].style.display = 'block';
-    onChangeActiveItem(childNodeList, navigationListRef.current.childNodes[currentItemIndex], currentItemIndex);
-  };
-  const onPrevItem = childNodeList => {
-    if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
-      clearInterval(autoChange);
-      autoChange = setInterval(() => onNextItem(childNodeList), autoChangeTime * 1000);
-    }
-    childNodeList[currentItemIndex].style.display = 'none';
-    if (currentItemIndex === 0) {
-      currentItemIndex = childNodeList.length - 1;
-    } else {
-      currentItemIndex -= 1;
-    }
-    childNodeList[currentItemIndex].style.display = 'block';
-    onChangeActiveItem(childNodeList, navigationListRef.current.childNodes[currentItemIndex], currentItemIndex);
-  };
-  const findActiveItem = childNodeList => {
-    for (let i = 0; i < childNodeList.length; i++) {
-      if (childNodeList[i].classList.contains('active')) {
-        childNodeList[i].style.display = 'block';
-        currentItemIndex = i;
-        return i;
-      }
-    }
-    childNodeList[0].style.display = 'block';
-    currentItemIndex = 0;
-    return 0;
-  };
-  const renderNavigationItem = childNodeList => {
-    const list = navigationListRef.current;
-    const activeItem = findActiveItem(childNodeList);
-    let items = '';
-    for (let i = 0; i < childNodeList.length; i++) {
-      items += `<span class='${i === activeItem ? IDs.navigationItem + ' ' + 'item-focused' : IDs.navigationItem}' id='${IDs.navigationItem}-${i}'></span>`;
-    }
-    list.innerHTML = items;
-    navigationListRef.current.querySelectorAll(`.${IDs.navigationItem}`).forEach((item, i) => {
-      item.addEventListener('click', e => {
-        onChangeActiveItem(childNodeList, e.target, i);
-      });
-    });
-  };
-  useEffect(() => {
-    if (!slideContainerRef.current || !navigationRef.current || !iconLeftRef.current || !iconRightRef.current) return;
-    const childNodeList = slideContainerRef.current.childNodes,
-      navigation = navigationRef.current,
-      iconLeft = iconLeftRef.current,
-      iconRight = iconRightRef.current;
-    renderNavigationItem(childNodeList);
-    if (childNodeList.length > 1) {
-      navigation.style.display = onShowNavigation ? 'block' : 'none';
-      iconLeft.style.display = 'block';
-      iconRight.style.display = 'block';
-      iconRight.addEventListener('click', () => onNextItem(childNodeList));
-      iconLeft.addEventListener('click', () => onPrevItem(childNodeList));
-    } else {
-      navigation.style.display = 'none';
-      iconLeft.style.display = 'none';
-      iconRight.style.display = 'none';
-    }
-    return () => {
-      childNodeList.forEach(node => {
-        node.style.display = 'none';
-      });
-      if (childNodeList.length > 1) {
-        iconRight.removeEventListener('click', () => onNextItem(childNodeList));
-        iconLeft.removeEventListener('click', () => onPrevItem(childNodeList));
-      }
-    };
-  });
-  useEffect(() => {
-    if (!slideContainerRef.current) return;
-    const childNodeList = slideContainerRef.current.childNodes;
-    if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
-      autoChange = setInterval(() => onNextItem(childNodeList), autoChangeTime * 1000);
-    }
-    return () => {
-      if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
-        clearInterval(autoChange);
-      }
-    };
-  }, [autoChangeTime, children, data]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const Slider = useMemo(() => jsx("div", {
-    className: IDs.slideContainer,
-    ref: slideContainerRef
-  }, children || data && data.map((i, index) => {
-    return jsx(SliderItem, {
-      animation: animation,
-      key: index,
-      fileName: i.name,
-      active: index === active,
-      id: index,
-      url: i.url
-    });
-  })), [animation, autoChangeTime, children, data, theme]);
-  const IconLeft = useMemo(() => jsx("span", {
-    className: classNames(IDs.icon, IDs.iconLeft),
-    ref: iconLeftRef
-  }, jsx(ButtonIcon, {
-    circular: true,
-    viewType: 'filled',
-    color: 'system/standard',
-    name: 'ArrowLeft',
-    style: styles.iconLeft,
-    viewBox: false
-  })), [children, data, theme]);
-  const IconRight = useMemo(() => jsx("span", {
-    className: classNames(IDs.icon, IDs.iconRight),
-    ref: iconRightRef
-  }, jsx(ButtonIcon, {
-    circular: true,
-    viewType: 'filled',
-    color: 'system/standard',
-    name: 'ArrowRight',
-    style: styles.iconRight,
-    viewBox: false
-  })), [children, data, theme]);
-  const Navigation = useMemo(() => jsx("div", {
-    className: classNames(IDs.navigation, onShowNavigation && 'navigation-hidden'),
-    css: _navigationCSS,
-    id: IDs.navigation,
-    ref: navigationRef
-  }, jsx("div", {
-    css: _navigationListCSS,
-    className: IDs.navigationList,
-    id: IDs.navigationList,
-    ref: navigationListRef
-  })), [animation, autoChangeTime, children, data, onShowNavigation, theme]);
-  return jsx("div", {
-    css: _containerCSS,
-    className: classNames(IDs.container, className),
-    id: IDs.container,
-    style: style,
-    ref: ref
-  }, Slider, IconLeft, IconRight, Navigation);
-}));
-const ContainerCSS = (IDs, {
-  spacing
-}) => css`
-    * {
-        ${boxBorder};
-        margin: ${spacing([0])};
-        padding: ${spacing([0])};
-    }
-    ${flexCol};
-    ${itemsCenter};
-    ${justifyCenter};
-    ${positionRelative};
-    ${bgColor('transparent')};
-    ${parseHeight('100%')};
-    resize: both;
-    .${IDs.icon} {
-        opacity: 0;
-        &.${IDs.iconLeft} {
-            ${displayNone};
-            ${cursorPointer};
-            ${userSelectNone};
-            ${positionAbsolute};
-            ${parseWidthHeight('15%', '100%')};
-            ${left(0)};
-            margin-left: ${spacing([4])};
-        }
-        &.${IDs.iconRight} {
-            ${displayNone};
-            ${cursorPointer};
-            ${userSelectNone};
-            ${positionAbsolute};
-            ${parseWidthHeight('15%', '100%')};
-            ${right(0)};
-            margin-right: ${spacing([4])};
-        }
-    }
-    .${IDs.slideContainer} {
-        ${overflowHidden};
-        ${positionRelative};
-        ${bgColor('transparent')};
-        ${parseWidthHeight('100%', '95%')};
-        margin: 0 auto;
-    }
-    &:hover {
-        .${IDs.icon} {
-            opacity: 1;
-        }
-    }
-`;
-const NavigationCSS = theme => css`
-    ${displayNone};
-    ${positionRelative};
-    ${bgColor(getProp(theme.colors, 'system/standard'))};
-    ${parseWidthHeight('100%', '5%')};
-    &.navigation-hidden {
-        ${displayNone};
-    }
-`;
-const NavigationListCSS = (IDs, {
-  colors,
-  spacing
-}) => css`
-    ${flexRow};
-    ${positionAbsolute};
-    ${left('50%')};
-    ${top('50%')};
-    transform: translate(-50%, 14px);
-    .${IDs.navigationItem} {
-        ${cursorPointer};
-        ${positionRelative};
-        ${bgColor(getProp(colors, 'system/rest'))};
-        ${borderRadius('50%')};
-        ${parseWidthHeight(12)};
-        margin: ${spacing([0, 1.5])};
-        :hover:not(.item-focused) {
-            ${bgColor(getProp(colors, 'fill/pressed'))};
-        }
-        &.item-focused {
-            ${bgColor(getProp(colors, 'system/active'))};
-        }
-    }
-`;
-SliderContainer.defaultProps = {
-  animation: true,
-  autoChangeTime: 0,
-  children: null,
-  data: [],
-  onShowNavigation: true,
-  className: '',
-  style: {}
-};
-SliderContainer.propTypes = {
-  /** Index of the active item. */
-  active: PropTypes.number,
-  /** Enable/disable the animation when change active item. */
-  animation: PropTypes.bool,
-  /** Time to slider auto change (s). */
-  autoChangeTime: PropTypes.number,
-  /** Element or node to display on slider without data.  */
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
-  /** Class for component. */
-  className: PropTypes.string,
-  /** Data to display on slider. */
-  data: PropTypes.array,
-  /** Show/hide the navigation bar. */
-  onShowNavigation: PropTypes.bool,
-  /** Style inline of component. */
-  style: PropTypes.object
-};
-export default SliderContainer;

package/components/slider/slider-item.js

@@ -1,205 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { CircularProgress } from "./..";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { animations } from "../../styles/animation";
-import { displayBlock, displayNone, justifyCenter, left, parseMaxWidthHeight, parseWidthHeight, positionAbsolute, top } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { classNames, getFileType, randomString } from "../../utils";
-const fadeIn = animations.fadeIn;
-const regex = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/g;
-const googleDriveRegex = /(http(s)?:\/\/.)?(drive\.google\.com\/file\/d\/)/;
-const googleDocsRegex = /(http(s)?:\/\/.)?(docs\.google\.com\/fileview\?)/;
-const checkURL = link => {
-  const res = regex.test(link);
-  if (res) {
-    if (googleDriveRegex.test(link)) {
-      const id = link.split('/')[0] === 'drive.google.com' ? link.split('/')[3] : link.split('/')[5];
-      return `https://docs.google.com/viewer?srcid=${id}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
-    }
-    if (googleDocsRegex.test(link)) {
-      return `https://docs.google.com/viewer?srcid=${link.split('=')[1]}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
-    }
-  }
-  return link;
-};
-const SliderItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  active,
-  animation,
-  fileName,
-  url,
-  dataType,
-  ...props
-}, reference) => {
-  const theme = useTheme();
-  const Id = randomString(7, {
-    allowSymbol: false,
-    allowNumber: false
-  });
-  const IDs = {
-    frame: 'DGN-UI-Slider-frame' + Id,
-    image: 'DGN-UI-Slider-image' + Id,
-    itemContainer: 'DGN-UI-Slider-item-container-' + Id,
-    video: 'DGN-UI-Slider-video' + Id
-  };
-  const ref = useRef(null);
-  const iframeRef = useRef(null);
-  const [iframeTimeoutId, setIframeTimeoutId] = useState(null);
-  const _FrameCSS = FrameCSS(theme);
-  const getViewer = (filePath, fileType) => {
-    switch (fileType) {
-      case 'image':
-        {
-          return jsx("img", {
-            ...props,
-            className: IDs.image,
-            css: ImageCSS,
-            src: filePath,
-            alt: ''
-          });
-        }
-      case 'word':
-      case 'sheet':
-        {
-          return jsx("iframe", {
-            ...props,
-            className: IDs.frame,
-            css: _FrameCSS,
-            frameBorder: 0,
-            src: `https://view.officeapps.live.com/op/view.aspx?src=${filePath}&activeCell=A1`,
-            title: fileName
-          });
-        }
-      case 'pdf':
-        {
-          return jsx("iframe", {
-            ...props,
-            ref: iframeRef,
-            className: IDs.frame,
-            css: _FrameCSS,
-            frameBorder: 0,
-            src: getIframeLink(filePath),
-            title: fileName,
-            onLoad: iframeLoaded,
-            onError: updateIframeSrc
-          });
-        }
-      case 'mp4':
-        {
-          return jsx("video", {
-            autoPlay: true,
-            className: IDs.video,
-            controls: "controls",
-            height: "auto",
-            width: "auto"
-          }, jsx("source", {
-            src: filePath,
-            type: "video/mp4"
-          }));
-        }
-      case 'another':
-        {
-          return jsx("iframe", {
-            ...props,
-            className: IDs.frame,
-            css: _FrameCSS,
-            frameBorder: 0,
-            src: checkURL(filePath),
-            title: fileName
-          });
-        }
-      default:
-        {
-          return jsx("iframe", {
-            ...props,
-            className: IDs.frame,
-            css: _FrameCSS,
-            frameBorder: 0,
-            src: filePath,
-            title: fileName
-          });
-        }
-    }
-  };
-  useEffect(() => {
-    const fileType = getFileType(url, undefined, false);
-    if (fileType === 'pdf') {
-      const intervalId = setInterval(updateIframeSrc, 2000);
-      setIframeTimeoutId(intervalId);
-    }
-  }, []);
-  const iframeLoaded = () => {
-    clearInterval(iframeTimeoutId);
-    setIframeTimeoutId(null);
-  };
-  const getIframeLink = (data = '') => {
-    if (dataType === 'pdf' && data && data.indexOf('data:application/') > -1) return data;
-    return `https://docs.google.com/gview?url=${url}&embedded=true`;
-  };
-  const updateIframeSrc = () => {
-    if (iframeRef.current) {
-      iframeRef.current.src = getIframeLink();
-    }
-  };
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const handleGetViewer = () => {
-    return dataType === 'pdf' ? dataType : getFileType(url, undefined, false);
-  };
-  return jsx("div", {
-    className: classNames(IDs.itemContainer, active && 'active', animation && 'item-animation'),
-    css: ItemContainerCSS,
-    id: IDs.itemContainer,
-    ref: ref
-  }, iframeTimeoutId && getFileType(url, undefined, false) === 'pdf' && jsx("div", {
-    css: LoadingCSS
-  }, jsx(CircularProgress, {
-    size: 'xs'
-  })), getViewer(url, handleGetViewer()));
-}));
-const ItemContainerCSS = css`
-    ${displayNone};
-    ${justifyCenter};
-    ${parseWidthHeight('100%')};
-    &.item-animation {
-        animation: ${fadeIn} 1s;
-    }
-`;
-const FrameCSS = ({
-  spacing
-}) => css`
-    ${displayBlock};
-    ${parseWidthHeight('100%', '85vh')};
-    margin: ${spacing([0])};
-    padding: ${spacing([0])};
-`;
-const ImageCSS = css`
-    ${displayBlock};
-    ${parseWidthHeight('auto')};
-    ${parseMaxWidthHeight('100%')};
-    margin: auto;
-`;
-const LoadingCSS = css`
-    ${positionAbsolute};
-    ${top('50%')};
-    ${left('50%')};
-    transform: translate(-50%, -50%);
-`;
-SliderItem.defaultProps = {
-  active: false,
-  animation: true
-};
-SliderItem.propTypes = {
-  active: PropTypes.bool,
-  animation: PropTypes.bool,
-  fileName: PropTypes.string,
-  url: PropTypes.string
-};
-export default SliderItem;

package/components/status/index.js

@@ -1,111 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Icon, Typography } from "./..";
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, borderRadius, boxBorder, displayFlex, flexRow, itemsCenter, parseMinHeight, parseWidth, textColor, whiteSpaceNoWrap } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { classNames, getProp } from "../../utils";
-const colorMap = new Map([['default', 'system/rest']]);
-const iconSizeMap = new Map([['small', '16px'], ['medium', '20px'], ['large', '24px']]);
-const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
-const filledPaddingSizeMap = new Map([['small', [0.5, 2]], ['medium', [0.5, 2]], ['large', [0.5, 3]]]);
-const Status = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  action = {},
-  className,
-  color: colorProp,
-  icon,
-  id,
-  size,
-  style,
-  text,
-  viewType
-}, reference) => {
-  if (!reference) reference = useRef(null);
-  const ref = useRef(null);
-  const theme = useTheme();
-  const outlinedPaddingSize = filledPaddingSizeMap.get(size);
-  const color = colorMap.get(colorProp) || getProp(theme.colors, colorProp, colorProp) || 'system/rest';
-  const iconSize = iconSizeMap.get(size);
-  const typographySize = typographySizeMap.get(size);
-  const _StatusRootCSS = StatusRootCSS(iconSize, color, size, viewType, outlinedPaddingSize, 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 StatusIconView = typeof icon === 'string' ? jsx(Icon, {
-    name: icon,
-    width: iconSize,
-    height: iconSize,
-    color: 'currentColor',
-    viewBox: true
-  }) : icon;
-  const StatusTextView = jsx(Typography, {
-    css: whiteSpaceNoWrap,
-    type: typographySize,
-    color: 'inherit'
-  }, text);
-  return useMemo(() => {
-    return jsx("div", {
-      css: _StatusRootCSS,
-      ref: ref,
-      id: id,
-      style: style,
-      className: classNames('DGN-UI-Status', viewType, size, className)
-    }, StatusIconView, StatusTextView);
-  }, [className, colorProp, icon, id, size, style, text, viewType, theme]);
-}));
-const StatusRootCSS = (iconSize, color, size, viewType, outlinedPaddingSize, {
-  colors,
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${itemsCenter};
-    ${boxBorder};
-    ${parseWidth('fit-content')};
-    ${parseMinHeight(iconSize)};
-    gap: ${spacing([size === 'small' ? 0.5 : 1])};
-    ${textColor(color)};
-    ${bgColor('transparent')};
-    ${viewType === 'filled' && css`
-        ${textColor(getProp(colors, 'fill/surface'))};
-        ${bgColor(color)};
-        ${borderRadius(20)};
-        padding: ${spacing(outlinedPaddingSize)};
-    `}
-`;
-Status.defaultProps = {
-  className: '',
-  icon: '',
-  size: 'medium',
-  style: {},
-  text: '',
-  viewType: 'ghost'
-};
-Status.propTypes = {
-  /** Class for component. */
-  className: PropTypes.string,
-  /** The color of the component. */
-  color: PropTypes.string,
-  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed before the content. */
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /** The size of the component. */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** The content of the component. */
-  text: PropTypes.string,
-  /** The variant to use. */
-  viewType: PropTypes.oneOf(['filled', 'ghost'])
-};
-export { Status };
-export default OptionWrapper(Status);

package/components/tab/context.js

@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-const TabContext = /*#__PURE__*/createContext({});
-export default TabContext;