react-date-picker/src/DateFormatSpinnerInput/index.js

A carefully crafted date picker for React

import React from 'react'
import Component from 'react-class'

import { Flex, Item } from 'react-flex'
import DateFormatInput from '../DateFormatInput'

import assign from 'object-assign'
import joinFunctions from '../joinFunctions'
import assignDefined from '../assignDefined'
import join from '../join'

export default class DateFormatSpinnerInput extends Component {

  constructor(props) {
    super(props)

    this.state = {
      focused: false
    }
  }

  componentWillUnmount() {
    this.started = false
  }

  render() {
    const props = this.props
    const children = React.Children.toArray(props.children)

    const input = this.inputChild = children.filter(c => c && c.type == 'input')[0]
    const inputProps = input ? assign({}, input.props) : {}

    const onKeyDown = joinFunctions(props.onKeyDown, inputProps.onKeyDown)
    const onChange = joinFunctions(props.onChange, inputProps.onChange)
    const disabled = props.disabled || inputProps.disabled

    assignDefined(inputProps, {
      size: props.size || inputProps.size,
      minDate: props.minDate || inputProps.minDate,
      maxDate: props.maxDate || inputProps.maxDate,

      changeDelay: props.changeDelay === undefined ? inputProps.changeDelay : props.changeDelay,

      tabIndex: props.tabIndex,

      onKeyDown,
      onChange,
      disabled,

      dateFormat: props.dateFormat === undefined ? inputProps.dateFormat : props.dateFormat,
      stopPropagation: props.stopPropagation,
      updateOnWheel: props.updateOnWheel,

      onBlur: this.onBlur,
      onFocus: this.onFocus
    })

    this.inputProps = inputProps

    const arrowSize = this.props.arrowSize

    this.arrows = {
      1: <svg height={arrowSize} viewBox="0 0 24 24" width={arrowSize} >
        <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" />
        {/*<path d="M0 0h24v24H0z" fill="none"/>*/}
      </svg>,

      '-1': <svg height={arrowSize} viewBox="0 0 24 24" width={arrowSize} >
        <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" />
        {/*<path d="M0-.75h24v24H0z" fill="none"/>*/}
      </svg>
    }

    const className = join(
      props.className,
      'react-date-picker__date-format-spinner',
      disabled && 'react-date-picker__date-format-spinner--disabled',
      this.isFocused() && 'react-date-picker__date-format-spinner--focused',
      `react-date-picker__date-format-spinner--theme-${props.theme}`
    )

    return <Flex
      inline
      row
      className={className}
      disabled={props.disabled}
    >
      <DateFormatInput
        ref={inputDOM => { this.input = inputDOM }}
        value={props.value}
        {...inputProps}
      />
      {this.renderArrows()}
    </Flex>
  }

  renderArrows() {
    if (this.props.renderArrows) {
      return this.props.renderArrows(this.props)
    }

    return <Flex
      column
      inline
    >
      {this.renderArrow(1)}
      {this.renderArrow(-1)}
    </Flex>
  }

  renderArrow(dir) {
    return <Item
      flexShrink={1}
      className="react-date-picker__date-format-spinner-arrow"
      style={{ overflow: 'hidden', height: this.props.arrowSize }}
      onMouseDown={this.onMouseDown.bind(this, dir)}
      onMouseUp={this.stop}
      onMouseLeave={this.stop}
    >
      {this.arrows[dir]}
    </Item>
  }

  onMouseDown(dir, event) {
    if (this.props.disabled) {
      event.preventDefault()
      return
    }

    event.preventDefault()
    if (this.isFocused()) {
      this.start(dir)
    } else {
      this.focus()

      setTimeout(() => {
        this.increment(dir)
      }, 1)
    }
  }

  start(dir) {
    this.started = true
    this.startTime = Date.now()

    this.step(dir)

    this.timeoutId = setTimeout(() => {
      this.step(dir)

      this.timeoutId = setTimeout(() => {
        const lazyStep = () => {
          const delay = this.props.stepDelay - ((Date.now() - this.startTime) / 500)
          this.step(dir, lazyStep, delay)
        }

        lazyStep()
      }, this.props.secondStepDelay)
    }, this.props.firstStepDelay)
  }

  isStarted() {
    return !!(this.started && this.input)
  }

  increment(dir) {
    this.input.onDirection(dir)
  }

  step(dir, callback, delay) {
    if (this.isStarted()) {
      this.increment(dir)

      if (typeof callback == 'function') {
        this.timeoutId = setTimeout(() => {
          if (this.isStarted()) {
            callback()
          }
        }, delay === undefined ? this.props.stepDelay : delay)
      }
    }
  }

  stop() {
    this.started = false
    if (this.timeoutId) {
      global.clearTimeout(this.timeoutId)
    }
  }

  focus() {
    if (this.input) {
      this.input.focus()
    }
  }

  isFocused() {
    return this.state.focused
  }

  onBlur(event) {
    const { props } = this
    const onBlur = joinFunctions(
      props.onBlur,
      this.inputChild && this.inputChild.props && this.inputChild.props.onBlur
    )

    if (onBlur) {
      onBlur(event)
    }

    this.setState({
      focused: false
    })
  }

  onFocus(event) {
    const { props } = this
    const onFocus = joinFunctions(
      props.onFocus,
      this.inputChild && this.inputChild.props && this.inputChild.props.onFocus
    )

    if (onFocus) {
      onFocus(event)
    }

    this.setState({
      focused: true
    })
  }
}

DateFormatSpinnerInput.defaultProps = {
  firstStepDelay: 150,
  secondStepDelay: 100,
  stepDelay: 50,

  changeDelay: undefined,

  theme: 'default',

  disabled: false,
  arrowSize: 15,
  isDateInput: true,
  stopPropagation: true,
  updateOnWheel: true
}