diginet-core-ui 1.3.36 → 1.3.38

package/components/slider/slider-item.js

@@ -1,10 +1,11 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { forwardRef, memo, useRef } from 'react';
+import { forwardRef, memo, useEffect, useState, useRef } from 'react';
 import { jsx, css, keyframes } from '@emotion/core';
 import { randomString, getFileType } from '../../utils';
 import PropTypes from 'prop-types';
+import { IndeterminateCircularProgress } from '../progress/circular';
 const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   active,
   animation,
@@ -23,6 +24,8 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     itemContainer: 'DGN-UI-Slider-item-container-' + Id,
     video: 'DGN-UI-Slider-video' + Id
   };
+  const [iframeTimeoutId, setIframeTimeoutId] = useState(null);
+  const iframeRef = useRef(null);
   /**@reference */
 
   if (!ref) ref = useRef(null);
@@ -40,29 +43,35 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const styles = {
     itemContainer: css`
-			display: none;
-			justify-content: center;
-			height: 100%;
-			width: 100%;
-			&.item-animation {
-				animation: ${anime.fade} 1s;
-			}
-		`,
+                display: none;
+                justify-content: center;
+                height: 100%;
+                width: 100%;
+                &.item-animation {
+                    animation: ${anime.fade} 1s;
+                }
+            `,
     frame: css`
-			display: block;
-			height: 100%;
-			margin: 0;
-			padding: 0;
-			width: 100%;
-		`,
+                display: block;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+            `,
     image: css`
-			display: block;
-			height: auto;
-			margin: auto;
-			max-height: 100%;
-			max-width: 100%;
-			width: auto;
-		`
+                display: block;
+                height: auto;
+                margin: auto;
+                max-height: 100%;
+                max-width: 100%;
+                width: auto;
+            `,
+    loading: css`
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            `
   };
   /**@function */
 
@@ -115,11 +124,14 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       case 'pdf':
         {
           return jsx("iframe", { ...props,
+            ref: iframeRef,
             className: IDs.frame,
             css: styles.frame,
             frameBorder: 0,
-            src: `https://docs.google.com/gview?url=${filePath}&embedded=true`,
-            title: fileName
+            src: getIframeLink(),
+            title: fileName,
+            onLoad: iframeLoaded,
+            onError: updateIframeSrc
           });
         }
 
@@ -161,12 +173,40 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
+  useEffect(() => {
+    const fileType = getFileType(url, undefined, false);
+
+    if (fileType === 'pdf') {
+      const intervalId = setInterval(updateIframeSrc, 2000);
+      setIframeTimeoutId(intervalId);
+    }
+  }, []);
+
+  function iframeLoaded() {
+    clearInterval(iframeTimeoutId);
+    setIframeTimeoutId(null);
+  }
+
+  function getIframeLink() {
+    return `https://docs.google.com/gview?url=${url}&embedded=true`;
+  }
+
+  function updateIframeSrc() {
+    if (iframeRef.current) {
+      iframeRef.current.src = getIframeLink();
+    }
+  }
+
   return jsx("div", {
     className: [IDs.itemContainer, active ? 'active' : '', animation ? 'item-animation' : ''].join(' '),
     css: styles.itemContainer,
     id: IDs.itemContainer,
     ref: ref
-  }, getViewer(url, getFileType(url, undefined, false)));
+  }, iframeTimeoutId && getFileType(url, undefined, false) === 'pdf' && jsx("div", {
+    css: styles.loading
+  }, jsx(IndeterminateCircularProgress, {
+    size: 'xs'
+  })), getViewer(url, getFileType(url, undefined, false)));
 }));
 SliderItem.defaultProps = {
   active: false,

package/components/tab/tab-container.js

@@ -93,8 +93,8 @@ TabContainer.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab-header.js

@@ -157,8 +157,8 @@ TabHeader.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab-panel.js

@@ -87,8 +87,8 @@ TabPanel.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab.js

@@ -213,8 +213,8 @@ TabItem.propTypes = {
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
+  /**
+   * ref methods
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/transfer/index.js

@@ -458,9 +458,9 @@ Transfer.propTypes = {
   /** field name used for icon display */
   iconExpr: string,
 
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: oneOfType([string, array]),
 

package/components/tree-view/index.js

@@ -924,10 +924,10 @@ TreeView.propTypes = {
   /** class on element */
   className: PropTypes.string,
 
-  /**
-   * field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /**
+   * field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.string,
 
@@ -937,19 +937,19 @@ TreeView.propTypes = {
   /** return value for the select multiple use case */
   multipleValueMode: PropTypes.oneOf(['single', 'multiple', 'inheritance']),
 
-  /**
-   * return value for the select multiple use case
-   * * contains: "Công ty" contains "công", but not contains "cong"
-   * * similar: "Công ty" contains "công" and "cong"
+  /**
+   * return value for the select multiple use case
+   * * contains: "Công ty" contains "công", but not contains "cong"
+   * * similar: "Công ty" contains "công" and "cong"
    */
   searchMode: PropTypes.oneOf(['contains', 'similar']),
 
   /** The content display for label of checkbox select all */
   selectAllLabel: PropTypes.string,
 
-  /**
-   * duration wait enter search content on search<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -965,20 +965,20 @@ TreeView.propTypes = {
   /** the value was selected */
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
 
-  /** function displays items by custom<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** function displays items by custom<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /**
-   * on change value function<br />
-   * return 2 parameters (e, data)<br />
-   * * e: element (insist {value, justSelected, data})<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp; + value is one or an array of selected values<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp; + justSelected is value has just been selected (either true or false))<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp; + data is one or an array of selected values with full information<br />
-   * * data: array of selected values (not recommend because it's the same e.value)
+  /**
+   * on change value function<br />
+   * return 2 parameters (e, data)<br />
+   * * e: element (insist {value, justSelected, data})<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp; + value is one or an array of selected values<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp; + justSelected is value has just been selected (either true or false))<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp; + data is one or an array of selected values with full information<br />
+   * * data: array of selected values (not recommend because it's the same e.value)
    */
   onChange: PropTypes.func,
 
@@ -991,22 +991,22 @@ TreeView.propTypes = {
   /** the icon to display for collapse icon */
   collapseIcon: PropTypes.any,
 
-  /**
-   * get ref of TreeView component, insist:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;disabled: true/false,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;displayExpr: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;valueExpr: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;id: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;parentID: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: string/array<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;getValue: get selected values (instead of onChange function),<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;setValue: set array of value (only multiple),<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;handleCheckbox: checked/unchecked a Checkbox, includes 2 parameters (isChecked, value):<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + isChecked: checked if true (default is false) <br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + value: selected values, use 'all' for all values (default is 'all') <br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;get: get DOM of TreeView component<br/>
-   * }
+  /**
+   * get ref of TreeView component, insist:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;disabled: true/false,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;displayExpr: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;valueExpr: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;id: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;parentID: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: string/array<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;getValue: get selected values (instead of onChange function),<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;setValue: set array of value (only multiple),<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;handleCheckbox: checked/unchecked a Checkbox, includes 2 parameters (isChecked, value):<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + isChecked: checked if true (default is false) <br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + value: selected values, use 'all' for all values (default is 'all') <br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;get: get DOM of TreeView component<br/>
+   * }
    */
   ref: PropTypes.any
 };

package/components/typography/index.js

@@ -215,16 +215,16 @@ Typography.defaultProps = {
   hoverTooltip: false,
   tooltipDirection: 'down'
 };
-/** type of text<br/>
- * h1: Title <br/>
- * h2: Header Popup <br/>
- * h3: Header popup <br/>
- * h4: Button, Tab, Title group <br/>
- * h5: Label column, Title group <br/>
- * h6: Label form <br/>
- * p1: Body text <br/>
- * p2: Body text <br/>
- * p3: Notice, Tooltip <br/>
+/** type of text<br/>
+ * h1: Title <br/>
+ * h2: Header Popup <br/>
+ * h3: Header popup <br/>
+ * h4: Button, Tab, Title group <br/>
+ * h5: Label column, Title group <br/>
+ * h6: Label form <br/>
+ * p1: Body text <br/>
+ * p2: Body text <br/>
+ * p3: Notice, Tooltip <br/>
  */
 
 export const arrTypeTypography = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];