diff --git a/.gitignore b/.gitignore index e51faa6..7488e6d 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,8 @@ /umd npm-debug.log* package-lock.json +.idea/misc.xml +.idea/react-maskedinput-privacy.iml +.idea/modules.xml +.idea/workspace.xml +.idea/vcs.xml diff --git a/README.md b/README.md index cbfb565..97d282f 100644 --- a/README.md +++ b/README.md @@ -1,134 +1,9 @@ -# `MaskedInput` +# `MaskedInputPrivacy` A [React](http://facebook.github.io/react/) component for `` masking, built on top of [inputmask-core](https://github.com/insin/inputmask-core). ![This project has never been used by its author, other than while making it.](https://img.shields.io/badge/author--usage-never-red.png "This project has never been used by its author, other than while making it") -## [Live Demo](http://insin.github.io/react-maskedinput/) - -## Install - -### npm - -`MaskedInput` can be used on the server, or bundled for the client using an npm-compatible packaging system such as [Browserify](http://browserify.org/) or [webpack](http://webpack.github.io/). - -``` -npm install react-maskedinput --save -``` - -### Browser bundle - -The browser bundle exposes a global `MaskedInput` variable and expects to find a global `React` (>= 0.14.0) variable to work with. - -* [react-maskedinput.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.js) (development version) -* [react-maskedinput.min.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.min.js) (compressed production version) - -## Usage - -Give `MaskedInput` a [`mask`](#mask-string) and an `onChange` callback: - -```javascript -var React = require('react') -var MaskedInput = require('react-maskedinput') - -var CreditCardDetails = React.createClass({ - state: { - card: '', - expiry: '', - ccv: '' - }, - - _onChange(e) { - var stateChange = {} - stateChange[e.target.name] = e.target.value - this.setState(stateChange) - }, - - render() { - return
- - - -
- } -}) -``` - -Create some wrapper components if you have a masking configuration which will be reused: - -```javascript -var CustomInput = React.createClass({ - render() { - return - } -}) -``` - -## Props - -### `mask` : `string` - -The masking pattern to be applied to the ``. - -See the [inputmask-core docs](https://github.com/insin/inputmask-core#pattern) for supported formatting characters. - -### `onChange` : `(event: SyntheticEvent) => any` - -A callback which will be called any time the mask's value changes. - -This will be passed a `SyntheticEvent` with the input accessible via `event.target` as usual. - -**Note:** this component currently calls `onChange` directly, it does not generate an `onChange` event which will bubble up like a regular `` component, so you *must* pass an `onChange` if you want to get a value back out. - -### `formatCharacters`: `Object` - -Customised format character definitions for use in the pattern. - -See the [inputmask-core docs](https://github.com/insin/inputmask-core#formatcharacters) for details of the structure of this object. - -### `placeholderChar`: `string` - -Customised placeholder character used to fill in editable parts of the pattern. - -See the [inputmask-core docs](https://github.com/insin/inputmask-core#placeholderchar--string) for details. - -### `value` : `string` - -A default value for the mask. - -### `placeholder` : `string` - -A default `placeholder` will be generated from the mask's pattern, but you can pass a `placeholder` prop to provide your own. - -### `size` : `number | string` - -By default, the rendered ``'s `size` will be the length of the pattern, but you can pass a `size` prop to override this. - -### Other props - -Any other props passed in will be passed as props to the rendered ``, except for the following, which are managed by the component: - -* `maxLength` - will always be equal to the pattern's `.length` -* `onKeyDown`, `onKeyPress` & `onPaste` - will each trigger a call to `onChange` when necessary +In progress ## MIT Licensed diff --git a/nwb.config.js b/nwb.config.js index cf8a314..6fc5920 100644 --- a/nwb.config.js +++ b/nwb.config.js @@ -18,6 +18,7 @@ module.exports = function(build) { // demo build. config.webpack = { extra: { + devtool: 'source-map', node: { process: false } diff --git a/package.json b/package.json index 1eaa01a..e9ba309 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-maskedinput", - "version": "4.0.0", + "name": "react-maskedinput-privacy", + "version": "4.0.1", "description": "Masked React component", "main": "lib/index.js", "module": "es/index.js", @@ -31,12 +31,11 @@ "react": "15.x", "react-dom": "15.x" }, - "author": "Jonny Buchanan ", - "homepage": "https://github.com/insin/react-maskedinput", + "author": "Greg Hawk ", "license": "MIT", "repository": { "type": "git", - "url": "http://github.com/insin/react-maskedinput.git" + "url": "http://github.com/greghawk/react-maskedinput-privacy.git" }, "keywords": [ "react", diff --git a/src/index.js b/src/index.js index b9b16a8..e6a7021 100644 --- a/src/index.js +++ b/src/index.js @@ -122,6 +122,9 @@ class MaskedInput extends React.Component { _updateMaskSelection() { this.mask.selection = getSelection(this.input) + setTimeout(function() { + this.input.setSelectionRange(this.mask.selection.start, this.mask.selection.end); + }.bind(this), 1); } _updateInputSelection() {