diginet-core-ui 1.3.87 → 1.3.88

package/components/slider/slider-item.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { forwardRef, memo, useEffect, useState, useRef, useImperativeHandle } from 'react';
 import { jsx, css } from '@emotion/core';
@@ -11,19 +12,24 @@ 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,
@@ -44,23 +50,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,
@@ -68,10 +74,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,
@@ -82,6 +88,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             onError: updateIframeSrc
           });
         }
+
       case 'mp4':
         {
           return jsx("video", {
@@ -95,10 +102,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,
@@ -106,10 +113,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,
@@ -119,29 +126,37 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Icon, Typography } from "./..";
@@ -40,14 +41,17 @@ 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;
   });
@@ -73,6 +77,7 @@ 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};
@@ -91,6 +96,7 @@ const StatusRootCSS = (iconSize, color, size, outlinedPaddingSize) => css`
         }
     }
 `;
+
 const TextCSS = css`
     white-space: nowrap;
 `;
@@ -105,16 +111,22 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import React, { forwardRef, useState, memo, useEffect, useRef, useImperativeHandle, useMemo } from 'react';
 import { jsx, css } from '@emotion/core';
@@ -29,17 +30,20 @@ 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;
   });
@@ -62,11 +66,13 @@ 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',
@@ -78,22 +84,30 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import React, { memo, forwardRef, useContext, useRef, useState, useImperativeHandle, useMemo } from 'react';
 import { jsx, css } from '@emotion/core';
@@ -23,6 +24,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   var _ref$current, _ref$current2;
+
   const {
     direction
   } = useContext(TabContext);
@@ -31,22 +33,28 @@ 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;
   });
@@ -71,6 +79,7 @@ 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, {
@@ -86,6 +95,7 @@ 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};
@@ -97,6 +107,7 @@ const ContainerCSS = (centered, isVertical, width) => css`
     max-width: ${isVertical ? 'max-content' : '100%'};
     padding: 0;
 `;
+
 const TabHeaderCSS = (isVertical, width) => isVertical ? css`
               ${flexCol};
               ${parseWidth(width)};
@@ -115,6 +126,7 @@ const TabHeaderCSS = (isVertical, width) => isVertical ? css`
                   ${displayNone};
               }
           `;
+
 const scrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightButton) => css`
     ${parseWidthHeight(24, 24)};
     overflow: initial;
@@ -127,6 +139,7 @@ const scrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightBu
         }
     }
 `;
+
 TabHeader.defaultProps = {
   centered: false,
   className: '',
@@ -137,20 +150,27 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, forwardRef, useContext, useRef, useEffect, useState, useImperativeHandle, useMemo } from 'react';
 import { jsx, css } from '@emotion/core';
@@ -32,17 +33,20 @@ 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;
   });
@@ -59,6 +63,7 @@ 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};
@@ -68,6 +73,7 @@ const TabPanelCSS = (isVertical, isActive) => css`
     color: ${main};
     padding: ${spacing([0, isVertical ? 3 : 2.5])};
 `;
+
 TabPanel.defaultProps = {
   className: '',
   lazyLoading: false,
@@ -76,18 +82,24 @@ 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
 };

package/components/tab/tab.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { forwardRef, memo, useMemo, useContext, useRef, useImperativeHandle } from 'react';
 import { jsx, css } from '@emotion/core';
@@ -45,42 +46,51 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   } = useContext(TabContext);
   const ref = useRef(null);
   const isVertical = direction === 'vertical';
+
   const _TabButtonCSS = TabButtonCSS(color, isVertical);
+
   const _IndicatorCSS = IndicatorCSS(isVertical);
+
   const _onClick = event => {
     if (disabled) return;
     onClick ? onClick(event, index) : setTabIndexState(index);
   };
+
   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;
   });
   const StartIcon = useMemo(() => {
     let node = startIcon;
+
     if (typeof node === 'string') {
       node = jsx(Icon, {
         color: 'currentColor',
         name: startIcon
       });
     }
+
     return jsx("span", {
       css: ButtonIconCSS
     }, " ", node, " ");
   }, [startIcon]);
   const EndIcon = useMemo(() => {
     let node = endIcon;
+
     if (typeof node === 'string') {
       node = jsx(Icon, {
         color: 'currentColor',
         name: endIcon
       });
     }
+
     return jsx("span", {
       css: ButtonIconCSS,
       className: 'end-icon'
@@ -94,8 +104,7 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       onClick: _onClick,
       ...props
-    }, startIcon && StartIcon, jsx(Typography, {
-      ...labelProps,
+    }, startIcon && StartIcon, jsx(Typography, { ...labelProps,
       type: level,
       color: 'inherit'
     }, label), children, endIcon && EndIcon, jsx(Ripple, null), jsx("span", {
@@ -104,6 +113,7 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }));
   }, [children, className, color, disabled, endIcon, index, label, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
 }));
+
 const TabButtonCSS = (color, isVertical) => css`
     ${flexRow};
     ${overflowHidden};
@@ -150,6 +160,7 @@ const TabButtonCSS = (color, isVertical) => css`
         }
     }
 `;
+
 const IndicatorCSS = isVertical => css`
     ${positionAbsolute};
     height: ${isVertical ? '100%' : '4px'};
@@ -160,6 +171,7 @@ const IndicatorCSS = isVertical => css`
     transition: transform 0.2s ease-in-out;
     border-radius: 1px;
 `;
+
 const ButtonIconCSS = css`
     ${flexRow};
     ${itemsCenter};
@@ -183,30 +195,42 @@ TabItem.defaultProps = {
 TabItem.propTypes = {
   /** Element to display in Tabs (like label). */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** Color for Tabs. */
   color: PropTypes.string,
+
   /** If true, the component is disabled. */
   disabled: PropTypes.bool,
+
   /** Icon to the right of the button. */
   endIcon: PropTypes.node,
+
   /** Index received in position of TabHeaderButton. */
   index: PropTypes.number,
+
   /** Data string, if any. */
   label: PropTypes.string,
+
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` label. */
   labelProps: PropTypes.object,
+
   /** Callback fired when a "click" event is detected. */
   onClick: PropTypes.func,
+
   /** Icon to the left of the button. */
   startIcon: PropTypes.node,
+
   /** Style inline of component. */
   style: PropTypes.object,
+
   /** Any props else. */
   props: PropTypes.any,
-  /**
-   * Ref methods.
+
+  /**
+   * Ref methods.
    */
   reference: ref
 };