Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: issue of unable to select and unselect the items #1465

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: issue of unable to select and unselect the items #1465

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
62c186e
fixed the issue of unable to select and unselect the items
devanshkansagra Oct 16, 2024
1e55db0
fixed linting errors
devanshkansagra Oct 16, 2024
31458c1
Merge branch 'main' into fix#1418
devanshkansagra Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
226 changes: 140 additions & 86 deletions packages/fuselage/src/components/Table/Table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Meta, StoryFn } from '@storybook/react';
import { useState } from 'react';

import { CheckBox } from '../CheckBox';
import { Table } from './Table';
Expand Down Expand Up @@ -62,93 +63,146 @@ export const Default: StoryFn<typeof Table> = () => (
</>
);

export const WithSelection: StoryFn<typeof Table> = () => (
<>
<Table>
<TableHead>
<TableRow>
<TableCell>
<CheckBox aria-label='select all' checked={false} />
</TableCell>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align='end'>Calories</TableCell>
<TableCell align='end'>Fat&nbsp;(g)</TableCell>
<TableCell align='end'>Carbs&nbsp;(g)</TableCell>
<TableCell align='end'>Protein&nbsp;(g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow selected>
<TableCell>
<CheckBox aria-label='select frozen yoghurt' checked />
</TableCell>
<TableCell is='th' scope='row'>
Frozen yoghurt
</TableCell>
<TableCell align='end'>159</TableCell>
<TableCell align='end'>6</TableCell>
<TableCell align='end'>24</TableCell>
<TableCell align='end'>4</TableCell>
</TableRow>
<TableRow selected>
<TableCell>
<CheckBox aria-label='select frozen yoghurt' checked />
</TableCell>
<TableCell is='th' scope='row'>
Frozen yoghurt
</TableCell>
<TableCell align='end'>159</TableCell>
<TableCell align='end'>6</TableCell>
<TableCell align='end'>24</TableCell>
<TableCell align='end'>4</TableCell>
</TableRow>
<TableRow>
<TableCell>
<CheckBox aria-label='select frozen yoghurt' checked={false} />
</TableCell>
<TableCell is='th' scope='row'>
Frozen yoghurt
</TableCell>
<TableCell align='end'>159</TableCell>
<TableCell align='end'>6</TableCell>
<TableCell align='end'>24</TableCell>
<TableCell align='end'>4</TableCell>
</TableRow>
<TableRow selected>
<TableCell>
<CheckBox aria-label='select frozen yoghurt' checked />
</TableCell>
<TableCell is='th' scope='row'>
Frozen yoghurt
</TableCell>
<TableCell align='end'>159</TableCell>
<TableCell align='end'>6</TableCell>
<TableCell align='end'>24</TableCell>
<TableCell align='end'>4</TableCell>
</TableRow>
<TableRow selected>
<TableCell>
<CheckBox aria-label='select frozen yoghurt' checked />
</TableCell>
<TableCell is='th' scope='row'>
Frozen yoghurt
</TableCell>
<TableCell align='end'>159</TableCell>
<TableCell align='end'>6</TableCell>
<TableCell align='end'>24</TableCell>
<TableCell align='end'>4</TableCell>
</TableRow>
</TableBody>
</Table>
<TableSelection text='5 Items selected'>
<TableSelectionButtonGroup>
<TableSelectionButton>Delete</TableSelectionButton>
<TableSelectionButton>Cancel</TableSelectionButton>
</TableSelectionButtonGroup>
</TableSelection>
</>
);
export const WithSelection: StoryFn<typeof Table> = () => {
const [checkedAll, setCheckedAll] = useState(false);
const [checkedItems, setCheckedItems] = useState<Record<string, boolean>>({
item1: false,
item2: false,
item3: false,
item4: false,
item5: false,
});

const handleCheckBoxChange = (item: string) => {
setCheckedItems((prevState) => ({
...prevState,
[item]: !prevState[item],
}));
};

const handleAllCheckBoxChange = () => {
const newCheckedAll = !checkedAll;
setCheckedAll(newCheckedAll);
setCheckedItems({
item1: newCheckedAll,
item2: newCheckedAll,
item3: newCheckedAll,
item4: newCheckedAll,
item5: newCheckedAll,
});
};

return (
<>
<Table>
<TableHead>
<TableRow>
<TableCell>
<CheckBox
aria-label='select all'
checked={checkedAll}
onChange={handleAllCheckBoxChange}
/>
</TableCell>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align='end'>Calories</TableCell>
<TableCell align='end'>Fat&nbsp;(g)</TableCell>
<TableCell align='end'>Carbs&nbsp;(g)</TableCell>
<TableCell align='end'>Protein&nbsp;(g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow selected={checkedItems.item1}>
<TableCell>
<CheckBox
aria-label='select item1'
checked={checkedItems.item1}
onChange={() => handleCheckBoxChange('item1')}
/>
</TableCell>
<TableCell is='th' scope='row'>
Frozen yoghurt
</TableCell>
<TableCell align='end'>159</TableCell>
<TableCell align='end'>6</TableCell>
<TableCell align='end'>24</TableCell>
<TableCell align='end'>4</TableCell>
</TableRow>
<TableRow selected={checkedItems.item2}>
<TableCell>
<CheckBox
aria-label='select item2'
checked={checkedItems.item2}
onChange={() => handleCheckBoxChange('item2')}
/>
</TableCell>
<TableCell is='th' scope='row'>
Frozen yoghurt
</TableCell>
<TableCell align='end'>159</TableCell>
<TableCell align='end'>6</TableCell>
<TableCell align='end'>24</TableCell>
<TableCell align='end'>4</TableCell>
</TableRow>
<TableRow selected={checkedItems.item3}>
<TableCell>
<CheckBox
aria-label='select item3'
checked={checkedItems.item3}
onChange={() => handleCheckBoxChange('item3')}
/>
</TableCell>
<TableCell is='th' scope='row'>
Frozen yoghurt
</TableCell>
<TableCell align='end'>159</TableCell>
<TableCell align='end'>6</TableCell>
<TableCell align='end'>24</TableCell>
<TableCell align='end'>4</TableCell>
</TableRow>
<TableRow selected={checkedItems.item4}>
<TableCell>
<CheckBox
aria-label='select item4'
checked={checkedItems.item4}
onChange={() => handleCheckBoxChange('item4')}
/>
</TableCell>
<TableCell is='th' scope='row'>
Frozen yoghurt
</TableCell>
<TableCell align='end'>159</TableCell>
<TableCell align='end'>6</TableCell>
<TableCell align='end'>24</TableCell>
<TableCell align='end'>4</TableCell>
</TableRow>
<TableRow selected={checkedItems.item5}>
<TableCell>
<CheckBox
aria-label='select item5'
checked={checkedItems.item5}
onChange={() => handleCheckBoxChange('item5')}
/>
</TableCell>
<TableCell is='th' scope='row'>
Frozen yoghurt
</TableCell>
<TableCell align='end'>159</TableCell>
<TableCell align='end'>6</TableCell>
<TableCell align='end'>24</TableCell>
<TableCell align='end'>4</TableCell>
</TableRow>
</TableBody>
</Table>
<TableSelection text='5 Items selected'>
<TableSelectionButtonGroup>
<TableSelectionButton>Delete</TableSelectionButton>
<TableSelectionButton>Cancel</TableSelectionButton>
</TableSelectionButtonGroup>
</TableSelection>
</>
);
};
export const Striped: StoryFn<typeof Table> = () => (
<Table fixed striped sticky>
<TableHead>
Expand Down