diginet-core-ui 1.3.88 → 1.3.89

package/components/slider/slider-container.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -7,7 +6,7 @@ import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } fro
 import { ButtonIcon } from '..';
 import { randomString } from "../../utils";
 import SliderItem from "./slider-item";
-import { color as colors } from "../../styles/colors";
+import { useColor as colors } from "../../theme";
 import { itemsCenter, bgTransparent, boxBorder, cursorPointer, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
 const {
   system: {
@@ -65,18 +64,14 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const navigationListRef = useRef(null);
   const iconLeftRef = useRef(null);
   const iconRightRef = useRef(null);
-
   const _containerCSS = containerCSS(IDs);
-
   const _navigationListCSS = navigationListCSS(IDs);
-
   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');
@@ -86,43 +81,34 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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')) {
@@ -131,21 +117,17 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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 => {
@@ -153,15 +135,13 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     });
   };
-
   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;
+      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';
@@ -173,12 +153,10 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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));
@@ -188,11 +166,9 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   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);
@@ -202,9 +178,7 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -262,7 +236,6 @@ const SliderContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: ref
   }, Slider, IconLeft, IconRight, Navigation);
 }));
-
 const containerCSS = IDs => css`
     * {
         ${boxBorder};
@@ -313,7 +286,6 @@ const containerCSS = IDs => css`
         }
     }
 `;
-
 const navigationCSS = css`
     ${displayNone};
     ${positionRelative};
@@ -324,7 +296,6 @@ const navigationCSS = css`
         ${displayNone};
     }
 `;
-
 const navigationListCSS = IDs => css`
     ${flexRow};
     ${positionAbsolute};
@@ -347,7 +318,6 @@ const navigationListCSS = IDs => css`
         }
     }
 `;
-
 SliderContainer.defaultProps = {
   animation: true,
   autoChangeTime: 0,
@@ -360,25 +330,18 @@ SliderContainer.defaultProps = {
 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
 };

package/components/slider/slider-item.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { forwardRef, memo, useEffect, useState, useRef, useImperativeHandle } from 'react';
 import { jsx, css } from '@emotion/core';
@@ -12,24 +11,19 @@ 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,
@@ -50,23 +44,23 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const iframeRef = useRef(null);
   const [iframeTimeoutId, setIframeTimeoutId] = useState(null);
-
   const getViewer = (filePath, fileType) => {
     switch (fileType) {
       case 'image':
         {
-          return jsx("img", { ...props,
+          return jsx("img", {
+            ...props,
             className: IDs.image,
             css: imageCSS,
             src: filePath,
             alt: ''
           });
         }
-
       case 'word':
       case 'sheet':
         {
-          return jsx("iframe", { ...props,
+          return jsx("iframe", {
+            ...props,
             className: IDs.frame,
             css: frameCSS,
             frameBorder: 0,
@@ -74,10 +68,10 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             title: fileName
           });
         }
-
       case 'pdf':
         {
-          return jsx("iframe", { ...props,
+          return jsx("iframe", {
+            ...props,
             ref: iframeRef,
             className: IDs.frame,
             css: frameCSS,
@@ -88,7 +82,6 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             onError: updateIframeSrc
           });
         }
-
       case 'mp4':
         {
           return jsx("video", {
@@ -102,10 +95,10 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             type: "video/mp4"
           }));
         }
-
       case 'another':
         {
-          return jsx("iframe", { ...props,
+          return jsx("iframe", {
+            ...props,
             className: IDs.frame,
             css: frameCSS,
             frameBorder: 0,
@@ -113,10 +106,10 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             title: fileName
           });
         }
-
       default:
         {
-          return jsx("iframe", { ...props,
+          return jsx("iframe", {
+            ...props,
             className: IDs.frame,
             css: frameCSS,
             frameBorder: 0,
@@ -126,37 +119,29 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     }
   };
-
   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 = () => {
     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;
   });

package/components/status/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Icon, Typography } from "./..";
@@ -41,17 +40,14 @@ const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const color = colorMap.get(colorProp) || colors[colorProp] || colorProp || systemRest;
   const iconSize = iconSizeMap.get(size);
   const typographySize = typographySizeMap.get(size);
-
   const _StatusRootCSS = StatusRootCSS(iconSize, color, size, outlinedPaddingSize);
-
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -77,7 +73,6 @@ const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, StatusIconView, StatusTextView);
   }, [className, colorProp, icon, id, size, style, text, viewType]);
 }));
-
 const StatusRootCSS = (iconSize, color, size, outlinedPaddingSize) => css`
     ${flexRow};
     ${itemsCenter};
@@ -96,7 +91,6 @@ const StatusRootCSS = (iconSize, color, size, outlinedPaddingSize) => css`
         }
     }
 `;
-
 const TextCSS = css`
     white-space: nowrap;
 `;
@@ -111,22 +105,16 @@ Status.defaultProps = {
 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'])
 };

package/components/tab/tab-container.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import React, { forwardRef, useState, memo, useEffect, useRef, useImperativeHandle, useMemo } from 'react';
 import { jsx, css } from '@emotion/core';
@@ -30,20 +29,17 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }));
   if (level === 'level1') level = 'h3';
   if (level === 'level2') level = 'p1';
-
   const _TabContainerCSS = TabContainerCSS(direction, width);
-
   useEffect(() => {
     if (isNumeric(value)) setTabIndexState(value);else setTabIndexState(tabIndex);
   }, [value, tabIndex]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -66,13 +62,11 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }))));
   }, [children, className, direction, level, props, style, tabIndex, width, tabIndexState, value]);
 }));
-
 const TabContainerCSS = (direction, width) => css`
     ${direction === 'vertical' ? flexRow : flexCol};
     ${positionRelative};
     ${parseWidth(width)};
 `;
-
 TabContainer.defaultProps = {
   className: '',
   direction: 'horizontal',
@@ -84,30 +78,22 @@ TabContainer.defaultProps = {
 TabContainer.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component */
   className: PropTypes.string,
-
   /** Direction change the position of Tabs. */
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
-
   /** Direction change the size typography of Tab (typesTypography is types of Typography - exp: h1, h2, h3, p1 ...). */
   level: PropTypes.oneOfType([PropTypes.oneOf(['level1', 'level2', ...typographyTypes])]),
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** The value of the currently selected Tab. */
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** Width of component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** Any props else. */
   props: PropTypes.any,
-
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-header.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import React, { memo, forwardRef, useContext, useRef, useState, useImperativeHandle, useMemo } from 'react';
 import { jsx, css } from '@emotion/core';
@@ -24,7 +23,6 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   var _ref$current, _ref$current2;
-
   const {
     direction
   } = useContext(TabContext);
@@ -33,28 +31,22 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const isVertical = direction === 'vertical';
   let showScrollLeftButton = !isVertical && scrollLeft > 0;
   let showScrollRightButton = !isVertical && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) + scrollLeft < (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth);
-
   const _ContainerCSS = ContainerCSS(centered, isVertical, width);
-
   const _TabHeaderCSS = TabHeaderCSS(isVertical, width);
-
   const scrollLeftButtonCSS = scrollButtonCSS(true, showScrollLeftButton, showScrollRightButton);
   const scrollRightButtonCSS = scrollButtonCSS(false, showScrollLeftButton, showScrollRightButton);
-
   const _onClickScrollButton = scrollPrevious => {
     let scrollValue = scrollPrevious ? ref.current.scrollLeft - (ref.current.offsetWidth + 30) : ref.current.scrollLeft + (ref.current.offsetWidth + 30);
     ref.current.scrollLeft = scrollValue;
     setScrollLeft(scrollValue);
   };
-
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -79,7 +71,6 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       onScroll: e => {
         var _e$target;
-
         return scrollButtons && setScrollLeft((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.scrollLeft) || 0);
       }
     }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
@@ -95,7 +86,6 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }));
   }, [centered, children, className, level, props, scrollButtons, style, width, direction, isVertical, scrollLeft]);
 }));
-
 const ContainerCSS = (centered, isVertical, width) => css`
     ${flexRow};
     ${overflowHidden};
@@ -107,7 +97,6 @@ const ContainerCSS = (centered, isVertical, width) => css`
     max-width: ${isVertical ? 'max-content' : '100%'};
     padding: 0;
 `;
-
 const TabHeaderCSS = (isVertical, width) => isVertical ? css`
               ${flexCol};
               ${parseWidth(width)};
@@ -126,7 +115,6 @@ const TabHeaderCSS = (isVertical, width) => isVertical ? css`
                   ${displayNone};
               }
           `;
-
 const scrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightButton) => css`
     ${parseWidthHeight(24, 24)};
     overflow: initial;
@@ -139,7 +127,6 @@ const scrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightBu
         }
     }
 `;
-
 TabHeader.defaultProps = {
   centered: false,
   className: '',
@@ -150,27 +137,20 @@ TabHeader.defaultProps = {
 TabHeader.propTypes = {
   /** If true, the tabs are centered. */
   centered: PropTypes.bool,
-
   /** Element to display in Tab header. */
   children: PropTypes.array,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** If true, show scroll buttons. */
   scrollButtons: PropTypes.bool,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** Width of component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** Any props else. */
   props: PropTypes.any,
-
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };

package/components/tab/tab-panel.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, forwardRef, useContext, useRef, useEffect, useState, useImperativeHandle, useMemo } from 'react';
 import { jsx, css } from '@emotion/core';
@@ -33,20 +32,17 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const isVertical = direction === 'vertical';
   const isActive = index === tabIndexState;
-
   const _TabPanelCSS = TabPanelCSS(isVertical, isActive);
-
   useEffect(() => {
     if (isRendered) return;else if (index === tabIndexState) setIsRendered(true);
   }, [tabIndexState]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -63,7 +59,6 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, isActive || !lazyLoading || isRendered ? children : null);
   }, [children, className, index, lazyLoading, props, style, isActive, isRendered, tabIndexState]);
 }));
-
 const TabPanelCSS = (isVertical, isActive) => css`
     ${flexCol};
     ${boxBorder};
@@ -73,7 +68,6 @@ const TabPanelCSS = (isVertical, isActive) => css`
     color: ${main};
     padding: ${spacing([0, isVertical ? 3 : 2.5])};
 `;
-
 TabPanel.defaultProps = {
   className: '',
   lazyLoading: false,
@@ -82,24 +76,18 @@ TabPanel.defaultProps = {
 TabPanel.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** Index received in position of TabHeaderButton. */
   index: PropTypes.number,
-
   /** Lazy loading mode. */
   lazyLoading: PropTypes.bool,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** Any props else. */
   props: PropTypes.any,
-
-  /**
-   * Ref methods.
+  /**
+   * Ref methods.
    */
   reference: ref
 };