fix(TreeList): added missed initial state for elements (#1524)

gravity-ui · Apr 27, 2024 · 5d3b154 · 5d3b154
1 parent 9e93c91
commit 5d3b154
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 8 deletions.
diff --git a/src/components/TreeList/TreeList.tsx b/src/components/TreeList/TreeList.tsx
@@ -16,10 +16,10 @@ export const TreeList = <T,>({
     size = 'm',
     items,
     className,
-    expandedById,
-    disabledById,
+    expandedById: propsExpandedById,
+    disabledById: propsDisabledById,
+    selectedById: propsSelectedById,
     activeItemId,
-    selectedById,
     defaultGroupsExpanded = true,
     getItemId,
     renderItem: propsRenderItem,
@@ -38,12 +38,17 @@ export const TreeList = <T,>({
     const listParsedState = useList({
         items,
         getItemId,
-        expandedById,
-        disabledById,
+        // used not all of all properties but it may be needed in future
+        expandedById: propsExpandedById,
+        disabledById: propsDisabledById,
+        selectedById: propsSelectedById,
         activeItemId,
-        selectedById,
     });
 
+    const expandedById = propsExpandedById || listParsedState.initialState.expandedById;
+    const disabledById = propsDisabledById || listParsedState.initialState.disabledById;
+    const selectedById = propsSelectedById || listParsedState.initialState.selectedById;
+
     const handleItemClick = React.useMemo(() => {
         if (onItemClick) {
             return (listItemId: ListItemId) => {

diff --git a/src/components/TreeList/__stories__/TreeList.stories.tsx b/src/components/TreeList/__stories__/TreeList.stories.tsx
@@ -4,6 +4,7 @@ import {TreeList} from '../TreeList';
 
 import {DefaultStory} from './stories/DefaultStory';
 import {InfinityScrollStory} from './stories/InfinityScrollStory';
+import {WithDisabledElementsStory} from './stories/WithDisabledElementsStory';
 import {WithDndListStory} from './stories/WithDndListStory';
 import {WithFiltrationAndControlsStory} from './stories/WithFiltrationAndControlsStory';
 import {WithGroupSelectionAndCustomIconStory} from './stories/WithGroupSelectionAndCustomIconStory';
@@ -213,3 +214,38 @@ export const WithItemLinksAndActions: WithItemLinksAndActionsStoryObj = {
         },
     },
 };
+
+type WithDisabledElementsStoryObj = StoryObj<typeof WithDisabledElementsStory>;
+
+export const WithDisabledElements: WithDisabledElementsStoryObj = {
+    render: WithDisabledElementsStory,
+    parameters: {
+        a11y: {
+            element: '#storybook-root',
+            config: {
+                rules: [
+                    {
+                        id: 'color-contrast',
+                        enabled: false,
+                    },
+                    {
+                        id: 'aria-input-field-name',
+                        enabled: false,
+                    },
+                    {
+                        id: 'aria-required-children',
+                        enabled: false,
+                    },
+                    {
+                        id: 'aria-required-parent',
+                        enabled: false,
+                    },
+                    {
+                        id: 'nested-interactive',
+                        enabled: false,
+                    },
+                ],
+            },
+        },
+    },
+};
diff --git a/src/components/TreeList/__stories__/stories/DefaultStory.tsx b/src/components/TreeList/__stories__/stories/DefaultStory.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
+import {Text} from '../../../Text';
 import {Flex} from '../../../layout';
+import {ListItemView} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeList} from '../../TreeList';
 import type {TreeListProps} from '../../types';
@@ -18,8 +20,31 @@ export const DefaultStory = ({itemsCount = 5, ...props}: DefaultStoryProps) => {
     const items = React.useMemo(() => createRandomizedData({num: itemsCount}), [itemsCount]);
 
     return (
-        <Flex width="500">
-            <TreeList {...props} items={items} mapItemDataToProps={identity} />
+        <Flex gap="5">
+            <Flex direction={'column'} gap="3">
+                <Text color="secondary">Default TreeList</Text>
+                <TreeList {...props} items={items} mapItemDataToProps={identity} />
+            </Flex>
+            <Flex direction={'column'} gap="3">
+                <Text color="secondary">
+                    To remove default group view, override corresponding (expanded) prop in
+                    renderItem method
+                </Text>
+
+                <TreeList
+                    {...props}
+                    items={items}
+                    mapItemDataToProps={identity}
+                    renderItem={({props, context: {groupState}, renderContainerProps}) => {
+                        // if item group
+                        if (groupState) {
+                            props.expanded = undefined;
+                        }
+
+                        return <ListItemView {...props} {...renderContainerProps} />;
+                    }}
+                />
+            </Flex>
         </Flex>
     );
 };
diff --git a/src/components/TreeList/__stories__/stories/WithDisabledElementsStory.tsx b/src/components/TreeList/__stories__/stories/WithDisabledElementsStory.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import {Button} from '../../../Button';
+import {Flex} from '../../../layout';
+import {useListState} from '../../../useList';
+import type {ListItemType} from '../../../useList';
+import {TreeList} from '../../TreeList';
+import type {TreeListProps} from '../../types';
+
+export interface WithDisabledElementsStoryProps
+    extends Omit<TreeListProps<{text: string}>, 'items' | 'mapItemDataToProps'> {}
+
+const items: ListItemType<{text: string}>[] = [
+    {
+        text: 'one',
+        disabled: true,
+    },
+    {
+        text: 'two',
+    },
+    {
+        text: 'free',
+    },
+    {
+        text: 'four',
+    },
+    {
+        text: 'five',
+    },
+];
+
+export const WithDisabledElementsStory = ({...props}: WithDisabledElementsStoryProps) => {
+    const {disabledById: _disabledById, setDisabled: _setDisabled, ...listState} = useListState();
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    return (
+        <Flex width="500" gap="5" direction="column" alignItems="flex-start">
+            <Flex alignItems="center" gap="1">
+                <Button
+                    onClick={() => {
+                        containerRef.current?.focus();
+                    }}
+                >
+                    focus elements
+                </Button>{' '}
+                to control from keyboard
+            </Flex>
+            <TreeList
+                {...props}
+                containerRef={containerRef}
+                items={items}
+                {...listState}
+                mapItemDataToProps={({text}) => ({title: text})}
+                onItemClick={({data, id, selected}) => {
+                    listState.setSelected({[id]: !selected});
+                    alert(`Clicked by item with id :"${id}" and data: ${JSON.stringify(data)}`);
+                }}
+            />
+        </Flex>
+    );
+};