code, README, LICENSE, grunt

Author: bywo

.gitignore

@@ -0,0 +1 @@
+node_modules

Gruntfile.js

@@ -0,0 +1,72 @@
+module.exports = function (grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    browserify: {
+      dist: {
+        files: {
+          'dist/react-input-placeholder.js': ['src/umd.js']
+        },
+      }
+    },
+    uglify: {
+      options: {
+        banner: '/*! <%= pkg.name %> - v <%= pkg.version %> - <%= pkg.author %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+      },
+      dist: {
+        files: {
+          'dist/react-input-placeholder.min.js': ['dist/react-input-placeholder.js']
+        }
+      }
+    },
+    jshint: {
+      options: {
+        indent: 2,
+        camelcase: true,
+        nonew: true,
+        plusplus: true,
+        quotmark: true,
+        bitwise: true,
+        forin: true,
+        curly: true,
+        eqeqeq: true,
+        immed: true,
+        latedef: true,
+        newcap: true,
+        noarg: true,
+        undef: true,
+        unused: true,
+        regexp: true,
+        trailing: true,
+        node: true,
+        browser: true
+      },
+      gruntfile: {
+        files: {
+          src: ['Gruntfile.js']
+        }
+      },
+      dev: {
+        files: {
+          src: ['src/**/*.js']
+        },
+        options: {
+          debug: true,
+          devel: true
+        }
+      },
+      dist: {
+        files: {
+          src: ['src/**/*.js']
+        }
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-browserify');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+
+  grunt.registerTask('lint', ['jshint']);
+  grunt.registerTask('dist', ['browserify', 'uglify']);
+  grunt.registerTask('default', ['jshint', 'dist']);
+};

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Enigma Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,4 +1,64 @@
-react-input-placeholder
+React Input with Placeholder Shim
 =======================
 
-Input is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.
+`Input` is a small wrapper around `React.DOM.input` that shims in `placeholder` functionality for browsers that don't natively support it. Currently only tested with IE9.
+
+Demo: http://jsfiddle.net/gb4xq/6/
+
+## Getting Started
+
+### Browserify
+
+Install: `npm install react-input-placeholder`
+
+Require: `Input = require('react-input-placeholder')(React);`
+
+### No module
+
+The compiled component sits in the `dist` folder, and places itself in `React.addons`.
+
+```
+<script src='dist/react-input-placeholder.min.js'></script>
+<script>
+  var Input = React.addons.Input;
+</script>
+```
+
+## Usage
+
+You can use `Input` exactly the same way you'd use `React.DOM.input`. All attributes will be passed on, and all event callbacks will be called. However, please note that the placeholder shim only works on [controlled](http://facebook.github.io/react/docs/forms.html#controlled-components) inputs (i.e., you must provide a `value` or `valueLink` prop).
+
+When the placeholder text is visible, the `placeholder` CSS class will be added to the `input` element so you can style it, e.g.
+```
+input.placeholder {
+  color: gray;
+  font-style: italic;
+}
+```
+
+### Before
+
+Placeholder doesn't show on IE9.
+
+```
+<input placeholder="Enter text here..." value={this.state.value} onChange={this.handleChange} />
+```
+
+### After
+
+Works on IE9!
+
+```
+<Input placeholder="Enter text here..." value={this.state.value} onChange={this.handleChange} />
+```
+
+## Building yourself
+
+```
+npm install
+grunt dist
+```
+
+## License
+
+MIT

dist/react-input-placeholder.js

@@ -0,0 +1,122 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+var isPlaceholderSupported = 'placeholder' in document.createElement('input');
+
+/**
+ * Input is a wrapper around React.DOM.input with a `placeholder` shim for IE9.
+ * NOTE: only supports "controlled" inputs (http://facebook.github.io/react/docs/forms.html#controlled-components)
+ */
+module.exports = function(React) {
+  return React.createClass({
+    displayName: 'Input',
+
+    componentWillMount: function() {
+      this.needsPlaceholding = this.props.placeholder && !isPlaceholderSupported;
+    },
+    componentWillReceiveProps: function(props) {
+      this.needsPlaceholding = props.placeholder && !isPlaceholderSupported;
+    },
+
+    // this component supports valueLink or value/onChange.
+    // borrowed from LinkedValueMixin.js
+    getValue: function() {
+      if (this.props.valueLink) {
+        return this.props.valueLink.value;
+      }
+      return this.props.value;
+    },
+    getOnChange: function() {
+      if (this.props.valueLink) {
+        return this._handleLinkedValueChange;
+      }
+      return this.props.onChange;
+    },
+    _handleLinkedValueChange: function(e) {
+      this.props.valueLink.requestChange(e.target.value);
+    },
+
+    // keep track of focus
+    onFocus: function(e) {
+      this.hasFocus = true;
+      this.setSelectionIfNeeded(e.target);
+      if (this.props.onFocus) { return this.props.onFocus(e); }
+    },
+    onBlur: function(e) {
+      this.hasFocus = false;
+      if (this.props.onBlur) { return this.props.onBlur(e); }
+    },
+
+    setSelectionIfNeeded: function(node) {
+      // if placeholder is visible, ensure cursor is at start of input
+      if (this.needsPlaceholding && this.hasFocus && this.isPlaceholding &&
+          (node.selectionStart !== 0 || node.selectionEnd !== 0)) {
+        node.setSelectionRange(0, 0);
+        return true;
+      }
+      return false;
+    },
+
+    onChange: function(e) {
+      if (this.isPlaceholding) {
+        // remove placeholder when text is added
+        var value = e.target.value,
+            i = value.indexOf(this.props.placeholder);
+        if (i !== -1) {
+          e.target.value = value.slice(0, i);
+        }
+      }
+      var onChange = this.getOnChange();
+      if (onChange) { return onChange(e); }
+    },
+
+    onSelect: function(e) {
+      if (this.isPlaceholding) {
+        this.setSelectionIfNeeded(e.target);
+        return false;
+      } else if (this.props.onSelect) {
+        return this.props.onSelect(e);
+      }
+    },
+
+    componentDidUpdate: function(prevProps, prevState, node) {
+      this.setSelectionIfNeeded(node);
+    },
+
+    render: function() {
+      var input = this.transferPropsTo(React.DOM.input());
+      if (this.needsPlaceholding) {
+        // override valueLink and event handlers
+        input.props.onFocus = this.onFocus;
+        input.props.onBlur = this.onBlur;
+        input.props.onChange = this.onChange;
+        input.props.onSelect = this.onSelect;
+        input.props.valueLink = undefined;
+
+        var value = this.getValue();
+        if (!value) {
+          this.isPlaceholding = true;
+          value = this.props.placeholder;
+          input.props.type = 'text';
+          input.props.className += ' placeholder';
+        } else {
+          this.isPlaceholding = false;
+        }
+        input.props.value = value;
+      }
+      return input;
+    }
+  });
+};
+
+},{}],2:[function(require,module,exports){
+/*global define*/
+var reactInputPlaceholder = require('./react-input-placeholder');
+if (typeof define === 'function' && define.amd) {
+  define(['react'], function (React) {
+    return reactInputPlaceholder(React);
+  });
+} else {
+  window.React.addons = window.React.addons || {};
+  window.React.addons.Input = reactInputPlaceholder(window.React);
+}
+
+},{"./react-input-placeholder":1}]},{},[2])

dist/react-input-placeholder.min.js

@@ -0,0 +1,29 @@
+{
+  "name": "react-input-placeholder",
+  "version": "0.1.0",
+  "description": "",
+  "main": "src/react-input-placeholder.js",
+  "scripts": {
+    "test": "grunt lint"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/enigma-io/react-input-placeholder.git"
+  },
+  "keywords": [
+    "placeholder",
+    "input",
+    "react"
+  ],
+  "author": "enigma.io",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/enigma-io/react-input-placeholder/issues"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-jshint": "~0.7.0",
+    "grunt-contrib-uglify": "~0.2.4",
+    "grunt-browserify": "~1.2.9"
+  }
+}