@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
77 lines (76 loc) • 5.96 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { Button, Table } from '../..';
import { mockedColumns, mockedData } from '../table/mocked-data';
import { Tab } from './tab';
const story = {
title: 'Navigation/Tab',
component: Tab,
args: {
defaultValue: '1',
dimension: 'regular',
},
argTypes: {
dimension: {
options: ['regular', 'big'],
control: { type: 'select' },
},
},
};
export default story;
const Template = args => (_jsxs(Tab, { ...args, children: [_jsx(Tab.Panel, { value: "1", label: "Tab 1", children: "Panel 1" }), _jsx(Tab.Panel, { value: "2", label: "Tab mid long 2", children: "Panel 2" }), _jsx(Tab.Panel, { value: "3", label: "Tab short 3", children: "Panel 3" }), _jsx(Tab.Panel, { value: "4", label: "Tab veryy long 4", children: "Panel 4" }), _jsx(Tab.Panel, { value: "5", label: "Tab 5", children: "Panel 5" }), _jsx(Tab.Panel, { value: "6", label: "Tab 6", children: "Panel 6" })] }));
export const Default = Template.bind({});
export const InitialTab = Template.bind({});
InitialTab.args = {
defaultValue: '3',
};
export const ProgrammaticTab = () => {
const [state, setState] = useState('1');
return (_jsxs(Tab, { value: state, onValueChange: val => setState(val), children: [_jsxs(Tab.Panel, { value: "1", label: "Tab 1", children: [_jsx("p", { children: "Tab panel 1" }), _jsx(Button, { icon: "sun-bright", dimension: "small", onClick: () => setState('3'), children: "Go to tab 3" })] }), _jsxs(Tab.Panel, { value: "2", label: "Tab 2", children: [_jsx("p", { children: "Tab panel 2" }), _jsx(Button, { icon: "sun-bright", dimension: "small", onClick: () => setState('1'), children: "Go to tab 1" })] }), _jsxs(Tab.Panel, { value: "3", label: "Tab 3", children: [_jsx("p", { children: "Tab panel 3" }), _jsx(Button, { icon: "sun-bright", dimension: "small", onClick: () => setState('2'), children: "Go to tab 2" })] })] }));
};
export const ChangeEvent = Template.bind({});
ChangeEvent.args = {
onValueChange: current => alert(`current is ${current}`),
};
export const ConditionalTab = () => {
const [isVisible, setIsVisible] = useState(false);
return (_jsxs(Tab, { defaultValue: "1", children: [_jsx(Tab.Panel, { value: "1", label: "Tab 1", children: "Tab panel 1" }), _jsx(Tab.Panel, { value: "2", label: "Tab 2", children: _jsx(Button, { icon: "sun-bright", onClick: () => setIsVisible(!isVisible), children: "Toggle new tab" }) }), isVisible && _jsx(Tab.Panel, { value: "3", label: "Tab 3", children: "Tab panel 3" })] }));
};
export const DisabledTab = args => (_jsxs(Tab, { defaultValue: "1", ...args, children: [_jsx(Tab.Panel, { value: "1", label: "Tab 1", children: "Panel 1" }), _jsx(Tab.Panel, { value: "2", label: "Tab mid long 2", children: "Panel 2" }), _jsx(Tab.Panel, { value: "3", label: "Tab short 3", children: "Panel 3" }), _jsx(Tab.Panel, { disabled: true, value: "4", label: "Tab veryy long 4", children: "Panel 4" }), _jsx(Tab.Panel, { value: "5", label: "Tab 5", children: "Panel 5" }), _jsx(Tab.Panel, { value: "6", label: "Tab 6", children: "Panel 6" })] }));
export const WithIcons = args => (_jsxs(Tab, { defaultValue: "1", ...args, children: [_jsx(Tab.Panel, { icon: "star", value: "1", label: "Tab 1", children: "Panel 1" }), _jsx(Tab.Panel, { icon: "eye", value: "2", label: "Tab mid long 2", children: "Panel 2" }), _jsx(Tab.Panel, { icon: "sun-bright", value: "3", label: "Tab short 3", children: "Panel 3" }), _jsx(Tab.Panel, { icon: "moon", disabled: true, value: "4", label: "Tab veryy long 4", children: "Panel 4" }), _jsx(Tab.Panel, { icon: "magnifying-glass", value: "5", label: "Tab 5", children: "Panel 5" }), _jsx(Tab.Panel, { icon: "check", value: "6", label: "Tab 6", children: "Panel 6" })] }));
export const WithTables = () => {
const [activeTab, setActiveTab] = useState('Table1');
const [pagination, setPagination] = useState({
Table1: {
pageSize: 5,
pageIndex: 0,
},
Table2: {
pageSize: 10,
pageIndex: 0,
},
});
const handleTab = (tab) => {
setActiveTab(tab);
};
const handlePagination = ({ pageIndex, pageSize }) => {
if (pageIndex !== pagination[activeTab].pageIndex
|| pageSize !== pagination[activeTab].pageSize) {
const newPagination = { ...pagination, [activeTab]: { pageIndex, pageSize } };
setPagination(newPagination);
}
};
const pageData1 = useMemo(() => {
const { pageIndex, pageSize } = pagination.Table1;
const newIndexStart = pageIndex * pageSize;
const newIndexEnd = (pageIndex * pageSize) + pageSize;
return mockedData.slice(newIndexStart, newIndexEnd);
}, [pagination]);
const pageData2 = useMemo(() => {
const { pageIndex, pageSize } = pagination.Table2;
const newIndexStart = pageIndex * pageSize;
const newIndexEnd = (pageIndex * pageSize) + pageSize;
return mockedData.slice(newIndexStart, newIndexEnd);
}, [pagination]);
return (_jsxs(Tab, { defaultValue: activeTab, onValueChange: handleTab, children: [_jsx(Tab.Panel, { value: "Table1", label: "Table 1", children: _jsx(Table, { background: "seashell", stripes: true, showSeparators: true, columns: mockedColumns, data: pageData1, showPagination: true, itemsPerPage: pagination.Table1.pageSize, initialPageIndex: pagination.Table1.pageIndex, onPaginationChange: handlePagination, totalRows: mockedData.length }) }), _jsx(Tab.Panel, { value: "Table2", label: "Table 2", children: _jsx(Table, { background: "honeydew", stripes: true, showSeparators: true, columns: mockedColumns, data: pageData2, showPagination: true, itemsPerPage: pagination.Table2.pageSize, initialPageIndex: pagination.Table2.pageIndex, onPaginationChange: handlePagination, totalRows: mockedData.length }) })] }));
};