@hw-component/form 0.0.1 → 0.0.2-bate

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

@@ -1,6 +1,5 @@
 import { HSelect } from "../../components";
-import { Space, Card } from "antd";
-import { useState } from "react";
+import { Space } from "antd";
 export default () => {
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
@@ -12,12 +11,16 @@ export default () => {
       <HSelect
         fieldNames={{ label: "name", value: "value" }}
         options={[
-          { name: "测试1", value: 10 },
-          { name: "测试2", value: 20 },
+          { 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"}

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

package/src/routes.tsx

@@ -1,6 +1,14 @@
 import React from "react";
 import { Navigate } from "react-router-dom";
 import Select from "./pages/Select";
+import Input from "./pages/Input";
+import CheckBox from "./pages/Checkbox";
+import Radio from "./pages/Radio";
+import Switch from "./pages/Switch";
+import DatePicker from "./pages/DatePicker";
+import Upload from "./pages/Upload";
+import Form from "./pages/Form";
+
 export interface RouteModal {
   path?: string;
   name?: string;
@@ -13,22 +21,47 @@ export interface RouteModal {
 const routes: RouteModal[] = [
   {
     index: true,
-    element: <Navigate to="/form/select" replace={true} />,
+    element: <Navigate to="/select" replace={true} />,
   },
   {
-    path: "/form",
-    name: "表单",
-    children: [
-      {
-        path: "/form/select",
-        name: "下拉框",
-        element: <Select />,
-      },
-    ],
+    path: "/select",
+    name: "下拉框",
+    element: <Select />,
+  },
+  {
+    path: "/input",
+    name: "输入框",
+    element: <Input />,
+  },
+  {
+    path: "/checkbox",
+    name: "多选",
+    element: <CheckBox />,
+  },
+  {
+    path: "/radio",
+    name: "单选",
+    element: <Radio />,
   },
   {
-    path: "/table",
-    name: "列表",
+    path: "/switch",
+    name: "开关",
+    element: <Switch />,
+  },
+  {
+    path: "/datePicker",
+    name: "时间",
+    element: <DatePicker />,
+  },
+  {
+    path: "/upload",
+    name: "上传文件",
+    element: <Upload />,
+  },
+  {
+    path: "/form",
+    name: "表单",
+    element: <Form />,
   },
 ];
 

package/es/Select/index.less.js

@@ -1,5 +0,0 @@
-// welcome to ww-building-blocks-tmp
-var styles = undefined;
-
-export { styles as default };
-// powered by ww

package/lib/Select/index.less.js

@@ -1,8 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styles = undefined;
-
-exports.default = styles;
-// powered by h