@hw-component/form 0.0.1 → 0.0.2-beta-v1

package/src/pages/ModalForm/index.tsx

@@ -0,0 +1,127 @@
+import { Button } from "antd";
+import { HModalForm, 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 }],
+  },
+];
+export default () => {
+  const modalForm = useHDiaLogForm();
+  return (
+    <>
+      <Button
+        onClick={() => {
+          modalForm.show({
+            initialValues: {
+              check1: 1,
+              testStart: "1694747960",
+              testEnd: "1693538359",
+              op: 1,
+              opInput: "12121",
+            },
+          });
+        }}
+      >
+        打开
+      </Button>
+      <HModalForm
+        configData={data}
+        labelWidth={88}
+        modalForm={modalForm}
+        title="测试"
+      />
+    </>
+  );
+};

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,16 @@
 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";
+import ModalForm from "./pages/ModalForm";
+import DrawerForm from "./pages/DrawerForm";
+
 export interface RouteModal {
   path?: string;
   name?: string;
@@ -13,22 +23,57 @@ export interface RouteModal {
 const routes: RouteModal[] = [
   {
     index: true,
-    element: <Navigate to="/form/select" replace={true} />,
+    element: <Navigate to="/select" replace={true} />,
+  },
+  {
+    path: "/select",
+    name: "下拉框",
+    element: <Select />,
+  },
+  {
+    path: "/input",
+    name: "输入框",
+    element: <Input />,
+  },
+  {
+    path: "/checkbox",
+    name: "多选",
+    element: <CheckBox />,
+  },
+  {
+    path: "/radio",
+    name: "单选",
+    element: <Radio />,
+  },
+  {
+    path: "/switch",
+    name: "开关",
+    element: <Switch />,
+  },
+  {
+    path: "/datePicker",
+    name: "时间",
+    element: <DatePicker />,
+  },
+  {
+    path: "/upload",
+    name: "上传文件",
+    element: <Upload />,
   },
   {
     path: "/form",
     name: "表单",
-    children: [
-      {
-        path: "/form/select",
-        name: "下拉框",
-        element: <Select />,
-      },
-    ],
+    element: <Form />,
+  },
+  {
+    path: "/modalForm",
+    name: "弹窗表单",
+    element: <ModalForm />,
   },
   {
-    path: "/table",
-    name: "列表",
+    path: "/drawerForm",
+    name: "抽屉表单",
+    element: <DrawerForm />,
   },
 ];
 

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