@hw-component/form 0.0.1-bate

package/src/components/Upload/index.tsx

@@ -0,0 +1,85 @@
+import { Upload } from "antd";
+import Btn from "./Btn";
+import React, { useImperativeHandle, useMemo, useState } from "react";
+import type { IPreviewProps } from "./Preview";
+import Preview from "./Preview";
+import { useChange } from "./hooks/change";
+import type { IUpLoadProps, IUploadRefModal } from "./modal";
+import { useProps } from "./hooks/propsMaker";
+
+const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
+  {
+    value = [],
+    onChange,
+    listType = "picture-card",
+    exFiles,
+    maxCount = 1,
+    maxRowNum = 3,
+    onPreview,
+    request,
+    maxSize,
+    ...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;
+
+  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 React.forwardRef(Index);

package/src/components/Upload/modal.ts

@@ -0,0 +1,31 @@
+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";
+
+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;
+}
+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

@@ -0,0 +1,40 @@
+import moment from "moment";
+import type { IFormConfigContextProps } from "./Form/modal";
+import { fileToBase64 } from "./Upload/util";
+export const baseConfig: IFormConfigContextProps = {
+  fieldNames: {
+    label: "label",
+    value: "value",
+  },
+  valueCheckMap: {
+    checked: true,
+    noChecked: false,
+  },
+  valueSwitchMap: {
+    open: true,
+    close: false,
+  },
+  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,
+  },
+};

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;
+}; //匹配全局配置

package/src/components/index.tsx

@@ -0,0 +1,21 @@
+import "./styles/index.less";
+import FormConfig from "./Form/config";
+import PageHandler from "./PageHandler";
+export { default as HForm } from "./Form";
+export { default as useHForm } from "./Form/hooks/useHForm";
+export const HSelect = FormConfig.select;
+export const HInput = FormConfig.input;
+export const HSelectInput = FormConfig.selectInput;
+export const HUpload = FormConfig.upload;
+export const HUrlUpload = FormConfig.urlUpload;
+export const HButtonInput = FormConfig.buttonInput;
+export const HCheckBox = FormConfig.checkBox;
+export const HSwitch = FormConfig.switch;
+export const HCheckboxGroup = FormConfig.checkboxGroup;
+export const HDatePicker = FormConfig.datePicker;
+export const HRangePicker = FormConfig.rangePicker.Component;
+export const HRadioGroup = FormConfig.radioGroup;
+export const HTimePicker = FormConfig.timePicker;
+export const HInputNumber = FormConfig.inputNumber;
+export const HPageHandler = PageHandler;
+export const HFormConfigProvider = FormConfig.formConfigProvider;

package/src/components/modal.ts

@@ -0,0 +1,15 @@
+export interface ValueCheckMapModal {
+  checked?: any;
+  noChecked?: any;
+}
+export type PromiseFnResult<T = any, R = any> = (params: T) => Promise<R>;
+export interface ValueSwitchMapModal {
+  open?: any;
+  close?: any;
+}
+type NameProvider = (name: string) => string;
+
+export interface DateRangePickerValueMapModal {
+  start?: string | NameProvider;
+  end?: string | NameProvider;
+}

package/src/components/styles/index.less

@@ -0,0 +1,2 @@
+@import "../Select/index.less";
+@import "../Form/index.less";

package/src/components/styles/local.less

@@ -0,0 +1 @@
+@ant-prefix: ant;

package/src/components/typings.d.ts

@@ -0,0 +1,11 @@
+declare module "*.css";
+declare module "*.less";
+declare module "*.scss";
+declare module "*.sass";
+declare module "*.svg";
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.gif";
+declare module "*.bmp";
+declare module "*.tiff";

package/src/index.less

@@ -0,0 +1,20 @@
+.layout {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+}
+.menu {
+  width: 256px !important;
+  height: 100vh;
+}
+
+.body {
+  width: calc(100vw - 256px);
+  height: 100vh;
+  padding: 16px;
+  overflow: hidden;
+  background-color: #fff;
+}

package/src/index.tsx

@@ -0,0 +1,12 @@
+import { render } from "react-dom";
+import App from "./app";
+import React from "react";
+import "antd/dist/antd.css";
+import zhCN from "antd/es/locale/zh_CN";
+import { ConfigProvider } from "antd";
+render(
+  <ConfigProvider locale={zhCN}>
+    <App />
+  </ConfigProvider>,
+  document.getElementById("root")
+);

package/src/pages/Checkbox/index.tsx

@@ -0,0 +1,15 @@
+import { Space } from "antd";
+import { HCheckboxGroup } from "../../components";
+export default () => {
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HCheckboxGroup
+        options={[
+          { label: "测试", value: "uu" },
+          { label: "测试1", value: "uu1" },
+        ]}
+        value={{ uu: 0 }}
+      />
+    </Space>
+  );
+};

package/src/pages/DatePicker/index.tsx

@@ -0,0 +1,33 @@
+import { Space } from "antd";
+import { HDatePicker, HRangePicker, HTimePicker } from "../../components";
+import { useState } from "react";
+export default () => {
+  const [timeVal, setTimeVal] = useState({
+    start: 1692070068,
+    end: 1692242868,
+  });
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HDatePicker
+        value={1691487319}
+        onChange={(val) => {
+          console.log(val);
+        }}
+      />
+      <HRangePicker
+        value={timeVal}
+        valueMap={{ start: "start", end: "end" }}
+        onChange={(val) => {
+          console.log(val);
+          setTimeVal(val);
+        }}
+      />
+      <HTimePicker
+        value={55135}
+        onChange={(val) => {
+          console.log(val);
+        }}
+      />
+    </Space>
+  );
+};

package/src/pages/Form/index.tsx

@@ -0,0 +1,146 @@
+import { HForm, HFormConfigProvider, useHForm } from "../../components";
+
+const data = [
+  {
+    label: "输入框",
+    name: "name",
+    rules: [
+      () => {
+        return {
+          required: true,
+        };
+      },
+    ],
+  },
+  {
+    label: "数字",
+    name: "sz",
+    type: "inputNumber",
+    rules: [{ required: true }],
+  },
+  {
+    label: "下拉输入框",
+    name: "selectInput",
+    type: "selectInput",
+    rules: [{ required: true }],
+    itemProps: {
+      valueName: {
+        select: "op",
+        input: "opInput",
+      },
+      selectProps: {
+        options: [{ label: "测试", value: 1 }],
+      },
+    },
+  },
+  {
+    label: "按钮输入框",
+    name: "buttonInput",
+    type: "buttonInput",
+    children: "点击",
+    rules: [{ required: true }],
+  },
+  {
+    label: "选择",
+    name: "checkboxGroup",
+    type: "checkboxGroup",
+    rules: [{ required: true }],
+    helper: "帮助我",
+    options: [
+      { label: "选择1", value: "check1" },
+      { label: "选择2", value: "check2" },
+    ],
+  },
+  {
+    label: "开关",
+    name: "switch",
+    type: "switch",
+    rules: [{ required: true }],
+  },
+  {
+    label: "时间",
+    name: "datePicker",
+    type: "datePicker",
+    hover: "时间选择",
+    helper: "帮助我",
+    rules: [{ required: true }],
+  },
+  {
+    label: "时间段",
+    name: "rangePicker",
+    type: "rangePicker",
+    helper: "帮助我",
+    rules: [{ required: true }],
+    itemProps: {
+      valueMap: {
+        start: "testStart",
+        end: "testEnd",
+      },
+    },
+  },
+  {
+    label: "时分秒",
+    name: "timePicker",
+    type: "timePicker",
+    rules: [{ required: true }],
+  },
+  {
+    label: "文件",
+    name: "upload",
+    type: "upload",
+    rules: [{ required: true }],
+  },
+  {
+    label: "地址文件",
+    name: "urlUpload",
+    type: "urlUpload",
+    rules: [{ required: true }],
+  },
+  {
+    type: "submit",
+  },
+];
+
+export default () => {
+  const form = useHForm();
+  return (
+    <div style={{ overflow: "auto", height: "90vh" }}>
+      <HFormConfigProvider
+        valueSwitchMap={{ open: 1, close: 2 }}
+        valueCheckMap={{ noChecked: 0, checked: 1 }}
+      >
+        <HForm
+          configData={data}
+          labelWidth={200}
+          form={form}
+          onFinish={(value) => {
+            console.log(value);
+          }}
+          onValuesChange={(val) => {
+            console.log(val);
+          }}
+          infoRequest={() => {
+            return new Promise<any>((resolve) => {
+              setTimeout(() => {
+                resolve({
+                  check1: 1,
+                  // testStart: "1694747960",
+                  // testEnd: "1693538359",
+                  op: 1,
+                  opInput: "12121",
+                });
+              }, 3000);
+            });
+          }}
+          request={(params) => {
+            return new Promise<any>((resolve) => {
+              setTimeout(() => {
+                resolve(params);
+              }, 3000);
+            });
+          }}
+        />
+      </HFormConfigProvider>
+    </div>
+  );
+};

package/src/pages/Input/index.tsx

@@ -0,0 +1,22 @@
+import {
+  HInput,
+  HSelectInput,
+  HButtonInput,
+  HInputNumber,
+} from "../../components";
+import { Space } from "antd";
+export default () => {
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HInput placeholder="基础输入框" />
+      <HSelectInput
+        placeholder="基础输入框"
+        selectProps={{
+          options: [{ label: "1", value: 1 }],
+        }}
+      />
+      <HButtonInput>点我</HButtonInput>
+      <HInputNumber />
+    </Space>
+  );
+};

package/src/pages/Radio/index.tsx

@@ -0,0 +1,18 @@
+import { Space } from "antd";
+import { HRadioGroup } from "../../components";
+export default () => {
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HRadioGroup
+        options={[
+          { label: "测试2", value: "2" },
+          { label: "测试1", value: "1" },
+        ]}
+        value={"1"}
+        onChange={(value) => {
+          console.log(value);
+        }}
+      />
+    </Space>
+  );
+};

package/src/pages/Select/index.tsx

@@ -0,0 +1,57 @@
+import { HSelect } from "../../components";
+import { Space } from "antd";
+export default () => {
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HSelect
+        options={[{ label: "测试", value: 1 }]}
+        value={100}
+        placeholder="基础"
+      />
+      <HSelect
+        fieldNames={{ label: "name", value: "value" }}
+        options={[
+          { name: "测试1", value: 10, userId: 112321 },
+          { name: "测试2", value: 20, userId: 112321 },
+        ]}
+        placeholder="多选"
+        mode={"multiple"}
+        onChange={(val, option) => {
+          console.log(val, option);
+        }}
+        allSelect={true}
+        showSearch={true}
+      />
+      <HSelect
+        mode={"tags"}
+        placeholder="tags模式"
+        showSearch={true}
+        options={[
+          { label: "测试1", value: 10 },
+          { label: "测试2", value: 20 },
+        ]}
+      />
+      <HSelect
+        serviceSearch={true}
+        request={(params) => {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve([
+                {
+                  label: `我是搜索文案${params.inputValue}`,
+                  value: new Date().valueOf(),
+                },
+                {
+                  label: `我是搜索文案${params.inputValue}`,
+                  value: new Date().valueOf() + 1,
+                },
+              ]);
+            }, 2000);
+          });
+        }}
+        placeholder="远程搜索"
+        mode={"multiple"}
+      />
+    </Space>
+  );
+};

package/src/pages/Switch/index.tsx

@@ -0,0 +1,18 @@
+import { Space } from "antd";
+import { HSwitch } from "../../components";
+export default () => {
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HSwitch
+        value={1}
+        beforeText="开关"
+        valueMap={{ open: 1, close: 0 }}
+        onChange={(val) => {
+          console.log(val);
+        }}
+      >
+        打开
+      </HSwitch>
+    </Space>
+  );
+};

package/src/pages/Upload/index.tsx

@@ -0,0 +1,14 @@
+import { Space } from "antd";
+import { HUrlUpload, HUpload } from "../../components";
+import React, { useState } from "react";
+
+export default () => {
+  const [files, setFiles] = useState([]);
+  const [files1, setFiles1] = useState([]);
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HUpload value={files} onChange={setFiles} multiple={true} maxCount={3} />
+      <HUrlUpload value={files1} onChange={setFiles1} />
+    </Space>
+  );
+};