CardCheck.jsx 4.7 KB
Newer Older
1
import React, { useState, useEffect, useRef } from 'react';
2 3 4 5 6
import { Checkbox } from 'antd';
import styles from './PushTest.less';
const CheckboxGroup = Checkbox.Group;

const CardCheck = props => {
7 8 9 10 11 12 13 14
  // 自定义获取改变后的值hooks
  const usePrevious = value => {
    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
  };
15
  const { cardMsg, callback, checkList } = props;
16
  const [checkedList, setCheckedList] = useState([]); // 选中列表
17 18 19
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);
  const [plainOptions, setPlainOptions] = useState([]);
20
  const prevAmount = usePrevious({ checkedList });
21 22 23

  useEffect(() => {
    setPlainOptions(cardMsg.plainOptions);
24 25 26
    setCheckedList(cardMsg.checkedList);
    setIndeterminate(cardMsg.indeterminate);
    setCheckAll(cardMsg.checkAll);
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
  // 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);
70
  // 单选监听
71
  const onChange = list => {
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
    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);
89 90 91 92
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };
93
  // 全选监听
94
  const onCheckAllChange = e => {
95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
    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) : []);
112 113 114 115
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };
  return (
116
    <div className={styles.checkContent}>
117 118 119 120 121 122 123 124 125
      <div className={styles.topCheckbox}>
        <Checkbox
          indeterminate={indeterminate}
          onChange={e => onCheckAllChange(e)}
          checked={checkAll}
        >
          {cardMsg.groupName}
        </Checkbox>
      </div>
126
      <div className={styles.bottomCheckbox}>
127 128 129
        <CheckboxGroup
          value={checkedList}
          onChange={list => onChange(list)}
130 131 132 133 134 135 136 137
          style={{ display: 'flex', flexWrap: 'wrap' }}
        >
          {plainOptions.map(item => (
            <Checkbox key={item.value} value={item.value}>
              {item.label}
            </Checkbox>
          ))}
        </CheckboxGroup>
138 139 140 141 142 143
      </div>
    </div>
  );
};

export default CardCheck;