qm-bus/src/TimeSelect/index.js

千米公有云业务组件库

import React, { Component } from 'react'
import { Input, Select, DatePicker } from 'antd'

import WeekPicker from './WeekPicker'
import moment, { Moment } from 'moment'
import 'moment/locale/zh-cn'
import './time-select.less'

moment.updateLocale('zh-cn', {
  week: {
    dow: 1, // 周一是一周的第一天
  },
})

const InputGroup = Input.Group
const Option = Select.Option
const MonthPicker = DatePicker.MonthPicker

const TIME_RANGE_TRPE = {
  day: 'day',
  week: 'week',
  month: 'month',
}

class TimeSelect extends Component {
  state = {
    timeRangeType: 'day',
    startTime: null,
    endTime: null,
  }

  static defaultProps = {
    value: {
      timeRangeType: 'day',
      startTime: null,
      endTime: null,
    },
    onChange: () => {},
    format: 'YYYY-MM-DD',
    dateFormat: 'YYYY-MM-DD',
    weekFormat: 'YYYY-MM 第w周',
    monthFormat: 'YYYY-MM',
    dayDefaultVal: '',
    weekDefaultVal: '',
    monthDefaultVal: '',
    showSelectType: true,
    disabledDate: () => ({ day: () => {}, week: () => {}, month: () => {} }),
  }
  constructor(props) {
    super(props)
    this.init()
  }

  init = () => {
    const { props } = this

    let defaultState = {
      timeRangeType: 'day',
      startTime: '',
      endTime: '',
    }
    if (props.value && props.value.startTime) {
      defaultState = { ...defaultState, ...props.value }
    } else if (props.value && props.value.timeRangeType) {
      const timeRangeType = props.value.timeRangeType
      defaultState.timeRangeType = timeRangeType
      let defaultValue = this.props[`${timeRangeType}DefaultVal`]
      if (defaultValue) {
        const [startTime, endTime] = this.formatValue2Range(moment(defaultValue), timeRangeType)
        defaultState.startTime = startTime.format('YYYY-MM-DD')
        defaultState.endTime = endTime.format('YYYY-MM-DD')
      }
    }
    this.state = defaultState

    this.setState({
      startTime: defaultState.startTime,
      endTime: defaultState.endTime,
      timeRangeType: defaultState.timeRangeType,
    })
  }

  componentDidUpdate(prevProps) {
    const { value } = prevProps
    if (value !== this.props.value) {
      // const { timeRangeType = 'day', startTime = '', endTime = '' } = this.props.value
      //   ? this.props.value
      //   : {};

      this.init()
      // this.setState({
      //   timeRangeType,
      //   startTime,
      //   endTime,
      // });
    }
  }
  /**
   * 根据不同的时间类型推算出时间区间
   * @param {*} value
   * @param {*} timeRangeType
   */

  formatValue2Range(value, timeRangeType) {
    // 开始时间
    const startTime = moment(value).startOf(timeRangeType)
    // 结束时间
    const endTime = moment(value).endOf(timeRangeType)
    return [startTime, endTime]
  }

  /** 修改timeRangeType */
  onTypeChange = (timeRangeType) => {
    const value = { timeRangeType, startTime: '', endTime: '' }
    let defaultValue = this.props[`${timeRangeType}DefaultVal`]
    if (defaultValue) {
      const [startTime, endTime] = this.formatValue2Range(moment(defaultValue), timeRangeType)
      value.startTime = startTime.format('YYYY-MM-DD')
      value.endTime = endTime.format('YYYY-MM-DD')
    }
    this.setState(value)
    this.props.onChange(value)
  }

  /** 选择了时间 */
  onChangeHandle = (date) => {
    const { onChange, format } = this.props
    const { timeRangeType } = this.state
    const range = this.formatValue2Range(date, timeRangeType)
    const value = {
      timeRangeType: timeRangeType,
      startTime: range[0].format(format),
      endTime: range[1].format(format),
    }
    this.setState(value)
    onChange(value)
  }

  render() {
    const { timeRangeType } = this.state

    const { showSelectType } = this.props
    return (
      <InputGroup compact>
        {showSelectType && (
          <Select value={timeRangeType} style={{ width: '30%' }} onChange={this.onTypeChange}>
            <Option value="day">日</Option>
            <Option value="week">周</Option>
            <Option value="month">月</Option>
          </Select>
        )}
        {this._renderPicker()}
      </InputGroup>
    )
  }

  /** 渲染日期选择框 */
  _renderPicker() {
    const { timeRangeType, startTime } = this.state
    const { dateFormat, weekFormat, monthFormat, disabledDate } = this.props
    const { day, week, month } = disabledDate()
    const value = startTime ? moment(startTime) : null
    switch (timeRangeType) {
      case 'day':
        return (
          <DatePicker
            allowClear={false}
            value={value}
            format={dateFormat}
            onChange={this.onChangeHandle}
            style={{ width: '70%' }}
            showToday={false}
            disabledDate={day}
          />
        )
      case 'week':
        return (
          <WeekPicker
            value={value}
            format={weekFormat}
            onChange={this.onChangeHandle}
            style={{ width: '70%' }}
            disabledDate={week}
          />
        )
      case 'month':
        return (
          <MonthPicker
            allowClear={false}
            value={value}
            format={monthFormat}
            onChange={this.onChangeHandle}
            style={{ width: '70%' }}
            disabledDate={month}
          />
        )
      default:
        return null
    }
  }
}

export default (props) => {
  if (props.defaultValue) {
    const dayDefaultVal = moment(props.defaultValue) // 昨天
    const weekDefaultVal = moment().weekday(-7) // 上周一
    const monthDefaultVal = moment().subtract(1, 'months').startOf('month') // 上个月一号
    props = { ...props, dayDefaultVal, weekDefaultVal, monthDefaultVal }
  }
  return <TimeSelect {...props} />
}