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(() => { setPlainOptions(cardMsg.plainOptions); setCheckedList(cardMsg.checkedList); setIndeterminate(cardMsg.indeterminate); setCheckAll(cardMsg.checkAll); }, []); // useEffect(() => { // if (prevAmount) { // let newCheckList = [...checkList]; // console.log(newCheckList); // // 当前选中的 // let currentArr = checkedList; // // 上一次选中的 // let preArr = prevAmount.checkedList; // currentArr = new Set(currentArr); // preArr = new Set(preArr); // // 找出相同的部分 // let someArr = [...new Set([...currentArr].filter(x => preArr.has(x)))]; // // 复选框事选中还是取消选中 add or del // let checkType; // if ([...currentArr].length > [...preArr].length) { // checkType = 'add'; // } else if ([...currentArr].length < [...preArr].length) { // checkType = 'del'; // } // if (checkType === 'add') { // // 添加新选中的元素 // currentArr.forEach(item => { // if (someArr.indexOf(item) === -1) { // let checkName = plainOptions.find(ele => ele.value === item); // newCheckList.push(checkName); // } // }); // } else if (checkType === 'del') { // // 删除取消勾选的元素 // preArr.forEach(item => { // if (someArr.indexOf(item) === -1) { // newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1); // } // }); // } // callback(checkedList, newCheckList); // } // }, [checkedList]); // 获取勾选新增得数据 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;