HourOfDaySelect.jsx 3.02 KB
Newer Older
1 2 3 4 5 6 7 8 9 10
import React, { useEffect, useState } from 'react'
import { Radio, Checkbox, Row, Col } from 'antd'
import styles from './HourOfDaySelect.less'


const HourOfDaySelect = props => {



    const [selectValues, setSelectValues] = useState([])
11
     const {onChange,value} = props
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
   
    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:
43 44
                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   
45 46
            case 1:
                values = []  
47
                break
48
            case 2:
49 50
                values = ["6","8"]    
                break 
51 52
            case 3:
                values = ["0","8","16"]
53
                break
54
            case 4:
55 56
                values = ["0","6","12","18"] 
                break        
57
        }
58 59
        onChange&&onChange(values)
        setSelectValues(values)
60 61
    }

62 63 64
    useEffect(()=>{
        setSelectValues(value)
    },[props])
65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
    const onCheckChange = (value)=>{
        
        setSelectValues(value)
        onChange&&onChange(value)
    }
    return (
        <div className={styles.hourOfDay_container}>
            <Radio.Group  onChange={onTypeChange}>
                <Radio value={0}>全选</Radio>
                <Radio value={1}>反选</Radio>
                <Radio value={2}>一天两次</Radio>
                <Radio value={3}>一天三次</Radio>
                <Radio value={4}>一天四次</Radio>
            </Radio.Group>
            <Checkbox.Group value={selectValues} onChange={onCheckChange}>
                <Row>
                    {
                        hours.map((item, idx) => {
                            return (
                                <Col span={4}>
                                    <Checkbox value={item.value}>{item.name}</Checkbox>
                                </Col>
                            )
                        })
                    }
                </Row>
            </Checkbox.Group>
        </div>
    )
}
export default HourOfDaySelect;