fix issues from tests

- Add proper `getKey()` handling. - Remove selection dependency for "show all" and footer rendering.
microsoft · Sep 1, 2022 · c492186 · c492186
1 parent 3da80e9
commit c492186
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 112 deletions.
diff --git a/packages/react-examples/src/react/GroupedList/GroupedListV2.Basic.Example.tsx b/packages/react-examples/src/react/GroupedList/GroupedListV2.Basic.Example.tsx
@@ -24,97 +24,56 @@ const columns = Object.keys(items[0])
 const groups = createGroups(groupCount, groupDepth, 0, groupCount);
 
 export const GroupedListV2BasicExample: React.FunctionComponent = () => {
-  const _selection = new Selection();
-  const _items: Array<{ key: string }> = [{ key: '1' }, { key: '2' }, { key: '3' }, { key: '4' }, { key: '5' }];
-  const _groups: Array<IGroup> = [
-    {
-      count: 3,
-      hasMoreData: true,
-      isCollapsed: false,
-      key: 'group0',
-      name: 'group 0',
-      startIndex: 2,
-      level: 0,
-      children: [],
-    },
-  ];
+  const [isCompactMode, { toggle: toggleIsCompactMode }] = useBoolean(false);
+  const selection = useConst(() => {
+    const s = new Selection();
+    s.setItems(items, true);
+    return s;
+  });
 
-  function _onRenderCell(nestingDepth: number, item: any, itemIndex: number): JSX.Element {
-    return (
+  const onRenderCell = (
+    nestingDepth?: number,
+    item?: IExampleItem,
+    itemIndex?: number,
+    group?: IGroup,
+  ): React.ReactNode => {
+    return item && typeof itemIndex === 'number' && itemIndex > -1 ? (
       <DetailsRow
-        columns={Object.keys(item)
-          .slice(0, 2)
-          .map(
-            (value): IColumn => {
-              return {
-                key: value,
-                name: value,
-                fieldName: value,
-                minWidth: 300,
-              };
-            },
-          )}
+        columns={columns}
         groupNestingDepth={nestingDepth}
         item={item}
         itemIndex={itemIndex}
-        selection={_selection}
+        selection={selection}
         selectionMode={SelectionMode.multiple}
+        compact={isCompactMode}
+        group={group}
       />
-    );
-  }
+    ) : null;
+  };
 
-  return <GroupedListV2 items={_items} groups={_groups} onRenderCell={_onRenderCell} selection={_selection} />;
-
-  // const [isCompactMode, { toggle: toggleIsCompactMode }] = useBoolean(false);
-  // const selection = useConst(() => {
-  //   const s = new Selection();
-  //   s.setItems(items, true);
-  //   return s;
-  // });
-
-  // const onRenderCell = (
-  //   nestingDepth?: number,
-  //   item?: IExampleItem,
-  //   itemIndex?: number,
-  //   group?: IGroup,
-  // ): React.ReactNode => {
-  //   return item && typeof itemIndex === 'number' && itemIndex > -1 ? (
-  //     <DetailsRow
-  //       columns={columns}
-  //       groupNestingDepth={nestingDepth}
-  //       item={item}
-  //       itemIndex={itemIndex}
-  //       selection={selection}
-  //       selectionMode={SelectionMode.multiple}
-  //       compact={isCompactMode}
-  //       group={group}
-  //     />
-  //   ) : null;
-  // };
-
-  // return (
-  //   <div>
-  //     <Toggle
-  //       label="Enable compact mode"
-  //       checked={isCompactMode}
-  //       onChange={toggleIsCompactMode}
-  //       onText="Compact"
-  //       offText="Normal"
-  //       styles={toggleStyles}
-  //     />
-  //     <SelectionZone selection={selection} selectionMode={SelectionMode.multiple}>
-  //       <GroupedListV2
-  //         items={items}
-  //         // eslint-disable-next-line react/jsx-no-bind
-  //         onRenderCell={onRenderCell}
-  //         selection={selection}
-  //         selectionMode={SelectionMode.multiple}
-  //         groups={groups}
-  //         compact={isCompactMode}
-  //       />
-  //     </SelectionZone>
-  //   </div>
-  // );
+  return (
+    <div>
+      <Toggle
+        label="Enable compact mode"
+        checked={isCompactMode}
+        onChange={toggleIsCompactMode}
+        onText="Compact"
+        offText="Normal"
+        styles={toggleStyles}
+      />
+      <SelectionZone selection={selection} selectionMode={SelectionMode.multiple}>
+        <GroupedListV2
+          items={items}
+          // eslint-disable-next-line react/jsx-no-bind
+          onRenderCell={onRenderCell}
+          selection={selection}
+          selectionMode={SelectionMode.multiple}
+          groups={groups}
+          compact={isCompactMode}
+        />
+      </SelectionZone>
+    </div>
+  );
 };
 
 // @ts-expect-error Storybook

diff --git a/packages/react/src/components/GroupedList/GroupedListV2.base.tsx b/packages/react/src/components/GroupedList/GroupedListV2.base.tsx
@@ -153,6 +153,7 @@ const flattenItems: FlattenItemsFn = (groups, items, memoItems, groupProps) => {
         index++;
       }
     }
+
     // Placeholder for a potential footer.
     // Whether or not a footer is displayed is resolved
     // by the footer render function so this is just a marker
@@ -166,7 +167,7 @@ const flattenItems: FlattenItemsFn = (groups, items, memoItems, groupProps) => {
 
   memoItems.length = index;
 
-  console.log('MEMO ITEMS', memoItems);
+  // console.log('MEMO ITEMS', memoItems);
 
   return memoItems;
 };
@@ -221,10 +222,18 @@ const isInnerZoneKeystroke = (ev: React.KeyboardEvent<HTMLElement>): boolean =>
 const getClassNames = classNamesFunction<IGroupedListStyleProps, IGroupedListStyles>();
 
 const getKey: IListProps['getKey'] = (item, _index) => {
-  if (item.type === 'group' && item.group) {
-    return item.group.key;
-  } else if (item.type === 'item' && item.item) {
-    return item.item.key;
+  switch (item.type) {
+    case 'item':
+      return item.item?.key ?? null;
+
+    case 'header':
+      return item.group.key;
+
+    case 'footer':
+      return `${item.group.key}-footer`;
+
+    case 'showAll':
+      return `${item.group.key}-showAll`;
   }
 
   return null;
@@ -428,19 +437,10 @@ export const GroupedListV2FC: React.FC<IGroupedListV2Props> = props => {
         key: group.key ? `${group.key}-show-all` : undefined,
       };
 
-      return (
-        <GroupItem
-          render={onRenderShowAll}
-          defaultRender={renderGroupShowAll}
-          item={item}
-          selection={selection}
-          eventGroup={events.current}
-          props={groupShowAllProps}
-        />
-      );
+      return onRenderShowAll(groupShowAllProps, renderGroupShowAll);
     },
 
-    [onRenderShowAll, groupProps, getDividerProps, selection],
+    [onRenderShowAll, groupProps, getDividerProps],
   );
 
   const renderFooter = React.useCallback(
@@ -452,18 +452,9 @@ export const GroupedListV2FC: React.FC<IGroupedListV2Props> = props => {
         key: group.key ? `${group.key}-footer` : undefined,
       };
 
-      return (
-        <GroupItem
-          render={onRenderFooter}
-          defaultRender={renderGroupFooter}
-          item={item}
-          selection={selection}
-          eventGroup={events.current}
-          props={groupFooterProps}
-        />
-      );
+      return onRenderFooter(groupFooterProps, renderGroupFooter);
     },
-    [onRenderFooter, groupProps, getDividerProps, selection],
+    [onRenderFooter, groupProps, getDividerProps],
   );
 
   const renderItem = React.useCallback(
@@ -476,7 +467,7 @@ export const GroupedListV2FC: React.FC<IGroupedListV2Props> = props => {
         return renderFooter(item, flattenedIndex);
       } else if (item.type === 'item') {
         const level = item.group.level ? item.group.level + 1 : 1;
-        return onRenderCell(level, item.item ?? item, item.itemIndex ?? flattenedIndex);
+        return onRenderCell(level, item.item, item.itemIndex ?? flattenedIndex);
       }
     },
     [onRenderCell, renderHeader, renderShowAll, renderFooter],

diff --git a/packages/react/src/components/GroupedList/GroupedListV2.test.tsx b/packages/react/src/components/GroupedList/GroupedListV2.test.tsx
@@ -132,7 +132,7 @@ describe('GroupedListV2', () => {
     wrapper.unmount();
   });
 
-  it.only("renders the number of rows specified by a group's count when startIndex is not zero", () => {
+  it("renders the number of rows specified by a group's count when startIndex is not zero", () => {
     const _selection = new Selection();
     const _items: Array<{ key: string }> = [{ key: '1' }, { key: '2' }, { key: '3' }, { key: '4' }, { key: '5' }];
     const _groups: Array<IGroup> = [