121 |
--------------------------------------------------------------------------------
/src/PinInput.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, { Component } from 'react';
3 | import PinItem from './PinItem';
4 |
5 | /**
6 | */
7 | class PinInput extends Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.values = Array(props.length)
12 | .fill('')
13 | .map((x, i) => props.initialValue.toString()[i] || '');
14 | this.elements = [];
15 | this.currentIndex = 0;
16 |
17 | this.onPaste = this.onPaste.bind(this);
18 | }
19 |
20 | componentDidMount() {
21 | // Setting focus on the first element
22 | if (this.props.focus && this.props.length) this.elements[0].focus();
23 | }
24 |
25 | clear() {
26 | this.elements.forEach(e => e.clear());
27 | this.values = this.values.map(() => undefined);
28 | this.elements[0].focus();
29 | }
30 |
31 | focus() {
32 | if (this.props.length) this.elements[0].focus();
33 | }
34 |
35 | /**
36 | */
37 | onItemChange(value, isPasting, index) {
38 | const { length, onComplete, onChange } = this.props;
39 | let currentIndex = index;
40 |
41 | this.values[index] = value;
42 |
43 | // Set focus on next
44 | if (value.length === 1 && index < length - 1) {
45 | currentIndex += 1;
46 | this.elements[currentIndex].focus();
47 | }
48 |
49 | // Notify the parent
50 | const pin = this.values.join('');
51 |
52 | if (!isPasting) {
53 | onChange(pin, currentIndex);
54 | }
55 |
56 | if (pin.length === length) {
57 | // for pasting, trigger onComplete only when the last input triggers onChange
58 | if (isPasting && index < length - 1) {
59 | return;
60 | }
61 |
62 | onComplete(pin, currentIndex);
63 | }
64 | }
65 |
66 | onBackspace(index) {
67 | if (index > 0) {
68 | this.elements[index - 1].focus();
69 | }
70 | }
71 |
72 | onPaste(value) {
73 | const { length } = this.props;
74 | if (value.length !== length) {
75 | return;
76 | }
77 |
78 | this.elements.forEach((el, index) => el.update(value[index], true));
79 | }
80 |
81 | render() {
82 | return (
83 |
84 | {this.values.map((e, i) => (
85 | (this.elements[i] = n)}
88 | key={i}
89 | disabled={this.props.disabled}
90 | onBackspace={() => this.onBackspace(i)}
91 | secret={this.props.secret || false}
92 | onChange={(v, isPasting) => this.onItemChange(v, isPasting, i)}
93 | type={this.props.type}
94 | inputMode={this.props.inputMode}
95 | validate={this.props.validate}
96 | inputStyle={this.props.inputStyle}
97 | inputFocusStyle={this.props.inputFocusStyle}
98 | autoSelect={this.props.autoSelect}
99 | onPaste={i === 0 ? this.onPaste : null}
100 | regexCriteria={this.props.regexCriteria}
101 | ariaLabel={this.props.ariaLabel}
102 | placeholder={this.props.placeholder}
103 | secretDelay={this.props.secretDelay}
104 | />
105 | ))}
106 |
107 | );
108 | }
109 | }
110 |
111 | PinInput.propTypes = {
112 | initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
113 | length: PropTypes.number.isRequired,
114 | type: PropTypes.string,
115 | onComplete: PropTypes.func,
116 | validate: PropTypes.func,
117 | secret: PropTypes.bool,
118 | disabled: PropTypes.bool,
119 | focus: PropTypes.bool,
120 | onChange: PropTypes.func,
121 | inputMode: PropTypes.string,
122 | style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
123 | inputStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
124 | inputFocusStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
125 | autoSelect: PropTypes.bool,
126 | regexCriteria: PropTypes.any,
127 | ariaLabel: PropTypes.string,
128 | placeholder: PropTypes.string,
129 | };
130 |
131 | PinInput.defaultProps = {
132 | initialValue: '',
133 | type: 'numeric',
134 | secret: false,
135 | validate: null,
136 | focus: false,
137 | disabled: false,
138 | onChange: () => {},
139 | onComplete: () => {},
140 | inputMode: undefined,
141 | style: {},
142 | inputStyle: {},
143 | inputFocusStyle: {},
144 | autoSelect: true,
145 | regexCriteria: /^[a-zA-Z0-9]+$/,
146 | ariaLabel: '',
147 | placeholder: ''
148 | };
149 |
150 | export default PinInput;
151 |
--------------------------------------------------------------------------------
/src/PinItem.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, { Component } from 'react';
3 |
4 | const styles = {
5 | input: {
6 | padding: 0,
7 | margin: '0 2px',
8 | textAlign: 'center',
9 | border: '1px solid',
10 | background: 'transparent',
11 | width: '50px',
12 | height: '50px',
13 | },
14 | inputFocus: {
15 | outline: 'none',
16 | boxShadow: 'none',
17 | },
18 | };
19 |
20 | /**
21 | */
22 | class PinItem extends Component {
23 | constructor(props) {
24 | super(props);
25 | this.state = {
26 | value: this.validate(props.initialValue),
27 | showSecret: this.props.secret,
28 | focus: false,
29 | };
30 | this.onChange = this.onChange.bind(this);
31 | this.onKeyDown = this.onKeyDown.bind(this);
32 | this.onFocus = this.onFocus.bind(this);
33 | this.onBlur = this.onBlur.bind(this);
34 | this.onPaste = this.onPaste.bind(this);
35 | this.secretTimeout = null;
36 | this.inputTimeout = null;
37 | }
38 |
39 | componentWillUnmount() {
40 | clearTimeout(this.secretTimeout);
41 | clearTimeout(this.inputTimeout)
42 | }
43 |
44 | onKeyDown(e) {
45 | if (e.keyCode === 8 && (!this.state.value || !this.state.value.length)) {
46 | this.props.onBackspace();
47 | }
48 | }
49 |
50 | clear() {
51 | this.setState({
52 | value: '',
53 | });
54 | }
55 |
56 | setSecretDelayed(value){
57 | this.setState({ showSecret: false });
58 | this.secretTimeout = setTimeout(()=>{
59 | this.setState({
60 | showSecret: value ? true : false,
61 | });
62 | } ,this.props.secretDelay);
63 | }
64 |
65 | update(updatedValue, isPasting = false) {
66 | const value = this.validate(updatedValue);
67 | if (this.state.value === value && !isPasting) return;
68 |
69 | if (value.length < 2) {
70 | this.setState({
71 | value,
72 | });
73 |
74 | this.inputTimeout = setTimeout(() => {
75 | this.props.onChange(value, isPasting);
76 | }, 0);
77 | }
78 | }
79 |
80 | onChange(e) {
81 | this.update(e.target.value);
82 | }
83 |
84 | focus() {
85 | this.input.focus();
86 | }
87 |
88 | onFocus(e) {
89 | if (this.props.autoSelect) {
90 | e.target.select();
91 | }
92 | this.setState({ focus: true });
93 | }
94 |
95 | onBlur() {
96 | this.setState({ focus: false });
97 | }
98 |
99 | onPaste(e) {
100 | if (!this.props.onPaste) {
101 | return;
102 | }
103 |
104 | const value = e.clipboardData.getData('text');
105 | this.props.onPaste(value);
106 | }
107 |
108 | validate(value) {
109 | if(this.props.secretDelay) this.setSecretDelayed(value)
110 |
111 | if (this.props.validate) {
112 | return this.props.validate(value);
113 | }
114 |
115 | if (this.props.type === 'numeric') {
116 | const numCode = value.charCodeAt(0);
117 | const isInteger =
118 | numCode >= '0'.charCodeAt(0) && numCode <= '9'.charCodeAt(0);
119 | return isInteger ? value : '';
120 | }
121 | if (this.props.regexCriteria.test(value)) {
122 | return value.toUpperCase();
123 | }
124 |
125 | return '';
126 | }
127 |
128 | render() {
129 | const { focus, value } = this.state;
130 | const { type, inputMode, inputStyle, inputFocusStyle } = this.props;
131 | const inputType = type === 'numeric' ? 'tel' : type || 'text';
132 | return (
133 | (this.input = n)}
146 | onFocus={this.onFocus}
147 | onBlur={this.onBlur}
148 | onPaste={this.onPaste}
149 | style={Object.assign(
150 | {},
151 | styles.input,
152 | inputStyle,
153 | focus ? Object.assign({}, styles.inputFocus, inputFocusStyle) : {},
154 | )}
155 | value={value}
156 | />
157 | );
158 | }
159 | }
160 |
161 | PinItem.propTypes = {
162 | initialValue: PropTypes.string,
163 | onChange: PropTypes.func.isRequired,
164 | onBackspace: PropTypes.func.isRequired,
165 | onPaste: PropTypes.func,
166 | secret: PropTypes.bool,
167 | secretDelay: PropTypes.number,
168 | disabled: PropTypes.bool,
169 | type: PropTypes.string,
170 | inputMode: PropTypes.string,
171 | validate: PropTypes.func,
172 | inputStyle: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
173 | inputFocusStyle: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
174 | autoSelect: PropTypes.bool,
175 | regexCriteria: PropTypes.any,
176 | ariaLabel: PropTypes.string,
177 | placeholder: PropTypes.string,
178 | };
179 |
180 | PinItem.defaultProps = {
181 | secret: false,
182 | type: 'numeric',
183 | inputMode: undefined,
184 | disabled: false,
185 | validate: undefined,
186 | autoSelect: false,
187 | onPaste: undefined,
188 | regexCriteria: /^[a-zA-Z0-9]+$/,
189 | ariaLabel: '',
190 | placeholder: ''
191 | };
192 |
193 | export default PinItem;
194 |
--------------------------------------------------------------------------------
/dist/bundle.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["react-pin-input"]=t():e["react-pin-input"]=t()}(this,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/",n(n.s=3)}([function(e,t,n){e.exports=n(5)()},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";e.exports=n(8)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,o=n(4),u=(r=o)&&r.__esModule?r:{default:r};t.default=u.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n\n {this.values.map((e, i) => (\n (this.elements[i] = n)}\n key={i}\n disabled={this.props.disabled}\n onBackspace={() => this.onBackspace(i)}\n secret={this.props.secret || false}\n onChange={(v, isPasting) => this.onItemChange(v, isPasting, i)}\n type={this.props.type}\n inputMode={this.props.inputMode}\n validate={this.props.validate}\n inputStyle={this.props.inputStyle}\n inputFocusStyle={this.props.inputFocusStyle}\n autoSelect={this.props.autoSelect}\n onPaste={i === 0 ? this.onPaste : null}\n regexCriteria={this.props.regexCriteria}\n ariaLabel={this.props.ariaLabel}\n placeholder={this.props.placeholder}\n secretDelay={this.props.secretDelay}\n />\n ))}\n
\n );\n }\n}\n\nPinInput.propTypes = {\n initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n length: PropTypes.number.isRequired,\n type: PropTypes.string,\n onComplete: PropTypes.func,\n validate: PropTypes.func,\n secret: PropTypes.bool,\n disabled: PropTypes.bool,\n focus: PropTypes.bool,\n onChange: PropTypes.func,\n inputMode: PropTypes.string,\n style: PropTypes.object, // eslint-disable-line react/forbid-prop-types\n inputStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types\n inputFocusStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types\n autoSelect: PropTypes.bool,\n regexCriteria: PropTypes.any,\n ariaLabel: PropTypes.string,\n placeholder: PropTypes.string,\n};\n\nPinInput.defaultProps = {\n initialValue: '',\n type: 'numeric',\n secret: false,\n validate: null,\n focus: false,\n disabled: false,\n onChange: () => {},\n onComplete: () => {},\n inputMode: undefined,\n style: {},\n inputStyle: {},\n inputFocusStyle: {},\n autoSelect: true,\n regexCriteria: /^[a-zA-Z0-9]+$/,\n ariaLabel: '',\n placeholder: ''\n};\n\nexport default PinInput;\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar emptyFunction = require('fbjs/lib/emptyFunction');\nvar invariant = require('fbjs/lib/invariant');\nvar ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\n\nmodule.exports = function() {\n function shim(props, propName, componentName, location, propFullName, secret) {\n if (secret === ReactPropTypesSecret) {\n // It is still safe when called from React.\n return;\n }\n invariant(\n false,\n 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +\n 'Use PropTypes.checkPropTypes() to call them. ' +\n 'Read more at http://fb.me/use-check-prop-types'\n );\n };\n shim.isRequired = shim;\n function getShim() {\n return shim;\n };\n // Important!\n // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.\n var ReactPropTypes = {\n array: shim,\n bool: shim,\n func: shim,\n number: shim,\n object: shim,\n string: shim,\n symbol: shim,\n\n any: shim,\n arrayOf: getShim,\n element: shim,\n instanceOf: getShim,\n node: shim,\n objectOf: getShim,\n oneOf: getShim,\n oneOfType: getShim,\n shape: getShim,\n exact: getShim\n };\n\n ReactPropTypes.checkPropTypes = emptyFunction;\n ReactPropTypes.PropTypes = ReactPropTypes;\n\n return ReactPropTypes;\n};\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\n'use strict';\n\n/**\n * Use invariant() to assert state which your program assumes to be true.\n *\n * Provide sprintf-style format (only %s is supported) and arguments\n * to provide information about what broke and what you were\n * expecting.\n *\n * The invariant message will be stripped in production, but the invariant\n * will remain to ensure logic does not differ in production.\n */\n\nvar validateFormat = function validateFormat(format) {};\n\nif (process.env.NODE_ENV !== 'production') {\n validateFormat = function validateFormat(format) {\n if (format === undefined) {\n throw new Error('invariant requires an error message argument');\n }\n };\n}\n\nfunction invariant(condition, format, a, b, c, d, e, f) {\n validateFormat(format);\n\n if (!condition) {\n var error;\n if (format === undefined) {\n error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');\n } else {\n var args = [a, b, c, d, e, f];\n var argIndex = 0;\n error = new Error(format.replace(/%s/g, function () {\n return args[argIndex++];\n }));\n error.name = 'Invariant Violation';\n }\n\n error.framesToPop = 1; // we don't care about invariant's own frame\n throw error;\n }\n}\n\nmodule.exports = invariant;","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';\n\nmodule.exports = ReactPropTypesSecret;\n","/** @license React v16.2.0\n * react.production.min.js\n *\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';var m=require(\"object-assign\"),n=require(\"fbjs/lib/emptyObject\"),p=require(\"fbjs/lib/emptyFunction\"),q=\"function\"===typeof Symbol&&Symbol[\"for\"],r=q?Symbol[\"for\"](\"react.element\"):60103,t=q?Symbol[\"for\"](\"react.call\"):60104,u=q?Symbol[\"for\"](\"react.return\"):60105,v=q?Symbol[\"for\"](\"react.portal\"):60106,w=q?Symbol[\"for\"](\"react.fragment\"):60107,x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){for(var b=arguments.length-1,e=\"Minified React error #\"+a+\"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\\x3d\"+a,c=0;c