From 3f32cfa9329aaf95db6bcfa89b6245940af29edb Mon Sep 17 00:00:00 2001
From: i18u <iahu1988@gmail.com>
Date: Wed, 9 Dec 2020 14:37:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20groupName=20?=
 =?UTF-8?q?=E4=B8=8D=E6=98=BE=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98=20(#595)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/cascader/single-menu.tsx   |  8 ++---
 .../basic/cascader/demo/custom-group-name.tsx | 30 +++++++++++++++++++
 .../components/basic/cascader/demo/group.tsx  | 17 +++++++++--
 .../components/basic/cascader/index.zh-CN.md  |  3 +-
 4 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 packages/website/src/components/basic/cascader/demo/custom-group-name.tsx

diff --git a/packages/components/src/components/cascader/single-menu.tsx b/packages/components/src/components/cascader/single-menu.tsx
index b5a9f52f4a..f0a63faffc 100644
--- a/packages/components/src/components/cascader/single-menu.tsx
+++ b/packages/components/src/components/cascader/single-menu.tsx
@@ -25,7 +25,7 @@ export interface Props extends Omit<MenuItemProps, 'dataSource' | 'hasChild' | '
   offsetLeft?: number;
   offsetTop?: number;
   getEmpty?: (keyword?: string) => React.ReactElement;
-  groupName?: MaybeElementOrFn;
+  groupName?: boolean | MaybeElementOrFn;
   parentMenu?: HTMLDivElement;
   expandedId?: NodeData['value'];
   autoFocus?: boolean;
@@ -45,7 +45,7 @@ const SingleMenu = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
     parentsData = [],
     header,
     footer,
-    groupName,
+    groupName = false,
     getEmpty,
     parentMenu,
     expandedId,
@@ -83,7 +83,7 @@ const SingleMenu = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
       const firstItem = wrapRef.current.querySelector('.cascader-menu-item-inner') as HTMLElement;
       setTimeout(() => {
         firstItem?.focus();
-      }, 10);
+      }, 50);
     }
   }, [autoFocus, wrapRef]);
 
@@ -107,7 +107,7 @@ const SingleMenu = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
       <div key={groupId} className={withWrapperCls('group')}>
         {groupName && (
           <div className={withWrapperCls('group-name')}>
-            {getMayBeElement(groupName, groupData[groupId]) ?? groupData[groupId][0].groupName}
+            {groupName === true ? groupData[groupId][0].groupName : getMayBeElement(groupName, groupData[groupId])}
           </div>
         )}
         {groupData[groupId].map((data, i) => (
diff --git a/packages/website/src/components/basic/cascader/demo/custom-group-name.tsx b/packages/website/src/components/basic/cascader/demo/custom-group-name.tsx
new file mode 100644
index 0000000000..6d88c1bfb0
--- /dev/null
+++ b/packages/website/src/components/basic/cascader/demo/custom-group-name.tsx
@@ -0,0 +1,30 @@
+import '@gio-design/components/es/components/cascader/style/index.css';
+import '@gio-design/components/es/components/input/style/index.css';
+
+import React from 'react';
+
+import { Cascader } from '@gio-design/components';
+
+const dataSource = [
+  { label: 'option A-1', value: 'a-1', groupId: 'a', groupName: '节能' },
+  { label: 'option A-2', value: 'a-2', groupId: 'a' },
+  { label: 'option B-1', value: 'b-1', groupId: 'b', groupName: '哈哈' },
+  { label: 'option B-2', value: 'b-2', groupId: 'b' },
+];
+
+const Basic = (): JSX.Element => {
+  const groupNameIcons = { a: '🎃', b: '🎄' };
+
+  return (
+    <Cascader
+      dataSource={dataSource}
+      groupName={(d) => (
+        <div role="img" aria-label="groupName icon">
+          {groupNameIcons[d[0].groupId]}
+        </div>
+      )}
+    />
+  );
+};
+
+export default Basic;
diff --git a/packages/website/src/components/basic/cascader/demo/group.tsx b/packages/website/src/components/basic/cascader/demo/group.tsx
index 10bd3c3905..183dfc3731 100644
--- a/packages/website/src/components/basic/cascader/demo/group.tsx
+++ b/packages/website/src/components/basic/cascader/demo/group.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Cascader } from '@gio-design/components';
+import React, { useState } from 'react';
+import { Cascader, Toggles, Grid } from '@gio-design/components';
 
 import '@gio-design/components/es/components/cascader/style/index.css';
 import '@gio-design/components/es/components/input/style/index.css';
@@ -12,7 +12,18 @@ const dataSource = [
 ];
 
 const Basic = (): JSX.Element => {
-  return <Cascader dataSource={dataSource} />;
+  const [groupName, setGroupName] = useState(true);
+
+  return (
+    <div>
+      <Grid>
+        <Toggles defaultChecked={groupName} onChange={setGroupName} />
+        <span> 显示分组名</span>
+      </Grid>
+
+      <Cascader dataSource={dataSource} groupName={groupName} />
+    </div>
+  );
 };
 
 export default Basic;
diff --git a/packages/website/src/components/basic/cascader/index.zh-CN.md b/packages/website/src/components/basic/cascader/index.zh-CN.md
index bbfdc3d7f2..81d9c83e72 100644
--- a/packages/website/src/components/basic/cascader/index.zh-CN.md
+++ b/packages/website/src/components/basic/cascader/index.zh-CN.md
@@ -21,6 +21,7 @@ group:
 ## 数据分组
 
 <code src='./demo/group.tsx' title='数据分组' />
+<code src='./demo/custom-group-name.tsx' title='自义分组名' />
 
 ## 打开菜单的方式
 
@@ -103,7 +104,7 @@ group:
 | afterInner           | 菜单项里额外的插入节点                           | ReactNode \| ((data: NodeDate) => ReactNode)                                                          | -       |
 | header               | 菜单的头部-默认为搜索框                          | ReactNode \| ((data: NodeDate) => ReactNode)                                                          | -       |
 | footer               | 菜单的尾部                                       | ReactNode \| ((data: NodeDate) => ReactNode)                                                          | -       |
-| groupName            | 分组名                                           | ReactNode \| ((data: NodeDate) => ReactNode)                                                          | -       |
+| groupName            | 分组名                                           | `boolean` \| ReactNode \| ((data: NodeDate) => ReactNode)                                             | false   |
 
 ### Value