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

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,14 @@
+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" },
+        ]}
+      />
+    </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/DrawerForm/index.tsx

@@ -0,0 +1,145 @@
+import { Button } from "antd";
+import { HDrawerForm, useHDialogForm } 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 }],
+  },
+  {
+    label: "验证码",
+    type: "verificationCodeInput",
+    name: "verificationCodeInput",
+    itemProps: {
+      request: () => {
+        return Promise.resolve({ code: 200 });
+      },
+    },
+  },
+];
+let num = 0;
+export default () => {
+  const modalForm = useHDialogForm();
+  return (
+    <>
+      <Button
+        onClick={() => {
+          num++;
+          modalForm.show({
+            initialValues: {
+              check1: 1,
+              op: 1,
+              opInput: num,
+            },
+          });
+        }}
+      >
+        显示
+      </Button>
+      <Button
+        onClick={() => {
+          modalForm.show();
+        }}
+      >
+        打开
+      </Button>
+      <HDrawerForm
+        autoClear={false}
+        configData={data}
+        labelWidth={88}
+        dialogForm={modalForm}
+        title="测试"
+      />
+    </>
+  );
+};

package/src/pages/Form/index.tsx

@@ -0,0 +1,172 @@
+import { HForm, HFormConfigProvider, useHForm } from "../../components";
+import { useState } from "react";
+import { Button, DatePicker, Form, Input } from "antd";
+
+const formData = (options) => {
+  const op = [
+    {
+      key: 1,
+      value: "是",
+    },
+    {
+      key: 0,
+      value: "否",
+    },
+  ];
+  return [
+    {
+      label: "测试",
+      className:"hdjd",
+    },
+    {
+      label: "测试1",
+      type:"select"
+    },
+    {
+      label: "测试1",
+      type:"inputNumber"
+    },
+    {
+      label: "选择",
+      name: "checkboxGroup",
+      type: "checkboxGroup",
+      rules: [{ required: true }],
+      helper: "帮助我",
+      options: [
+        { value: "选择1", key: "check1" },
+        { value: "选择2", key: "check2" },
+      ],
+      direction: "vertical",
+      labelAlign: "topLeft",
+    },
+    {
+      label: "开关",
+      name: "switch",
+      type: "switch",
+      rules: [{ required: true }],
+      itemProps: {
+        valueMap: {
+          open: 1,
+          close: 0,
+        },
+      },
+    },
+    {
+      type: "submit",
+      itemProps: {
+        extraList: [
+          <Button
+            key="wh"
+            onClick={() => {
+              console.log("起飞");
+            }}
+          >
+            芜湖
+          </Button>,
+          "666",
+          "reset",
+        ],
+      },
+    },
+    {
+      type: "submit",
+      itemProps: {
+        extraList: [
+          <Button
+            key="wh"
+            onClick={() => {
+              console.log("起飞");
+            }}
+          >
+            芜湖
+          </Button>,
+          <Ttta key="aa" />,
+          "666",
+          "submit",
+          "reset",
+        ],
+      },
+    },
+  ];
+};
+function Ttta({ form }) {
+  return (
+    <div
+      onClick={() => {
+        console.log("form", form);
+        form.setFieldsValue({ switch: 1 });
+      }}
+    >
+      ttta
+    </div>
+  );
+}
+
+const Test = (props) => {
+  return <div>ffff</div>;
+};
+export default () => {
+  const form = useHForm();
+  const [options, setOptions] = useState([{ label: "1", value: 1 }]);
+  const [aForm] = Form.useForm();
+  return (
+    <div style={{ overflow: "auto", height: "90vh" }}>
+      <Form form={aForm} initialValues={{ ttim: "132123" }}>
+        <Form.Item name="ttim" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+      </Form>
+      <HFormConfigProvider
+        valueSwitchMap={{ open: 1, close: 2 }}
+        valueCheckMap={{ noChecked: 0, checked: 1 }}
+        defaultComponent={{
+          test: Test,
+        }}
+        itemProps={{
+          style:{
+             borderRadius:10
+          }
+        }}
+        fieldNames={{
+          label: "value",
+          value: "key",
+        }}
+      >
+        <HForm
+          configData={formData(options)}
+          labelWidth={200}
+          form={form}
+          labelAlign={"right"}
+          submitLoading={true}
+          onFinish={(value) => {
+            console.log(value);
+          }}
+          onValuesChange={(val) => {
+            console.log(val, "onValuesChange");
+          }}
+          request={(params) => {
+            return new Promise<any>((resolve) => {
+              setTimeout(() => {
+                resolve(params);
+              }, 3000);
+            });
+          }}
+        />
+      </HFormConfigProvider>
+      <div
+        onClick={() => {
+          aForm.resetFields();
+        }}
+      >
+        点我
+      </div>
+      <div
+        onClick={() => {
+          form.resetFieldsInitValue();
+        }}
+      >
+        重置
+      </div>
+    </div>
+  );
+};

package/src/pages/Input/index.tsx

@@ -0,0 +1,30 @@
+import {
+  HInput,
+  HSelectInput,
+  HButtonInput,
+  HInputNumber,
+  HColorInput,
+  HVerificationCodeInput,
+} 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 />
+      <HColorInput />
+      <HVerificationCodeInput
+        request={() => {
+          return Promise.resolve({ code: 200 });
+        }}
+      />
+    </Space>
+  );
+};

package/src/pages/ModalForm/index.tsx

@@ -0,0 +1,195 @@
+import { Button } from "antd";
+import {
+  HModalForm,
+  useHDialogForm,
+  HFormConfigProvider,
+} from "../../components";
+import { useState } from "react";
+import { ShowParamsModal } from "@/components/DialogForm/modal";
+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 }],
+  },
+  {
+    label: "下拉框",
+    name: "select",
+    type: "select",
+    dispatch: {
+      fnKey: "reload",
+      dependencies: ["selectInput", "sz"],
+      manual: false,
+    },
+    itemProps: {
+      request: (params = {}, values) => {
+        const { label = "123", value = 1 } = params;
+        return Promise.resolve([{ label, value }]);
+      },
+      showSearch: true,
+    },
+    rules: [{ required: true }],
+  },
+  {
+    label: "验证码",
+    type: "verificationCodeInput",
+    name: "verificationCodeInput",
+    itemProps: {
+      request: () => {
+        return Promise.resolve({ code: 200 });
+      },
+    },
+  },
+];
+let num = 0;
+export default () => {
+  const modalForm = useHDialogForm();
+  return (
+    <>
+      <Button
+        onClick={() => {
+          num++;
+          modalForm.show({
+            params: {
+              name: num,
+            },
+          });
+        }}
+      >
+        打开
+      </Button>
+      <Button
+        onClick={() => {
+          modalForm.show({
+            params: {
+              name: num,
+            },
+            initialValues: {
+              name: "name",
+            },
+          });
+        }}
+      >
+        宣誓
+      </Button>
+      <HFormConfigProvider
+        uploadProps={{
+          request: () => {
+            return Promise.resolve({
+              url: "https://gw.alicdn.com/imgextra/i2/O1CN01MYuwJQ1GXVBWryCFJ_!!6000000000632-2-tps-1125-570.png_468x468q75.jpg_.webp",
+            });
+          },
+        }}
+      >
+        <HModalForm
+          configData={data}
+
+          labelWidth={88}
+          request={(values, params)=>{
+             console.log(values,params)
+          }}
+          contentRender={(node, form) => {
+            return (
+              <div>
+                <div>测试一些</div>
+                {node}
+              </div>
+            );
+          }}
+          dialogForm={modalForm}
+          title={<div>fff</div>}
+        />
+      </HFormConfigProvider>
+    </>
+  );
+};

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>
+  );
+};