Skip to content

Commit

Permalink
Merge pull request #1343 from Availity/update/tree
Browse files Browse the repository at this point in the history 
docs(tree): update stories to csf3 for Training Tree component
  • Loading branch information
@ncruz-av
ncruz-av authored Oct 26, 2023
2 parents 4bae712 + 6d0fc41 commit 7665ec4
Showing 1 changed file with 104 additions and 104 deletions.
208 changes: 104 additions & 104 deletions packages/tree/src/Tree.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useCallback, useState } from 'react';
import { Meta, Story } from '@storybook/react';
import { StoryObj } from '@storybook/react';
import cloneDeep from 'lodash/cloneDeep';
import { Button } from 'reactstrap';

Expand All @@ -18,107 +18,116 @@ export default {
},
},
},
} as Meta;
};

export const Default: Story = ({ enableSearch, searchLabel, expandAll, selectable, displayDisabledItems }) => {
const [isTreeVisible, setIsTreeVisible] = useState(true);
export const _Default: StoryObj<typeof Tree> = {
render: ({ enableSearch, searchLabel, expandAll, selectable, displayDisabledItems }) => {
const [isTreeVisible, setIsTreeVisible] = useState(true);

const flatTreeItems: TreeItem[] = [
{
id: '1',
name: 'Parent',
},
{
id: '2',
name: 'Second Level Parent',
parentId: '1',
},
{
id: '3',
name: 'Child Test 1',
isDisabled: true,
parentId: '2',
},
{
id: '4',
name: 'Child Test 2',
parentId: '2',
},
{
id: '5',
name: 'Child Test 3',
parentId: '4',
},
{
id: '7',
name: 'Availity Webinars',
parentId: '1',
},
{
id: '6',
name: 'Validation Office',
parentId: '7',
},
{
id: '8',
name: '2nd Root',
},
{
id: '9',
name: '2nd Root Child',
parentId: '8',
},
];
const flatTreeItems: TreeItem[] = [
{
id: '1',
name: 'Parent',
},
{
id: '2',
name: 'Second Level Parent',
parentId: '1',
},
{
id: '3',
name: 'Child Test 1',
isDisabled: true,
parentId: '2',
},
{
id: '4',
name: 'Child Test 2',
parentId: '2',
},
{
id: '5',
name: 'Child Test 3',
parentId: '4',
},
{
id: '7',
name: 'Availity Webinars',
parentId: '1',
},
{
id: '6',
name: 'Validation Office',
parentId: '7',
},
{
id: '8',
name: '2nd Root',
},
{
id: '9',
name: '2nd Root Child',
parentId: '8',
},
];

const tree = buildTree(flatTreeItems, []);
const [items, setItems] = useState(tree);
const [initialState] = useState<TreeItem[]>(cloneDeep(tree));
const tree = buildTree(flatTreeItems, []);
const [items, setItems] = useState(tree);
const [initialState] = useState<TreeItem[]>(cloneDeep(tree));

const [selectedItems] = useState<TreeItem[]>([items[0]]);
const [newSelectedList, setNewSelectedList] = useState<TreeItem[]>([
items[0],
...flatTreeItems.filter((item) => item.isSelected === true),
]);
const [selectedItems] = useState<TreeItem[]>([items[0]]);
const [newSelectedList, setNewSelectedList] = useState<TreeItem[]>([
items[0],
...flatTreeItems.filter((item) => item.isSelected === true),
]);

const onItemsSelected = useCallback((selected: TreeItem[]): void => {
setNewSelectedList(selected);
}, []);
const onItemsSelected = useCallback((selected: TreeItem[]): void => {
setNewSelectedList(selected);
}, []);

const resetTree = async () => {
await setNewSelectedList([items[0], ...flatTreeItems.filter((item) => item.isSelected === true)]);
await setItems(cloneDeep(initialState));
};
const resetTree = async () => {
await setNewSelectedList([items[0], ...flatTreeItems.filter((item) => item.isSelected === true)]);
await setItems(cloneDeep(initialState));
};

return (
<>
<Button className="p-2" onClick={() => resetTree()}>
Reset Tree
</Button>
<Button className="p-2 ml-1" onClick={() => setIsTreeVisible(!isTreeVisible)}>
{isTreeVisible ? 'Hide' : 'Show'} Tree
</Button>
<div className="p-1" style={{ width: 500 }}>
{isTreeVisible && (
<Tree
expandAll={expandAll}
enableSearch={enableSearch}
searchLabel={searchLabel}
items={items}
onItemsSelected={onItemsSelected}
selectedItems={selectedItems}
selectable={selectable}
displayDisabledItems={displayDisabledItems}
/>
)}
</div>
<section>
<h5>Selected Items:</h5>
{newSelectedList
?.map((item) => ({ id: item.id, name: item.name }))
.map((item) => <pre key={item.id}>{JSON.stringify(item, null, 2)}</pre>)}
</section>
</>
);
return (
<>
<Button className="p-2" onClick={() => resetTree()}>
Reset Tree
</Button>
<Button className="p-2 ml-1" onClick={() => setIsTreeVisible(!isTreeVisible)}>
{isTreeVisible ? 'Hide' : 'Show'} Tree
</Button>
<div className="p-1" style={{ width: 500 }}>
{isTreeVisible && (
<Tree
expandAll={expandAll}
enableSearch={enableSearch}
searchLabel={searchLabel}
items={items}
onItemsSelected={onItemsSelected}
selectedItems={selectedItems}
selectable={selectable}
displayDisabledItems={displayDisabledItems}
/>
)}
</div>
<section>
<h5>Selected Items:</h5>
{newSelectedList
?.map((item) => ({ id: item.id, name: item.name }))
.map((item) => <pre key={item.id}>{JSON.stringify(item, null, 2)}</pre>)}
</section>
</>
);
},
args: {
enableSearch: true,
searchLabel: 'Search Me',
expandAll: false,
selectable: true,
displayDisabledItems: true,
},
};

export const hidden_TreeItemComponent = ({
Expand All @@ -127,12 +136,3 @@ export const hidden_TreeItemComponent = ({
isHidden = false,
isDisabled = false,
}: TreeItem): JSX.Element => <></>;

Default.storyName = 'default';
Default.args = {
enableSearch: true,
searchLabel: 'Search Me',
expandAll: false,
selectable: true,
displayDisabledItems: true,
};

0 comments on commit 7665ec4

Please sign in to comment.