joywok-material-components/components/datepicker/customTime.js

<h1 align="center"> Joywok Material Components </h1>

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
// import AsyncSelect from 'react-select/lib/Async';
import Typography from '@material-ui/core/Typography';

import SearchIcon from "@material-ui/core/SvgIcon/SvgIcon";
import InputBase from "@material-ui/core/InputBase/InputBase";
import CustomInput from "../input/customInput";
import Popper from '@material-ui/core/Popper';
import Fade from '@material-ui/core/Fade';
import Paper from '@material-ui/core/Paper';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Select from '../select/normal';
const styles = theme => ({
  root: {
    width: '100%',
  },
});
class CustomTime extends React.Component {
  constructor(props) {

    super(props);
    let self = this;
    this.state = {
      open:false,
      loading:false,
      list:[],
      day:1,
      hour:Number(moment().format("H"))+1,
      minute:0,
      check:[],
      anchorEl:null
    }
    if(props.value){
      this.state.hour = Math.floor(props.value/3600%24);
      this.state.minute = Math.floor(props.value / 60 % 60);
      this.state.day = Math.ceil(props.value / 86400);  
    }
    setTimeout(function(){
      self.onChange();
    },0)
  }
  onFocus(event){
    let self = this;
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    console.log('触发了');
    this.setState({
      anchorEl: event.currentTarget,
      open:true
    });
  }
  choseHour(e,data){
    let self = this;
    this.setState({
      hour:data
    })
    this.onChange();
  }
  choseMinute(e,data){
    let self = this;
    this.setState({
      minute:data,
      open:false
    })
    this.onChange();
  }
  changeDay(e){
    this.setState({
      day:e.target.value
    })
    this.onChange();
  }
  onChange(e){
    let self = this;
    setTimeout(function(){
      let value = (self.state.day-1) * 86400 + self.state.hour * 3600 + self.state.minute * 60
      self.props.onChange && self.props.onChange(value)
    },0)
  }
  render() {
    let self = this;
    const { classes } = this.props;
    const { anchorEl } = this.state;
    return (
      <div className={classes.root+' custom-time'}>
        <div className="custom-time-select">
          <Select value={this.state.day} options={[{key:1,value:"当天"},{key:2,value:"第二天"}]} onChange={(e)=>self.changeDay(e)}></Select>
        </div>
        <div className={'custom-time-c'}>
          <div className={' custom-time-input'}>
            <CustomInput
              placeholder={i18n("setting.usermanage.search")}
              classes={{
              }}
              value={(self.state.hour<10?'0'+self.state.hour:self.state.hour)+":"+(self.state.minute<10?'0'+self.state.minute:self.state.minute)}
              InputProps={{
              }}
              onClick={(e)=>self.onFocus(e)}
            />
            <i className="custom-time-input-icon"></i>
          </div>
          <div className={'custom-time-popover'}>
            <Popper
              id="custom-time-popper"
              open={this.state.open}
              placement={'bottom-start'}
              anchorEl={anchorEl}
              modifiers={{
              }}
              className={'custom-time-popper'}
              style={{
                width:'181px',
                marginTop:'5px',
                zIndex:"1001"
              }}
                transition
              >
                {({ TransitionProps }) => (
                  <Fade {...TransitionProps} timeout={350}>
                    <ClickAwayListener disableReactTree={true} onClickAway={(e)=>{
                        setTimeout(function(){
                          if(self.state.open){
                            self.setState({
                              open:false
                            })
                          }
                        },0)
                      }}>
                      <Paper className={"custom-time-list"}>
                        <div className="custom-time-hour">
                          {
                            _.map(_.range(0,24),function(i){
                              return <div className={"custom-time-hour-i "+(self.state.hour==i?'active ':" ")+(moment().format("H")>i?'disabled':"")} onClick={(e)=>self.choseHour(e,i)}>{i<10?'0':""}{i}</div>
                            })
                          }
                        </div>
                        <div className="custom-time-minute">
                          {
                            _.map((self.props.halfMinute?[0,30]:_.range(0,60)),function(i){
                              return <div  className={"custom-time-minute-i "+(self.state.minute==i?'active':"")} onClick={(e)=>self.choseMinute(e,i)}>{i<10?'0':""}{i}</div>
                            })
                          }
                        </div>
                      </Paper>
                    </ClickAwayListener>
                  </Fade>
                )}
            </Popper>
          </div>
        </div>
      </div>
    );
  }
  componentDidMount(){
  }
}
export default withStyles(styles)(CustomTime);