jimu-mobile/src/components/timepicker/timedefaultpicker.js

积木组件库助力移动端开发

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Picker from '../picker/picker.js';

class TimeDefaultPicker extends Component {
  constructor() {
    super();
  }

  static propTypes = {
    open: PropTypes.bool,
    pickerAway: PropTypes.func,
    len: PropTypes.number,
  }

  static defaultProps = {
    textvalue: '时间组件按钮',
    pickerAway () { },
    pickerCancel () { },
    open: false,
    len: 7, // 展示天数
    format: ['M月d日', '点', '分'],
    delay: 15, // 与当前时间推迟（）分钟后，开始计时
    value: ['今天', '现在', ' '], // 默认数值
    optOneArr: ['今天', '明天', '后天'], // 第一栏默认名称
    nowText: '现在',
    isShowNowText: false,
    scale: 10, //  分钟刻度
  }

  componentWillMount () {
    this.setInitState();
  }

  setInitState () {
    let {
      value, open, len, format, isShowNowText
    } = this.props,
      // delay 以后获取时间
      dates = this.setDateFormat(new Date(), 'yyyy/MM/dd hh:mm'),
      mopt = [],
      nValue = value,
      hopt = this._setInitHour(dates.datelist.h, true),
      dopt = this._setInitData(dates.fmt, len);
    if (isShowNowText) {
      mopt = [''];
    } else {
      mopt = this._setInitMinutes(dates.datelist.m);
      nValue = [dopt[0], hopt[0], mopt[0]];
    }

    // 设置默认显示参数
    this.setState({
      startData: dates.fmt,
      value: nValue, // 默认数值 开始时间 、 结束时间
      options: [dopt, hopt, mopt], // 初始数值
      open,
    });
  }

  // 设置初始日期展示
  _setInitData (startDate, len) {
    let self = this,
      {
        scale, format, delay, optOneArr,
      } = this.props,
      timestamp = new Date(startDate).getTime(),
      dataArr = [];
    this.isCrossDay = false
    // 获取全部日期相关
    this.allData = [];
    // 判断是否跨天
    let delayD = this.setDateFormat(new Date(), 'yyyy/MM/dd').datelist.d
    let nowD = this.setDateFormat(new Date(), 'yyyy/MM/dd', { isDelay: false }).datelist.d
    if (delayD != nowD) {
      this.isCrossDay = true
    }

    for (let i = 0; i < len; i++) {
      const tamp = timestamp + 24 * 60 * 60 * 1000 * i + 60 * 1000 * delay + 60 * 1000 * scale;
      if (this.isCrossDay) { // 跨天
        if (i < optOneArr.length - 1) {
          dataArr.push(optOneArr[i + 1]);
        } else {
          dataArr.push(self.setDateFormat(new Date(parseInt(tamp)), format[0]).fmt);
        }
      } else {
        if (i < optOneArr.length) {
          dataArr.push(optOneArr[i]);
        } else {
          dataArr.push(self.setDateFormat(new Date(parseInt(tamp)), format[0]).fmt);
        }
      }
      this.allData.push(self.setDateFormat(new Date(parseInt(tamp)), 'yyyy/MM/dd').fmt);
      // 判断是否跨天
    }
    return dataArr;
  }

  // 设置初始小时展示   isOnday  是否当天
  _setInitHour (hour, isOnday) {
    let {
      format, scale, nowText, isShowNowText, delay,
    } = this.props,
      hourArr = [],
      dates = this.setDateFormat(new Date(), 'yyyy/MM/dd hh:mm'),
      gethour = isOnday ? dates.datelist.h : hour;

    if (isOnday && isShowNowText) {
      hourArr = [nowText]
    }
    for (let i = gethour; i < 24; i++) {
      hourArr.push(i + format[1]);
    }
    return hourArr;
  }

  // 设置分钟展示
  _setInitMinutes (minutes) {
    let { scale, format } = this.props,
      minutesArr = [];
    for (let i = 0; i < 60; i++) {
      // minutesArr.push(i + format[1])
      if (!(i % scale)) {
        let setMinutes = minutes + scale >= 60 ? 0 : minutes
        if (setMinutes <= i) {
          if (i < 10) { i = `0${i}`; }
          minutesArr.push(i + format[2]);
        }
      }
    }
    return minutesArr;
  }

  // 设置delay 以后时间 日期格式化  yyyy-MM-dd hh:mm ; yyyy/MM/dd hh:mm
  setDateFormat (nowdate, fmt, { isDelay = true } = {}) {
    let { delay, scale } = this.props,
      deleytamp = isDelay ? (new Date(nowdate).getTime() + 60 * 1000 * delay) : (new Date(nowdate).getTime()),
      date = new Date(parseInt(deleytamp)),
      o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
      };

    // 判断当前 delay 时间大于分钟最大刻度展示,小时+1
    if (isDelay && date.getMinutes() + scale >= 60) {
      deleytamp = new Date(nowdate).getTime() + 60 * 1000 * delay + 60 * 1000 * scale
      date = new Date(parseInt(deleytamp))
      o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
      }
    }

    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (`${date.getFullYear()}`).substr(4 - RegExp.$1.length));
    for (const k in o) {
      if (new RegExp(`(${k})`).test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((`00${o[k]}`).substr((`${o[k]}`).length)));
    }

    return {
      fmt,
      datelist: {
        y: date.getFullYear(),
        M: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        m: date.getMinutes() >= 10 ? date.getMinutes() : `0${date.getMinutes()}`,
      },
    };
  }

  onClickAway () {
    let { optOneArr, format, nowText, isShowNowText } = this.props,
      { value, options } = this.state,
      dates = this.setDateFormat(new Date(), 'yyyy/MM/dd hh:mm', { isDelay: false }),
      timestamp = new Date().getTime(),
      ondate = value[0],
      onhour = value[1],
      onminute = value[2],
      setValArr = value,
      len = options[0].length,
      dataString = '',
      fmt,
      setdataformat;

    for (let i = 0; i < len; i++) {
      const tamp = timestamp + 24 * 60 * 60 * 1000 * i;
      if (this.isCrossDay) { // 跨天
        if (options[0][i] === ondate) {
          if (i < optOneArr.length) {
            dataString += this.setDateFormat(new Date(parseInt(tamp)), 'yyyy/MM/dd').fmt;
          } else {
            dataString += this.allData[i];
          }
        }
      } else {
        if (options[0][i] === ondate) {
          if (i < optOneArr.length) {
            dataString += this.setDateFormat(new Date(parseInt(tamp)), 'yyyy/MM/dd').fmt;
          } else {
            dataString += this.allData[i];
          }
        }
      }
    }

    if (onhour === nowText && isShowNowText) {
      onhour = dates.datelist.h + format[1];
      onminute = dates.datelist.m + format[2];
      setValArr[2] = dates.datelist.m + format[2];
      dataString = '';
      fmt = new Date().getTime();
      setdataformat = new Date();
    } else {
      dataString += ` ${onhour.split(format[1])[0]}:${onminute.split(format[2])[0]}`;
      fmt = new Date(dataString).getTime();
      setdataformat = new Date(dataString);
    }

    this.props.pickerAway && this.props.pickerAway([ondate, onhour, onminute], this.refs.pickertime, setValArr, {
      fmt,
      data: this.setDateFormat(setdataformat, 'yyyy/MM/dd hh:mm', { isDelay: false }).fmt,
    });
  }

  onChange (val, text, listIndex) {
    let { options, value } = this.state,
      { format, optOneArr, nowText, isShowNowText } = this.props,
      days = options[0],
      hours = options[1],
      minutes = options[2],
      setHours = hours,
      setMinutes = minutes,
      dates = this.setDateFormat(new Date(), 'yyyy/MM/dd hh:mm'),
      onDay = value[0],
      onHours = value[1],
      onMinutes = value[2];

    // 日期更改时
    if (listIndex === 0) {
      if (val === days[0]) {
        setMinutes = [];
        setHours = this._setInitHour(dates.datelist.h, true);
        if (isShowNowText) {
          onHours = nowText;
          onMinutes = '';
        } else {
          onHours = setHours[0];
          setMinutes = this._setInitMinutes(dates.datelist.m);
          onMinutes = setMinutes[0];
        }
      } else {
        setHours = this._setInitHour(0, false);
        setMinutes = this._setInitMinutes(0);
        onHours = `0${format[1]}`;
        onMinutes = `00${format[2]}`;
      }
      onDay = val;
    }

    // 小时修改时
    if (listIndex === 1) {
      if (onDay === optOneArr[0] && val === nowText) {
        setMinutes = [];
        onMinutes = '';
      } else if (onDay === optOneArr[0] && val === dates.datelist.h + format[1]) {
        setMinutes = this._setInitMinutes(dates.datelist.m);
        onMinutes = this._setInitMinutes(dates.datelist.m)[0];
      } else {
        onMinutes = `00${format[2]}`;
        setMinutes = this._setInitMinutes(0);
      }
      onHours = val;
    }

    if (listIndex === 2) {
      onMinutes = val;
    }
    this.setState({
      value: [onDay, onHours, onMinutes],
      options: [days, setHours, setMinutes],
    });
  }
  onCancel () {
    const { pickerCancel } = this.props;
    pickerCancel && pickerCancel();
  }

  render () {
    const { textvalue } = this.props;

    return (
      <div className="dataPicker">
        <div className="pickertime" onClick={this._onClick.bind(this)} ref="pickertime">
          {textvalue}
        </div>
        <Picker
          ref="date_picker"
          value={this.state.value}
          options={this.state.options}
          onChange={this.onChange.bind(this)}
          onClickAway={this.onClickAway.bind(this)}
          open={this.state.open}
          onClickCancel={this.onCancel.bind(this)}
        />
      </div>
    );
  }

  _onClick () {
    this.refs.date_picker.show();
  }

  show () {
    this.refs.date_picker.show();
  }
}

module.exports = TimeDefaultPicker;