@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
90 lines (89 loc) • 4.99 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { Table } from '@workday/canvas-kit-react/table';
import { Heading } from '@workday/canvas-kit-react/text';
import { Checkbox } from '@workday/canvas-kit-react/checkbox';
import { createComponent, generateUniqueId } from '@workday/canvas-kit-react/common';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { createStencil, createStyles } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const selectableRowStencil = createStencil({
base: {
gridTemplateColumns: '3.5rem repeat(2, 1fr)',
transition: 'background-color 200ms',
},
modifiers: {
isSelected: {
true: {
backgroundColor: system.color.bg.primary.soft,
},
},
},
});
const tableHeaderStyles = createStyles({
backgroundColor: system.color.bg.alt.soft,
});
const tableCellStyles = createStyles({
backgroundColor: 'transparent',
});
const SelectableRow = createComponent('tr')({
displayName: 'SelectableRow',
Component: ({ onSelect, rowData }) => {
return (_jsxs(Table.Row, { cs: selectableRowStencil({ isSelected: rowData.checked }), children: [_jsx(Table.Cell, { cs: tableCellStyles, children: _jsx(Tooltip, { title: rowData.name, children: _jsx(Checkbox, { checked: rowData.checked, onChange: onSelect }) }) }), _jsx(Table.Header, { cs: tableCellStyles, scope: "row", children: rowData.name }), _jsx(Table.Cell, { cs: tableCellStyles, children: rowData.amount })] }));
},
});
const pizzaToppingData = [
{ name: 'Pepperoni', amount: '2.5 oz.', checked: false },
{ name: 'Mozzarella', amount: '5 oz.', checked: false },
{ name: 'Basil', amount: '10 Leaves', checked: false },
{ name: 'Roasted Red Peppers', amount: '3 oz.', checked: false },
{ name: 'Mushrooms', amount: '2 oz.', checked: false },
];
const headingID = generateUniqueId();
export const SelectableRows = () => {
const [selectAllState, setSelectAllState] = React.useState('unchecked');
const [toppings, setToppings] = React.useState(pizzaToppingData);
const handleToppingChange = (name) => {
// Toggle the selected item's checked state and update state
const updatedToppings = toppings.map(topping => {
if (topping.name === name) {
return { ...topping, checked: !topping.checked };
}
else {
return topping;
}
});
setToppings(updatedToppings);
// Update the Select All checkbox state
const selectedToppings = updatedToppings.filter(topping => topping.checked === true);
// If no toppings are selected, set the Select All checkbox to 'unchecked'
if (selectedToppings.length === 0) {
setSelectAllState('unchecked');
// If all toppings are selected, set the Select All checkbox to 'checked'
}
else if (selectedToppings.length === updatedToppings.length) {
setSelectAllState('checked');
// Otherwise, set the Select All checkbox to 'indeterminate'
}
else {
setSelectAllState('indeterminate');
}
};
const handleSelectAll = () => {
// If the Select All checkbox is in a checked or indeterminate state,
// update it to 'unchecked', and uncheck all topping checkboxes
if (selectAllState === 'checked' || selectAllState === 'indeterminate') {
setSelectAllState('unchecked');
const updatedToppingData = toppings.map(topping => ({ ...topping, checked: false }));
setToppings(updatedToppingData);
}
// If the Select All checkbox is in an unchecked state,
// update it to 'checked', and check all topping checkboxes
if (selectAllState === 'unchecked') {
setSelectAllState('checked');
const updatedToppingData = toppings.map(topping => ({ ...topping, checked: true }));
setToppings(updatedToppingData);
}
};
return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", id: headingID, size: "small", children: "Select your pizza toppings" }), _jsxs(Table, { "aria-labelledby": headingID, children: [_jsxs(Table.Row, { gridTemplateColumns: "3.5rem repeat(2, 1fr)", children: [_jsx(Table.Cell, { cs: tableHeaderStyles, children: _jsx(Tooltip, { title: "Select All", children: _jsx(Checkbox, { checked: selectAllState === 'checked', indeterminate: selectAllState === 'indeterminate', onChange: handleSelectAll }) }) }), _jsx(Table.Header, { scope: "col", cs: tableHeaderStyles, children: "Toppings" }), _jsx(Table.Header, { scope: "col", cs: tableHeaderStyles, children: "Amount" })] }), _jsx(Table.Body, { children: toppings.map(rowData => (_jsx(SelectableRow, { rowData: rowData, onSelect: () => handleToppingChange(rowData.name) }, rowData.name))) })] })] }));
};