fix: 修复 groupName 不显示的问题 (growingio#595)

berber1016 · Dec 9, 2020 · 3f32cfa · 3f32cfa
1 parent 47b2ebc
commit 3f32cfa
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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