diginet-core-ui 1.3.35-beta.5 → 1.3.35-beta.6

package/components/chip/index.js

@@ -48,6 +48,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   readOnly,
   children,
+  style,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -114,7 +115,8 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: size
     }, jsx(Typography, {
       type: size === 'small' ? 'p2' : 'p1',
-      color: 'inherit'
+      color: 'inherit',
+      lineClamp: 1
     }, renderLabel()));
   }, [label, size, startIcon, endIcon, clearAble]);
   const endIconView = useMemo(() => {
@@ -149,6 +151,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: ChipRootCSS(onClick, onDbClick, color),
     ref: ref,
     className: ['DGN-UI-Chip', size, className, color && color !== 'default' && color, color && color !== 'default' && viewType, disabled && 'chip--disabled', readOnly && 'chip--readOnly'].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
     onClick: _onClick,
     onDoubleClick: _onDbClick,
     ...props
@@ -272,6 +275,7 @@ const ChipRootCSS = (onClick, onDbClick, color) => css`
 Chip.defaultProps = {
   label: '',
   className: '',
+  style: {},
   viewType: 'outlined',
   size: 'small',
   clearAble: false
@@ -284,6 +288,9 @@ Chip.propTypes = {
   className: PropTypes.string,
 
   /** max length content to display was allowed */
+
+  /** style inline of component */
+  style: PropTypes.object,
   maxLength: PropTypes.number,
 
   /** the icon display at head of Chip */

package/components/form-control/dropdown/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Account } from '../../../icons';
 import AvatarDefault from '../../../assets/avatar/default.svg';
-import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon } from '../../';
+import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon, Typography } from '../../';
 import { mapParent, randomString, updatePosition } from '../../../utils';
 import { getGlobal } from '../../../global';
 import { color as colors } from '../../../styles/colors';
@@ -101,10 +101,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   formStyle,
   labelProps,
   errorStyle,
-  refs,
   children,
   dropdownItemStyle
-}, ref) => {
+}, reference) => {
   const dropdownRef = useRef(null);
   const timerRef = useRef(null);
   const formRef = useRef(null);
@@ -119,7 +118,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowSymbol: false
   }));
   const [openState, setOpenState] = useState(false);
-  const [errorState, setErrorState] = useState(error && !valueProp && valueProp !== 0);
   const [showClear, setShowClear] = useState(false);
 
   const _isMobile = isMobile.any();
@@ -845,7 +843,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               clearAble: true,
               onRemove: e => onRemove(e, value),
               style: {
-                margin: '3px 0'
+                margin: '3px 0',
+                width: '100%'
               }
             });
           }
@@ -1056,7 +1055,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         clearAble: true,
         onRemove: e => onRemove(e, value),
         style: {
-          margin: '3px 0'
+          margin: '3px 0',
+          width: '100%'
         }
       });
     }
@@ -1085,8 +1085,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const icon = getIconFromData(data);
       const valueWithIcon = jsx(Fragment, null, icon && jsx("div", {
         css: DropdownIconCSS
-      }, icon), jsx("div", {
-        css: DropdownTextCSS
+      }, icon), jsx(Typography, {
+        type: 'p1',
+        lineClamp: 1,
+        hoverTooltip: !_isMobile
       }, text));
       const el = document.createElement('div');
       el.style.cssText = 'display: flex; align-items: center; min-height:24px;';
@@ -1096,17 +1098,43 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useImperativeHandle(ref, () => ({
-    closeDropdown: () => {
-      closeDropdown();
-    },
-    showDropdown: () => {
-      showDropdown();
-    },
-    onClear,
-    setPreviousValue,
-    DOM: dropdownRef.current
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = dropdownRef.current || {};
+    const _instance = {
+      closeDropdown: () => {
+        closeDropdown();
+      },
+      showDropdown: () => {
+        showDropdown();
+      },
+      onClear,
+      setPreviousValue,
+      setValue: value => {
+        if (allValue[unique][allValue[unique].length - 1] !== value) {
+          allValue[unique].push(value);
+        }
+
+        setValueIntoInput(value);
+      }
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance; // keep old method
+
+    currentRef.closeDropdown = () => closeDropdown();
+
+    currentRef.showDropdown = () => showDropdown();
+
+    currentRef.onClear = onClear, currentRef.setPreviousValue = setPreviousValue, currentRef.setValue = value => {
+      if (allValue[unique][allValue[unique].length - 1] !== value) {
+        allValue[unique].push(value);
+      }
+
+      setValueIntoInput(value);
+    }, currentRef.DOM = dropdownRef.current;
+    return currentRef;
+  });
   useEffect(() => {
     setShowClear(clearAble && checkHasValue(valueProp) && !disabled && !readOnly && !loading);
   }, [clearAble, valueProp, disabled, readOnly, loading]);
@@ -1126,7 +1154,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, [valueObjectDefault]);
   useEffect(() => {
-    !!refs && refs(dropdownRef);
     allValue[unique] = [];
 
     if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
@@ -1190,9 +1217,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
     }
   }, [loading]);
-  useEffect(() => {
-    setErrorState(error && (!valueProp && valueProp !== 0 || (valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) === 0));
-  }, [error, valueProp]);
   useEffect(() => {
     if (valueProp !== undefined && (!boxRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
       setValueIntoInput(valueProp);
@@ -1309,7 +1333,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: ['DGN-UI-Dropdown-Form', openState && 'dropdown-showing'].join(' ').trim().replace(/\s+/g, ' '),
       style: formStyle
     }, jsx("div", {
-      css: _InputCSS
+      css: _InputCSS,
+      className: 'DGN-UI-Dropdown-Form-Input'
     }, multiple ? jsx("div", { ...inputProps,
       style: {
         cursor: 'text',
@@ -1367,7 +1392,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disabled: disabled || readOnly
     })));
   }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear]);
-  const errorComp = useMemo(() => errorState && jsx(HelperText, {
+  const errorComp = useMemo(() => error && jsx(HelperText, {
     disabled: disabled,
     style: {
       minHeight: '16px',
@@ -1375,13 +1400,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       top: '100%',
       ...errorStyle
     }
-  }, error), [error, valueProp, disabled, errorStyle, errorState]);
+  }, error), [error, disabled, errorStyle]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
     ref: dropdownRef,
     css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, loading, showClear),
-    className: ['DGN-UI-Dropdown', className, errorState && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
+    className: ['DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
     style: style
   }, labelComp, inputComp, errorComp), openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null);
 }));
@@ -1389,7 +1414,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
 const InputCSS = (multiple, renderSelectedItem, clearAble) => css`
     ${flexRow};
-    flex: 1 1 auto;
+    width: 100%;
     ${!multiple && renderSelectedItem ? `width: calc(100% - 34px${clearAble ? ' - 18px' : ''})` : ''}
 `;
 
@@ -1401,11 +1426,15 @@ const DropdownIconCSS = css`
     height: inherit;
     margin-right: 8px;
     height: 32px;
+    min-height: 32px;
     width: 32px;
+    min-width: 32px;
     border-radius: 16px;
     img {
         height: 32px;
+        min-height: 32px;
         width: 32px;
+        min-width: 32px;
         object-fit: cover;
     }
 `;
@@ -1427,8 +1456,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
         ${flexWrap};
         ${overflowHidden};
         ${breakWord};
-        /* max-height: max-content; */
-        ${!multiple ? 'min-height: 24px; max-width: 100%; white-space: nowrap;' : ''}
+        ${!multiple ? 'min-height: 24px; max-width: 100%;' : ''}
         &::after {
             ${flexRow};
             ${positionAbsolute};
@@ -1459,10 +1487,14 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
             min-width: 24px;
             ` : `
             height: 24px;
+            min-height: 24px;
             width: 24px;
+            min-width: 24px;
             img {
                 height: 24px;
+                min-height: 24px;
                 width: 24px;
+                min-width: 24px;
             }
             `}
     }
@@ -1488,7 +1520,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
               ${alignCenter};
               ${positionRelative};
               ${borderBox};
-              flex: 1 1 auto;
+              width: 100%;
               padding-bottom: ${multiple ? 1 : 4}px;
               padding-top: ${multiple ? 1 : 4}px;
               &:not(:focus-within):hover {
@@ -1543,7 +1575,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
               ${borderRadius4px};
               ${borderBox};
               ${border(1, rest)};
-              flex: 1 1 auto;
+              width: 100%;
               min-height: 40px;
               &:not(:focus-within):hover {
                   background-color: ${hover};
@@ -1648,7 +1680,6 @@ const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
     ${displayBlock};
     ${positionRelative};
     margin-bottom: 20px;
-    /* min-width: 150px; */
     height: max-content;
     &.error {
         .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
@@ -1663,8 +1694,6 @@ const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
     }
     &.dgn-dropdown-loading,
     &.disabled {
-        ${pointerEventsNone};
-        ${userSelectNone};
         .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
             border-color: ${systemDisabled};
             .css-${IconCSS(viewType, loading, showClear).name} {
@@ -1864,9 +1893,6 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown */
   dataSource: PropTypes.array,
 
-  /** The function to get ref of Dropdown component */
-  refs: PropTypes.func,
-
   /** function displays items by custom<br/>
    * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
    * --> such as: displayExpr={'name - role'}
@@ -1895,7 +1921,22 @@ Dropdown.propTypes = {
   /** the contents in Dropdown box (Exp: TreeView) */
   children: PropTypes.node,
 
-  /** any props else */
-  props: PropTypes.any
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
+   */
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
 };
 export default Dropdown;

package/components/form-control/number-input/index2.js

@@ -194,7 +194,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     keyCode === 188 || // ,
     (ctrlKey || metaKey) && (keyCode === 65 || keyCode === 67 || keyCode === 86) || // ctrl + A, ctrl + C, ctrl + V
     keyCode === 46 || // key delete
-    keyCode === 189; // -
+    keyCode === 189 || // -
+    keyCode === 9; // tab
     // The key is delete (|| remove) and focus after the thousand digit
 
     const removeDot = keyCode === 8 && selectionEnd - selectionStart <= 1 && value.charAt(selectionEnd - 1) === thousandSymbol; // Decimal

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/typography/index.js

@@ -198,6 +198,7 @@ const TextRoot = (color, type, lineClamp) => css`
     }
     &.DGN-Typography-Clamp {
         ${overflowHidden}
+        word-break: break-all;
         display: -webkit-box;
         -webkit-line-clamp: ${lineClamp};
         -webkit-box-orient: vertical;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.35-beta.5",
+  "version": "1.3.35-beta.6",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",