Skip to content

Commit

Permalink
feat: emphasize editable cells
Browse files Browse the repository at this point in the history
  • Loading branch information
ivan-aksamentov committed Mar 18, 2020
1 parent bdd4e7e commit 00a3b2f
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 17 deletions.
20 changes: 18 additions & 2 deletions src/components/Main/Scenario/SeverityTable.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
}
30 changes: 15 additions & 15 deletions src/components/Main/Scenario/SeverityTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ export function HeaderCell({ column, ...restProps }: HeaderCellProps) {
)
}

const readOnlyColumns = ['ageGroup', 'totalFatal']
const columnColors = {}

export interface EditableCellProps extends TableInlineCellEditing.CellProps {
onClick?(): void
}
Expand All @@ -61,25 +64,22 @@ export function EditableCell({
onKeyDown,
...restProps
}: EditableCellProps) {
const readOnlyColumns = ['ageGroup', 'totalFatal']

if (readOnlyColumns.includes(column.name)) {
return <Cell value={value} column={column} row={row} tableColumn={tableColumn} tableRow={tableRow} {...restProps} />
}
const isReadOnly = readOnlyColumns.includes(column.name)

return (
<td className="dx-g-bs4-table-cell text-nowrap text-right" {...restProps}>
<td className="dx-g-bs4-table-cell text-nowrap" {...restProps}>
<input
type="text"
className="dx-g-bs4-table-cell w-100 align-right table-cell-input"
type="number"
className="table-cell-editable-input text-center"
// readOnly={!editingEnabled}
value={value}
onChange={e => 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}
/>
</td>
)
Expand All @@ -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
Expand All @@ -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 (
<td className={`dx-g-bs4-table-cell text-nowrap ${textRight}`} {...restProps} onClick={onClick}>
{children ?? formattedValue}
<td className="dx-g-bs4-table-cell text-nowrap text-center" {...restProps} onClick={onClick}>
<div className={`mx-auto align-center ${editableClass}`}>{children ?? formattedValue}</div>
</td>
)
}
Expand Down Expand Up @@ -175,9 +175,9 @@ function SeverityTable({ severity, setSeverity }: SeverityTableProps) {

<Table cellComponent={Cell} />

<TableHeaderRow cellComponent={HeaderCell} />

<TableInlineCellEditing startEditAction={'click'} selectTextOnEditStart cellComponent={EditableCell} />

<TableHeaderRow cellComponent={HeaderCell} />
</Grid>
</Col>
</Row>
Expand Down

0 comments on commit 00a3b2f

Please sign in to comment.