diff --git a/src/components/Main/Scenario/SeverityTable.scss b/src/components/Main/Scenario/SeverityTable.scss index d1cc60042..231d9f6d9 100644 --- a/src/components/Main/Scenario/SeverityTable.scss +++ b/src/components/Main/Scenario/SeverityTable.scss @@ -1,3 +1,5 @@ +@import '../../../styles/variables'; + // HACK: find a way to override these styles without `!important` .dx-g-bs4-header-cell { padding: 0 !important; @@ -18,7 +20,21 @@ min-width: 100px !important; } -.table-cell-input { - border: none; +.table-cell-editable { + border: 1px solid $gray-300; + width: 75%; + min-width: 50px; + max-width: unset !important; + + &:focus { + border: 1px solid $info; + } +} + +.table-cell-editable-input { + padding: auto 1px; outline: none; + border: 1px solid $gray-300; + width: 75%; + min-width: 50px; } diff --git a/src/components/Main/Scenario/SeverityTable.tsx b/src/components/Main/Scenario/SeverityTable.tsx index 07300562c..f4dbe9e8e 100644 --- a/src/components/Main/Scenario/SeverityTable.tsx +++ b/src/components/Main/Scenario/SeverityTable.tsx @@ -43,6 +43,9 @@ export function HeaderCell({ column, ...restProps }: HeaderCellProps) { ) } +const readOnlyColumns = ['ageGroup', 'totalFatal'] +const columnColors = {} + export interface EditableCellProps extends TableInlineCellEditing.CellProps { onClick?(): void } @@ -61,25 +64,22 @@ export function EditableCell({ onKeyDown, ...restProps }: EditableCellProps) { - const readOnlyColumns = ['ageGroup', 'totalFatal'] - - if (readOnlyColumns.includes(column.name)) { - return - } + const isReadOnly = readOnlyColumns.includes(column.name) return ( - + onValueChange(e.target.value)} + onChange={e => onValueChange && onValueChange(e.target.value)} // eslint-disable-next-line jsx-a11y/no-autofocus autoFocus={autoFocus} onBlur={onBlur} onFocus={onFocus} onKeyDown={onKeyDown} + readOnly={isReadOnly} /> ) @@ -90,8 +90,7 @@ export interface CellProps extends TableBase.DataCellProps { } export function Cell({ value, children, column, row, tableColumn, tableRow, onClick, ...restProps }: CellProps) { - const nonNumericColumns = ['ageGroup'] - const textRight = nonNumericColumns.includes(column.name) ? 'text-left' : 'text-right' + const isReadOnly = readOnlyColumns.includes(column.name) // Computed values may sometimes have way too many decimal digits // so we format them here in order to display something more reasonable @@ -101,9 +100,10 @@ export function Cell({ value, children, column, row, tableColumn, tableRow, onCl formattedValue = d3format('.2')(parseFloat(value)) } + const editableClass = isReadOnly ? '' : 'table-cell-editable' return ( - - {children ?? formattedValue} + +
{children ?? formattedValue}
) } @@ -175,9 +175,9 @@ function SeverityTable({ severity, setSeverity }: SeverityTableProps) { - - + +