@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
80 lines (79 loc) • 4.03 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useUniqueId } from '@workday/canvas-kit-react/common';
import { createStyles } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { trashIcon } from '@workday/canvas-system-icons-web';
import { TextInput } from '@workday/canvas-kit-react/text-input';
import { Table } from '@workday/canvas-kit-react/table';
import { Checkbox } from '@workday/canvas-kit-react/checkbox';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
const rowStyles = createStyles({
gridTemplateColumns: '24rem 12rem 7rem 7rem',
});
const centerStyles = createStyles({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
});
const currencyInputContainer = createStyles({
position: 'relative',
display: 'inline-block',
});
const dollarPrefix = createStyles({
position: 'absolute',
left: system.space.x2,
top: '50%',
transform: 'translateY(-50%)',
color: system.color.text.default,
pointerEvents: 'none',
zIndex: 1,
...system.type.subtext.large,
});
const currencyInput = createStyles({
paddingLeft: system.space.x4, // Make room for dollar sign
});
const expensesData = [
'Rent',
'Groceries',
'Electricity bill',
'Internet service',
'Gasoline',
'Cell phone bill',
'Health insurance',
'Car payment',
'Student loan payment',
'Dining out',
];
const LineItem = ({ itemName, labelIds }) => {
const [name, setName] = React.useState(itemName);
const [amount, setAmount] = React.useState('');
function handleNameChange(e) {
setName(e.target.value);
}
function handleAmountChange(e) {
const value = e.target.value;
// For type="number", the browser handles most validation
// We just need to limit decimal places to 2 for currency
if (value.includes('.')) {
const parts = value.split('.');
if (parts[1] && parts[1].length > 2) {
// Limit to 2 decimal places
const limitedValue = parts[0] + '.' + parts[1].substring(0, 2);
setAmount(limitedValue);
return;
}
}
setAmount(value);
}
return (_jsxs(Table.Row, { cs: rowStyles, children: [_jsx(Table.Header, { scope: "row", children: _jsx(TextInput, { onChange: handleNameChange, value: name, "aria-labelledby": labelIds.name }) }), _jsx(Table.Cell, { children: _jsxs("div", { className: currencyInputContainer, children: [_jsx("span", { className: dollarPrefix, "aria-hidden": "true", children: "$" }), _jsx(TextInput, { type: "number", value: amount, onChange: handleAmountChange, placeholder: "0.00", min: "0", step: "0.01", width: "10.5rem", "aria-labelledby": labelIds.amount, cs: currencyInput })] }) }), _jsx(Table.Cell, { cs: centerStyles, children: _jsx(Checkbox, { "aria-labelledby": labelIds.recon }) }), _jsx(Table.Cell, { cs: centerStyles, children: _jsx(Tooltip, { title: "Delete", children: _jsx(TertiaryButton, { icon: trashIcon }) }) })] }));
};
export const WithFormFields = () => {
const colHeadIds = {
name: useUniqueId(),
amount: useUniqueId(),
recon: useUniqueId(),
};
return (_jsxs(Table, { children: [_jsx(Table.Caption, { children: "Budget Planning Tool" }), _jsx(Table.Head, { children: _jsxs(Table.Row, { cs: rowStyles, children: [_jsxs(Table.Header, { scope: "col", id: colHeadIds.name, children: ["Expense Name", ' '] }), _jsxs(Table.Header, { scope: "col", id: colHeadIds.amount, children: ["Budgeted Amount (USD)", ' '] }), _jsx(Table.Header, { scope: "col", id: colHeadIds.recon, cs: centerStyles, children: "Reconciled" }), _jsxs(Table.Header, { scope: "col", cs: centerStyles, children: ["Actions", ' '] })] }) }), _jsx(Table.Body, { children: expensesData.map(i => (_jsx(LineItem, { itemName: i, labelIds: colHeadIds }))) })] }));
};