provide hooks API uploadTrigger; alpha release

Author: ChenYong

example/pages/upload-wrapper.tsx

@@ -1,12 +1,20 @@
 import React, { FC } from "react";
 import { css } from "emotion";
 import { DocDemo, DocSnippet, DocBlock } from "@jimengio/doc-frame";
-import { UploadWrapper } from "../../src";
+import UploadWrapper, { useUploadTrigger } from "../../src/component/upload-wrapper";
 import { Button } from "antd";
 import { JimoButton } from "@jimengio/jimo-basics";
 
 let PageUploadWrapper: FC<{}> = React.memo((props) => {
   /** Plugins */
+
+  let uploadPlugin = useUploadTrigger({
+    acceptedFileTypes: ["jpg", "png"],
+    onChange: async (files) => {
+      console.log("files", files);
+    },
+  });
+
   /** Methods */
   /** Effects */
   /** Renderers */
@@ -24,6 +32,12 @@ let PageUploadWrapper: FC<{}> = React.memo((props) => {
           <JimoButton text="点击选取一个文件, 在 Console 查看" onClick={() => {}}></JimoButton>
         </UploadWrapper>
       </DocDemo>
+
+      <DocDemo title="Upload Trigger">
+        <JimoButton text="点击选取一个文件, 在 Console 查看" onClick={uploadPlugin.onUpload}></JimoButton>
+        <DocSnippet code={hooksCode} />
+        {uploadPlugin.ui}
+      </DocDemo>
     </div>
   );
 });
@@ -43,3 +57,14 @@ let code = `
 let content = `
 UploadWrapper 可以包裹一个区域, 用来获取 File 对象. 得到 File 对象之后, 再通过 API 手动发送.
 `;
+
+let hooksCode = `
+let uploadPlugin = useUploadTrigger({
+  acceptedFileTypes: ["jpg", "png"],
+  onChange: async (files) => {
+    console.log("files", files);
+  },
+});
+
+<JimoButton text="点击选取一个文件, 在 Console 查看" onClick={uploadPlugin.onUpload}></JimoButton>
+`;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimengio/files-picker",
-  "version": "0.0.1-a12",
+  "version": "0.0.1-a13",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

src/component/upload-wrapper.tsx

@@ -29,7 +29,7 @@ interface IProps {
   onError?: (error: EUploadError) => void;
 }
 
-let UploadWrapper: FC<IProps> = React.memo((props) => {
+export let useUploadTrigger = (props: IProps) => {
   let inputElement = useRef(null);
 
   let inputAccepts = props.accept;
@@ -40,6 +40,59 @@ let UploadWrapper: FC<IProps> = React.memo((props) => {
     }
   }
 
+  let ui = (
+    <input
+      title=""
+      className={styleInput}
+      ref={inputElement}
+      type="file"
+      accept={inputAccepts}
+      multiple={props.multiple}
+      onChange={async (e) => {
+        if (props.onChange) {
+          const fileList = Array.from(e.target.files); // copy to array before resetting
+
+          e.target.files = null; // without resetting, not able to trigger a change after failed
+
+          if (fileList.length > 0) {
+            const files: File[] = [];
+
+            fileList.forEach((file) => {
+              const fileExtension = file.name.split(".").pop();
+              if (props.acceptedFileTypes && !props.acceptedFileTypes.includes(fileExtension)) {
+                if (props.onError) {
+                  props.onError(EUploadError.unsupportedFileType);
+                }
+                message.error(interpolateLocale(uploadingLocales.unsupportedFileType, { type: props.acceptedFileTypes.join(", ") }));
+                return;
+              }
+              files.push(file);
+            });
+
+            props.onChange(files);
+          }
+        }
+      }}
+    />
+  );
+
+  let onUpload = () => {
+    if (inputElement.current != null) {
+      inputElement.current.click();
+    } else {
+      console.error("input element for files is not mounted!");
+    }
+  };
+
+  return {
+    ui,
+    onUpload,
+  };
+};
+
+let UploadWrapper: FC<IProps> = React.memo((props) => {
+  let uploadPlugin = useUploadTrigger(props);
+
   /** Plugins */
   /** Methods */
   /** Effects */
@@ -48,48 +101,11 @@ let UploadWrapper: FC<IProps> = React.memo((props) => {
     <div
       className={cx(styleWrapper, props.className)}
       onClick={() => {
-        if (inputElement.current != null) {
-          inputElement.current.click();
-        } else {
-          console.error("Input element is missing in upload wrapper");
-        }
+        uploadPlugin.onUpload();
       }}
     >
       {props.children}
-
-      <input
-        title=""
-        className={styleInput}
-        ref={inputElement}
-        type="file"
-        accept={inputAccepts}
-        multiple={props.multiple}
-        onChange={async (e) => {
-          if (props.onChange) {
-            const fileList = Array.from(e.target.files); // copy to array before resetting
-
-            e.target.files = null; // without resetting, not able to trigger a change after failed
-
-            if (fileList.length > 0) {
-              const files: File[] = [];
-
-              fileList.forEach((file) => {
-                const fileExtension = file.name.split(".").pop();
-                if (props.acceptedFileTypes && !props.acceptedFileTypes.includes(fileExtension)) {
-                  if (props.onError) {
-                    props.onError(EUploadError.unsupportedFileType);
-                  }
-                  message.error(interpolateLocale(uploadingLocales.unsupportedFileType, { type: props.acceptedFileTypes.join(", ") }));
-                  return;
-                }
-                files.push(file);
-              });
-
-              props.onChange(files);
-            }
-          }
-        }}
-      />
+      {uploadPlugin.ui}
     </div>
   );
 });