Skip to content

Commit

Permalink
fix selection in parent nodes with no children and release version patch
Browse files Browse the repository at this point in the history
  • Loading branch information
radubrehar committed Oct 29, 2024
1 parent d85781c commit ab8057c
Show file tree
Hide file tree
Showing 17 changed files with 562 additions and 346 deletions.
179 changes: 179 additions & 0 deletions examples/src/pages/tests/table/treegrid/selection3.page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
import {
DataSourceApi,
InfiniteTableColumn,
TreeDataSource,
TreeGrid,
TreeSelectionValue,
} from '@infinite-table/infinite-react';
import { useState } from 'react';

type FileSystemNode = {
id: string;
name: string;
type: 'folder' | 'file';
extension?: string;
mimeType?: string;
sizeInKB: number;
children?: FileSystemNode[];
};

const columns: Record<string, InfiniteTableColumn<FileSystemNode>> = {
name: {
field: 'name',
header: 'Name',
defaultWidth: 500,
renderValue: ({ value, rowInfo }) => {
return (
<>
{rowInfo.id} - {value}
</>
);
},
renderTreeIcon: true,
renderSelectionCheckBox: true,
},
type: { field: 'type', header: 'Type' },
extension: { field: 'extension', header: 'Extension' },
mimeType: { field: 'mimeType', header: 'Mime Type' },
size: { field: 'sizeInKB', type: 'number', header: 'Size (KB)' },
};

const defaultTreeSelection: TreeSelectionValue = {
defaultSelection: true,
deselectedPaths: [['1', '10']],
selectedPaths: [['3']],
};

export default function App() {
const [dataSourceApi, setDataSourceApi] =
useState<DataSourceApi<FileSystemNode> | null>();

return (
<>
<TreeDataSource
onReady={setDataSourceApi}
nodesKey="children"
primaryKey="id"
data={dataSource}
defaultTreeSelection={defaultTreeSelection}
>
<div
style={{
color: 'var(--infinite-cell-color)',
padding: 10,
display: 'flex',
gap: 10,
}}
>
<button
onClick={() => {
dataSourceApi!.treeApi.selectAll();
}}
>
Select all
</button>
<button
onClick={() => {
dataSourceApi!.treeApi.deselectAll();
}}
>
Deselect all
</button>
</div>

<TreeGrid columns={columns} domProps={{ style: { height: '100%' } }} />
</TreeDataSource>
</>
);
}

const dataSource = () => {
const nodes: FileSystemNode[] = [
{
id: '1',
name: 'Documents',
sizeInKB: 1200,
type: 'folder',
children: [
{
id: '10',
name: 'Private',
sizeInKB: 100,
type: 'folder',
children: [
{
id: '100',
name: 'Report.docx',
sizeInKB: 210,
type: 'file',
extension: 'docx',
mimeType: 'application/msword',
},
{
id: '101',
name: 'Vacation.docx',
sizeInKB: 120,
type: 'file',
extension: 'docx',
mimeType: 'application/msword',
},
{
id: '102',
name: 'CV.pdf',
sizeInKB: 108,
type: 'file',
extension: 'pdf',
mimeType: 'application/pdf',
},
],
},
],
},
{
id: '2',
name: 'Desktop',
sizeInKB: 1000,
type: 'folder',
children: [
{
id: '20',
name: 'unknown.txt',
sizeInKB: 100,
type: 'file',
},
],
},
{
id: '3',
name: 'Media',
sizeInKB: 1000,
type: 'folder',
children: [
{
id: '30',
name: 'Music - empty',
sizeInKB: 0,
type: 'folder',
children: [],
},
{
id: '31',
name: 'Videos',
sizeInKB: 5400,
type: 'folder',
children: [
{
id: '310',
name: 'Vacation.mp4',
sizeInKB: 108,
type: 'file',
extension: 'mp4',
mimeType: 'video/mp4',
},
],
},
],
},
];
return Promise.resolve(nodes);
};
Loading

0 comments on commit ab8057c

Please sign in to comment.