import React, { useState, useEffect, useRef } from 'react'; import { Checkbox } from 'antd'; import styles from './index.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;