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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React, { useState, useEffect, useRef } from 'react';
import { Checkbox } from 'antd';
import styles from './PushTest.less';
const CheckboxGroup = Checkbox.Group;
const CardCheck = props => {
// 自定义获取改变后的值hooks
const usePrevious = value => {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
};
const { cardMsg, callback, checkList } = props;
const [checkedList, setCheckedList] = useState([]); // 选中列表
const [indeterminate, setIndeterminate] = useState(false);
const [checkAll, setCheckAll] = useState(false);
const [plainOptions, setPlainOptions] = useState([]);
const prevAmount = usePrevious({ checkedList });
useEffect(() => {
const msg = JSON.parse(JSON.stringify(cardMsg));
setPlainOptions(msg.plainOptions);
setCheckedList(msg.checkedList);
setIndeterminate(msg.indeterminate);
setCheckAll(msg.checkAll);
}, [cardMsg]);
// 获取勾选新增得数据
const addData = (arr1, arr2) => arr2.filter(val => arr1.indexOf(val) === -1);
// 获取勾选删除得数据
const delData = (arr1, arr2) => arr1.filter(val => arr2.indexOf(val) === -1);
// 单选监听
const onChange = list => {
let newCheckList = [...checkList];
let arr;
if (checkedList.length > list.length) {
// 取消勾选
arr = delData(checkedList, list);
arr.forEach(item => {
newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
});
} else {
// 勾选元素
arr = addData(checkedList, list);
arr.forEach(item => {
let checkName = plainOptions.find(ele => ele.value === item);
newCheckList.push(checkName);
});
}
callback(newCheckList);
setCheckedList(list);
setIndeterminate(!!list.length && list.length < plainOptions.length);
setCheckAll(list.length === plainOptions.length);
};
// 全选监听
const onCheckAllChange = e => {
let newCheckList = [...checkList];
let arr;
if (e.target.checked) {
// 全选
arr = addData(checkedList, plainOptions.map(item => item.value));
arr.forEach(item => {
let checkName = plainOptions.find(ele => ele.value === item);
newCheckList.push(checkName);
});
} else {
arr = delData(checkedList, []);
arr.forEach(item => {
newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
});
}
callback(newCheckList);
setCheckedList(e.target.checked ? plainOptions.map(item => item.value) : []);
setIndeterminate(false);
setCheckAll(e.target.checked);
};
return (
<div className={styles.checkContent}>
<div className={styles.topCheckbox}>
<Checkbox
indeterminate={indeterminate}
onChange={e => onCheckAllChange(e)}
checked={checkAll}
>
{cardMsg.groupName}
</Checkbox>
</div>
<div className={styles.bottomCheckbox}>
<CheckboxGroup
value={checkedList}
onChange={list => onChange(list)}
style={{ display: 'flex', flexWrap: 'wrap' }}
>
{plainOptions.map(item => (
<Checkbox key={item.value} value={item.value}>
{item.label}
</Checkbox>
))}
</CheckboxGroup>
</div>
</div>
);
};
export default CardCheck;