diginet-core-ui 1.3.96 → 1.3.97

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

@@ -48,7 +48,7 @@ const icons = {
 };
 const oldAttached = [];
 const allNewAttached = new FormData();
-const attached = [];
+const attached = []; // attached = [...dataState, ...newDataState]
 const chosenItems = [];
 const getType = data => {
   if (data.type !== undefined) {
@@ -155,10 +155,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [showModal, setShowModal] = useState(false);
   const [showPopup, setShowPopup] = useState(false);
   const [viewTypeState, setViewTypeState] = useState(viewType);
-  const [isEmpty, setIsEmpty] = useState(null);
   const [newDataState, setNewDataState] = useState([]);
   const [dataState, setDataState] = useState([]);
   const isEnable = !readOnly && !disabled;
+  const isEmpty = !((dataState === null || dataState === void 0 ? void 0 : dataState.length) + (newDataState === null || newDataState === void 0 ? void 0 : newDataState.length));
   const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable);
 
   // Start handler
@@ -222,9 +222,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       attachedRef.current.appendChild(el);
     });
   };
-  const afterChangeFile = (length = 0) => {
-    setIsEmpty(!length);
-  };
+
+  // const afterChangeFile = (length = 0) => {
+  //     setIsEmpty(!length);
+  // };
+
   const onChangeFiles = async e => {
     var _e$target, _e$target$files;
     if (!isEnable) return;
@@ -253,10 +255,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
       const length = files.length;
       if (!lengthAttached && !length) {
-        afterChangeFile();
+        // afterChangeFile();
         return;
       }
-      afterChangeFile(lengthAttached + length);
+      // afterChangeFile(lengthAttached + length);
       if (multiple || inputProps && inputProps.multiple) {
         for (let i = 0; i < length; i++) {
           files[i].FileName = files[i].name;
@@ -281,10 +283,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         newAttached: files,
         allNewAttached: allNewAttached.getAll('files')
       });
-    } else if (!attached.length) {
-      afterChangeFile();
     }
+    // else if (!attached.length) {
+    //     afterChangeFile();
+    // }
   };
+
   const onProgressing = file => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -357,28 +361,35 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
   const onRemoveMultiple = () => {
+    const attachedItems = [...dataState, ...newDataState];
     const nodeList = attachedRef.current.querySelectorAll('.chosen');
     const recentRemovedAttached = [];
+    const tempDataState = [...dataState];
+    const tempNewDataState = [...newDataState];
     nodeList.forEach(itemEl => {
       const parent = itemEl.parentNode;
       const index = Array.from(attachedRef.current.children).indexOf(parent);
-      const deletedFile = attached.splice(index, 1)[0];
+      const deletedFile = attachedItems[index];
       removedAttachedRef.current.push(deletedFile);
       recentRemovedAttached.push(deletedFile);
-      if (Object.prototype.toString.call(deletedFile) === '[object File]' && newDataState !== null && newDataState !== void 0 && newDataState.length) {
-        removeFileOutInputFiles(allNewAttached.getAll('files').findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate));
+      if (Object.prototype.toString.call(deletedFile) === '[object File]' && tempNewDataState !== null && tempNewDataState !== void 0 && tempNewDataState.length) {
+        removeFileOutInputFiles(tempNewDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)));
+        tempNewDataState.splice(tempNewDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
+        setNewDataState(tempNewDataState);
       } else {
-        oldAttached.splice(oldAttached.findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate), 1);
-        setDataState(dataState.filter(attach => attach.FileName !== deletedFile.FileName && attach.CreateDate !== deletedFile.CreateDate));
+        oldAttached.splice(oldAttached.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
+        tempDataState.splice(tempDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
+        setDataState(tempDataState);
       }
     });
-    if (attached.length < 2) {
-      afterChangeFile(attached.length);
-    }
+    const tempAttachedItems = [...tempDataState, ...tempNewDataState];
+    // if (tempAttachedItems.length < 2) {
+    //     afterChangeFile(tempAttachedItems?.length || 0);
+    // }
     stripDomain();
     if (onChange) onChange({
       element: nodeList,
-      attached,
+      attached: tempAttachedItems,
       recentRemovedAttached,
       removedAttached: removedAttachedRef.current,
       oldAttached,
@@ -442,8 +453,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       allNewAttached.delete('files');
       files.forEach(file => allNewAttached.append('files', file));
       // newAttachedRef.current = files || [];
-      setNewDataState(files || []);
+      // setNewDataState(files || []);
     }
+
     attachmentInputRef.current.files = dt.files;
     return dt.files;
   };
@@ -735,7 +747,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [maxFile, maxSizeProp, multiple, accept]);
   useEffect(() => {
     oldAttached.length = 0;
-    afterChangeFile(((data === null || data === void 0 ? void 0 : data.length) || 0) + ((newDataState === null || newDataState === void 0 ? void 0 : newDataState.length) || 0));
+    // afterChangeFile((data?.length || 0) + (newDataState?.length || 0));
     if (data) {
       // Load files data was uploaded
       const length = data.length;
@@ -830,7 +842,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       uppercase: true,
       required: required,
       type: 'h5',
-      color: 'text.sub',
+      color: 'text/sub',
       ref: attachTextRef
     }, label), error ? jsx(HelperText, null, error) : null), jsx("div", {
       css: AttachmentHeaderIconCSS
@@ -868,11 +880,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }), isEmpty ? jsx(Typography, {
       css: userSelectNone,
       type: 'p3',
-      color: 'system.rest'
+      color: 'system/rest'
     }, hintText) : null) : isEmpty ? jsx(Typography, {
       css: userSelectNone,
       type: 'p3',
-      color: 'system.rest'
+      color: 'system/rest'
     }, getGlobal('noFileText')) : null)), allowSort && !isEmpty ? jsx(Popover, {
       ref: popoverRef,
       anchor: jsx(ButtonIcon, {
@@ -958,15 +970,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(Typography, {
       className: 'username',
       type: 'p2',
-      color: 'text.sub'
+      color: 'text/sub'
     }, (item === null || item === void 0 ? void 0 : item.UserName) || item.lastModifiedDate && ownerName || ''), jsx(Typography, {
       className: 'datetime',
       type: 'p2',
-      color: 'text.sub'
+      color: 'text/sub'
     }, getDateTime(date)), jsx(Typography, {
       className: 'filesize',
       type: 'p2',
-      color: 'text.sub'
+      color: 'text/sub'
     }, calculateSize(item.FileSize || item.size))) : null, isNew ? jsx("span", {
       css: AttachedLinearCSS
     }, jsx(LinearProgress, {
@@ -1108,9 +1120,9 @@ const AttachedItemInfoIconCSS = css`
         ${positionAbsolute};
         ${borderRadius50};
         ${parseWidthHeight(4, 4)};
-        ${bgColor('semantic.success')};
+        ${bgColor('semantic/success')};
         ${top(4.5)};
-        ${left(-2)}
+        ${left(-2)};
     }
 `;
 const AttachedItemOwnerCSS = css`
@@ -1119,7 +1131,7 @@ const AttachedItemOwnerCSS = css`
     ${itemsCenter};
     ${userSelectNone};
     ${parseHeight('100%')};
-    ${textColor('text.sub')};
+    ${textColor('text/sub')};
 `;
 const DetailInfoCSS = css`
     ${displayFlex};
@@ -1145,7 +1157,7 @@ const AttachedLinearCSS = css`
     ${displayFlex};
     ${positionAbsolute};
     ${itemsCenter};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     ${parseWidthHeight('100%')};
     ${top(0)};
 `;
@@ -1242,27 +1254,27 @@ const AttachmentRootCSS = (isEmpty, isEnable) => css`
     ${positionRelative};
     ${borderRadius4px};
     ${boxBorder};
-    ${border(1, 'line.normal')};
+    ${border(1, 'line/normal')};
     ${parseHeight(isEmpty && !isEnable ? 120 : 280)};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     .css-${AttachedCSS.name} {
         .css-${AttachedItemCSS.name} {
             &:hover {
-                ${bgColor('fill.hover')};
+                ${bgColor('fill/hover')};
                 .css-${AttachedLinearCSS.name} {
-                    ${bgColor('fill.hover')};
+                    ${bgColor('fill/hover')};
                 }
             }
             &:active {
-                ${bgColor('fill.pressed')};
+                ${bgColor('fill/pressed')};
                 .css-${AttachedLinearCSS.name} {
-                    ${bgColor('fill.pressed')};
+                    ${bgColor('fill/pressed')};
                 }
             }
             &.chosen {
-                ${bgColor('fill.focus')};
+                ${bgColor('fill/focus')};
                 .css-${AttachedItemInfoCSS.name}, .css-${AttachedItemOwnerCSS.name} {
-                    ${bgColor('fill.focus')};
+                    ${bgColor('fill/focus')};
                 }
             }
         }
@@ -1277,22 +1289,17 @@ const AttachmentRootCSS = (isEmpty, isEnable) => css`
     }
 `;
 Attachment.defaultProps = {
-  allowSort: true,
-  className: '',
-  data: [],
   deleteNotifyText: getGlobal('deleteNotifyText'),
-  disabled: false,
   hintText: getGlobal('dropFileHere'),
   label: getGlobal('attachText'),
-  maxFile: Infinity,
-  multiple: true,
-  style: {},
+  maxSize: getGlobal('maxSizeUpload'),
   uploadErrorInfo: {
     maxFile: getGlobal(['errorDefault', 'maxFile']),
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
-  }
+  },
+  ...getGlobal(['components', 'attachment', 'defaultProps'])
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */
@@ -1333,7 +1340,7 @@ Attachment.propTypes = {
   /** Limit the number of uploaded files. */
   maxFile: PropTypes.number,
   /** Limit the size of uploaded files. */
-  maxSize: PropTypes.string,
+  maxSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /** Allows to attach multiple files. */
   multiple: PropTypes.bool,
   /** Callback fired when the files attached is changed. */