@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
115 lines (114 loc) • 6.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { createComponent } from '@workday/canvas-kit-react/common';
import { Table } from '@workday/canvas-kit-react/table';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { Text } from '@workday/canvas-kit-react/text';
import { sortDownIcon, sortUpIcon } from '@workday/canvas-system-icons-web';
import { createStyles } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const countryData = [
{ country: 'Australia', capital: 'Canberra', population: 25690000 },
{ country: 'Bahamas', capital: 'Nassau', population: 407906 },
{ country: 'Canada', capital: 'Ottawa', population: 38250000 },
{ country: 'Fiji', capital: 'Suva', population: 924610 },
{ country: 'Ghana', capital: 'Accra', population: 32830000 },
{ country: 'Hong Kong', capital: 'City of Victoria', population: 7413000 },
{ country: 'India', capital: 'New Delhi', population: 1408000000 },
{ country: 'Ireland', capital: 'Dublin', population: 5033000 },
{ country: 'Jamaica', capital: 'Kingston', population: 2828000 },
{ country: 'Kenya', capital: 'Nairobi', population: 53010000 },
{ country: 'Micronesia', capital: 'Palikir', population: 113131 },
{ country: 'New Zealand', capital: 'Wellington', population: 5123000 },
{ country: 'Philippines', capital: 'Manila', population: 113900000 },
{ country: 'Puerto Rico', capital: 'San Juan', population: 3264000 },
{ country: 'Samoa', capital: 'Apia', population: 218764 },
{ country: 'Singapore', capital: 'Singapore', population: 5454000 },
{ country: 'Tanzania', capital: 'Dodoma', population: 63590000 },
{ country: 'United Kingdom', capital: 'London', population: 67330000 },
{ country: 'United States', capital: 'Washington, D.C.', population: 331900000 },
{ country: 'Zimbabwe', capital: 'Harare', population: 15990000 },
];
const initialHeaderRowState = {
column1SortDirection: 'ascending',
column2SortDirection: 'none',
column3SortDirection: 'none',
};
/**
* Given the current sort order, return the next sort order
*/
function getNextSortOrder(sortOrder) {
return sortOrder === 'ascending' ? 'descending' : 'ascending';
}
function headerRowReducer(state, action) {
switch (action.column) {
case 'Country':
if (state.column1SortDirection === 'ascending') {
action.payload.sort((a, b) => b.country.localeCompare(a.country));
}
else {
action.payload.sort((a, b) => a.country.localeCompare(b.country));
}
return {
...initialHeaderRowState,
column1SortDirection: getNextSortOrder(state.column1SortDirection),
};
case 'Capital':
if (state.column2SortDirection === 'ascending') {
action.payload.sort((a, b) => b.capital.localeCompare(a.capital));
}
else {
action.payload.sort((a, b) => a.capital.localeCompare(b.capital));
}
return {
...initialHeaderRowState,
column2SortDirection: getNextSortOrder(state.column2SortDirection),
};
case 'Population':
if (state.column3SortDirection === 'ascending') {
action.payload.sort((a, b) => b.population - a.population);
}
else {
action.payload.sort((a, b) => a.population - b.population);
}
return {
...initialHeaderRowState,
column3SortDirection: getNextSortOrder(state.column3SortDirection),
};
default:
return initialHeaderRowState;
}
}
const getSortIcon = (sortOrder) => {
if (sortOrder === 'ascending') {
return sortUpIcon;
}
else if (sortOrder === 'descending') {
return sortDownIcon;
}
else {
return undefined;
}
};
const SortableColumnHeader = createComponent('th')({
displayName: 'SortableColumnHeader',
Component: ({ label, sortOrder, onSortAction, children, ...elemProps }, ref) => {
return (_jsx(Table.Header, { ref: ref, scope: "col", "aria-sort": sortOrder, ...elemProps, children: _jsx(Tooltip, { type: "description", title: `Sort ${getNextSortOrder(sortOrder)}`, children: _jsx(TertiaryButton, { icon: getSortIcon(sortOrder), iconPosition: "end", onClick: () => onSortAction(label), children: children }) }) }));
},
});
const textStyles = createStyles({
paddingInlineStart: system.space.x3,
});
export const SortableColumnHeaders = () => {
const [headerRowState, headerRowDispatch] = React.useReducer(headerRowReducer, initialHeaderRowState);
function sortColumnHandler(columnName) {
headerRowDispatch({
column: columnName,
payload: countryData,
});
}
return (_jsxs(Table, { maxHeight: "40rem", children: [_jsx(Table.Caption, { children: "Population Listed by Country (2021)" }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(SortableColumnHeader, { label: "Country", sortOrder: headerRowState.column1SortDirection, onSortAction: sortColumnHandler, children: "Country" }), _jsx(SortableColumnHeader, { label: "Capital", sortOrder: headerRowState.column2SortDirection, onSortAction: sortColumnHandler, children: "Capital" }), _jsx(SortableColumnHeader, { label: "Population", sortOrder: headerRowState.column3SortDirection, onSortAction: sortColumnHandler, children: "Population" })] }) }), _jsx(Table.Body, { children: countryData.map(item => {
return (_jsxs(Table.Row, { children: [_jsx(Table.Header, { scope: "row", children: _jsx(Text, { cs: textStyles, children: item.country }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.capital }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.population.toLocaleString() }) })] }, item.country));
}) })] }));
};