@hw-component/form 0.0.3 → 0.0.4-beta-v1

package/src/components/Upload/Btn.tsx

@@ -0,0 +1,24 @@
+import { PlusOutlined, UploadOutlined } from "@ant-design/icons";
+import type { IUpLoadProps } from "./modal";
+import { useMemo } from "react";
+import { Button } from "antd";
+
+export default ({ value, maxCount = 1, listType }: IUpLoadProps) => {
+  const len = value?.length || 0;
+  const text = useMemo(() => {
+    if (len === maxCount) {
+      return "更新";
+    }
+    return "上传";
+  }, [len, maxCount]);
+
+  if (listType === "picture-card") {
+    return (
+      <div>
+        <PlusOutlined />
+        <div style={{ marginTop: 8 }}>{text}</div>
+      </div>
+    );
+  }
+  return <Button icon={<UploadOutlined />}>{text}</Button>;
+};

package/src/components/Upload/MediaTypeEle/TypeEle.tsx

@@ -0,0 +1,26 @@
+import { MediaTypeEnum } from "../enums";
+
+interface TypeEleProps {
+  mediaType?: MediaTypeEnum;
+  url?: string;
+  onReady?: VoidFunction;
+  onError?: VoidFunction;
+}
+export default ({ mediaType, url, onReady, onError }: TypeEleProps) => {
+  if (mediaType === MediaTypeEnum.video) {
+    return (
+      <video autoPlay width="100%" controls onPlay={onReady} onError={onError}>
+        <source src={url} />
+      </video>
+    );
+  }
+
+  if (mediaType === MediaTypeEnum.audio) {
+    return (
+      <audio autoPlay controls onPlay={onReady} onError={onError}>
+        <source src={url} />
+      </audio>
+    );
+  }
+  return <img src={url} width="100%" onLoad={onReady} onError={onError} />;
+};

package/src/components/Upload/MediaTypeEle/index.tsx

@@ -0,0 +1,34 @@
+import { getFileExt } from "../util";
+import TypeEle from "./TypeEle";
+import { useMemo } from "react";
+import type { IMediaTypeEleProps } from "../modal";
+import { MediaTypeEnum } from "../enums";
+
+const videoType = ["MP4"];
+const audioType = ["MP3"];
+
+export default ({ file, onReady, onError }: IMediaTypeEleProps) => {
+  if (!file) {
+    return null;
+  }
+
+  const name = getFileExt(file);
+  const mediaType = useMemo(() => {
+    if (videoType.indexOf(name) !== -1) {
+      return MediaTypeEnum.video;
+    }
+    if (audioType.indexOf(name) !== -1) {
+      return MediaTypeEnum.audio;
+    }
+    return MediaTypeEnum.img;
+  }, [name]);
+
+  return (
+    <TypeEle
+      onError={onError}
+      onReady={onReady}
+      mediaType={mediaType}
+      url={file.response.url}
+    />
+  );
+};

package/src/components/Upload/Preview/index.tsx

@@ -0,0 +1,14 @@
+import type { ModalProps } from "antd";
+import { Modal } from "antd";
+import MediaTypeEle from "../MediaTypeEle";
+import type { IMediaTypeEleProps } from "../modal";
+
+export type IPreviewProps = IMediaTypeEleProps & ModalProps;
+
+export default ({ visible, file, onCancel }: IPreviewProps) => {
+  return (
+    <Modal footer={null} visible={visible} title="预览" onCancel={onCancel}>
+      <MediaTypeEle file={file} />
+    </Modal>
+  );
+};

package/src/components/Upload/UrlUpload/index.tsx

@@ -0,0 +1,91 @@
+import { message, Space } from "antd";
+import Input from "antd/es/input/Input";
+import Upload from "../index";
+import type { IUploadRefModal, IUrlUploadProps } from "../modal";
+import TypeEle from "../MediaTypeEle/TypeEle";
+import { useRef, useState } from "react";
+import type { RcFile, UploadFile } from "antd/es/upload/interface";
+const Index = ({
+  placeholder = "请输入文件地址",
+  value = [],
+  onChange,
+  mediaType,
+  ...props
+}: IUrlUploadProps) => {
+  const [url, setUrl] = useState("");
+  const [load, setLoad] = useState<boolean>(false);
+  const ref = useRef<IUploadRefModal | null>(null);
+  const onReady = () => {
+    const newFileList = [...value];
+    newFileList.push({
+      url,
+      uid: new Date().valueOf().toString(),
+      name: url,
+      fileName: url,
+      thumbUrl: url,
+      response: {
+        url,
+      },
+    });
+    onChange?.(newFileList);
+    setUrl("");
+    setLoad(false);
+  };
+  const onError = () => {
+    message.error("文件错误!");
+    setUrl("");
+    setLoad(false);
+  };
+  const onBlur = (e) => {
+    if (e.target.value.trim() === "") {
+      return;
+    }
+    setLoad(true);
+  };
+  const onPaste = (e) => {
+    const files = e.clipboardData.files;
+    if (!files.length) {
+      return;
+    }
+    e.preventDefault();
+    const newFileList = Array.from<RcFile>(files).map<UploadFile>((item) => {
+      const { name, size, type } = item;
+      return {
+        name,
+        size,
+        status: "uploading",
+        uid: new Date().valueOf().toString(),
+        originFileObj: item,
+        type,
+      };
+    });
+    ref.current?.change({ fileList: newFileList, file: newFileList[0] });
+    setUrl("");
+    setLoad(false);
+  };
+  return (
+    <Space direction={"vertical"} style={{ width: "100%" }} size={"middle"}>
+      <Input
+        placeholder={placeholder}
+        onBlur={onBlur}
+        value={url}
+        onPaste={onPaste}
+        onChange={(e) => {
+          setUrl(e.target.value);
+        }}
+      />
+      <Upload {...props} ref={ref} value={value} onChange={onChange} />
+      {load && (
+        <div style={{ display: "none" }}>
+          <TypeEle
+            url={url}
+            mediaType={mediaType}
+            onReady={onReady}
+            onError={onError}
+          />
+        </div>
+      )}
+    </Space>
+  );
+};
+export default Index;

package/src/components/Upload/enums.ts

@@ -0,0 +1,5 @@
+export enum MediaTypeEnum {
+  video,
+  audio,
+  img,
+}

package/src/components/Upload/hooks/change.ts

@@ -0,0 +1,79 @@
+import type { IUpLoadProps } from "../modal";
+import type { UploadChangeParam, UploadFile } from "antd/lib/upload/interface";
+import { useRequest } from "ahooks";
+import { useCustomRequest } from "./customRequest";
+import { checkFileSize, checkFileType } from "../util";
+import { message } from "antd";
+
+const checkFile = (item: UploadFile, oldFile: UploadFile[] = []) => {
+  return oldFile.every((oldItem) => {
+    return item.uid !== oldItem.uid;
+  });
+};
+
+const matchFile = (
+  newFile: UploadFile[],
+  oldFile: UploadFile[] = [],
+  exFiles?: string[],
+  maxSize?: number
+) => {
+  const newResultFileList: UploadFile[] = [];
+  const addFile: UploadFile[] = [];
+  const errList: Error[] = [];
+  newFile.forEach((item) => {
+    if (!checkFileSize(item, maxSize)) {
+      return errList.push(new Error("超出限制大小!"));
+    }
+    if (!checkFileType(item, exFiles)) {
+      return errList.push(new Error("文件格式错误!"));
+    }
+    if (checkFile(item, oldFile)) {
+      addFile.push(item);
+      newResultFileList.push({
+        ...item,
+        status: "uploading",
+      });
+    } else {
+      newResultFileList.push(item);
+    }
+  });
+  return {
+    addFile,
+    fileList: newResultFileList,
+    errList,
+  };
+}; //验证错误+新增文件
+export const useChange = ({
+  value,
+  onChange,
+  maxCount = 1,
+  request,
+  exFiles,
+  maxSize,
+}: IUpLoadProps) => {
+  const customRequest = useCustomRequest({ request, onChange, value });
+
+  const { run } = useRequest(
+    async ({ fileList }: UploadChangeParam<UploadFile>) => {
+      if (fileList.length > maxCount) {
+        message.error("超出最多文件限制!");
+        return;
+      }
+      const {
+        addFile,
+        fileList: newFileList,
+        errList,
+      } = matchFile(fileList, value, exFiles, maxSize);
+      if (errList.length) {
+        message.error(errList[0].message);
+      }
+      onChange?.(newFileList);
+      customRequest(addFile);
+    },
+    { manual: true, debounceInterval: 100 }
+  );
+
+  return (info: UploadChangeParam<UploadFile>) => {
+    run(info);
+  };
+};

package/src/components/Upload/hooks/customRequest.ts

@@ -0,0 +1,87 @@
+import type { IUpLoadProps } from "../modal";
+import type { UploadFile } from "antd/es/upload/interface";
+import type { RcFile } from "antd/lib/upload";
+import { useEffect, useMemo } from "react";
+import type { UploadFileStatus } from "antd/es/upload/interface";
+import type { BeforeUploadFileType } from "rc-upload/lib/interface";
+import { message } from "antd";
+
+interface SubReqParamsModal {
+  request?: (
+    file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
+  ) => Promise<{ url: string }>;
+  file: RcFile;
+}
+interface ResultModal {
+  url: string;
+  status: UploadFileStatus;
+  uid?: string;
+}
+const subReq = async ({
+  request,
+  file,
+}: SubReqParamsModal): Promise<ResultModal> => {
+  if (!request) {
+    return {
+      url: "",
+      status: "done",
+    };
+  }
+  try {
+    const { url } = await request(file);
+    return {
+      url,
+      status: "done",
+    };
+  } catch (err: any) {
+    message.error(err.message);
+    return {
+      url: "",
+      status: "error",
+    };
+  }
+};
+const fileListProvider = (changeFile: ResultModal, files?: UploadFile[]) => {
+  const { status, url, uid } = changeFile;
+  if (status === "error") {
+    return files?.filter((item) => {
+      return item.uid !== uid;
+    });
+  }
+  return files?.map((item) => {
+    const resultUrl = url || item.thumbUrl;
+    if (item.uid === uid) {
+      item.status = status;
+      item.response = { url: resultUrl };
+      return item;
+    }
+    return item;
+  });
+};
+export const useCustomRequest = ({
+  value,
+  request,
+  onChange,
+}: IUpLoadProps) => {
+  const valObj = useMemo(() => {
+    return {
+      value,
+    };
+  }, []);
+
+  useEffect(() => {
+    valObj.value = value;
+  }, [value]); //强制同步避免闭包问题
+
+  const sendFile = async (file: RcFile) => {
+    const { uid } = file;
+    const result = await subReq({ request, file });
+    const fileList = fileListProvider({ ...result, uid }, valObj.value);
+    onChange?.(fileList || []);
+  };
+  return (fileList: UploadFile[]) => {
+    fileList.forEach((item) => {
+      sendFile(item as RcFile);
+    });
+  };
+};

package/src/components/Upload/hooks/propsMaker.ts

@@ -0,0 +1,20 @@
+import { useFormConfigContext } from "../../Form/Context/FormConfigProvider";
+import type { IUpLoadProps } from "../modal";
+
+export const useProps = ({ request, exFiles, maxSize }: IUpLoadProps) => {
+  const configUploadProps = useFormConfigContext("uploadProps");
+  const inputProps = {
+    request,
+    exFiles,
+    maxSize,
+  };
+  const keys = Object.keys(inputProps);
+  const resultProps = { ...configUploadProps };
+  keys.forEach((key) => {
+    if (inputProps[key]) {
+      resultProps[key] = inputProps[key];
+      return;
+    }
+  });
+  return resultProps;
+};

package/src/components/Upload/index.tsx

@@ -0,0 +1,119 @@
+import React, { useImperativeHandle, useMemo, useState } from "react";
+import type { IUpLoadProps, IUploadRefModal } from "./modal";
+import { useProps } from "./hooks/propsMaker";
+import type { IPreviewProps } from "./Preview";
+import Preview from "./Preview";
+import { useChange } from "./hooks/change";
+import { Upload } from "antd";
+import Btn from "./Btn";
+import HFormConnect from "../Form/HFormConnect";
+
+const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
+  {
+    value = [],
+    onChange,
+    listType = "picture-card",
+    exFiles,
+    maxCount = 1,
+    maxRowNum = 3,
+    onPreview,
+    request,
+    maxSize,
+    addFormat,
+    ...props
+  },
+  ref
+) => {
+  const matchProps = useProps({ request, exFiles, maxSize });
+  const [previewModal, setPreviewModal] = useState<IPreviewProps>({});
+  const change = useChange({
+    ...matchProps,
+    value,
+    maxCount,
+    onChange,
+  });
+  useImperativeHandle(ref, () => {
+    return {
+      change,
+    };
+  });
+  const contentStyle = useMemo(() => {
+    if (listType !== "picture-card") {
+      return {};
+    }
+    return { width: 112 * maxRowNum, maxWidth: "100%" };
+  }, [maxRowNum, listType]);
+
+  const preview = (file) => {
+    if (onPreview) {
+      onPreview(file);
+      return;
+    }
+    setPreviewModal({
+      visible: true,
+      file,
+    });
+  };
+  const maxNum = maxCount === 1 ? maxCount : Number.MAX_VALUE;
+  const { visible, file: previewFile } = previewModal;
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name = "" } = item;
+        const initFileList = initValue[name] || [];
+        const relInitFileList =
+          typeof initFileList === "string" ? [initFileList] : initFileList;
+        const fileList = relInitFileList.map((url, index) => {
+          return {
+            name: url,
+            response: {
+              url,
+            },
+            status: "done",
+            uid: `init-${index}`,
+            thumbUrl: url,
+          };
+        });
+        return {
+          [name]: fileList,
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name: valueName = "" } = item;
+        const { [valueName]: itemVal = [] } = outputValue;
+        const urls = itemVal.map((fileItem) => {
+          return fileItem.response.url;
+        });
+        return {
+          [valueName]: maxCount === 1 ? urls[0] : urls,
+        };
+      },
+    },
+  });
+  return (
+    <div style={contentStyle}>
+      <Upload
+        listType={listType}
+        maxCount={maxNum}
+        fileList={value}
+        onPreview={preview}
+        onChange={change}
+        beforeUpload={() => {
+          return false;
+        }}
+        {...props}
+      >
+        <Btn value={value} maxCount={maxCount} listType={listType} />
+      </Upload>
+      <Preview
+        visible={visible}
+        file={previewFile}
+        onCancel={() => {
+          setPreviewModal({});
+        }}
+      />
+    </div>
+  );
+};
+
+export default HFormConnect(React.forwardRef(Index));

package/src/components/Upload/modal.ts

@@ -0,0 +1,33 @@
+import type { UploadProps } from "antd";
+import type { UploadFile } from "antd/es/upload/interface";
+import type { BeforeUploadFileType, RcFile } from "rc-upload/lib/interface";
+import type { UploadChangeParam } from "antd/lib/upload/interface";
+import type { MediaTypeEnum } from "@/components/Upload/enums";
+import type { addFormatItemModal } from "@/components/Form/modal";
+
+export interface IUpLoadProps extends Omit<UploadProps, "onChange"> {
+  exFiles?: string[];
+  request?: (
+    file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
+  ) => Promise<{ url: string }>;
+  errorType?: "alert" | "show";
+  onChange?: (fileList: UploadFile[]) => void;
+  value?: UploadFile[];
+  maxRowNum?: number;
+  maxSize?: number;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}
+export interface IMediaTypeEleProps {
+  file?: UploadFile;
+  onReady?: VoidFunction;
+  onError?: VoidFunction;
+}
+
+export interface IUploadRefModal {
+  change: (info: UploadChangeParam<UploadFile>) => void;
+}
+
+export interface IUrlUploadProps extends IUpLoadProps {
+  placeholder?: string;
+  mediaType?: MediaTypeEnum;
+}

package/src/components/Upload/util.ts

@@ -0,0 +1,27 @@
+import type { UploadFile } from "antd/es/upload/interface";
+
+export const getFileExt = (file: UploadFile): string => {
+  const { name } = file;
+  const index = name.lastIndexOf(".");
+  return name.substring(index + 1).toUpperCase();
+};
+
+export const checkFileType = (file: UploadFile, exFiles: string[] = []) => {
+  const exName: string = getFileExt(file);
+  return exFiles.indexOf(exName) !== -1;
+};
+
+export const checkFileSize = (file: UploadFile, maxSize = 0) => {
+  const { size = 0 } = file;
+  return size <= maxSize;
+};
+
+export const fileToBase64 = (file: any) => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file?.originFileObj);
+    reader.onload = (e) => {
+      resolve(e.target?.result);
+    };
+  });
+};

package/src/components/config.ts

@@ -1,15 +1,41 @@
-export const baseConfig = {
-  defaultFieldNames: {
+import moment from "moment";
+import type { IFormConfigContextProps } from "./Form/modal";
+import { fileToBase64 } from "./Upload/util";
+export const baseConfig: IFormConfigContextProps = {
+  fieldNames: {
     label: "label",
     value: "value",
   },
-  defaultValueCheckMap: {
-    checked: true,
-    noChecked: false,
+  valueCheckMap: {
+    checked: 1,
+    noChecked: 0,
   },
-  defaultValueSwitchMap: {
-    checked: true,
-    noChecked: false,
+  valueSwitchMap: {
+    open: 1,
+    close: 0,
   },
-  prefixCls:"hw"
+  valueRangePickerValueMap: {
+    start: (name) => {
+      return `${name}StartTime`;
+    },
+    end: (name) => {
+      return `${name}EndTime`;
+    },
+  },
+  dateRanges: {
+    最近三天: [moment().subtract(2, "days").startOf("days"), moment()],
+    最近七天: [moment().subtract(6, "days").startOf("days"), moment()],
+    最近三十天: [moment().subtract(29, "days").startOf("days"), moment()],
+  },
+  uploadProps: {
+    exFiles: ["JPG", "PNG", "JPEG", "GIF"],
+    request: async (file: any) => {
+      const url = await fileToBase64(file);
+      return {
+        url,
+      };
+    },
+    maxSize: 1024 * 1024 * 1.8,
+  },
+  defaultComponent: {},
 };

package/src/components/hooks/index.ts

@@ -0,0 +1,53 @@
+import { useContext, useMemo } from "react";
+import type { SelectProps } from "antd";
+import { ConfigContext } from "antd/es/config-provider";
+import type { IFormConfigContextProps } from "../Form/modal";
+import { useFormConfigContext } from "../Form/Context/FormConfigProvider";
+
+interface UseChangeOptionsParams {
+  options?: Record<string, any>[];
+  fieldNames?: SelectProps["fieldNames"];
+}
+export const useChangeOptions = ({
+  options,
+  fieldNames = {},
+}: UseChangeOptionsParams) => {
+  return useMemo(() => {
+    return options?.map((item) => {
+      const { label = "", value = "" } = fieldNames;
+      const { [label]: relLabel, [value]: relVal, ...oItem } = item;
+      return {
+        ...oItem,
+        label: relLabel,
+        value: relVal,
+      };
+    });
+  }, [options]);
+}; //options组装
+
+export const useClassName = (className: string | string[]) => {
+  const config = useContext(ConfigContext);
+  return useMemo(() => {
+    if (Array.isArray(className)) {
+      const classNames = className.map((item) => {
+        return `${config.getPrefixCls()}-${item}`;
+      });
+      return classNames.join(" ");
+    }
+    return `${config.getPrefixCls()}-${className}`;
+  }, [className]);
+};
+
+export const useMatchConfigProps = (matchProps: IFormConfigContextProps) => {
+  const globalConfig = useFormConfigContext();
+  const keys = Object.keys(matchProps);
+  const resultMatchProps: IFormConfigContextProps = {};
+  keys.forEach((key) => {
+    if (!matchProps[key]) {
+      resultMatchProps[key] = globalConfig[key];
+      return;
+    }
+    resultMatchProps[key] = matchProps[key];
+  });
+  return resultMatchProps;
+}; //匹配全局配置