From 228fcb0b7e7d6be8abfcdb3cdca7ccd15d78845b Mon Sep 17 00:00:00 2001
From: Doma <leishenghao@126.com>
Date: Mon, 5 Sep 2022 15:52:06 +0800
Subject: [PATCH] feat: add CheckTreePicker component

---
 src/CheckTreePicker.tsx                | 13 +++++++
 src/__tests__/CheckTreePicker.test.tsx | 50 ++++++++++++++++++++++++++
 src/index.ts                           |  1 +
 3 files changed, 64 insertions(+)
 create mode 100644 src/CheckTreePicker.tsx
 create mode 100644 src/__tests__/CheckTreePicker.test.tsx

diff --git a/src/CheckTreePicker.tsx b/src/CheckTreePicker.tsx
new file mode 100644
index 0000000..ab37efd
--- /dev/null
+++ b/src/CheckTreePicker.tsx
@@ -0,0 +1,13 @@
+import { FieldProps } from "formik";
+import {
+  CheckTreePicker as RsCheckTreePicker,
+  CheckTreePickerProps as RsCheckTreePickerProps,
+} from "rsuite";
+
+import formikCompatible from "./formikCompatible";
+
+export interface CheckTreePickerProps
+  extends FieldProps<string[]>,
+    RsCheckTreePickerProps<string> {}
+
+export const CheckTreePicker = formikCompatible(RsCheckTreePicker);
diff --git a/src/__tests__/CheckTreePicker.test.tsx b/src/__tests__/CheckTreePicker.test.tsx
new file mode 100644
index 0000000..e1c3171
--- /dev/null
+++ b/src/__tests__/CheckTreePicker.test.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+
+import { render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Formik, Form, Field, FormikProps } from "formik";
+import _ from "lodash";
+
+import { CheckTreePicker } from "../CheckTreePicker";
+
+test("适配 formik", async () => {
+  const formikRef = React.createRef<FormikProps<any>>();
+  const { getByText, getByRole } = render(
+    <Formik
+      innerRef={formikRef}
+      initialValues={{
+        fruits: ["Apple"],
+      }}
+      onSubmit={_.noop}
+    >
+      <Form>
+        <Field
+          name="fruits"
+          component={CheckTreePicker}
+          data={[
+            {
+              label: "Apple",
+              value: "Apple",
+            },
+            {
+              label: "Banana",
+              value: "Banana",
+            },
+          ]}
+        />
+      </Form>
+    </Formik>
+  );
+
+  expect(getByRole("combobox")).toHaveTextContent("Apple");
+
+  userEvent.click(getByRole("combobox"));
+  userEvent.click(getByText("Banana"));
+
+  await waitFor(() => {
+    expect(formikRef.current?.values).toHaveProperty("fruits", [
+      "Apple",
+      "Banana",
+    ]);
+  });
+});
diff --git a/src/index.ts b/src/index.ts
index 5f7cd2e..53bcb5f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,7 @@ export * from "./Cascader";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CheckPicker";
+export * from "./CheckTreePicker";
 export * from "./Input";
 export * from "./InputNumber";
 export * from "./RadioGroup";