ldx-widgets/dist/components/input_placeholder.js

widgets

(function() {
  var InputPlaceholder, React, ReactDOM, _, input;

  React = require('react');

  ReactDOM = require('react-dom');

  _ = require('lodash');

  input = React.DOM.input;


  /*
  Input Props
  
  Takes standard text input properties
   */

  InputPlaceholder = React.createClass({
    displayName: 'InputPlaceholder',
    getDefaultProps: function() {
      return {
        className: '',
        type: 'text',
        placeholderIsSupported: document.createElement('input').placeholder !== void 0
      };
    },
    componentWillMount: function() {
      var placeholder, placeholderIsSupported, ref, type;
      ref = this.props, type = ref.type, placeholder = ref.placeholder, placeholderIsSupported = ref.placeholderIsSupported;
      return this.needsPlaceholding = placeholder && !placeholderIsSupported && (type === 'text' || type === 'password');
    },
    componentWillReceiveProps: function(props) {
      var ref;
      return this.needsPlaceholding = props.placeholder && !props.placeholderIsSupported && ((ref = props.type) === 'text' || ref === 'password');
    },
    componentDidUpdate: function() {
      return this.setSelectionIfNeeded(ReactDOM.findDOMNode(this));
    },
    onFocus: function(e) {
      var base;
      this.hasFocus = true;
      this.setSelectionIfNeeded(e.target);
      return typeof (base = this.props).onFocus === "function" ? base.onFocus(e) : void 0;
    },
    onBlur: function(e) {
      var base;
      this.hasFocus = false;
      return typeof (base = this.props).onBlur === "function" ? base.onBlur(e) : void 0;
    },
    onClick: function(e) {
      var base;
      this.hasFocus = true;
      e.target.focus();
      this.setSelectionIfNeeded(e.target);
      return typeof (base = this.props).onClick === "function" ? base.onClick() : void 0;
    },
    setSelectionIfNeeded: function(node) {
      if (this.needsPlaceholding && this.hasFocus && this.isPlaceholding && (node.selectionStart !== 0 || node.selectionEnd !== 0)) {
        return node.setSelectionRange(0, 0);
      }
    },
    onMouseDown: function(e) {
      var base;
      if (this.isPlaceholding) {
        this.setSelectionIfNeeded(e.target);
        e.preventDefault();
      }
      return typeof (base = this.props).onMouseDown === "function" ? base.onMouseDown(e) : void 0;
    },
    onKeydown: function(e) {
      var base, key;
      key = e.key;
      if (key === 'Enter' && this.needsPlaceholding) {
        e.preventDefault();
      }
      if (this.isPlaceholding && (key === 'ArrowRight' || key === 'ArrowLeft')) {
        e.preventDefault();
        this.setSelectionIfNeeded(e.target);
      }
      return typeof (base = this.props).onKeydown === "function" ? base.onKeydown(e) : void 0;
    },
    onChange: function(e) {
      var base, i, value;
      if (this.isPlaceholding) {
        value = e.target.value;
        i = value.indexOf(this.props.placeholder);
        if (i !== -1) {
          e.target.value = value.slice(0, i);
        }
      }
      return typeof (base = this.props).onChange === "function" ? base.onChange(e) : void 0;
    },
    onSelect: function(e) {
      var base;
      if (this.isPlaceholding) {
        this.setSelectionIfNeeded(e.target);
        e.preventDefault();
      }
      return typeof (base = this.props).onSelect === "function" ? base.onSelect(e) : void 0;
    },
    getValue: function() {
      var value;
      value = ReactDOM.findDOMNode(this).value;
      if (!this.needsPlaceholding) {
        return value;
      }
      if (value === this.props.placeholder) {
        return '';
      } else {
        return value;
      }
    },
    onPaste: function(e) {
      if (this.isPlaceholding) {
        return e.target.value = '';
      }
    },
    render: function() {
      var className, placeholder, props, ref, type, value;
      if (!this.needsPlaceholding) {
        return input(this.props);
      }
      ref = this.props, value = ref.value, placeholder = ref.placeholder, type = ref.type, className = ref.className;
      if (!value || value === '') {
        this.isPlaceholding = true;
        className += ' placeholder';
      } else {
        this.isPlaceholding = false;
      }
      props = _.assign(_.clone(this.props), {
        className: className,
        onFocus: this.onFocus,
        onBlur: this.onBlur,
        onClick: this.onClick,
        onChange: this.onChange,
        onFocus: this.onFocus,
        onKeyDown: this.onKeydown,
        onMouseDown: this.onMouseDown,
        value: this.isPlaceholding ? placeholder : value,
        type: this.isPlaceholding ? 'text' : type,
        onPaste: this.onPaste
      });
      return input(props);
    }
  });

  module.exports = InputPlaceholder;

}).call(this);