From 9146d5ef207201a6ff8f42fb3ca66e7929335c1a Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Fri, 19 Apr 2024 17:50:47 +0800
Subject: [PATCH] feat(cascader): add closeOnSelect api (#2802)

---
 .changeset/honest-spiders-shout.md            |   5 +
 .changeset/many-steaks-drive.md               |   5 +
 packages/ui/cascader/src/Cascader.tsx         |   9 +-
 packages/ui/cascader/src/use-cascader.ts      |   5 +
 .../ui/cascader/stories/index.stories.tsx     |   1 +
 .../cascader/stories/select-close.stories.tsx | 143 ++++++++++++++++++
 6 files changed, 166 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/honest-spiders-shout.md
 create mode 100644 .changeset/many-steaks-drive.md
 create mode 100644 packages/ui/cascader/stories/select-close.stories.tsx

diff --git a/.changeset/honest-spiders-shout.md b/.changeset/honest-spiders-shout.md
new file mode 100644
index 000000000..4e0d7bf9f
--- /dev/null
+++ b/.changeset/honest-spiders-shout.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(cascader): add closeOnSelect api
diff --git a/.changeset/many-steaks-drive.md b/.changeset/many-steaks-drive.md
new file mode 100644
index 000000000..f483d1aec
--- /dev/null
+++ b/.changeset/many-steaks-drive.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/cascader": minor
+---
+
+feat: add closeOnSelect api
diff --git a/packages/ui/cascader/src/Cascader.tsx b/packages/ui/cascader/src/Cascader.tsx
index 831e5ac57..6ed121376 100644
--- a/packages/ui/cascader/src/Cascader.tsx
+++ b/packages/ui/cascader/src/Cascader.tsx
@@ -57,6 +57,7 @@ export const Cascader = forwardRef<HTMLDivElement | null, CascaderProps>((props,
     onClose,
     renderExtraFooter,
     dropdownColumnRender,
+    closeOnSelect = true,
     ...rest
   } = props
   const i18n = useLocaleContext()
@@ -79,8 +80,12 @@ export const Cascader = forwardRef<HTMLDivElement | null, CascaderProps>((props,
   ) => {
     onSelectProp?.(value, item, itemPaths)
     setSelectedItem(item)
-    // 关闭弹窗
-    menuVisibleAction.off()
+
+    // 选中子节点时一定关闭弹窗，或者点击父节点并且 closeOnSelect 为 true 时也可以关闭弹窗
+    if (!item.children || (item.children.length > 0 && closeOnSelect)) {
+      // 关闭弹窗
+      menuVisibleAction.off()
+    }
   }
 
   // 拦截 titleRender，自定义高亮展示
diff --git a/packages/ui/cascader/src/use-cascader.ts b/packages/ui/cascader/src/use-cascader.ts
index 6cc950fa0..4683a3b02 100644
--- a/packages/ui/cascader/src/use-cascader.ts
+++ b/packages/ui/cascader/src/use-cascader.ts
@@ -178,6 +178,11 @@ export interface UseCascaderProps {
    * 是否启用选择即改变功能
    */
   changeOnSelect?: boolean
+  /**
+   * 是否启用选择即关闭（用于 changeOnSelect 模式下控制父节点点击交互）
+   * @default true
+   */
+  closeOnSelect?: boolean
   /**
    * 将选项拍平展示，不支持 `onLoadChildren` 异步加载交互。暂不对外暴露
    * @private
diff --git a/packages/ui/cascader/stories/index.stories.tsx b/packages/ui/cascader/stories/index.stories.tsx
index e787db21b..d29afce5c 100644
--- a/packages/ui/cascader/stories/index.stories.tsx
+++ b/packages/ui/cascader/stories/index.stories.tsx
@@ -7,6 +7,7 @@ export * from './disabled.stories'
 export * from './search.stories'
 export * from './filter-options.stories'
 export * from './select-change.stories'
+export * from './select-close.stories'
 export * from './hover-expand.stories'
 export * from './dynamic.stories'
 export * from './display-render.stories'
diff --git a/packages/ui/cascader/stories/select-close.stories.tsx b/packages/ui/cascader/stories/select-close.stories.tsx
new file mode 100644
index 000000000..43ba4efb2
--- /dev/null
+++ b/packages/ui/cascader/stories/select-close.stories.tsx
@@ -0,0 +1,143 @@
+import React from 'react'
+import Cascader from '../src'
+
+/**
+ * @title 控制选择时是否关闭弹窗
+ * @desc 用于 changeOnSelect 模式下控制点击父节点时是否关闭弹窗
+ */
+export const SelectClose = () => {
+  const [data] = React.useState([
+    {
+      id: '0',
+      title: '0',
+      children: [
+        {
+          id: '0-0',
+          title: '0-0',
+          children: [
+            {
+              id: '0-0-0',
+              title: '0-0-0',
+            },
+            {
+              id: '0-0-1',
+              title: '0-0-1',
+            },
+            {
+              id: '0-0-2',
+              title: '0-0-2',
+            },
+          ],
+        },
+        {
+          id: '0-1',
+          title: '0-1',
+          children: [
+            {
+              id: '0-1-0',
+              title: '0-1-0',
+            },
+            {
+              id: '0-1-1',
+              title: '0-1-1',
+            },
+          ],
+        },
+        {
+          id: '0-2',
+          title: '0-2',
+          disabled: false,
+          children: [
+            {
+              id: '0-2-0',
+              title: '0-2-0',
+            },
+            {
+              id: '0-2-1',
+              title: '0-2-1',
+            },
+          ],
+        },
+        {
+          id: '0-3',
+          title: '0-3',
+          children: [
+            {
+              id: '0-3-0',
+              title: '0-3-0',
+            },
+            {
+              id: '0-3-1',
+              title: '0-3-1',
+            },
+            {
+              id: '0-3-2',
+              title: '0-3-2',
+            },
+          ],
+        },
+        {
+          id: '0-4',
+          title: '0-4',
+          children: [
+            {
+              id: '0-4-0',
+              title: '0-4-0',
+            },
+            {
+              id: '0-4-1',
+              title: '0-4-1',
+            },
+          ],
+        },
+        {
+          id: '0-5',
+          title: '0-5',
+          children: [
+            {
+              id: '0-5-0',
+              title: '0-5-0',
+            },
+            {
+              id: '0-5-1',
+              title: '0-5-1',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: '1',
+      title: '1',
+      children: [
+        {
+          id: '1-0',
+          title: '1-0',
+          disabledCheckbox: true,
+        },
+        {
+          id: '1-1',
+          title: '1-1',
+        },
+      ],
+    },
+  ])
+
+  return (
+    <>
+      <h1>SelectClose</h1>
+      <div className="cascader-select-close__wrap">
+        <Cascader
+          style={{ width: 240 }}
+          placeholder="请选择品类"
+          changeOnSelect
+          closeOnSelect={false}
+          // expandTrigger="hover"
+          searchPlaceholder="请输入搜索内容"
+          data={data}
+          onChange={console.log}
+        />
+      </div>
+    </>
+  )
+}