Skip to content

Commit

Permalink
feat(Table): πŸ—‘οΈ Change Table to legacy (#1357)
Browse files Browse the repository at this point in the history
  • Loading branch information
Barsnes authored Jan 10, 2024
1 parent 3ab2b65 commit e3da112
Show file tree
Hide file tree
Showing 24 changed files with 150 additions and 142 deletions.
2 changes: 1 addition & 1 deletion packages/Overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ V1 er klar nΓ₯r fΓΈlgende komponenter er markert som "βœ… Felles":
| [Switch](/docs/felles-switch--docs) | βœ… Felles | [Figma - Switch](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=17755-6024&mode=design&t=ztPUyfbDSQjlpEzv-0) | [Github - Switch](https://github.com/digdir/designsystemet/issues/89) |
| [Skeleton](/docs/felles-loaders-skeleton--docs) | βœ… Felles | [Figma - Switch](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=9104%3A49626&t=7Q2N4sUdQGhFZrPh-1) | [Github - Skeleton](https://github.com/digdir/designsystemet/issues/1101) |
| [Skip-link](/docs/felles-skiplink--docs) | βœ… Felles | [Figma - Skip-link](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=23247%3A25693&mode=design&t=jalGJEnvFypaUD0P-1) | [Github - Skip-link](https://github.com/digdir/designsystemet/issues/1052) |
| [Table](/docs/altinn-table--docs) | πŸ”΅ Altinn | [Figma - Table](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=24926%3A12697&mode=design&t=jalGJEnvFypaUD0P-1) | [Github - Table](https://github.com/digdir/designsystemet/issues/90) |
| [Table](/docs/avviklet-legacytable--docs) | πŸ”΅ Altinn | [Figma - Table](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=24926%3A12697&mode=design&t=jalGJEnvFypaUD0P-1) | [Github - Table](https://github.com/digdir/designsystemet/issues/90) |
| [Tabs](/docs/felles-tabs--docs) | βœ… Felles | [Figma - Tabs](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=9551%3A54208&t=Rlfq5UyNZBL69dFr-1) | [Github - Tabs](https://github.com/digdir/designsystemet/issues/91) |
| [Tag](/docs/felles-tag--docs) | βœ… Felles | [Figma - Tag](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=10185%3A59053&t=7Q2N4sUdQGhFZrPh-1) | [Github - Tag](https://github.com/digdir/designsystemet/issues/322) |
| [Textarea](/docs/felles-textarea--docs) | βœ… Felles | [Figma - Text area](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A21873&t=7Q2N4sUdQGhFZrPh-1) | [Github - Textarea](https://github.com/digdir/designsystemet/issues/323) |
Expand Down
77 changes: 0 additions & 77 deletions packages/react/src/components/Table/Table.stories.mdx

This file was deleted.

13 changes: 0 additions & 13 deletions packages/react/src/components/Table/index.ts

This file was deleted.

2 changes: 1 addition & 1 deletion packages/react/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export * from './legacy/LegacyToggleButtonGroup';
export * from './legacy/LegacyTabs';
export * from './legacy/LegacyPopover';
export * from './legacy/LegacySelect';
export * from './legacy/LegacyTable';

export * from './Button';
export * from './HelpText';
export * from './Spinner';
export * from './Link';
export * from './List';
export * from './Table';
export * from './Typography/';
export * from './Accordion';
export * from './form/NativeSelect';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import * as tokens from '@altinn/figma-design-tokens';

import { useMediaQuery } from '../../../hooks';
import { LegacyRadioButton } from '../LegacyRadioButton';
import type { SortProps, SortDirection } from '../../Table/utils';
import type { SortProps, SortDirection } from '../LegacyTable/utils';
import {
Table,
TableHeader,
TableRow,
TableCell,
TableBody,
TableFooter,
} from '../../Table';
import classes from '../../Table/TableCell.module.css';
LegacyTable,
LegacyTableHeader,
LegacyTableRow,
LegacyTableCell,
LegacyTableBody,
LegacyTableFooter,
} from '../LegacyTable';
import classes from '../LegacyTable/TableCell.module.css';

export interface LegacyResponsiveTableConfig<T> {
rows: T[];
Expand Down Expand Up @@ -58,13 +58,13 @@ export function LegacyResponsiveTable<T>({
const isMobile = useMediaQuery(`(max-width: ${tokens.BreakpointsSm})`);

return isMobile ? (
<MobileTable config={config} />
<MobileLegacyTable config={config} />
) : (
<LaptopTable config={config} />
<LaptopLegacyTable config={config} />
);
}

function MobileTable<T>({ config }: LegacyResponsiveTableProps<T>) {
function MobileLegacyTable<T>({ config }: LegacyResponsiveTableProps<T>) {
const { rows, headers, showColumnsMobile, renderCell, rowSelection, footer } =
config;

Expand All @@ -73,23 +73,23 @@ function MobileTable<T>({ config }: LegacyResponsiveTableProps<T>) {
const numColumns = rowSelection ? 2 : 1;

return (
<Table
<LegacyTable
selectRows={!!rowSelection}
onChange={({ selectedValue }) =>
rowSelection?.onSelectionChange(selectedValue)
}
selectedValue={rowSelection?.selectedValue}
>
<TableBody>
<LegacyTableBody>
{rows.map((row) => {
const value = JSON.stringify(row);
return (
<TableRow
<LegacyTableRow
key={value}
rowData={row}
>
{rowSelection && (
<TableCell radiobutton={true}>
<LegacyTableCell radiobutton={true}>
<LegacyRadioButton
name={value}
onChange={() => rowSelection.onSelectionChange(row)}
Expand All @@ -98,9 +98,9 @@ function MobileTable<T>({ config }: LegacyResponsiveTableProps<T>) {
label={value}
hideLabel={true}
/>
</TableCell>
</LegacyTableCell>
)}
<TableCell
<LegacyTableCell
key={`${value}-data`}
style={{ padding: '0px' }}
>
Expand All @@ -124,23 +124,23 @@ function MobileTable<T>({ config }: LegacyResponsiveTableProps<T>) {
</>
);
})}
</TableCell>
</TableRow>
</LegacyTableCell>
</LegacyTableRow>
);
})}
</TableBody>
</LegacyTableBody>
{footer && (
<TableFooter>
<TableRow>
<TableCell colSpan={numColumns}>{footer}</TableCell>
</TableRow>
</TableFooter>
<LegacyTableFooter>
<LegacyTableRow>
<LegacyTableCell colSpan={numColumns}>{footer}</LegacyTableCell>
</LegacyTableRow>
</LegacyTableFooter>
)}
</Table>
</LegacyTable>
);
}

function LaptopTable<T>({ config }: LegacyResponsiveTableProps<T>) {
function LaptopLegacyTable<T>({ config }: LegacyResponsiveTableProps<T>) {
const { rows, headers, renderCell, columnSort, rowSelection, footer } =
config;

Expand All @@ -151,18 +151,20 @@ function LaptopTable<T>({ config }: LegacyResponsiveTableProps<T>) {
: Object.keys(headers).length;

return (
<Table
<LegacyTable
selectRows={!!rowSelection}
onChange={({ selectedValue }) =>
rowSelection?.onSelectionChange(selectedValue)
}
selectedValue={rowSelection?.selectedValue}
>
<TableHeader>
<TableRow>
{rowSelection && <TableCell radiobutton={true}></TableCell>}
<LegacyTableHeader>
<LegacyTableRow>
{rowSelection && (
<LegacyTableCell radiobutton={true}></LegacyTableCell>
)}
{columns.map((column) => (
<TableCell
<LegacyTableCell
key={column as string}
onChange={({ next, previous }) => {
columnSort &&
Expand All @@ -179,20 +181,20 @@ function LaptopTable<T>({ config }: LegacyResponsiveTableProps<T>) {
}
>
{headers[column]}
</TableCell>
</LegacyTableCell>
))}
</TableRow>
</TableHeader>
<TableBody>
</LegacyTableRow>
</LegacyTableHeader>
<LegacyTableBody>
{rows.map((row) => {
const value = JSON.stringify(row);
return (
<TableRow
<LegacyTableRow
key={value}
rowData={row}
>
{rowSelection && (
<TableCell radiobutton={true}>
<LegacyTableCell radiobutton={true}>
<LegacyRadioButton
name={value}
onChange={() => rowSelection.onSelectionChange(row)}
Expand All @@ -201,29 +203,29 @@ function LaptopTable<T>({ config }: LegacyResponsiveTableProps<T>) {
label={value}
hideLabel={true}
></LegacyRadioButton>
</TableCell>
</LegacyTableCell>
)}
{columns.map((column) => {
const renderFunc = renderCell && renderCell[column];
return (
<TableCell key={`${value}-${column as string}`}>
<LegacyTableCell key={`${value}-${column as string}`}>
{renderFunc
? renderFunc(row[column])
: (row[column] as string)}
</TableCell>
</LegacyTableCell>
);
})}
</TableRow>
</LegacyTableRow>
);
})}
</TableBody>
</LegacyTableBody>
{footer && (
<TableFooter>
<TableRow>
<TableCell colSpan={numColumns}>{footer}</TableCell>
</TableRow>
</TableFooter>
<LegacyTableFooter>
<LegacyTableRow>
<LegacyTableCell colSpan={numColumns}>{footer}</LegacyTableCell>
</LegacyTableRow>
</LegacyTableFooter>
)}
</Table>
</LegacyTable>
);
}
Loading

0 comments on commit e3da112

Please sign in to comment.