update dispatch Files input change event

2p4b · May 27, 2022 · 4dd2da7 · 4dd2da7
1 parent 8ea28be
commit 4dd2da7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/packages/ui/src/Textarea/Post.tsx b/packages/ui/src/Textarea/Post.tsx
@@ -388,12 +388,19 @@ export default React.memo<InputProps>((props) => {
         setQueue((queue) => !queue);
     }
 
-    function handleRemoveFile(index: number) {
-        setFiles((files) => {
-            let qfiles = [...files];
-            qfiles.splice(index, 1);
-            return qfiles;
-        });
+    function handleUpdateFiles(e: UIEvent<{ value: File[] }>) {
+        const files = e.target.value;
+        setFiles(files);
+        if (props.onChange) {
+            const text = slater.serialize(value).trim();
+            const target = { files, value: text, editor, data: value };
+            const uievent = UIEvent.create<EventTarget>(
+                target,
+                e.event,
+                "change"
+            );
+            props.onChange(uievent);
+        }
     }
 
     function renderFile(file: File) {
@@ -534,7 +541,7 @@ export default React.memo<InputProps>((props) => {
                 open={queue}
                 files={files}
                 onClose={handleCloseUploadQueue}
-                onDequeue={handleRemoveFile}
+                onChange={handleUpdateFiles}
             />
         </Slate>
     );

diff --git a/packages/ui/src/Textarea/UploadQueue.tsx b/packages/ui/src/Textarea/UploadQueue.tsx
@@ -2,17 +2,19 @@ import React from "react";
 import Dialog from "../Dialog";
 import Button from "../Button";
 import * as Icons from "@octal/icons";
+import UIEvent from "../event";
 import { fileinfo } from "./utils";
 
 interface IDialog {
     files: File[];
-    onDequeue: (index: number) => void;
+    onChange: (event: UIEvent<{ value: File[] }>) => void;
 }
 
 export default Dialog.create<IDialog>(({ files, ...props }) => {
     function removeFile(index: number) {
-        return () => {
-            props.onDequeue(index);
+        return (event: React.MouseEvent) => {
+            let value = files.filter((_v, i) => i !== index);
+            props.onChange(UIEvent.create({ value }, event));
         };
     }