Skip to content

Commit b3cdc3b

Browse files
rsbhrsbh
committed
chore: remove react fragment
1 parent 7fa1bb7 commit b3cdc3b

File tree

2 files changed

+102
-110
lines changed

2 files changed

+102
-110
lines changed

‎packages/raystack/components/data-table/components/content.tsx‎

Lines changed: 43 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -108,56 +108,52 @@ function Rows<TData>({
108108
classNames,
109109
lastRowRef
110110
}: RowsProps<TData>) {
111-
return (
112-
<>
113-
{rows.map((row, idx) => {
114-
const isSelected = row.getIsSelected();
115-
const cells = row.getVisibleCells() || [];
116-
const isGroupHeader = row.subRows && row.subRows.length > 0;
117-
const isLastRow = idx === rows.length - 1;
111+
return rows.map((row, idx) => {
112+
const isSelected = row.getIsSelected();
113+
const cells = row.getVisibleCells() || [];
114+
const isGroupHeader = row.subRows && row.subRows.length > 0;
115+
const isLastRow = idx === rows.length - 1;
116+
117+
if (isGroupHeader) {
118+
return (
119+
<GroupHeader
120+
key={row.id}
121+
colSpan={cells.length}
122+
data={row.original as GroupedData<unknown>}
123+
/>
124+
);
125+
}
118126

119-
if (isGroupHeader) {
127+
return (
128+
<Table.Row
129+
key={row.id}
130+
className={cx(
131+
styles['row'],
132+
onRowClick ? styles['clickable'] : '',
133+
classNames?.row
134+
)}
135+
data-state={isSelected && 'selected'}
136+
ref={isLastRow ? lastRowRef : undefined}
137+
onClick={() => onRowClick?.(row.original)}
138+
>
139+
{cells.map(cell => {
140+
const columnDef = cell.column.columnDef as DataTableColumnDef<
141+
unknown,
142+
unknown
143+
>;
120144
return (
121-
<GroupHeader
122-
key={row.id}
123-
colSpan={cells.length}
124-
data={row.original as GroupedData<unknown>}
125-
/>
145+
<Table.Cell
146+
key={cell.id}
147+
className={cx(styles['cell'], columnDef.classNames?.cell)}
148+
style={columnDef.styles?.cell}
149+
>
150+
{flexRender(columnDef.cell, cell.getContext())}
151+
</Table.Cell>
126152
);
127-
}
128-
129-
return (
130-
<Table.Row
131-
key={row.id}
132-
className={cx(
133-
styles['row'],
134-
onRowClick ? styles['clickable'] : '',
135-
classNames?.row
136-
)}
137-
data-state={isSelected && 'selected'}
138-
ref={isLastRow ? lastRowRef : undefined}
139-
onClick={() => onRowClick?.(row.original)}
140-
>
141-
{cells.map(cell => {
142-
const columnDef = cell.column.columnDef as DataTableColumnDef<
143-
unknown,
144-
unknown
145-
>;
146-
return (
147-
<Table.Cell
148-
key={cell.id}
149-
className={cx(styles['cell'], columnDef.classNames?.cell)}
150-
style={columnDef.styles?.cell}
151-
>
152-
{flexRender(columnDef.cell, cell.getContext())}
153-
</Table.Cell>
154-
);
155-
})}
156-
</Table.Row>
157-
);
158-
})}
159-
</>
160-
);
153+
})}
154+
</Table.Row>
155+
);
156+
});
161157
}
162158

163159
const DefaultEmptyComponent = () => (

‎packages/raystack/components/data-table/components/virtualized-content.tsx‎

Lines changed: 59 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -91,71 +91,67 @@ function VirtualRows<TData>({
9191
}) {
9292
const items = virtualizer.getVirtualItems();
9393

94-
return (
95-
<>
96-
{items.map((item, idx) => {
97-
const row = rows[item.index];
98-
if (!row) return null;
99-
100-
const isSelected = row.getIsSelected();
101-
const cells = row.getVisibleCells() || [];
102-
const isGroupHeader = row.subRows && row.subRows.length > 0;
103-
const rowKey = row.id + '-' + item.index;
104-
105-
const positionStyle: React.CSSProperties = {
106-
height: item.size,
107-
top: item.start
108-
};
109-
110-
if (isGroupHeader) {
94+
return items.map((item, idx) => {
95+
const row = rows[item.index];
96+
if (!row) return null;
97+
98+
const isSelected = row.getIsSelected();
99+
const cells = row.getVisibleCells() || [];
100+
const isGroupHeader = row.subRows && row.subRows.length > 0;
101+
const rowKey = row.id + '-' + item.index;
102+
103+
const positionStyle: React.CSSProperties = {
104+
height: item.size,
105+
top: item.start
106+
};
107+
108+
if (isGroupHeader) {
109+
return (
110+
<VirtualGroupHeader
111+
key={rowKey}
112+
data={row.original as GroupedData<unknown>}
113+
style={positionStyle}
114+
/>
115+
);
116+
}
117+
118+
return (
119+
<div
120+
role='row'
121+
key={rowKey}
122+
className={cx(
123+
styles.virtualRow,
124+
styles['row'],
125+
onRowClick ? styles['clickable'] : '',
126+
classNames?.row
127+
)}
128+
style={positionStyle}
129+
data-state={isSelected && 'selected'}
130+
onClick={() => onRowClick?.(row.original)}
131+
>
132+
{cells.map(cell => {
133+
const columnDef = cell.column.columnDef as DataTableColumnDef<
134+
unknown,
135+
unknown
136+
>;
111137
return (
112-
<VirtualGroupHeader
113-
key={rowKey}
114-
data={row.original as GroupedData<unknown>}
115-
style={positionStyle}
116-
/>
138+
<div
139+
role='cell'
140+
key={cell.id}
141+
className={cx(
142+
tableStyles.cell,
143+
styles.virtualCell,
144+
columnDef.classNames?.cell
145+
)}
146+
style={columnDef.styles?.cell}
147+
>
148+
{flexRender(columnDef.cell, cell.getContext())}
149+
</div>
117150
);
118-
}
119-
120-
return (
121-
<div
122-
role='row'
123-
key={rowKey}
124-
className={cx(
125-
styles.virtualRow,
126-
styles['row'],
127-
onRowClick ? styles['clickable'] : '',
128-
classNames?.row
129-
)}
130-
style={positionStyle}
131-
data-state={isSelected && 'selected'}
132-
onClick={() => onRowClick?.(row.original)}
133-
>
134-
{cells.map(cell => {
135-
const columnDef = cell.column.columnDef as DataTableColumnDef<
136-
unknown,
137-
unknown
138-
>;
139-
return (
140-
<div
141-
role='cell'
142-
key={cell.id}
143-
className={cx(
144-
tableStyles.cell,
145-
styles.virtualCell,
146-
columnDef.classNames?.cell
147-
)}
148-
style={columnDef.styles?.cell}
149-
>
150-
{flexRender(columnDef.cell, cell.getContext())}
151-
</div>
152-
);
153-
})}
154-
</div>
155-
);
156-
})}
157-
</>
158-
);
151+
})}
152+
</div>
153+
);
154+
});
159155
}
160156

161157
const DefaultEmptyComponent = () => (

0 commit comments

Comments
 (0)