ui-kit/controls/input/index.jade

user interface kit

:doc
  @name Input
  @prop {String} defaultValue
  @prop {Function} onFocus
  @prop {String} maxLength
  @prop {String} minLength
  @prop {String} multiLine
  @prop {Function} onBlur
  @prop {Function} onChange
  @prop {String} placeholder
  @prop {Boolean} readonly
  @prop {String} [ariaLabel] label for accessibility
  @prop {String} skinName
  @prop {String} style
  @prop {String} tabIndex
  @prop {String} type
  @prop {String} value

var.
  componentProps = {
    className: props.skinName,
    defaultValue: props.defaultValue,
    maxLength: props.maxLength,
    minLength: props.minLength,
    onBlur: this.onBlur,
    onChange: this.onChange,
    onFocus: this.onFocus,
    placeholder: props.placeholder,
    readonly: props.readonly,
    style: props.style,
    tabIndex: props.tabIndex,
    type: props.multiLine ? 'textarea' : props.type,
    value: props.value
  }

div(class=props.className)
  if componentProps.type !== 'textarea' && !props.multiLine
    input(ref='input' ariaLabel=props.ariaLabel)&props(componentProps)
  else
    textarea(ref='input' ariaLabel=props.ariaLabel rows='1')&props(componentProps)

:module
  export function getDefaultProps () {
    return {
      type: 'text'
    };
  }

  export function onBlur(ev) {
    if (this.props.onBlur) this.props.onBlur.call(this, ev);
    if (this.props.multiLine) this.recalculateSize(true);
  }

  export function onFocus(ev) {
    if (this.props.onFocus) this.props.onFocus.call(this, ev);
    if (this.props.multiLine) this.recalculateSize();
  }

  export function onChange(ev) {
    if (this.props.onChange) this.props.onChange.call(this, ev);
    if (this.props.multiLine) this.recalculateSize();
  }

  export function componentDidMount() {
    var self = this;
    if (this.props.multiLine) setTimeout(function () { self.recalculateSize(true) }, 300);
  }

  export function componentWillReceiveProps(props) {
    if (this.props.multiLine && props.value !== this.props.value) this.recalculateSize(true);
    return true;
  }

  export function recalculateSize(reset) {
    if (!this.refs.input) return;
    var input = this.refs.input.getDOMNode ? this.refs.input.getDOMNode() : this.refs.input;
    if (reset) input.style.height = '';
    var newHeight = input.scrollHeight;
    input.style.height = [newHeight, 'px'].join('');
  }