HourOfDaySelect.jsx 3.65 KB
Newer Older
1 2 3 4 5
import React, { useEffect, useState } from 'react'
import { Radio, Checkbox, Row, Col } from 'antd'
import styles from './HourOfDaySelect.less'
const HourOfDaySelect = props => {

6
    const { changeDay } = props
7 8

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

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
    const hours = [
        { name: "0:00", value: '0' },
        { name: "1:00", value: '1' },
        { name: "2:00", value: '2' },
        { name: "3:00", value: '3' },
        { name: "4:00", value: '4' },
        { name: "5:00", value: '5' },
        { name: "6:00", value: '6' },
        { name: "7:00", value: '7' },
        { name: "8:00", value: '8' },
        { name: "9:00", value: '9' },
        { name: "10:00", value: '10' },
        { name: "11:00", value: '11' },
        { name: "12:00", value: '12' },
        { name: "13:00", value: '13' },
        { name: "14:00", value: '14' },
        { name: "15:00", value: '15' },
        { name: "16:00", value: '16' },
        { name: "17:00", value: '17' },
        { name: "18:00", value: '18' },
        { name: "19:00", value: '19' },
        { name: "20:00", value: '20' },
        { name: "21:00", value: '21' },
        { name: "22:00", value: '22' },
        { name: "23:00", value: '23' },
    ]
    const onTypeChange = e => {
        let values = []
        switch (e.target.value) {
            case 0:
41 42
                values = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
                break
43
            case 1:
44 45 46 47 48 49 50 51
                const arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
                let newArr = []
                selectValues && arr.map(item => {
                    if (!selectValues.includes(item)) {
                        newArr.push(item)
                    }
                })
                values = newArr
52
                break
53
            case 2:
54 55
                values = ["6", "8"]
                break
56
            case 3:
57
                values = ["0", "8", "16"]
58
                break
59
            case 4:
60 61
                values = ["0", "6", "12", "18"]
                break
62
        }
63
        onChange && onChange(values)
64
        setSelectValues(values)
65
        changeDay(values)
66 67
    }

68
    useEffect(() => {
69
        setSelectValues(value)
70 71
    }, [props])
    const onCheckChange = (value) => {
72
        setSelectValues(value)
73 74
        onChange && onChange(value)
        changeDay(value)
75 76 77
    }
    return (
        <div className={styles.hourOfDay_container}>
78 79 80 81 82 83
            <Radio.Group onChange={onTypeChange} style={{ marginBottom: '0.5rem' }} >
                <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 style={{ width: '88px' }} value={4}>一天四次</Radio>
84 85 86 87 88 89
            </Radio.Group>
            <Checkbox.Group value={selectValues} onChange={onCheckChange}>
                <Row>
                    {
                        hours.map((item, idx) => {
                            return (
shaoan123's avatar
shaoan123 committed
90
                                <Col span={4} key={idx}>
91 92 93 94 95 96 97 98 99 100 101
                                    <Checkbox value={item.value}>{item.name}</Checkbox>
                                </Col>
                            )
                        })
                    }
                </Row>
            </Checkbox.Group>
        </div>
    )
}
export default HourOfDaySelect;