Browse Source

:construction: add ProSelect demo

Jeremy Zheng 3 years ago
parent
commit
59c79306ec
2 changed files with 57 additions and 0 deletions
  1. 54 0
      dashboard/src/components/nut/Form.tsx
  2. 3 0
      dashboard/src/components/nut/Home.tsx

+ 54 - 0
dashboard/src/components/nut/Form.tsx

@@ -0,0 +1,54 @@
+import { useRef } from "react";
+import { ProForm, ProFormSelect } from "@ant-design/pro-components";
+import type { ProFormInstance } from "@ant-design/pro-components";
+import { Button } from "antd";
+
+interface IFormData {
+  sv: number;
+}
+
+const Widget = () => {
+  const formRef = useRef<ProFormInstance>();
+  const svCur = 5;
+  const onWhat = () => {
+    const it = formRef.current?.getFieldValue("sv") || [];
+    console.log(it);
+
+    if (!it.includes(svCur)) {
+      it.push(svCur);
+    }
+
+    formRef.current?.setFieldsValue({ sv: it });
+  };
+  return (
+    <ProForm<IFormData>
+      name="demo"
+      formRef={formRef}
+      submitter={{
+        render: (props, doms) => {
+          return [
+            ...doms,
+            <Button.Group key="refs" style={{ display: "block" }}>
+              <Button htmlType="button" onClick={onWhat} key="what">
+                What?
+              </Button>
+            </Button.Group>,
+          ];
+        },
+      }}
+    >
+      <ProFormSelect
+        width="md"
+        name="sv"
+        mode="multiple"
+        allowClear
+        dependencies={["sv"]}
+        options={Array.from(Array(10).keys()).map((x) => {
+          return { value: x, label: `V${x}`, disabled: x === svCur };
+        })}
+      />
+    </ProForm>
+  );
+};
+
+export default Widget;

+ 3 - 0
dashboard/src/components/nut/Home.tsx

@@ -3,12 +3,15 @@ import code_png from "../../assets/nut/code.png";
 import MarkdownForm from "./MarkdownForm";
 import MarkdownShow from "./MarkdownShow";
 import FontBox from "./FontBox";
+import DemoForm from "./Form";
 
 const Widget = () => {
   return (
     <div>
       <h1>Home</h1>
       <br />
+      <DemoForm />
+      <br />
       <FontBox />
       <br />
       <MarkdownShow body="- Hello, **《mint》**!" />