@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
278 lines (277 loc) • 12.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useState, } from 'react';
import { Button, IconButton, Menu, Popover, Stack, Text, } from '../..';
import { mockedColumns, mockedData, mockedDataWithIds } from './mocked-data';
import { Table } from './table';
const firstData = {
firstName: 'Gianni',
lastName: 'Morandi',
address: 'Via Roma, 1, Treno',
uid: 3456789542556789,
info: 123123.12,
};
const story = {
title: 'Layouts/Table',
parameters: {
centered: { disable: true },
},
args: {
background: 'white',
stripes: false,
selectableRows: false,
showSeparators: true,
showHeader: false,
columns: mockedColumns,
data: mockedData,
dataWithIds: mockedDataWithIds,
},
};
export default story;
const CustomExpandableComponent = ({ data }) => (_jsx(Stack, { vPadding: 16, hPadding: 16, rowGap: 32, children: Object.keys(data).map((item, i) => (_jsxs("div", { style: { background: 'var(--dimmed-1)', padding: 24, minHeight: 50 * (i + 1) }, children: [_jsx(Text, { variant: "heading-6", children: typeof data[item] === 'string' ? data[item] : null }), "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore, nostrum minima, debitis qui magni voluptatum."] }, item))) }));
const CustomEmptyComponent = () => (_jsx("div", { title: "No data to show", children: "It seems there is no data to show inside this table. If data should be present,please check if columns are visible by using the table controls." }));
const Template = ({ dataWithIds, ...args }) => (_jsx(Table, { emptyComponent: _jsx(CustomEmptyComponent, {}), onRowExpandChange: rows => console.log(rows), ...args }));
export const Simple = Template.bind({});
const SelectionTemplate = ({ dataWithIds, data, ...args }) => {
const [tableData, setTableData] = useState(dataWithIds);
const [selectedRowIds, setSelectedRowIds] = useState([]);
const onDelete = (selectedRowIds) => {
const newTableData = tableData.filter(({ id }) => !selectedRowIds.includes(id));
setSelectedRowIds([]);
setTableData(newTableData);
};
return (_jsx(Table, { data: tableData, selectedRowIds: selectedRowIds, onSelectedRowsChange: setSelectedRowIds, selectedActions: selectedRowIds => _jsx(Button, { onClick: () => onDelete(selectedRowIds), children: "Delete rows" }), emptyComponent: _jsx(CustomEmptyComponent, {}), ...args }));
};
export const SelectedRows = SelectionTemplate.bind({});
SelectedRows.args = {
title: 'With selectable rows',
selectableRows: true,
showPagination: true,
};
const HidingColumnTemplate = ({ dataWithIds, columns, ...args }) => {
const tableColumns = [
...columns,
{
id: 'birthday',
Header: 'Birthday',
accessor: row => row.birthday,
},
{
id: 'gender',
Header: 'Gender',
accessor: row => row.gender,
},
{
id: 'height',
Header: 'Height',
accessor: row => row.height,
},
{
id: 'weight',
Header: 'Weight',
accessor: row => row.weight,
},
];
return (_jsx(Table, { emptyComponent: _jsx(CustomEmptyComponent, {}), columns: tableColumns, ...args }));
};
export const HidingColumn = HidingColumnTemplate.bind({});
HidingColumn.args = {
showHeader: true,
columnsControl: true,
};
export const defaultHiddenColumns = Template.bind({});
defaultHiddenColumns.args = {
showHeader: true,
columnsControl: true,
defaultHiddenColumns: ['address', 'uid'],
};
export const Scrollable = Template.bind({});
Scrollable.args = {
columnsControl: true,
showHeader: true,
background: 'var(--global-background)',
title: 'Scrollable table',
height: '400px',
};
export const WithTableActions = Template.bind({});
WithTableActions.args = {
columnsControl: true,
title: 'Custom title element',
showHeader: true,
actions: _jsx(Button, { children: "Custom action" }),
};
export const CustomExpandable = Template.bind({});
CustomExpandable.args = {
columnsControl: true,
showHeader: true,
selectableRows: true,
expandableRowComponent: data => _jsx(CustomExpandableComponent, { data: data }),
};
export const Pagination = SelectionTemplate.bind({});
Pagination.args = {
columnsControl: true,
showHeader: true,
selectableRows: true,
itemsPerPage: 3,
pageClusters: [3, 6, 9, 12],
showPagination: true,
};
const RowActionsTemplate = ({ columns, ...args }) => {
const tableColumns = useMemo(() => [
{
id: 'actions',
disableSortBy: true,
isToggable: true,
isCollapsed: true,
accessor: _ => (_jsxs(Stack, { direction: "row", fill: false, children: [_jsx(IconButton, { icon: "astronomy", kind: "flat", dimension: "small" }), _jsx(Popover, { trigger: _jsx(IconButton, { icon: "more-vert", kind: "flat", dimension: "small" }), children: _jsxs(Menu, { children: [_jsx(Menu.Item, { dimension: "small", autoFocus: true, icon: "ctrl-right", children: "Sample long menu item" }), _jsx(Menu.Item, { dimension: "small", icon: "arrow-down-to-bracket", children: "Short menu label" }), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { dimension: "small", icon: "view", children: "Even shorter" }), _jsx(Menu.Item, { dimension: "small", disabled: true, children: "Really?" })] }) })] })),
},
...columns
], [columns]);
return (_jsx(Table, { columns: tableColumns, ...args }));
};
export const RowActions = RowActionsTemplate.bind({});
RowActions.args = {
columnsControl: true,
showHeader: true,
selectableRows: true,
};
export const NoData = Template.bind({});
NoData.args = {
columnsControl: true,
showHeader: true,
selectableRows: true,
data: [],
};
const ManualPaginationTemplate = ({ data, dataWithIds, ...args }) => {
const [allData, setAllData] = useState(dataWithIds);
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
const [selectedRowIds, setSelectedRowIds] = useState(['4', '9', '12']);
const pageData = useMemo(() => {
const { pageIndex, pageSize } = pagination;
const newIndexStart = pageIndex * pageSize;
const newIndexEnd = (pageIndex * pageSize) + pageSize;
return allData.slice(newIndexStart, newIndexEnd);
}, [allData, pagination]);
const onDelete = (selectedRowIds) => {
const newTableData = allData.filter(({ id }) => !selectedRowIds.includes(id));
setSelectedRowIds([]);
setAllData(newTableData);
};
return (_jsx(Table, { ...args, data: pageData, onSelectedRowsChange: setSelectedRowIds, selectedRowIds: selectedRowIds, selectedActions: () => _jsx(Button, { onClick: () => onDelete(selectedRowIds), children: "Delete rows" }), onPaginationChange: (newPagination) => {
if (newPagination.pageIndex !== pagination.pageIndex || newPagination.pageSize !== pagination.pageSize) {
setPagination(newPagination);
}
}, totalRows: allData.length, emptyComponent: _jsx(CustomEmptyComponent, {}) }));
};
export const ManualPagination = ManualPaginationTemplate.bind({});
ManualPagination.args = {
columnsControl: true,
showHeader: true,
selectableRows: true,
showPagination: true,
itemsPerPage: 5,
};
export const Loading = Template.bind({});
Loading.args = {
data: [],
columnsControl: true,
showHeader: true,
loading: true,
};
const ManualSortingTemplate = ({ data, dataWithIds, ...args }) => {
const [pageData, setPageData] = useState(dataWithIds.slice(0, 5));
const [sortBy, setSortBy] = useState([]);
const fetchData = useCallback(({ pageIndex, pageSize }) => {
const result = [...dataWithIds];
if (sortBy.length === 0) {
setPageData(result.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize));
return;
}
const sorting = sortBy[0];
result.sort((dataA, dataB) => {
const isTypeNumber = typeof dataB[sorting.id] === 'number' || typeof dataA[sorting.id] === 'number';
if (isTypeNumber) {
const numberA = Number(dataA[sorting.id]);
const numberB = Number(dataB[sorting.id]);
return sorting.desc ? numberB - numberA : numberA - numberB;
}
const stringA = String(dataA[sorting.id]);
const stringB = String(dataB[sorting.id]);
return sorting.desc
? stringB.localeCompare(stringA)
: stringA.localeCompare(stringB);
});
setPageData(result.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize));
}, [dataWithIds, sortBy]);
return (_jsx(Table, { data: pageData, onSortChange: sortBy => setSortBy(sortBy), onPaginationChange: fetchData, totalRows: dataWithIds.length, emptyComponent: _jsx(CustomEmptyComponent, {}), ...args }));
};
export const ManualSorting = ManualSortingTemplate.bind({});
ManualSorting.args = {
isManualSorted: true,
columnsControl: true,
selectableRows: true,
showPagination: true,
itemsPerPage: 5,
};
const ManualPaginationFilteringTemplate = ({ data, dataWithIds, ...args }) => {
const [allData, setAllData] = useState(dataWithIds);
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
const pageData = useMemo(() => {
const { pageIndex, pageSize } = pagination;
const newIndexStart = pageIndex * pageSize;
const newIndexEnd = (pageIndex * pageSize) + pageSize;
return allData.slice(newIndexStart, newIndexEnd);
}, [allData, pagination]);
const onDelete = (selectedRowIds) => {
const newTableData = allData.filter(({ id }) => !selectedRowIds.includes(id));
setAllData(newTableData);
};
return (_jsx(Table, { ...args, data: pageData, actions: _jsx(Button, { onClick: () => setAllData(allData.filter(r => r.lastName === 'Stuffo')), children: "Filter Stuffo" }), selectedActions: selectedRowIds => _jsx(Button, { onClick: () => onDelete(selectedRowIds), children: "Delete rows" }), onPaginationChange: (newPagination) => {
if (newPagination.pageIndex !== pagination.pageIndex || newPagination.pageSize !== pagination.pageSize) {
setPagination(newPagination);
}
}, totalRows: allData.length, emptyComponent: _jsx(CustomEmptyComponent, {}) }));
};
export const ManualPaginationFiltering = ManualPaginationFilteringTemplate.bind({});
ManualPaginationFiltering.args = {
isManualSorted: true,
columnsControl: true,
showHeader: true,
selectableRows: true,
showPagination: true,
itemsPerPage: 5,
};
const PreselectedRowsTemplate = ({ dataWithIds, data, ...args }) => {
const [tableData, setTableData] = useState(dataWithIds);
const [selectedRowIds, setSelectedRowIds] = useState(['2', '4', '9', '12']);
const onDelete = (selectedRowIds) => {
const newTableData = tableData.filter(({ id }) => !selectedRowIds.includes(id));
setSelectedRowIds([]);
setTableData(newTableData);
};
return (_jsx(Table, { data: tableData, selectedRowIds: selectedRowIds, onSelectedRowsChange: setSelectedRowIds, selectedActions: selectedRowIds => _jsx(Button, { onClick: () => onDelete(selectedRowIds), children: "Delete rows" }), emptyComponent: _jsx(CustomEmptyComponent, {}), ...args }));
};
export const PreselectedRows = PreselectedRowsTemplate.bind({});
PreselectedRows.args = {
title: 'With selectable rows',
selectableRows: true,
showPagination: true,
};
const AsyncDataTemplate = ({ data, columns }) => {
const [innerData, setInnerData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(true);
const dataTimeout = setTimeout(() => {
setInnerData(data);
setLoading(false);
}, 2500);
return () => {
clearTimeout(dataTimeout);
};
}, [data]);
return (_jsx(Table, { title: "Alphabet", columns: columns, data: innerData, loading: loading, showHeader: true, selectableRows: true }));
};
export const AsyncData = AsyncDataTemplate.bind({});
AsyncData.args = {
title: 'With selectable rows',
};