diginet-core-ui 1.3.35 → 1.3.36

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

@@ -158,6 +158,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const attachmentInputRef = useRef(null);
   const attachmentImageRef = useRef(null);
   const attachedRef = useRef(null);
+  const newAttachedRef = useRef([]);
   const popupRef = useRef(null);
   const popoverRef = useRef(null);
   const isDeleteAll = useRef(false);
@@ -1165,6 +1166,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       files.splice(index, 1);
       allNewAttached.delete('files');
       files.forEach(file => allNewAttached.append('files', file));
+      newAttachedRef.current = files || [];
     }
 
     attachmentInputRef.current.files = dt.files;
@@ -1175,10 +1177,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (multiple || inputProps && inputProps.multiple) {
       for (let file of files) {
         allNewAttached.append('files', file);
+        newAttachedRef.current.push(file);
       }
     } else if (files[0]) {
       allNewAttached.delete('files');
       allNewAttached.append('files', files[0]);
+      newAttachedRef.current = [files[0]];
     } // attachmentInputRef.current.files = allNewAttached.getAll('files');
 
   };
@@ -1197,6 +1201,20 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return false;
   };
 
+  const checkExistingFileInData = newFile => {
+    const files = data;
+
+    if (files && files.length) {
+      const length = files.length;
+
+      for (let i = 0; i < length; i++) {
+        if (parseStringify2(newFile) === parseStringify2(files[i], true)) return true;
+      }
+    }
+
+    return false;
+  };
+
   const checkAcceptFileType = newFile => {
     if (!accept || !accept.length) return true;
     const type = typeof accept === 'string' ? accept : accept.join('-');
@@ -1437,18 +1455,26 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     webkitRelativePath: fileInfo.webkitRelativePath
   });
 
+  const parseStringify2 = (fileInfo, inData) => JSON.stringify({
+    name: fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo[inData ? 'FileName' : 'name'],
+    size: fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo[inData ? 'FileSize' : 'size']
+  });
+
   const mountDomain = item => {
     if (!item) return item;
+    const cloneItem = JSON.parse(JSON.stringify(item));
 
-    if (!/\/$/.test(domain)) {
-      domain = domain + '/';
-    }
+    if (domain) {
+      if (!/\/$/.test(domain)) {
+        domain = domain + '/';
+      }
 
-    if (item !== null && item !== void 0 && item.URL) {
-      item.URL = item.URL.indexOf('http') < 0 ? domain + item.URL : item.URL;
+      if (cloneItem !== null && cloneItem !== void 0 && cloneItem.URL) {
+        cloneItem.URL = cloneItem.URL.indexOf('http') < 0 ? domain + cloneItem.URL : cloneItem.URL;
+      }
     }
 
-    return item;
+    return cloneItem;
   };
 
   const stripDomain = () => {
@@ -1539,19 +1565,22 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, [unitSize, onChange]);
   useEffect(() => {
+    var _newAttachedRef$curre;
+
     oldAttached.length = 0;
+    afterChangeFile(((data === null || data === void 0 ? void 0 : data.length) || 0) + (((_newAttachedRef$curre = newAttachedRef.current) === null || _newAttachedRef$curre === void 0 ? void 0 : _newAttachedRef$curre.length) || 0));
 
     if (data) {
-      afterChangeFile(data.length); // Load files data was upload
-
+      // Load files data was upload
       const length = data.length;
 
       for (let i = 0; i < length; i++) {
-        const item = domain ? mountDomain(data[i]) : data[i];
+        const item = mountDomain(data[i]);
         const newAttach = getItemHTMLFromData(item, i);
 
         if (Object.prototype.toString.call(item) === '[object File]') {
           allNewAttached.append('files', item);
+          newAttachedRef.current.push(item);
         } else {
           oldAttached.push(item);
         }
@@ -1563,6 +1592,25 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
+    if (newAttachedRef.current) {
+      const length = newAttachedRef.current.length;
+
+      for (let i = length - 1; i >= 0; i--) {
+        const item = newAttachedRef.current[i];
+
+        if (checkExistingFileInData(item)) {
+          newAttachedRef.current.splice(i, 1);
+        } else {
+          const newAttach = getItemHTMLFromData(item, i);
+          allNewAttached.append('files', item);
+          attached.push(item);
+          const newElement = document.createElement('div');
+          newElement.className = 'attachment-row';
+          ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
+        }
+      }
+    }
+
     return () => {
       if (attachedRef.current) {
         attachedRef.current.innerHTML = null;
@@ -1688,7 +1736,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }))), jsx("div", {
     css: AttachmentImage,
     ref: attachmentImageRef
-  }, !readOnly && jsx("div", {
+  }, !(readOnly || disabled) && jsx("div", {
     css: AttachmentImageCenter
   }, jsx("div", {
     css: AttachmentImageContent

package/components/form-control/date-range-picker/index.js

@@ -458,8 +458,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         tableData = [],
         weekDateFirst = getDateOfWeek(firstDay),
         weekDateLast = getDateOfWeek(lastDay);
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
 
     for (let i = weekDateFirst; i > 0; i--) {
@@ -472,8 +472,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
 
 
@@ -487,8 +487,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, jsx(Typography, { ...typographyProps(unique.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
 
 

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

@@ -1754,14 +1754,14 @@ Dropdown.propTypes = {
   /** display this icon if not found the icon follow iconExpr */
   iconDefault: PropTypes.string,
 
-  /** field name used for icon display<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** field name used for icon display<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1779,9 +1779,9 @@ Dropdown.propTypes = {
   /** field name used for text display in input */
   keyExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** 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.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1791,9 +1791,9 @@ Dropdown.propTypes = {
   /** the field name used for the returned result */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * 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]),
 
@@ -1863,19 +1863,19 @@ Dropdown.propTypes = {
   /** 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'}
+  /** function displays items by custom<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
 
-  /** the function will run when entering input<br/>
-   * if undefined: the filter function will run (default)
+  /** the function will run when entering input<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 

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

@@ -14,6 +14,9 @@ const {
   paragraph1
 } = typography;
 const {
+  system: {
+    white
+  },
   semantic: {
     info
   },
@@ -28,6 +31,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   label,
   placeholder,
   startIcon,
+  endIcon,
   viewType,
   value,
   openOnClickAt,
@@ -42,88 +46,19 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onOpened,
   onClosed,
   onChangeInput,
-  delayOnInput,
-  ...props
+  delayOnInput
 }, reference) => {
   const ref = useRef(null);
-  const inputBaseRef = useRef(null);
   const dropdownBoxRef = useRef(null);
-  const dropdownIconRef = useRef(null);
   const [unique] = useState(randomString(6, {
     allowNumber: false,
     allowSymbol: false
   }));
   const [open, setOpen] = useState(false);
-  /* Start styled */
-
-  const DropdownBoxRoot = css`
-                &.DGN-UI-Dropdown-Box {
-                    ${displayBlock}
-                    ${positionRelative}
-            min-width: 150px;
-                    height: max-content;
-                    .end-icon > .DGN-UI-Icon {
-                        transition: transform 250ms;
-                    }
-                    &.dropdown-showing {
-                        .end-icon > .DGN-UI-ButtonIcon {
-                            transform: rotateX(180deg);
-                        }
-                    }
-                    .DGN-UI-InputBase {
-                        background-color: ${bgColor ? bgColor === true ? fillDisabled : bgColor : 'inherit'};
-                        &.underlined {
-                            height: 32px;
-                        }
-                        &.dropdown-focus {
-                            background-color: inherit;
-                            &::after {
-                                border-bottom-color: ${info};
-                                transform: scaleX(1);
-                            }
-                        }
-                    }
-                }
-            `;
-  const DropdownBoxCSS = css`
-                ${displayBlock}
-                ${paragraph1};
-                ${positionFixed}
-                ${borderBox}
-        ${borderRadius4px}
-		width: 100%;
-                height: auto;
-                max-height: 80%;
-                overflow: auto;
-                padding: 16px;
-                background-color: #fff;
-                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-                opacity: 0;
-                transition: opacity 0.3s;
-                z-index: ${zIndex};
-                &::-webkit-scrollbar {
-                    ${borderRadius4px}
-                    width: 8px;
-                    background-color: #fff !important;
-                }
-                &::-webkit-scrollbar-thumb {
-                    ${borderRadius4px}
-                    mix-blend-mode: normal;
-                    background-color: ${scrollbar} !important;
-                    background-clip: content-box;
-                }
-                .DGN-UI-TreeView {
-                    padding: 1px;
-                }
-            `;
-  /* End styled */
-
   /* Start handler */
 
   const onTriggerDropdown = e => {
     if (!open) {
-      // ref.current.classList.add('dropdown-showing');
-      // inputBaseRef.current.classList.add('dropdown-focus');
       openDropdownBox();
     } else {
       closeDropdownBox(true);
@@ -154,9 +89,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       } = ref.current.getBoundingClientRect();
       let positionTop = top + height + 2;
       dropdownBoxRef.current.style.cssText = `top: ${positionTop}px; left: ${left}px; width: ${width}px;`;
-      dropdownBoxRef.current.style.opacity = 1; // window.addEventListener('resize', customizeWidthDropdown);
-      // window.addEventListener('scroll', updatePositionDropdown);
-
+      dropdownBoxRef.current.style.opacity = 1;
       document.addEventListener('mousedown', onClickOutsideOfInput);
       document.addEventListener('keydown', pressESCHandler);
       !!onOpened && onOpened(ref.current);
@@ -174,13 +107,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (dropdownBoxRef.current) {
       dropdownBoxRef.current.style.pointerEvents = `none`;
-      dropdownBoxRef.current.style.opacity = 0; // if (ref.current) {
-      //     ref.current.classList.remove('dropdown-showing');
-      // }
-      // if (inputBaseRef.current) {
-      //     inputBaseRef.current.classList.remove('dropdown-focus');
-      // }
-
+      dropdownBoxRef.current.style.opacity = 0;
       document.removeEventListener('mousedown', onClickOutsideOfInput);
       timing[unique + 'Box'] = setTimeout(() => {
         clearTimeout(timing[unique + 'Box']);
@@ -213,45 +140,112 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closeDropdownBox(true);
     }
   }));
-  const dropdownIcon = jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'ArrowDown',
-    onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null,
-    ref: dropdownIconRef
-  });
+
+  const renderEndIcon = () => {
+    return endIcon && jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: endIcon,
+      onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
+    });
+  };
+
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
-    css: DropdownBoxRoot,
-    className: ['DGN-UI-Dropdown-Box', open && 'dropdown-showing', className].join(' ').trim(),
-    style: style,
-    ...props
-  }, label ? jsx(Label, {
-    required: required,
-    ...labelProps
+    css: DropdownBoxRootCSS(bgColor),
+    className: ['DGN-UI-Dropdown-Box', open && 'dropdown-showing', className].join(' ').trim().replace(/\s+/g, ' '),
+    style: style
+  }, label ? jsx(Label, { ...labelProps
   }, label) : null, jsx(InputBase, { ...inputProps,
     className: open && 'dropdown-focus',
     style: inputStyle,
     viewType: viewType,
-    ref: inputBaseRef,
     inputRef: inputRef,
     placeholder: placeholder,
     value: value,
     startIcon: startIcon,
-    endIcon: dropdownIcon,
+    endIcon: renderEndIcon(),
     onChange: _onChangeInput,
     onClick: openOnClickAt === 'full' ? onTriggerDropdown : null
   })), open && /*#__PURE__*/createPortal(jsx("div", {
     ref: dropdownBoxRef,
     className: `DGN-UI-Portal DGN-DropdownBox-${unique}`,
-    css: DropdownBoxCSS
+    css: DropdownBoxCSS(zIndex)
   }, children), document.body));
 }));
+/* Start styled */
+
+const DropdownBoxRootCSS = bgColor => css`
+    &.DGN-UI-Dropdown-Box {
+        ${displayBlock}
+        ${positionRelative}
+        min-width: 150px;
+        height: max-content;
+        .end-icon > .DGN-UI-Icon {
+            transition: transform 250ms;
+        }
+        &.dropdown-showing {
+            .end-icon > .DGN-UI-ButtonIcon {
+                transform: rotateX(180deg);
+            }
+        }
+        .DGN-UI-InputBase {
+            background-color: ${bgColor ? bgColor === true ? fillDisabled : bgColor : 'inherit'};
+            &.underlined {
+                height: 32px;
+            }
+            &.dropdown-focus {
+                background-color: inherit;
+                &::after {
+                    border-bottom-color: ${info};
+                    transform: scaleX(1);
+                }
+            }
+        }
+    }
+`;
+
+const DropdownBoxCSS = zIndex => css`
+    ${displayBlock};
+    ${paragraph1};
+    ${positionFixed};
+    ${borderBox};
+    ${borderRadius4px};
+    background-color: ${white};
+    z-index: ${zIndex};
+    width: 100%;
+    height: auto;
+    max-height: 80%;
+    overflow: auto;
+    padding: 16px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    &::-webkit-scrollbar {
+        ${borderRadius4px}
+        width: 8px;
+        background-color: ${white} !important;
+    }
+    &::-webkit-scrollbar-thumb {
+        ${borderRadius4px}
+        mix-blend-mode: normal;
+        background-color: ${scrollbar} !important;
+        background-clip: content-box;
+    }
+    .DGN-UI-TreeView {
+        padding: 1px;
+    }
+`;
+/* End styled */
+
+
 DropdownBox.defaultProps = {
   className: '',
   label: '',
   placeholder: '',
-  startIcon: 'search',
+  startIcon: 'Search',
+  endIcon: 'ArrowDown',
   openOnClickAt: 'icon',
+  viewType: 'underlined',
   inputProps: {},
   delayOnInput: 700,
   zIndex: 9001
@@ -272,6 +266,9 @@ DropdownBox.propTypes = {
   /** icon at start */
   startIcon: PropTypes.string,
 
+  /** icon at end */
+  endIcon: PropTypes.string,
+
   /** background color of DropdownBox input */
   bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 

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

@@ -208,18 +208,18 @@ Radio.defaultProps = {
   className: ''
 };
 Radio.propTypes = {
-  /**
-   * If `true`, the component is disabled.
+  /**
+   * If `true`, the component is disabled.
    */
   disabled: PropTypes.bool,
 
-  /**
-   * If `true`, the component is checked.
+  /**
+   * If `true`, the component is checked.
    */
   checked: PropTypes.bool,
 
-  /**
-   * If `true`, the component is defaultChecked.
+  /**
+   * If `true`, the component is defaultChecked.
    */
   defaultChecked: PropTypes.bool,
 
@@ -241,11 +241,11 @@ Radio.propTypes = {
   /** props for input */
   inputProps: PropTypes.object,
 
-  /** Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    *  */
   onChange: PropTypes.func
 };

package/components/form-control/text-input/index.js

@@ -497,10 +497,10 @@ TextInput.propTypes = {
   /** on focus function */
   onFocus: PropTypes.func,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 

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

@@ -221,8 +221,8 @@ Toggle.propTypes = {
   /** Id is randomized randomly to avoid duplication. */
   id: PropTypes.string,
 
-  /**
-   * Name attribute of the `input` element.
+  /**
+   * Name attribute of the `input` element.
    */
   name: PropTypes.string,
 
@@ -238,10 +238,10 @@ Toggle.propTypes = {
   /** props for input */
   inputProps: PropTypes.object,
 
-  /** * Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: PropTypes.func
 };