Skip to content

Commit 824164c

Browse files
authored
feat(withTableSelection): add indeterminate state (gravity-ui#1743)
1 parent 1698d51 commit 824164c

File tree

1 file changed

+24
-4
lines changed

1 file changed

+24
-4
lines changed

src/components/Table/hoc/withTableSelection/withTableSelection.tsx

+24-4
Original file line numberDiff line numberDiff line change
@@ -60,23 +60,40 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
6060
private renderHeadCell = () => {
6161
const {data, selectedIds} = this.props;
6262
let disabled = true;
63-
let checked = data.every((item, index) => {
63+
let indeterminate = false;
64+
let checked = true;
65+
data.forEach((item, index) => {
6466
if (this.isDisabled(item, index)) {
65-
return true;
67+
return;
6668
} else {
6769
disabled = false;
6870
}
6971

7072
const id = Table.getRowId(this.props, item, index);
73+
const itemChecked = selectedIds.includes(id);
7174

72-
return selectedIds.includes(id);
75+
if (itemChecked) {
76+
indeterminate = true;
77+
} else {
78+
checked = false;
79+
}
7380
});
7481

82+
if (checked) {
83+
indeterminate = false;
84+
}
85+
7586
if (disabled) {
7687
checked = false;
88+
indeterminate = false;
7789
}
7890

79-
return this.renderCheckBox({disabled, checked, handler: this.handleAllCheckBoxUpdate});
91+
return this.renderCheckBox({
92+
disabled,
93+
checked,
94+
handler: this.handleAllCheckBoxUpdate,
95+
indeterminate,
96+
});
8097
};
8198

8299
private renderBodyCell = (item: I, index: number) => {
@@ -95,15 +112,18 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
95112
disabled,
96113
checked,
97114
handler,
115+
indeterminate,
98116
}: {
99117
checked: boolean;
100118
disabled: boolean;
101119
handler: React.ChangeEventHandler<HTMLInputElement>;
120+
indeterminate?: boolean; //only for header cell checkbox
102121
}) {
103122
return (
104123
<Checkbox
105124
size="l"
106125
checked={checked}
126+
indeterminate={indeterminate}
107127
disabled={disabled}
108128
onChange={handler}
109129
className={b('selection-checkbox', {

0 commit comments

Comments
 (0)