ant-design-vue/components/vc-input-number/src/index.js

import PropTypes from '../../_util/vue-types'
import BaseMixin from '../../_util/BaseMixin'
import { initDefaultProps, hasProp } from '../../_util/props-util'
import classNames from 'classnames'
import isNegativeZero from 'is-negative-zero'
import InputHandler from './InputHandler'

function noop () {
}

function preventDefault (e) {
  e.preventDefault()
}

function defaultParser (input) {
  return input.replace(/[^\w\.-]+/g, '')
}

/**
 * When click and hold on a button - the speed of auto changin the value.
 */
const SPEED = 200

/**
 * When click and hold on a button - the delay before auto changin the value.
 */
const DELAY = 600

/**
 * Max Safe Integer -- on IE this is not available, so manually set the number in that case.
 * The reason this is used, instead of Infinity is because numbers above the MSI are unstable
 */
const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || Math.pow(2, 53) - 1
const inputNumberProps = {
  value: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
  defaultValue: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
  focusOnUpDown: PropTypes.bool,
  autoFocus: PropTypes.bool,
  // onChange: PropTypes.func,
  // onKeyDown: PropTypes.func,
  // onKeyUp: PropTypes.func,
  prefixCls: PropTypes.string,
  tabIndex: PropTypes.string,
  disabled: PropTypes.bool,
  // onFocus: PropTypes.func,
  // onBlur: PropTypes.func,
  readOnly: PropTypes.bool,
  max: PropTypes.number,
  min: PropTypes.number,
  step: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
  upHandler: PropTypes.any,
  downHandler: PropTypes.any,
  useTouch: PropTypes.bool,
  formatter: PropTypes.func,
  parser: PropTypes.func,
  // onMouseEnter: PropTypes.func,
  // onMouseLeave: PropTypes.func,
  // onMouseOver: PropTypes.func,
  // onMouseOut: PropTypes.func,
  precision: PropTypes.number,
  required: PropTypes.bool,
  pattern: PropTypes.string,
}

export default {
  name: 'InputNumber',
  mixins: [BaseMixin],
  model: {
    prop: 'value',
    event: 'change',
  },
  props: initDefaultProps(inputNumberProps, {
    focusOnUpDown: true,
    useTouch: false,
    prefixCls: 'rc-input-number',
    min: -MAX_SAFE_INTEGER,
    step: 1,
    parser: defaultParser,
    required: false,
  }),
  data () {
    let value
    if (hasProp(this, 'value')) {
      value = this.value
    } else {
      value = this.defaultValue
    }
    value = this.toNumber(value)

    return {
      inputValue: this.toPrecisionAsStep(value),
      sValue: value,
      focused: this.autoFocus,
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.updatedFunc()
    })
  },
  beforeUpdate () {
    this.$nextTick(() => {
      try {
        this.start = this.$refs.inputRef.selectionStart
        this.end = this.$refs.inputRef.selectionEnd
      } catch (e) {
        // Fix error in Chrome:
        // Failed to read the 'selectionStart' property from 'HTMLInputElement'
        // http://stackoverflow.com/q/21177489/3040605
      }
    })
  },
  updated () {
    this.$nextTick(() => {
      this.updatedFunc()
    })
  },
  beforeDestroy () {
    this.stop()
  },
  watch: {
    value (val) {
      const value = this.focused
        ? val : this.getValidValue(val, this.min, this.max)
      this.setState({
        sValue: val,
        inputValue: this.inputting ? value : this.toPrecisionAsStep(value),
      })
    },
  },
  methods: {
    updatedFunc () {
      if (!this.pressingUpOrDown) {
        return
      }
      if (this.focusOnUpDown && this.focused) {
        const selectionRange = this.$refs.inputRef.setSelectionRange
        if (selectionRange &&
            typeof selectionRange === 'function' &&
            this.start !== undefined &&
            this.end !== undefined) {
          this.$refs.inputRef.setSelectionRange(this.start, this.end)
        } else {
          this.focus()
        }
        this.pressingUpOrDown = false
      }
    },
    onKeyDown (e, ...args) {
      if (e.keyCode === 38) {
        const ratio = this.getRatio(e)
        this.up(e, ratio)
        this.stop()
      } else if (e.keyCode === 40) {
        const ratio = this.getRatio(e)
        this.down(e, ratio)
        this.stop()
      }
      this.$emit('keydown', e, ...args)
    },
    onKeyUp (e, ...args) {
      this.stop()
      this.$emit('keyup', e, ...args)
    },
    onChange (e) {
      if (this.focused) {
        this.inputting = true
      }
      const input = this.parser(this.getValueFromEvent(e))
      this.setState({ inputValue: input })
      this.$emit('change', this.toNumberWhenUserInput(input)) // valid number or invalid string
    },
    onFocus (...args) {
      this.setState({
        focused: true,
      })
      this.$emit('focus', ...args)
    },
    onBlur (e, ...args) {
      this.inputting = false
      this.setState({
        focused: false,
      })
      const value = this.getCurrentValidValue(this.inputValue)
      // todo
      // e.persist() // fix https://github.com/react-component/input-number/issues/51
      this.setValue(value, () => {
        this.$emit('blur', e, ...args)
      })
    },
    getCurrentValidValue (value) {
      let val = value
      if (val === '') {
        val = ''
      } else if (!this.isNotCompleteNumber(val)) {
        val = this.getValidValue(val)
      } else {
        val = this.sValue
      }
      return this.toNumber(val)
    },
    getRatio (e) {
      let ratio = 1
      if (e.metaKey || e.ctrlKey) {
        ratio = 0.1
      } else if (e.shiftKey) {
        ratio = 10
      }
      return ratio
    },
    getValueFromEvent (e) {
      // optimize for chinese input expierence
      // https://github.com/ant-design/ant-design/issues/8196
      return e.target.value.trim().replace(/。/g, '.')
    },
    getValidValue (value, min = this.min, max = this.max) {
      let val = parseFloat(value, 10)
      // https://github.com/ant-design/ant-design/issues/7358
      if (isNaN(val)) {
        return value
      }
      if (val < min) {
        val = min
      }
      if (val > max) {
        val = max
      }
      return val
    },
    setValue (v, callback) {
      // trigger onChange
      const newValue = this.isNotCompleteNumber(parseFloat(v, 10)) ? undefined : parseFloat(v, 10)
      const changed = newValue !== this.sValue ||
        `${newValue}` !== `${this.inputValue}` // https://github.com/ant-design/ant-design/issues/7363
      if (!hasProp(this, 'value')) {
        this.setState({
          sValue: newValue,
          inputValue: this.toPrecisionAsStep(v),
        }, callback)
      } else {
        // always set input value same as value
        this.setState({
          inputValue: this.toPrecisionAsStep(this.sValue),
        }, callback)
      }
      if (changed) {
        this.$emit('change', newValue)
      }
    },
    getPrecision (value) {
      if (hasProp(this, 'precision')) {
        return this.precision
      }
      const valueString = value.toString()
      if (valueString.indexOf('e-') >= 0) {
        return parseInt(valueString.slice(valueString.indexOf('e-') + 2), 10)
      }
      let precision = 0
      if (valueString.indexOf('.') >= 0) {
        precision = valueString.length - valueString.indexOf('.') - 1
      }
      return precision
    },
    // step={1.0} value={1.51}
    // press +
    // then value should be 2.51, rather than 2.5
    // if this.props.precision is undefined
    // https://github.com/react-component/input-number/issues/39
    getMaxPrecision (currentValue, ratio = 1) {
      if (hasProp(this, 'precision')) {
        return this.precision
      }
      const { step } = this
      const ratioPrecision = this.getPrecision(ratio)
      const stepPrecision = this.getPrecision(step)
      const currentValuePrecision = this.getPrecision(currentValue)
      if (!currentValue) {
        return ratioPrecision + stepPrecision
      }
      return Math.max(currentValuePrecision, ratioPrecision + stepPrecision)
    },
    getPrecisionFactor (currentValue, ratio = 1) {
      const precision = this.getMaxPrecision(currentValue, ratio)
      return Math.pow(10, precision)
    },
    focus () {
      this.$refs.inputRef.focus()
    },
    blur () {
      this.$refs.inputRef.blur()
    },
    formatWrapper (num) {
      // http://2ality.com/2012/03/signedzero.html
      // https://github.com/ant-design/ant-design/issues/9439
      if (isNegativeZero(num)) {
        return '-0'
      }
      if (this.formatter) {
        return this.formatter(num)
      }
      return num
    },
    toPrecisionAsStep (num) {
      if (this.isNotCompleteNumber(num) || num === '') {
        return num
      }
      const precision = Math.abs(this.getMaxPrecision(num))
      if (precision === 0) {
        return num.toString()
      }
      if (!isNaN(precision)) {
        return Number(num).toFixed(precision)
      }
      return num.toString()
    },
    // '1.' '1x' 'xx' '' => are not complete numbers
    isNotCompleteNumber (num) {
      return (
        isNaN(num) ||
        num === '' ||
        num === null ||
        (num && num.toString().indexOf('.') === num.toString().length - 1)
      )
    },
    toNumber (num) {
      if (this.isNotCompleteNumber(num)) {
        return num
      }
      if (hasProp(this, 'precision')) {
        return Number(Number(num).toFixed(this.precision))
      }
      return Number(num)
    },
    // '1.0' '1.00'  => may be a inputing number
    toNumberWhenUserInput (num) {
      // num.length > 16 => prevent input large number will became Infinity
      if ((/\.\d*0$/.test(num) || num.length > 16) && this.focused) {
        return num
      }
      return this.toNumber(num)
    },
    upStep (val, rat) {
      const { step, min } = this
      const precisionFactor = this.getPrecisionFactor(val, rat)
      const precision = Math.abs(this.getMaxPrecision(val, rat))
      let result
      if (typeof val === 'number') {
        result =
          ((precisionFactor * val + precisionFactor * step * rat) /
          precisionFactor).toFixed(precision)
      } else {
        result = min === -Infinity ? step : min
      }
      return this.toNumber(result)
    },
    downStep (val, rat) {
      const { step, min } = this
      const precisionFactor = this.getPrecisionFactor(val, rat)
      const precision = Math.abs(this.getMaxPrecision(val, rat))
      let result
      if (typeof val === 'number') {
        result =
          ((precisionFactor * val - precisionFactor * step * rat) /
          precisionFactor).toFixed(precision)
      } else {
        result = min === -Infinity ? -step : min
      }
      return this.toNumber(result)
    },
    stepFn (type, e, ratio = 1, recursive) {
      this.stop()
      if (e) {
        // e.persist()
        e.preventDefault()
      }
      if (this.disabled) {
        return
      }
      const { max, min } = this
      const value = this.getCurrentValidValue(this.inputValue) || 0
      if (this.isNotCompleteNumber(value)) {
        return
      }
      let val = this[`${type}Step`](value, ratio)
      const outOfRange = val > max || val < min
      if (val > max) {
        val = max
      } else if (val < min) {
        val = min
      }
      this.setValue(val)
      this.setState({
        focused: true,
      })
      if (outOfRange) {
        return
      }
      this.autoStepTimer = setTimeout(() => {
        this[type](e, ratio, true)
      }, recursive ? SPEED : DELAY)
    },
    stop () {
      if (this.autoStepTimer) {
        clearTimeout(this.autoStepTimer)
      }
    },
    down (e, ratio, recursive) {
      this.pressingUpOrDown = true
      this.stepFn('down', e, ratio, recursive)
    },
    up (e, ratio, recursive) {
      this.pressingUpOrDown = true
      this.stepFn('up', e, ratio, recursive)
    },
    handleInputClick () {
      this.$emit('click')
    },
  },
  render () {
    const { prefixCls, disabled, readOnly, useTouch } = this.$props
    const classes = classNames({
      [prefixCls]: true,
      [`${prefixCls}-disabled`]: disabled,
      [`${prefixCls}-focused`]: this.focused,
    })
    let upDisabledClass = ''
    let downDisabledClass = ''
    const { sValue } = this
    if (sValue || sValue === 0) {
      if (!isNaN(sValue)) {
        const val = Number(sValue)
        if (val >= this.max) {
          upDisabledClass = `${prefixCls}-handler-up-disabled`
        }
        if (val <= this.min) {
          downDisabledClass = `${prefixCls}-handler-down-disabled`
        }
      } else {
        upDisabledClass = `${prefixCls}-handler-up-disabled`
        downDisabledClass = `${prefixCls}-handler-down-disabled`
      }
    }

    const editable = !this.readOnly && !this.disabled

    // focus state, show input value
    // unfocus state, show valid value
    let inputDisplayValue
    if (this.focused) {
      inputDisplayValue = this.inputValue
    } else {
      inputDisplayValue = this.toPrecisionAsStep(this.sValue)
    }

    if (inputDisplayValue === undefined || inputDisplayValue === null) {
      inputDisplayValue = ''
    }

    let upEvents
    let downEvents
    if (useTouch) {
      upEvents = {
        touchstart: (editable && !upDisabledClass) ? this.up : noop,
        touchend: this.stop,
      }
      downEvents = {
        touchstart: (editable && !downDisabledClass) ? this.down : noop,
        touchend: this.stop,
      }
    } else {
      upEvents = {
        mousedown: (editable && !upDisabledClass) ? this.up : noop,
        mouseup: this.stop,
        mouseleave: this.stop,
      }
      downEvents = {
        mousedown: (editable && !downDisabledClass) ? this.down : noop,
        mouseup: this.stop,
        mouseleave: this.stop,
      }
    }
    const inputDisplayValueFormat = this.formatWrapper(inputDisplayValue)
    const isUpDisabled = !!upDisabledClass || disabled || readOnly
    const isDownDisabled = !!downDisabledClass || disabled || readOnly
    const contentProps = {
      on: this.$listeners,
      class: classes,
    }
    const upHandlerProps = {
      props: {
        disabled: isUpDisabled,
        prefixCls,
      },
      attrs: {
        unselectable: 'unselectable',
        role: 'button',
        'aria-label': 'Increase Value',
        'aria-disabled': !!isUpDisabled,
      },
      class: `${prefixCls}-handler ${prefixCls}-handler-up ${upDisabledClass}`,
      on: upEvents,
      ref: 'up',
    }
    const downHandlerProps = {
      props: {
        disabled: isDownDisabled,
        prefixCls,
      },
      attrs: {
        unselectable: 'unselectable',
        role: 'button',
        'aria-label': 'Decrease Value',
        'aria-disabled': !!isDownDisabled,
      },
      class: `${prefixCls}-handler ${prefixCls}-handler-down ${downDisabledClass}`,
      on: downEvents,
      ref: 'down',
    }
    // ref for test
    return (
      <div
        {...contentProps}
      >
        <div class={`${prefixCls}-handler-wrap`}>
          <InputHandler
            {...upHandlerProps}
          >
            {this.upHandler || <span
              unselectable='unselectable'
              class={`${prefixCls}-handler-up-inner`}
              onClick={preventDefault}
            />}
          </InputHandler>
          <InputHandler
            {...downHandlerProps}
          >
            {this.downHandler || <span
              unselectable='unselectable'
              class={`${prefixCls}-handler-down-inner`}
              onClick={preventDefault}
            />}
          </InputHandler>
        </div>
        <div
          class={`${prefixCls}-input-wrap`}
          role='spinbutton'
          aria-valuemin={this.min}
          aria-valuemax={this.max}
          aria-valuenow={sValue}
        >
          <input
            required={this.required}
            type={this.type}
            placeholder={this.placeholder}
            onClick={this.handleInputClick}
            class={`${prefixCls}-input`}
            tabIndex={this.tabIndex}
            autoComplete='off'
            onFocus={this.onFocus}
            onBlur={this.onBlur}
            onKeydown={editable ? this.onKeyDown : noop}
            onKeyup={editable ? this.onKeyUp : noop}
            autoFocus={this.autoFocus}
            maxLength={this.maxLength}
            readOnly={this.readOnly}
            disabled={this.disabled}
            max={this.max}
            min={this.min}
            step={this.step}
            name={this.name}
            id={this.id}
            onChange={this.onChange}
            ref='inputRef'
            value={inputDisplayValueFormat}
            pattern={this.pattern}
          />
        </div>
      </div>
    )
  },
}