Merge pull request XiaoMi#2805 from XiaoMi/feature/cascader/2802

feat(cascader): add closeOnSelect api (XiaoMi#2802)
xiamiao1121 · Apr 19, 2024 · 6804305 · 6804305
2 parents 0acb4e4 + 9146d5e
commit 6804305
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 2 deletions.
diff --git a/.changeset/honest-spiders-shout.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+    </>
+  )
+}