/
CheckboxCellTemplate.tsx
70 lines (62 loc) · 2.35 KB
/
CheckboxCellTemplate.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import * as React from "react";
// NOTE: all modules imported below may be imported from '@silevis/reactgrid'
import { getCellProperty } from "../Functions/getCellProperty";
import { keyCodes } from "../Functions/keyCodes";
import { Cell, CellTemplate, Compatible, Uncertain, UncertainCompatible } from "../Model/PublicModel";
export interface CheckboxCell extends Cell {
type: "checkbox";
checked: boolean;
checkedText?: string;
uncheckedText?: string;
}
export class CheckboxCellTemplate implements CellTemplate<CheckboxCell> {
getCompatibleCell(uncertainCell: Uncertain<CheckboxCell>): Compatible<CheckboxCell> {
const checked = getCellProperty(uncertainCell, "checked", "boolean");
const text = checked
? uncertainCell.checkedText
? uncertainCell.checkedText
: "1"
: uncertainCell.uncheckedText
? uncertainCell.uncheckedText
: "";
return { ...uncertainCell, checked: !!checked, value: checked ? 1 : NaN, text };
}
handleKeyDown(
cell: Compatible<CheckboxCell>,
keyCode: number,
ctrl: boolean,
shift: boolean,
alt: boolean
): { cell: Compatible<CheckboxCell>; enableEditMode: boolean } {
if (!shift && (keyCode === keyCodes.SPACE || keyCode === keyCodes.ENTER))
return { cell: this.getCompatibleCell(this.toggleCheckboxCell(cell)), enableEditMode: false };
return { cell, enableEditMode: false };
}
private toggleCheckboxCell(cell: Compatible<CheckboxCell>): Compatible<CheckboxCell> {
return this.getCompatibleCell({ ...cell, checked: !cell.checked });
}
update(cell: Compatible<CheckboxCell>, cellToMerge: UncertainCompatible<CheckboxCell>): Compatible<CheckboxCell> {
const checked = cellToMerge.type === "checkbox" ? cellToMerge.checked : !!cellToMerge.value;
return this.getCompatibleCell({ ...cell, checked });
}
getClassName(cell: Compatible<CheckboxCell>): string {
return cell.className ? cell.className : "";
}
render(
cell: Compatible<CheckboxCell>,
isInEditMode: boolean,
onCellChanged: (cell: Compatible<CheckboxCell>, commit: boolean) => void
): React.ReactNode {
return (
<label>
<input
className="rg-input"
type="checkbox"
checked={cell.checked}
onChange={(e) => onCellChanged(this.toggleCheckboxCell(cell), true)}
/>
<span></span>
</label>
);
}
}