@hzab/form-render-mobile 0.0.1

package/src/components/Uploader/uploader.jsx

@@ -0,0 +1,246 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Image, Button, Dialog, ActionSheet } from "antd-mobile";
+import { CloseCircleFill } from "antd-mobile-icons";
+
+import Video from "./video";
+
+import { getImage, getVideo, getAudio } from "./common/cordova-camera";
+import { getFileURL, checkImageUrl, checkVideoUrl, checkAudioUrl } from "./common/utils";
+
+import "./uploader.less";
+
+const TYPE_VIDEO = "video";
+const TYPE_IMG = "img";
+const TYPE_AUDIO = "audio";
+
+const _ = require("lodash");
+
+function Uploader(props) {
+  const {
+    name,
+    multiple,
+    // 模式字符串: all | select | image | video 或 数组 select | image | video 组合：如：['select', 'image']
+    mode = "select",
+    onChange,
+    accept,
+    disabled,
+    readOnly,
+    data,
+  } = props;
+  const [curAccept, setCurAccept] = useState(accept);
+  const [fileList, setFileList] = useState(data || []);
+  const [actionSheetVisible, setActionSheetVisible] = useState(false);
+
+  useEffect(() => {
+    setFileList(data || []);
+  }, [data]);
+
+  function onFileChange(e) {
+    e.persist();
+    const { files: rawFiles } = e.target;
+    let files = [].slice.call(rawFiles);
+    e.target.value = ""; // HACK: fix the same file doesn't trigger onChange
+    handleChange(files);
+  }
+
+  function handleChange(files, type) {
+    let _files = files;
+    if (type !== "del" && multiple) {
+      _files = [...fileList, ..._files];
+    }
+    setFileList(_files);
+    onChange && onChange(_files && _files.length > 0 ? _files : undefined);
+  }
+
+  const uploaderRef = useRef();
+
+  const actions = useMemo(() => {
+    const allEnum = {
+      select: { text: "选择文件", key: "select" },
+      image: { text: "拍照", key: "captureImage" },
+      video: { text: "录像", key: "captureVideo" },
+      audio: { text: "录音", key: "captureAudio" },
+    };
+    if (Array.isArray(mode)) {
+      return mode.filter((it) => !!allEnum[it]).map((it) => allEnum[it]);
+    }
+    if (mode === "all") {
+      return Object.keys(allEnum).map((key) => allEnum[key]);
+    }
+    return allEnum[mode] ? [allEnum[mode]] : [allEnum.select];
+  }, [mode]);
+
+  function onPicker({ key }) {
+    switch (key) {
+      case "select":
+        // uploaderRef.current.click();
+        setCurAccept(accept);
+        setTimeout(() => {
+          uploaderRef.current.click();
+        }, 1000);
+        break;
+
+      case "captureImage":
+        getImage().then((res) => {
+          handleChange([res]);
+        });
+        break;
+
+      case "captureVideo":
+        getVideo().then((res) => {
+          handleChange([res]);
+        });
+        break;
+
+      case "captureAudio":
+        setCurAccept("audio/*");
+        setTimeout(() => {
+          uploaderRef.current.click();
+        }, 1000);
+        // TODO: reader 报错
+        // getAudio().then((res) => {
+        //   handleChange([res]);
+        // });
+        break;
+    }
+    setActionSheetVisible(false);
+  }
+
+  function onItemDel(idx) {
+    Dialog.confirm({
+      content: "确认删除？",
+      onConfirm: () => {
+        // setFileList((files) => {
+        //   files.splice(idx, 1);
+        //   handleChange(files, "del");
+        //   return files;
+        // });
+        const middleValue = _.cloneDeep(fileList);
+        middleValue.splice(idx, 1);
+        handleChange(middleValue, "del");
+        setFileList(middleValue);
+      },
+    });
+  }
+
+  function ItemRender(props) {
+    const { index } = props;
+    return (
+      <div className="file-item">
+        {props.children}
+        {disabled || readOnly ? null : (
+          <div
+            className="file-item-del"
+            onClick={() => {
+              onItemDel(index);
+            }}
+          >
+            <CloseCircleFill fontSize={14} />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="uploader">
+      <input
+        className="aria-hidden"
+        style={{ display: "none" }}
+        ref={uploaderRef}
+        id={name}
+        onChange={onFileChange}
+        type="file"
+        name={name}
+        multiple={multiple}
+        accept={curAccept}
+        capture={props.capture}
+      ></input>
+      {fileList.map((it, idx) => {
+        const { type, name, url } = it;
+        let src = "";
+        let fileType = "";
+        let downLoadUrl = undefined;
+
+        // 判断文件类型，获取对应展示的数据
+        if (typeof it === "string" || url) {
+          src = url ? url : it;
+          it = url ? url : it;
+          // 图片
+          if (it.startsWith("data:image/") || (/[ ,]?image\//.test(accept) && checkImageUrl(it))) {
+            fileType = TYPE_IMG;
+          }
+          // 视频
+          if (/[ ,]?video\//.test(accept) && checkVideoUrl(it)) {
+            fileType = TYPE_VIDEO;
+          }
+          // 音频
+          if (/[ ,]?audio\//.test(accept) && checkAudioUrl(it)) {
+            fileType = TYPE_AUDIO;
+          }
+        } else {
+          // 图片
+          if (type?.startsWith("image/")) {
+            src = getFileURL(it);
+            fileType = TYPE_IMG;
+          }
+
+          // 视频
+          if (type?.startsWith("video/")) {
+            src = getFileURL(it);
+            fileType = TYPE_VIDEO;
+            // TODO: 确认下载逻辑
+            downLoadUrl = src;
+          }
+          if (type?.startsWith("audio/")) {
+            src = getFileURL(it);
+            fileType = TYPE_AUDIO;
+            // TODO: 确认下载逻辑
+            downLoadUrl = src;
+          }
+        }
+
+        if (fileType === TYPE_IMG) {
+          return (
+            <ItemRender index={idx} key={name + "_" + idx}>
+              <Image className="file-item-view" src={src} alt={name} />
+            </ItemRender>
+          );
+        }
+        if (fileType === TYPE_VIDEO) {
+          return (
+            <ItemRender index={idx} key={name + "_" + idx}>
+              <Video src={src} href={downLoadUrl} />
+            </ItemRender>
+          );
+        }
+        if (fileType === TYPE_AUDIO) {
+          return <audio src={src} controls></audio>;
+        }
+
+        return it.name;
+      })}
+      {disabled || readOnly || (!multiple && fileList.length > 0) ? null : (
+        <>
+          <Button
+            className="uploader-add-btn"
+            onClick={() => {
+              setActionSheetVisible(true);
+            }}
+          >
+            +
+          </Button>
+          <ActionSheet
+            cancelText="取消"
+            visible={actionSheetVisible}
+            actions={actions}
+            onAction={onPicker}
+            onClose={() => setActionSheetVisible(false)}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default Uploader;

package/src/components/Uploader/uploader.less

@@ -0,0 +1,36 @@
+.uploader {
+  .uploader-add-btn,
+  .file-item {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 20vw;
+    height: 20vw;
+    margin-right: 2vw;
+    vertical-align: top;
+    border-radius: 4px;
+    .file-item-view {
+      max-width: 100%;
+      max-height: 100%;
+    }
+    .file-item-del {
+      position: absolute;
+      right: -1vw;
+      top: -1vw;
+      width: 3vw;
+      height: 3vw;
+      line-height: 3vw;
+      text-align: center;
+      border-radius: 50%;
+      user-select: none;
+      background-color: #fff;
+    }
+  }
+  .uploader-add-btn {
+    font-size: 6vw;
+  }
+  .aria-hidden {
+    display: none;
+  }
+}

package/src/components/Uploader/video/index.jsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { Mask } from "antd-mobile";
+import { PlayOutline, CloseOutline } from "antd-mobile-icons";
+
+import "./index.less";
+
+function Video({ src, href }) {
+  const [maskVisible, setMaskVisible] = useState(false);
+
+  function onPreview() {
+    setMaskVisible(true);
+  }
+
+  return (
+    <div className="uploader-video-wrap">
+      <PlayOutline fontSize={30} onClick={onPreview} />
+      <Mask
+        className="uploader-video-mask"
+        visible={maskVisible}
+        getContainer={document.body}
+        destroyOnClose
+        onMaskClick={() => setMaskVisible(false)}
+      >
+        <video className="uploader-video-view" src={src} controls>
+          抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以
+          <a href={href || src}>下载</a>
+          并用你喜欢的播放器观看！
+        </video>
+        <div className="video-mask-close-btn" onClick={() => setMaskVisible(false)}>
+          X
+        </div>
+      </Mask>
+    </div>
+  );
+}
+
+export default Video;

package/src/components/Uploader/video/index.less

@@ -0,0 +1,37 @@
+.uploader-video-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #eee;
+  color: #fff;
+  background-color: #000;
+  border-radius: 4px;
+}
+.uploader-video-mask {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100vw;
+  max-height: 100vh;
+  background-color: #000 !important;
+  .uploader-video-view {
+    max-width: 100vw;
+    max-height: 100vh;
+    width: 100vw;
+  }
+  .video-mask-close-btn {
+    position: absolute;
+    right: 2vw;
+    top: 1vh;
+    width: 5vw;
+    height: 5vw;
+    line-height: 5vw;
+    font-size: 3vw;
+    text-align: center;
+    color: #fff;
+    border-radius: 50%;
+    background-color: #333;
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,10 @@
+import Text from "./Text";
+import Select from "./Select";
+import Cascader from "./Cascader";
+import NumberPicker from "./NumberPicker";
+import DatePicker from "./DatePicker";
+import Password from "./Password";
+import MapPicker from "./MapPicker";
+import Uploader from "./Uploader";
+
+export { NumberPicker, Password, Select, Cascader, DatePicker, Text, MapPicker, Uploader };

package/src/index.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useMemo, useImperativeHandle, forwardRef } from "react";
+
+import {
+  FormLayout,
+  FormItem,
+  CascadePicker,
+  CheckList,
+  Checkbox,
+  DatePicker,
+  FormGrid,
+  Input,
+  List,
+  Selector,
+  Stepper,
+  Switch,
+  FormButtonGroup,
+  Submit,
+  Reset,
+} from "@formily/antd-mobile";
+import { Dialog, Slider } from "antd-mobile";
+import { createForm } from "@formily/core";
+import { FormProvider, createSchemaField, Schema } from "@formily/react";
+
+// 自定义组件
+import * as customComponents from "./components/index";
+import { schemaHandler } from "./common/schemaHandler";
+
+import { formPropsI } from "./type.d";
+
+const FormRender = forwardRef((props: formPropsI, parentRef) => {
+  const SchemaField = useMemo(
+    () =>
+      createSchemaField({
+        components: {
+          FormItem,
+          FormLayout,
+          CascadePicker,
+          CheckList,
+          Slider,
+          Checkbox,
+          DatePicker,
+          FormGrid,
+          Input,
+          List,
+          Selector,
+          Stepper,
+          Switch,
+          FormButtonGroup,
+          Submit,
+          Reset,
+          ...customComponents,
+          ...props.components,
+        },
+        scope: { ...props.schemaScope },
+      }),
+    [],
+  );
+
+  const formRender = useMemo(
+    () =>
+      createForm({
+        initialValues: props.initialValues,
+        // 禁用状态（注意，自定义组件组件自行获取对应的状态）
+        readOnly: props.readOnly,
+        disabled: props.disabled,
+        ...(props.formOptions || {}),
+      }),
+    [],
+  );
+
+  useImperativeHandle(parentRef, () => ({ formRender }));
+
+  useEffect(() => {
+    props.init && props.init(formRender);
+  }, []);
+
+  const schema = useMemo(() => {
+    return schemaHandler(props.schema).schema;
+  }, [props.schema]);
+
+  return (
+    <div className={`form-render ${props.className}`}>
+      <FormProvider form={formRender}>
+        {/*  @ts-ignore */}
+        <SchemaField schema={schema} />
+        {/* <FormButtonGroup>
+          <Submit
+            onSubmit={(e) => {
+              console.log(e);
+            }}
+          >
+            提交
+          </Submit>
+        </FormButtonGroup> */}
+        <div className="form-render-footer">{props.footerRender && props.footerRender()}</div>
+      </FormProvider>
+    </div>
+  );
+});
+
+export default FormRender;

package/src/type.d.ts

@@ -0,0 +1,15 @@
+import { SchemaReactComponents, Schema } from "@formily/react";
+import { ReactElement } from "react";
+
+export interface formPropsI {
+  className?: string;
+  initialValues?: Object;
+  schema: { schema: Object } | Object;
+  schemaScope?: Object;
+  components?: SchemaReactComponents;
+  readOnly?: boolean;
+  disabled?: boolean;
+  formOptions?: Object;
+  init?(form): void;
+  footerRender?(): ReactElement;
+}