@hw-component/form 0.0.9-beta-v19 → 0.0.9-beta-v21

package/src/components/TDPicker/modal.ts

@@ -1,48 +0,0 @@
-import type { RangePickerProps } from "antd/es/date-picker";
-import type { SharedTimeProps } from "rc-picker/lib/panels/TimePanel";
-import type { Moment } from "moment";
-import type { DatePickerProps } from "antd";
-import type { TimePickerProps } from "antd";
-import type { DurationInputArg2 } from "moment";
-import type { DateRangePickerValueMapModal } from "../modal";
-import type { addFormatItemModal } from "@/components/Form/modal";
-interface DisabledDateFnModal<T = Moment | undefined> {
-  (currentDate: Moment, value: T): boolean;
-}
-
-export interface HDatePickerProps
-  extends Omit<
-    DatePickerProps,
-    "onChange" | "format" | "ranges" | "disabledDate"
-  > {
-  onChange?: (time?: Moment | string | number) => void;
-  format?: string;
-  showTime?: boolean | SharedTimeProps<Moment>;
-  disabledDate?: DisabledDateFnModal;
-  addFormat?: (config: Record<string, addFormatItemModal>) => void;
-}
-export interface HRangePickerProps
-  extends Omit<
-    RangePickerProps,
-    "onChange" | "format" | "ranges" | "value" | "disabledDate"
-  > {
-  value?: [any, any] | Record<string, any>;
-  onChange?: (val: any) => void;
-  showTime?: boolean | { defaultValue?: Moment[] };
-  format?: string;
-  valueMap?: DateRangePickerValueMapModal;
-  ranges?: RangePickerProps["ranges"] | boolean;
-  addFormat?: (config: Record<string, addFormatItemModal>) => void;
-  disabledDate?: DisabledDateFnModal<Moment[] | undefined>;
-}
-
-export interface HTimePickerProps
-  extends Omit<
-    TimePickerProps,
-    "onChange" | "format" | "ranges" | "disabledDate"
-  > {
-  onChange?: (time?: Moment | string | number) => void;
-  format?: DurationInputArg2 | string;
-  disabledDate?: DisabledDateFnModal;
-  addFormat?: (config: Record<string, addFormatItemModal>) => void;
-}

package/src/components/TextArea/TrimTextArea.tsx

@@ -1,30 +0,0 @@
-import TextArea from "./index";
-import type { TextAreaProps } from "antd/es/input";
-import type { addFormatItemModal } from "../Form/modal";
-import HFormConnect from "../Form/HFormConnect";
-
-interface TrimTextAreaProps extends TextAreaProps {
-  addFormat?: (config: Record<string, addFormatItemModal>) => void;
-}
-const Index = ({ addFormat, ...props }: TrimTextAreaProps) => {
-  addFormat?.({
-    float: {
-      inputValue: (item, initValue) => {
-        const { name: valueName = "" } = item;
-        return {
-          [valueName]: initValue[valueName],
-        };
-      },
-      outputValue: (item, outputValue) => {
-        const { name = "" } = item;
-        const { [name]: itemVal } = outputValue;
-        return {
-          [name]: itemVal?.trim(),
-        };
-      },
-    },
-  });
-  return <TextArea {...props} />;
-};
-
-export default HFormConnect(Index);

package/src/components/TextArea/index.tsx

@@ -1,8 +0,0 @@
-import { Input } from "antd";
-import type { TextAreaProps } from "antd/es/input";
-export default ({
-  autoSize = { minRows: 4, maxRows: 4 },
-  ...props
-}: TextAreaProps) => {
-  return <Input.TextArea autoSize={autoSize} {...props} />;
-};

package/src/components/Upload/Btn.tsx

@@ -1,24 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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 mkSubFileList = (fileList: UploadFile[], maxCount = 1) => {
-  const len = fileList.length;
-  if (len > maxCount) {
-    return fileList.slice(len - maxCount);
-  }
-  return fileList;
-};
-
-const Index = ({
-  placeholder = "请输入文件地址",
-  value = [],
-  onChange,
-  mediaType,
-  ...props
-}: IUrlUploadProps) => {
-  const { maxCount } = props;
-  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?.(mkSubFileList(newFileList, maxCount));
-    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: mkSubFileList([...value, ...newFileList], maxCount),
-      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

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

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

@@ -1,79 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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);
-    };
-  });
-};