Merge pull request #7 from schneidmaster/es6

Convert to ES6, update for latest package versions

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015", "react"],
+  "comments": false
+}

.gitignore

@@ -1,2 +1,3 @@
-node_modules
-index.js
+lib/
+node_modules/
+npm-debug.log

README.md

@@ -4,11 +4,15 @@
 
 [react-maskedinput](https://github.com/insin/react-maskedinput) form element that works with [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap).
 
-For `react-bootstrap` < 0.29.0, use [v0.1.0](https://github.com/schneidmaster/react-bootstrap-maskedinput/releases/tag/v0.1.0). For current versions of `react-bootstrap`, use 0.2.x.
+## Versioning
+
+* For `react-bootstrap` < 0.29.0, use [v0.1.0](https://github.com/schneidmaster/react-bootstrap-maskedinput/releases/tag/v0.1.0).
+* For current versions of `react-bootstrap`, use >= 0.2.x.
+* For projects on React >= 0.15.5, use 0.3.x to get rid of the proptypes warning. 0.3.x is also the first version to support `react-maskedinput` 4.x.
 
 ## Usage
 
-1. Install the package: `npm install react-bootstrap-maskedinput --save`
+1. Install the package: `npm install react-bootstrap-maskedinput --save` or `yarn add react-bootstrap-maskedinput`
 2. Import the component: `import MaskedFormControl from 'react-bootstrap-maskedinput'`
 3. Use in your JSX -- the component accepts all the usuals from react-bootstrap's `FormControl` component plus react-maskedinput's `MaskedInput` component.
 
@@ -17,7 +21,7 @@ Simple example:
 ```javascript
 import MaskedFormControl from 'react-bootstrap-maskedinput'
 
-export class MyForm extends React.Component {
+export default class MyForm extends React.Component {
   render () {
     return (
       <FormGroup>
@@ -35,15 +39,20 @@ export class MyForm extends React.Component {
 
 * git
 * npm
+* yarn (optional/recommended)
 
 ### Setup
 
 1. Clone the repository (`git clone git@github.com:schneidmaster/react-bootstrap-maskedinput.git`)
-2. Install dependencies: `npm install`
+2. Install dependencies: `npm install` or `yarn install`
+
+### Testing
+
+Run `npm run example` or `yarn example` and open [http://localhost:8080](http://localhost:8080). Make changes in `src/index.js` or try different setups in `example/index.js`.
 
 ### Deployment
 
-1. Run `npm run build` to build an ES5 version of the class.
+1. Run `npm run build` or `yarn build` to build an ES5 version of the class.
 
 ## Contributing
 

example/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FormGroup, ControlLabel } from 'react-bootstrap';
+import MaskedFormControl from '../src';
+
+const Example = () => {
+  return (
+    <div className='container'>
+      <h1>Example</h1>
+
+      <FormGroup>
+        <ControlLabel>Phone Number</ControlLabel>
+        <MaskedFormControl type='text' name='phoneNumber' mask='111-111-1111' />
+      </FormGroup>
+    </div>
+  );
+}
+
+const rootDiv = document.createElement('div');
+document.body.appendChild(rootDiv);
+ReactDOM.render(<Example />, rootDiv);

example/webpack.babel.js

@@ -0,0 +1,23 @@
+import webpack from 'webpack';
+
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import HtmlWebpackIncludeAssetsPlugin from 'html-webpack-include-assets-plugin';
+
+export default {
+  entry: './example/index.js',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: 'babel-loader'
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin(),
+    new HtmlWebpackIncludeAssetsPlugin({
+      assets: ['https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css'],
+      append: true
+    })
+  ]
+}

package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-bootstrap-maskedinput",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "react-maskedinput form element that works with react-bootstrap",
-  "main": "index.js",
+  "main": "lib/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "cjsx -cb index.cjsx"
+    "build": "babel src --out-dir lib",
+    "example": "webpack-dev-server --config example/webpack.babel.js"
   },
   "repository": {
     "type": "git",
@@ -23,14 +24,27 @@
     "url": "https://github.com/schneidmaster/react-bootstrap-maskedinput/issues"
   },
   "homepage": "https://github.com/schneidmaster/react-bootstrap-maskedinput#readme",
+  "files": [
+    "lib/",
+    "src/",
+    "LICENSE.txt",
+    "package.json",
+    "README.md"
+  ],
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-loader": "^7.1.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "html-webpack-include-assets-plugin": "^0.0.6",
+    "html-webpack-plugin": "^2.29.0",
+    "react-dom": "^15.5.0",
+    "webpack": "^3.2.0",
+    "webpack-dev-server": "^2.5.1"
+  },
   "dependencies": {
-    "classnames": "^2.2.3",
-    "react": "^15.0.0",
+    "react": "^15.5.0",
     "react-bootstrap": ">= 0.29.0",
-    "react-maskedinput": "^3.0.0",
-    "react-prop-types": "^0.3.0"
-  },
-  "devDependencies": {
-    "coffee-react": "^5.0.0"
+    "react-maskedinput": "^3.0.0 || ^4.0.0"
   }
 }

src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import MaskedInput from 'react-maskedinput';
+import { FormControl } from 'react-bootstrap';
+
+export default class MaskedFormControl extends FormControl {
+  render() {
+    const props = Object.assign({}, this.props, { componentClass: MaskedInput });
+
+    return React.createElement(FormControl, props);
+  }
+}
+
+// FormControl has a componentClass prop which 
+// MaskedFormControl always overrides to be a 
+// MaskedInput.
+delete MaskedFormControl.propTypes.componentClass;