DayOfWeekSelect.jsx 2.31 KB
Newer Older
皮倩雯's avatar
皮倩雯 committed
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
/* eslint-disable default-case */
/* eslint-disable no-unused-expressions */
import React, { useEffect, useState } from 'react';
import { Radio, Checkbox, Row, Col } from 'antd';

const DayOfWeekSelect = props => {
  const { changeWeek } = props;

  const [selectValues, setSelectValues] = useState([]);
  const { onChange, value } = props;

  const hours = [
    { name: '星期一', value: '1' },
    { name: '星期二', value: '2' },
    { name: '星期三', value: '3' },
    { name: '星期四', value: '4' },
    { name: '星期五', value: '5' },
    { name: '星期六', value: '6' },
    { name: '星期天', value: '7' },
  ];
  const onTypeChange = e => {
    let values = [];
    switch (e.target.value) {
      case 0:
        values = ['1', '2', '3', '4', '5', '6', '7'];
        break;
      case 1:
        const arr = ['1', '2', '3', '4', '5', '6', '7'];
        let newArr = [];
        selectValues &&
          arr.map(item => {
            if (!selectValues.includes(item)) {
              newArr.push(item);
            }
          });
        values = newArr;
        break;
      case 2:
        values = ['1', '2', '3', '4', '5'];
        break;
      case 3:
        values = ['6', '7'];
        break;
    }
    changeWeek(values);
    setSelectValues(values);
    onChange && onChange(values);
  };

  const onCheckChange = val => {
    setSelectValues(val);
    onChange && onChange(val);
    changeWeek(val);
  };
  useEffect(() => {
    setSelectValues(value);
  }, [props]);
  return (
    <div>
      <Radio.Group onChange={onTypeChange} style={{ margin: '0.25rem 0' }}>
        <Radio style={{ width: '85px' }} value={0}>
          全选
        </Radio>
        <Radio style={{ width: '85px' }} value={1}>
          反选
        </Radio>
        <Radio style={{ width: '88px' }} value={2}>
          工作日
        </Radio>
        <Radio style={{ width: '88px' }} value={3}>
          周末
        </Radio>
      </Radio.Group>
      <Checkbox.Group value={selectValues} onChange={onCheckChange}>
        <Row>
          {hours.map((item, idx) => {
            return (
              <Col span={4} key={idx}>
                <Checkbox value={item.value}>{item.name}</Checkbox>
              </Col>
            );
          })}
        </Row>
      </Checkbox.Group>
    </div>
  );
};
export default DayOfWeekSelect;