🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
react-verification-input
Advanced tools
react-verification-input - npm Package Compare versions
Comparing version 0.1.0 to 0.1.1
@@ -1,2 +0,2 @@ | ||
| module.exports=function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function i(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)}function o(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},l=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),f=n(1),p=r(f),d=n(2),h=r(d),v=n(3),y=r(v),b=n(4);n(5);var m=function(t){function e(t){a(this,e);var n=s(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return n.state={selectedIndex:0,tan:"",previousTan:"",isActive:!1,isValidTan:!1},n}return u(e,t),l(e,[{key:"setSelection",value:function(t){t>this.props.length-1?t=this.props.length-1:t<0&&(t=0),this.input.setSelectionRange(t,t+1),this.setState({selectedIndex:t})}},{key:"moveSelectionBy",value:function(t){this.setSelection(this.state.selectedIndex+t)}},{key:"handleChange",value:function(t,e){var n=this.state.tan;if(!(RegExp("^["+this.props.validChars+this.props.placeholder+"]{0,"+this.props.length+"}$").test(t)||-1!==t.indexOf(" ")&&RegExp("^$["+this.props.validChars+"]{"+this.props.length+"}$").test(t.replace(/\s/g,""))))return this.input.value=n,void this.moveSelectionBy(0);t=t.replace(/ /g,""),this.input.value=t,this.setSelection(e),this.setState({tan:t,previousTan:n,isValidTan:RegExp("^["+this.props.validChars+"]{"+this.props.length+"}$").test(t)}),this.props.input&&this.props.input.onChange&&this.props.input.onChange(t)}},{key:"handleKeyUp",value:function(t){var e=t.keyCode;if(e===b.KEY_CODE.ARROW_LEFT)return void this.moveSelectionBy(-1);if(e===b.KEY_CODE.ARROW_RIGHT)return this.state.selectedIndex>=this.state.tan.length?void this.moveSelectionBy(0):void this.moveSelectionBy(1);var n=this.input.selectionStart,r=this.input.value;if(r===this.state.tan){if(n===this.state.selectedIndex&&n+1===this.input.selectionEnd)return;return void this.setSelection(n)}if(e===b.KEY_CODE.BACKSPACE)return(n=this.state.selectedIndex)<this.state.tan.length-1?(this.state.tan[n]===this.props.placeholder&&(n=n>0?n-1:n),r=""+this.state.tan.substring(0,n)+this.props.placeholder+this.state.tan.substring(n+1),void this.handleChange(r,n)):(r=this.state.tan.substr(0,this.state.tan.length-1),void this.handleChange(r,r.length));if(e===b.KEY_CODE.DELETE){if((n=this.state.selectedIndex)>this.state.tan.length-1)return;return n===this.state.tan.length-1?void this.handleChange(this.state.tan.substr(0,this.state.tan.length-1),this.state.selectedIndex):(this.state.tan[n]===this.props.placeholder&&(n=n<this.props.length?n+1:n),r=this.state.tan.substring(0,n)+(this.state.tan.substring(n+1)?""+this.props.placeholder+this.state.tan.substring(n+1):""),void this.handleChange(r,n))}this.handleChange(r,n)}},{key:"handleClick",value:function(t){var e=parseInt(t.target.id.replace("field-",""));e>this.input.value.length&&(e=this.input.value.length),this.setState({selectedIndex:e}),this.input.focus(),this.input.setSelectionRange(e,e+1)}},{key:"handlePaste",value:function(){this.input.focus(),this.input.value=""}},{key:"render",value:function(){var t=this,e=this.props,n=e.length,r=e.placeholder,a=e.container,s=e.inputField,u=e.characters,l=e.character,f=e.input,d=e.meta,v=a.className,y=o(a,["className"]),b=s.className,m=o(s,["className"]),g=u.className,x=o(u,["className"]),E=l.className,_=o(l,["className"]);return p.default.createElement("div",c({className:(0,h.default)("verification-input__container",v)},y),p.default.createElement("input",c({ref:function(e){return t.input=e},className:(0,h.default)("verification-input",b),onKeyUp:this.handleKeyUp.bind(this),onFocus:function(){t.setState({isActive:!0}),f&&f.onFocus&&f.onFocus()},onBlur:function(){t.setState({isActive:!1}),f&&f.onBlur&&f.onBlur()},onPaste:this.handlePaste.bind(this)},m)),p.default.createElement("div",c({className:(0,h.default)("verification-input__characters",g),onClick:function(){return t.input.focus()}},x),[].concat(i(Array(n))).map(function(e,n){return p.default.createElement("div",c({className:(0,h.default)("verification-input__character",E,{"verification-input__character--selected":t.state.selectedIndex===n&&t.state.isActive,"verification-input__character--inactive":t.state.tan.length<n}),onClick:t.handleClick.bind(t),id:"field-"+n,key:n,onPaste:t.handlePaste.bind(t)},_),t.state.tan[n]||r)})),d&&d.touched&&d.error&&p.default.createElement("div",{className:"verification-input__error"},d.error))}}]),e}(f.PureComponent);m.propTypes={length:y.default.number,validChars:y.default.string,placeholder:y.default.string,container:y.default.shape({className:y.default.string}),inputField:y.default.shape({className:y.default.string}),characters:y.default.shape({className:y.default.string}),character:y.default.shape({className:y.default.string})},m.defaultProps={length:6,validChars:"A-Za-z0-9",placeholder:"·",container:{},inputField:{},characters:{},character:{}},e.default=m},function(t,e){t.exports=require("react")},function(t,e,n){var r,i;/*! | ||
| module.exports=function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function a(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},f=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),p=n(1),d=r(p),h=n(2),v=r(h),y=n(3),b=r(y),m=n(4);n(5);var g=function(e){function t(e){s(this,t);var n=u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={selectedIndex:0,tan:"",previousTan:"",isActive:!1,isValidTan:!1},n.props.autoFocus&&setTimeout(function(){return n.input.focus()},0),n}return c(t,e),f(t,[{key:"getPlaceholder",value:function(){return""===this.props.placeholder.trim()?" ":this.props.placeholder}},{key:"setSelection",value:function(e){e>this.props.length-1?e=this.props.length-1:e<0&&(e=0),this.input.setSelectionRange(e,e+1),this.setState({selectedIndex:e})}},{key:"moveSelectionBy",value:function(e){this.setSelection(this.state.selectedIndex+e)}},{key:"handleChange",value:function(e,t){var n=this.state.tan;if(!(RegExp("^["+this.props.validChars+this.getPlaceholder()+"]{0,"+this.props.length+"}$").test(e)||-1!==e.indexOf(" ")&&RegExp("^$["+this.props.validChars+"]{"+this.props.length+"}$").test(e.replace(/ /g,""))))return this.input.value=n,void this.moveSelectionBy(0);e=e.replace(/ /g,""),this.input.value=e,this.setSelection(t),this.setState({tan:e,previousTan:n,isValidTan:RegExp("^["+this.props.validChars+"]{"+this.props.length+"}$").test(e)}),this.props.input&&this.props.input.onChange&&this.props.input.onChange(e)}},{key:"handleKeyUp",value:function(e){var t=e.keyCode;if(t===m.KEY_CODE.ARROW_LEFT)return void this.moveSelectionBy(-1);if(t===m.KEY_CODE.ARROW_RIGHT)return this.state.selectedIndex>=this.state.tan.length?void this.moveSelectionBy(0):void this.moveSelectionBy(1);var n=this.input.selectionStart,r=this.input.value;if(r===this.state.tan){if(n===this.state.selectedIndex&&n+1===this.input.selectionEnd)return;return void this.setSelection(n)}if(t===m.KEY_CODE.BACKSPACE)return(n=this.state.selectedIndex)<this.state.tan.length-1?(this.state.tan[n]===this.getPlaceholder()&&(n=n>0?n-1:n),r=""+this.state.tan.substring(0,n)+this.getPlaceholder()+this.state.tan.substring(n+1),void this.handleChange(r,n)):(r=this.state.tan.substr(0,this.state.tan.length-1),void this.handleChange(r,r.length));if(t===m.KEY_CODE.DELETE){if((n=this.state.selectedIndex)>this.state.tan.length-1)return;return n===this.state.tan.length-1?void this.handleChange(this.state.tan.substr(0,this.state.tan.length-1),this.state.selectedIndex):(this.state.tan[n]===this.getPlaceholder()&&(n=n<this.props.length?n+1:n),r=this.state.tan.substring(0,n)+(this.state.tan.substring(n+1)?""+this.getPlaceholder()+this.state.tan.substring(n+1):""),void this.handleChange(r,n))}this.handleChange(r,n)}},{key:"handleClick",value:function(e){var t=parseInt(e.target.id.replace("field-",""));t>this.input.value.length&&(t=this.input.value.length),this.setState({selectedIndex:t}),this.input.focus(),this.input.setSelectionRange(t,t+1)}},{key:"handlePaste",value:function(){this.input.focus(),this.input.value=""}},{key:"render",value:function(){var e=this,t=this.props,n=t.length,r=t.container,s=t.inputField,u=t.characters,c=t.character,f=t.input,p=t.meta,h=r.className,y=a(r,["className"]),b=s.className,m=a(s,["className"]),g=u.className,x=a(u,["className"]),E=c.className,_=c.classNameInactive,w=c.classNameSelected,O=a(c,["className","classNameInactive","classNameSelected"]);return d.default.createElement("div",l({className:(0,v.default)("verification-input__container",h)},y),d.default.createElement("input",l({ref:function(t){return e.input=t},className:(0,v.default)("verification-input",b),onKeyUp:this.handleKeyUp.bind(this),onFocus:function(){e.setState({isActive:!0}),f&&f.onFocus&&f.onFocus()},onBlur:function(){e.setState({isActive:!1}),f&&f.onBlur&&f.onBlur()},onPaste:this.handlePaste.bind(this)},m)),d.default.createElement("div",l({className:(0,v.default)("verification-input__characters",g),onClick:function(){return e.input.focus()}},x),[].concat(o(Array(n))).map(function(t,n){var r;return d.default.createElement("div",l({className:(0,v.default)("verification-input__character",E,(r={"verification-input__character--selected":e.state.selectedIndex===n&&e.state.isActive},i(r,w,e.state.selectedIndex===n&&e.state.isActive),i(r,"verification-input__character--inactive",e.state.tan.length<n),i(r,_,e.state.tan.length<n),r)),onClick:e.handleClick.bind(e),id:"field-"+n,key:n,onPaste:e.handlePaste.bind(e)},O),e.state.tan[n]||e.getPlaceholder())})),p&&p.touched&&p.error&&d.default.createElement("div",{className:"verification-input__error"},p.error))}}]),t}(p.PureComponent);g.propTypes={length:b.default.number,validChars:b.default.string,placeholder:b.default.string,autoFocus:b.default.bool,container:b.default.shape({className:b.default.string}),inputField:b.default.shape({className:b.default.string}),characters:b.default.shape({className:b.default.string}),character:b.default.shape({className:b.default.string})},g.defaultProps={length:6,validChars:"A-Za-z0-9",placeholder:"·",autoFocus:!1,container:{},inputField:{},characters:{},character:{}},t.default=g},function(e,t){e.exports=require("react")},function(e,t,n){var r,i;/*! | ||
| Copyright (c) 2016 Jed Watson. | ||
@@ -6,2 +6,2 @@ Licensed under the MIT License (MIT), see | ||
| */ | ||
| !function(){"use strict";function n(){for(var t=[],e=0;e<arguments.length;e++){var r=arguments[e];if(r){var i=typeof r;if("string"===i||"number"===i)t.push(r);else if(Array.isArray(r))t.push(n.apply(null,r));else if("object"===i)for(var a in r)o.call(r,a)&&r[a]&&t.push(a)}}return t.join(" ")}var o={}.hasOwnProperty;void 0!==t&&t.exports?t.exports=n:(r=[],void 0!==(i=function(){return n}.apply(e,r))&&(t.exports=i))}()},function(t,e,n){var r,i,o;!function(n,a){i=[e],r=a,void 0!==(o="function"==typeof r?r.apply(e,i):r)&&(t.exports=o)}(0,function(t){"use strict";function e(t){var e=t&&(x&&t[x]||t[E]);if("function"==typeof e)return e}function n(t){function e(e,n,r,i,o,a){if(i=i||_,a=a||r,null==n[r]){var s=m[o];return e?new Error("Required "+s+" `"+a+"` was not specified in `"+i+"`."):null}return t(n,r,i,o,a)}var n=e.bind(null,!1);return n.isRequired=e.bind(null,!0),n}function r(t){function e(e,n,r,i,o){var a=e[n];if(p(a)!==t){var s=m[i],u=d(a);return new Error("Invalid "+s+" `"+o+"` of type `"+u+"` supplied to `"+r+"`, expected `"+t+"`.")}return null}return n(e)}function i(t){function e(e,n,r,i,o){var a=e[n];if(!Array.isArray(a)){var s=m[i],u=p(a);return new Error("Invalid "+s+" `"+o+"` of type `"+u+"` supplied to `"+r+"`, expected an array.")}for(var c=0;c<a.length;c++){var l=t(a,c,r,i,o+"["+c+"]");if(l instanceof Error)return l}return null}return n(e)}function o(t){function e(e,n,r,i,o){if(!(e[n]instanceof t)){var a=m[i],s=t.name||_,u=h(e[n]);return new Error("Invalid "+a+" `"+o+"` of type `"+u+"` supplied to `"+r+"`, expected instance of `"+s+"`.")}return null}return n(e)}function a(t){function e(e,n,r,i,o){for(var a=e[n],s=0;s<t.length;s++)if(a===t[s])return null;var u=m[i],c=JSON.stringify(t);return new Error("Invalid "+u+" `"+o+"` of value `"+a+"` supplied to `"+r+"`, expected one of "+c+".")}return n(Array.isArray(t)?e:function(){return new Error("Invalid argument supplied to oneOf, expected an instance of array.")})}function s(t){function e(e,n,r,i,o){var a=e[n],s=p(a);if("object"!==s){var u=m[i];return new Error("Invalid "+u+" `"+o+"` of type `"+s+"` supplied to `"+r+"`, expected an object.")}for(var c in a)if(a.hasOwnProperty(c)){var l=t(a,c,r,i,o+"."+c);if(l instanceof Error)return l}return null}return n(e)}function u(t){function e(e,n,r,i,o){for(var a=0;a<t.length;a++){if(null==(0,t[a])(e,n,r,i,o))return null}var s=m[i];return new Error("Invalid "+s+" `"+o+"` supplied to `"+r+"`.")}return n(Array.isArray(t)?e:function(){return new Error("Invalid argument supplied to oneOfType, expected an instance of array.")})}function c(t){function e(e,n,r,i,o){var a=e[n],s=p(a);if("object"!==s){var u=m[i];return new Error("Invalid "+u+" `"+o+"` of type `"+s+"` supplied to `"+r+"`, expected `object`.")}for(var c in t){var l=t[c];if(l){var f=l(a,c,r,i,o+"."+c);if(f)return f}}return null}return n(e)}function l(t){switch(void 0===t?"undefined":v(t)){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(l);if(null===t||b.isValidElement(t))return!0;var n=e(t);if(!n)return!1;var r,i=n.call(t);if(n!==t.entries){for(;!(r=i.next()).done;)if(!l(r.value))return!1}else for(;!(r=i.next()).done;){var o=r.value;if(o&&!l(o[1]))return!1}return!0;default:return!1}}function f(t,e){return"symbol"===t||("Symbol"===e["@@toStringTag"]||"function"==typeof Symbol&&e instanceof Symbol)}function p(t){var e=void 0===t?"undefined":v(t);return Array.isArray(t)?"array":t instanceof RegExp?"object":f(e,t)?"symbol":e}function d(t){var e=p(t);if("object"===e){if(t instanceof Date)return"date";if(t instanceof RegExp)return"regexp"}return e}function h(t){return t.constructor&&t.constructor.name?t.constructor.name:_}t.__esModule=!0;var v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},y="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,b={};b.isValidElement=function(t){return"object"===(void 0===t?"undefined":v(t))&&null!==t&&t.$$typeof===y};var m={prop:"prop",context:"context",childContext:"child context"},g={thatReturns:function(t){return function(){return t}}},x="function"==typeof Symbol&&Symbol.iterator,E="@@iterator",_="<<anonymous>>",w={array:r("array"),bool:r("boolean"),func:r("function"),number:r("number"),object:r("object"),string:r("string"),symbol:r("symbol"),any:function(){return n(g.thatReturns(null))}(),arrayOf:i,element:function(){function t(t,e,n,r,i){if(!b.isValidElement(t[e])){var o=m[r];return new Error("Invalid "+o+" `"+i+"` supplied to `"+n+"`, expected a single ReactElement.")}return null}return n(t)}(),instanceOf:o,node:function(){function t(t,e,n,r,i){if(!l(t[e])){var o=m[r];return new Error("Invalid "+o+" `"+i+"` supplied to `"+n+"`, expected a ReactNode.")}return null}return n(t)}(),objectOf:s,oneOf:a,oneOfType:u,shape:c};t.default=w})},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.KEY_CODE={BACKSPACE:8,ARROW_LEFT:37,ARROW_RIGHT:39,DELETE:46}},function(t,e,n){var r=n(6);"string"==typeof r&&(r=[[t.i,r,""]]);var i={hmr:!0};i.transform=void 0;n(8)(r,i);r.locals&&(t.exports=r.locals)},function(t,e,n){e=t.exports=n(7)(void 0),e.push([t.i,".verification-input__container{position:relative;max-width:500px}.verification-input{height:100%;position:absolute;left:-2000px;opacity:0;transform:scale(0)}.verification-input__characters{display:flex;height:50px;z-index:-1}.verification-input__character{font-size:36px;line-height:50px;text-align:center;background-color:#fff;height:100%;flex-grow:1;flex-basis:0;padding:0;margin-left:8px;border:1px solid #000;cursor:default;user-select:none;box-sizing:border-box}.verification-input__character:first-child{margin-left:0}@media (min-width:768px){.verification-input__character{margin-left:16px}}.verification-input__character--inactive{color:dimgray;background-color:#d3d3d3}.verification-input__character--selected{border-color:#6495ed;color:#6495ed}.verification-input__error{color:red;margin-top:8px}",""])},function(t,e){function n(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var o=r(i);return[n].concat(i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"})).concat([o]).join("\n")}return[n].join("\n")}function r(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var r=n(e,t);return e[2]?"@media "+e[2]+"{"+r+"}":r}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},i=0;i<this.length;i++){var o=this[i][0];"number"==typeof o&&(r[o]=!0)}for(i=0;i<t.length;i++){var a=t[i];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e,n){function r(t,e){for(var n=0;n<t.length;n++){var r=t[n],i=h[r.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](r.parts[o]);for(;o<r.parts.length;o++)i.parts.push(l(r.parts[o],e))}else{for(var a=[],o=0;o<r.parts.length;o++)a.push(l(r.parts[o],e));h[r.id]={id:r.id,refs:1,parts:a}}}}function i(t,e){for(var n=[],r={},i=0;i<t.length;i++){var o=t[i],a=e.base?o[0]+e.base:o[0],s=o[1],u=o[2],c=o[3],l={css:s,media:u,sourceMap:c};r[a]?r[a].parts.push(l):n.push(r[a]={id:a,parts:[l]})}return n}function o(t,e){var n=y(t.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=g[g.length-1];if("top"===t.insertAt)r?r.nextSibling?n.insertBefore(e,r.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),g.push(e);else if("bottom"===t.insertAt)n.appendChild(e);else{if("object"!=typeof t.insertAt||!t.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var i=y(t.insertInto+" "+t.insertAt.before);n.insertBefore(e,i)}}function a(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=g.indexOf(t);e>=0&&g.splice(e,1)}function s(t){var e=document.createElement("style");return t.attrs.type="text/css",c(e,t.attrs),o(t,e),e}function u(t){var e=document.createElement("link");return t.attrs.type="text/css",t.attrs.rel="stylesheet",c(e,t.attrs),o(t,e),e}function c(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function l(t,e){var n,r,i,o;if(e.transform&&t.css){if(!(o=e.transform(t.css)))return function(){};t.css=o}if(e.singleton){var c=m++;n=b||(b=s(e)),r=f.bind(null,n,c,!1),i=f.bind(null,n,c,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=u(e),r=d.bind(null,n,e),i=function(){a(n),n.href&&URL.revokeObjectURL(n.href)}):(n=s(e),r=p.bind(null,n),i=function(){a(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else i()}}function f(t,e,n,r){var i=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=E(e,i);else{var o=document.createTextNode(i),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(o,a[e]):t.appendChild(o)}}function p(t,e){var n=e.css,r=e.media;if(r&&t.setAttribute("media",r),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}function d(t,e,n){var r=n.css,i=n.sourceMap,o=void 0===e.convertToAbsoluteUrls&&i;(e.convertToAbsoluteUrls||o)&&(r=x(r)),i&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");var a=new Blob([r],{type:"text/css"}),s=t.href;t.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}var h={},v=function(t){var e;return function(){return void 0===e&&(e=t.apply(this,arguments)),e}}(function(){return window&&document&&document.all&&!window.atob}),y=function(t){var e={};return function(n){if(void 0===e[n]){var r=t.call(this,n);if(r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}e[n]=r}return e[n]}}(function(t){return document.querySelector(t)}),b=null,m=0,g=[],x=n(9);t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");e=e||{},e.attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||(e.singleton=v()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=i(t,e);return r(n,e),function(t){for(var o=[],a=0;a<n.length;a++){var s=n[a],u=h[s.id];u.refs--,o.push(u)}if(t){r(i(t,e),e)}for(var a=0;a<o.length;a++){var u=o[a];if(0===u.refs){for(var c=0;c<u.parts.length;c++)u.parts[c]();delete h[u.id]}}}};var E=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var n=e.protocol+"//"+e.host,r=n+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(t,e){var i=e.trim().replace(/^"(.*)"$/,function(t,e){return e}).replace(/^'(.*)'$/,function(t,e){return e});if(/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/)/i.test(i))return t;var o;return o=0===i.indexOf("//")?i:0===i.indexOf("/")?n+i:r+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")"})}}]); | ||
| !function(){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var i=typeof r;if("string"===i||"number"===i)e.push(r);else if(Array.isArray(r))e.push(n.apply(null,r));else if("object"===i)for(var a in r)o.call(r,a)&&r[a]&&e.push(a)}}return e.join(" ")}var o={}.hasOwnProperty;void 0!==e&&e.exports?e.exports=n:(r=[],void 0!==(i=function(){return n}.apply(t,r))&&(e.exports=i))}()},function(e,t,n){var r,i,o;!function(n,a){i=[t],r=a,void 0!==(o="function"==typeof r?r.apply(t,i):r)&&(e.exports=o)}(0,function(e){"use strict";function t(e){var t=e&&(x&&e[x]||e[E]);if("function"==typeof t)return t}function n(e){function t(t,n,r,i,o,a){if(i=i||_,a=a||r,null==n[r]){var s=m[o];return t?new Error("Required "+s+" `"+a+"` was not specified in `"+i+"`."):null}return e(n,r,i,o,a)}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function r(e){function t(t,n,r,i,o){var a=t[n];if(p(a)!==e){var s=m[i],u=d(a);return new Error("Invalid "+s+" `"+o+"` of type `"+u+"` supplied to `"+r+"`, expected `"+e+"`.")}return null}return n(t)}function i(e){function t(t,n,r,i,o){var a=t[n];if(!Array.isArray(a)){var s=m[i],u=p(a);return new Error("Invalid "+s+" `"+o+"` of type `"+u+"` supplied to `"+r+"`, expected an array.")}for(var c=0;c<a.length;c++){var l=e(a,c,r,i,o+"["+c+"]");if(l instanceof Error)return l}return null}return n(t)}function o(e){function t(t,n,r,i,o){if(!(t[n]instanceof e)){var a=m[i],s=e.name||_,u=h(t[n]);return new Error("Invalid "+a+" `"+o+"` of type `"+u+"` supplied to `"+r+"`, expected instance of `"+s+"`.")}return null}return n(t)}function a(e){function t(t,n,r,i,o){for(var a=t[n],s=0;s<e.length;s++)if(a===e[s])return null;var u=m[i],c=JSON.stringify(e);return new Error("Invalid "+u+" `"+o+"` of value `"+a+"` supplied to `"+r+"`, expected one of "+c+".")}return n(Array.isArray(e)?t:function(){return new Error("Invalid argument supplied to oneOf, expected an instance of array.")})}function s(e){function t(t,n,r,i,o){var a=t[n],s=p(a);if("object"!==s){var u=m[i];return new Error("Invalid "+u+" `"+o+"` of type `"+s+"` supplied to `"+r+"`, expected an object.")}for(var c in a)if(a.hasOwnProperty(c)){var l=e(a,c,r,i,o+"."+c);if(l instanceof Error)return l}return null}return n(t)}function u(e){function t(t,n,r,i,o){for(var a=0;a<e.length;a++){if(null==(0,e[a])(t,n,r,i,o))return null}var s=m[i];return new Error("Invalid "+s+" `"+o+"` supplied to `"+r+"`.")}return n(Array.isArray(e)?t:function(){return new Error("Invalid argument supplied to oneOfType, expected an instance of array.")})}function c(e){function t(t,n,r,i,o){var a=t[n],s=p(a);if("object"!==s){var u=m[i];return new Error("Invalid "+u+" `"+o+"` of type `"+s+"` supplied to `"+r+"`, expected `object`.")}for(var c in e){var l=e[c];if(l){var f=l(a,c,r,i,o+"."+c);if(f)return f}}return null}return n(t)}function l(e){switch(void 0===e?"undefined":v(e)){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(l);if(null===e||b.isValidElement(e))return!0;var n=t(e);if(!n)return!1;var r,i=n.call(e);if(n!==e.entries){for(;!(r=i.next()).done;)if(!l(r.value))return!1}else for(;!(r=i.next()).done;){var o=r.value;if(o&&!l(o[1]))return!1}return!0;default:return!1}}function f(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function p(e){var t=void 0===e?"undefined":v(e);return Array.isArray(e)?"array":e instanceof RegExp?"object":f(t,e)?"symbol":t}function d(e){var t=p(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function h(e){return e.constructor&&e.constructor.name?e.constructor.name:_}e.__esModule=!0;var v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,b={};b.isValidElement=function(e){return"object"===(void 0===e?"undefined":v(e))&&null!==e&&e.$$typeof===y};var m={prop:"prop",context:"context",childContext:"child context"},g={thatReturns:function(e){return function(){return e}}},x="function"==typeof Symbol&&Symbol.iterator,E="@@iterator",_="<<anonymous>>",w={array:r("array"),bool:r("boolean"),func:r("function"),number:r("number"),object:r("object"),string:r("string"),symbol:r("symbol"),any:function(){return n(g.thatReturns(null))}(),arrayOf:i,element:function(){function e(e,t,n,r,i){if(!b.isValidElement(e[t])){var o=m[r];return new Error("Invalid "+o+" `"+i+"` supplied to `"+n+"`, expected a single ReactElement.")}return null}return n(e)}(),instanceOf:o,node:function(){function e(e,t,n,r,i){if(!l(e[t])){var o=m[r];return new Error("Invalid "+o+" `"+i+"` supplied to `"+n+"`, expected a ReactNode.")}return null}return n(e)}(),objectOf:s,oneOf:a,oneOfType:u,shape:c};e.default=w})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.KEY_CODE={BACKSPACE:8,ARROW_LEFT:37,ARROW_RIGHT:39,DELETE:46}},function(e,t,n){var r=n(6);"string"==typeof r&&(r=[[e.i,r,""]]);var i={hmr:!0};i.transform=void 0;n(8)(r,i);r.locals&&(e.exports=r.locals)},function(e,t,n){t=e.exports=n(7)(void 0),t.push([e.i,".verification-input__container{position:relative;max-width:500px}.verification-input{height:100%;position:absolute;left:-2000px;opacity:0;transform:scale(0)}.verification-input__characters{display:flex;height:50px;z-index:-1}.verification-input__character{font-size:36px;line-height:50px;text-align:center;background-color:#fff;height:100%;flex-grow:1;flex-basis:0;padding:0;margin-left:8px;border:1px solid #000;cursor:default;user-select:none;box-sizing:border-box}.verification-input__character:first-child{margin-left:0}@media (min-width:768px){.verification-input__character{margin-left:16px}}.verification-input__character--inactive{color:dimgray;background-color:#d3d3d3}.verification-input__character--selected{border-color:#6495ed;color:#6495ed}.verification-input__error{color:red;margin-top:8px}",""])},function(e,t){function n(e,t){var n=e[1]||"",i=e[3];if(!i)return n;if(t&&"function"==typeof btoa){var o=r(i);return[n].concat(i.sources.map(function(e){return"/*# sourceURL="+i.sourceRoot+e+" */"})).concat([o]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},i=0;i<this.length;i++){var o=this[i][0];"number"==typeof o&&(r[o]=!0)}for(i=0;i<e.length;i++){var a=e[i];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},function(e,t,n){function r(e,t){for(var n=0;n<e.length;n++){var r=e[n],i=h[r.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](r.parts[o]);for(;o<r.parts.length;o++)i.parts.push(l(r.parts[o],t))}else{for(var a=[],o=0;o<r.parts.length;o++)a.push(l(r.parts[o],t));h[r.id]={id:r.id,refs:1,parts:a}}}}function i(e,t){for(var n=[],r={},i=0;i<e.length;i++){var o=e[i],a=t.base?o[0]+t.base:o[0],s=o[1],u=o[2],c=o[3],l={css:s,media:u,sourceMap:c};r[a]?r[a].parts.push(l):n.push(r[a]={id:a,parts:[l]})}return n}function o(e,t){var n=y(e.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=g[g.length-1];if("top"===e.insertAt)r?r.nextSibling?n.insertBefore(t,r.nextSibling):n.appendChild(t):n.insertBefore(t,n.firstChild),g.push(t);else if("bottom"===e.insertAt)n.appendChild(t);else{if("object"!=typeof e.insertAt||!e.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var i=y(e.insertInto+" "+e.insertAt.before);n.insertBefore(t,i)}}function a(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e);var t=g.indexOf(e);t>=0&&g.splice(t,1)}function s(e){var t=document.createElement("style");return e.attrs.type="text/css",c(t,e.attrs),o(e,t),t}function u(e){var t=document.createElement("link");return e.attrs.type="text/css",e.attrs.rel="stylesheet",c(t,e.attrs),o(e,t),t}function c(e,t){Object.keys(t).forEach(function(n){e.setAttribute(n,t[n])})}function l(e,t){var n,r,i,o;if(t.transform&&e.css){if(!(o=t.transform(e.css)))return function(){};e.css=o}if(t.singleton){var c=m++;n=b||(b=s(t)),r=f.bind(null,n,c,!1),i=f.bind(null,n,c,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=u(t),r=d.bind(null,n,t),i=function(){a(n),n.href&&URL.revokeObjectURL(n.href)}):(n=s(t),r=p.bind(null,n),i=function(){a(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else i()}}function f(e,t,n,r){var i=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=E(t,i);else{var o=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function p(e,t){var n=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function d(e,t,n){var r=n.css,i=n.sourceMap,o=void 0===t.convertToAbsoluteUrls&&i;(t.convertToAbsoluteUrls||o)&&(r=x(r)),i&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");var a=new Blob([r],{type:"text/css"}),s=e.href;e.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}var h={},v=function(e){var t;return function(){return void 0===t&&(t=e.apply(this,arguments)),t}}(function(){return window&&document&&document.all&&!window.atob}),y=function(e){var t={};return function(n){if(void 0===t[n]){var r=e.call(this,n);if(r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[n]=r}return t[n]}}(function(e){return document.querySelector(e)}),b=null,m=0,g=[],x=n(9);e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");t=t||{},t.attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||(t.singleton=v()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var n=i(e,t);return r(n,t),function(e){for(var o=[],a=0;a<n.length;a++){var s=n[a],u=h[s.id];u.refs--,o.push(u)}if(e){r(i(e,t),t)}for(var a=0;a<o.length;a++){var u=o[a];if(0===u.refs){for(var c=0;c<u.parts.length;c++)u.parts[c]();delete h[u.id]}}}};var E=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var n=t.protocol+"//"+t.host,r=n+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(e,t){var i=t.trim().replace(/^"(.*)"$/,function(e,t){return t}).replace(/^'(.*)'$/,function(e,t){return t});if(/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/)/i.test(i))return e;var o;return o=0===i.indexOf("//")?i:0===i.indexOf("/")?n+i:r+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")"})}}]); |
| { | ||
| "name": "react-verification-input", | ||
| "version": "0.1.0", | ||
| "version": "0.1.1", | ||
| "main": "dist/index.js", | ||
@@ -12,3 +12,3 @@ "repository": "https://github.com/andreaswilli/react-verification-input.git", | ||
| "build:prod": "webpack -p", | ||
| "serve": "webpack -d --watch", | ||
| "serve": "webpack --watch", | ||
| "major": "npm version major && npm publish", | ||
@@ -15,0 +15,0 @@ "minor": "npm version minor && npm publish", |
@@ -44,2 +44,4 @@ # react-verification-input | ||
| > **Note:** In order for it to work properly, make sure you have the `<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no user-scalable=no">` tag in the head of you page. Otherwise it might zoom in to the left side of the screen on mobile devices. This is the case because mobile devices zoom in on inputs and there is an input field outside of the viewport. | ||
| ## API documentation | ||
@@ -53,3 +55,4 @@ | ||
| validChars | String | `'A-Za-z0-9'` | Define, which characters should be allowed. The string is inserted into a regexp character set ( `/[]/` ) for input validating. | ||
| placeholder | String | `'·'` (U+00B7) | Define, which character should be displayed as placeholder in empty fields. Note: Currently the blank character can´t be used as placeholder, this will be possible in a later version. | ||
| placeholder | String | `'·'` (U+00B7) | Define, which character should be displayed as placeholder in empty fields. In order to use the blank character as placeholder specify this option as `' '` or `''`. | ||
| autoFocus | Boolean | `false` | This will make the input focus automatically as soon as it rendered. | ||
| container | Object | `null` | Define the props of the container `div`. All props except for `className` are passed directly to the `div` element. Use `{ className: 'your-class' }` to style the input. These options are available on every element. For more details on how to apply your custom styling see [here](#custom-styling). | ||
@@ -62,2 +65,83 @@ inputField | Object | `null` | Define the props of the `input` element. See `container` for more details. | ||
| TODO | ||
| Style the input by passing it your custom class names like so: | ||
| ```js | ||
| <VerificationInput | ||
| container={{ | ||
| className: 'container', | ||
| }} | ||
| characters={{ | ||
| className: 'characters', | ||
| }} | ||
| character={{ | ||
| className: 'character', | ||
| classNameInactive: 'character--inactive', | ||
| classNameSelected: 'character--selected', | ||
| }} | ||
| /> | ||
| ``` | ||
| There is also the `input` prop, which will attach styles to the actual input element, but you probably don't want to use this as it's outside the viewport and thus not visible. | ||
| Have a look at these two examples: | ||
| ### Example 1 | ||
| ```css | ||
| .container { | ||
| max-width: 350px; | ||
| } | ||
| .character { | ||
| background-color: rgba(255, 255, 255, 0.2); | ||
| border: 1px solid transparent; | ||
| border-radius: 8px; | ||
| color: white; | ||
| margin-left: 8px; | ||
| } | ||
| .character--inactive { | ||
| background-color: rgba(255, 255, 255, 0.1); | ||
| box-shadow: none; | ||
| } | ||
| .character--selected { | ||
| border: 1px solid white; | ||
| } | ||
| ``` | ||
|  | ||
| ### Example 2 | ||
| ```css | ||
| .container { | ||
| max-width: 350px; | ||
| } | ||
| .character { | ||
| background-color: rgba(255, 255, 255, 0.8); | ||
| border: none; | ||
| border-radius: 8px; | ||
| color: black; | ||
| margin-left: 8px; | ||
| box-shadow: inset 0 0 2px black; | ||
| &:nth-child(4) { | ||
| margin-left: 24px; | ||
| } | ||
| } | ||
| .character--inactive { | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| box-shadow: none; | ||
| } | ||
| .character--selected { | ||
| color: black; | ||
| outline: red 2px; | ||
| background-color: white; | ||
| } | ||
| ``` | ||
|  |
@@ -15,2 +15,3 @@ import React, { PureComponent } from 'react'; | ||
| placeholder: PropTypes.string, | ||
| autoFocus: PropTypes.bool, | ||
| container: PropTypes.shape({ | ||
@@ -34,2 +35,3 @@ className: PropTypes.string, | ||
| placeholder: '·', | ||
| autoFocus: false, | ||
| container: {}, | ||
@@ -51,4 +53,12 @@ inputField: {}, | ||
| }; | ||
| if (this.props.autoFocus) { | ||
| setTimeout(() => this.input.focus(), 0); | ||
| } | ||
| } | ||
| getPlaceholder() { | ||
| return this.props.placeholder.trim() === '' ? '\xa0' : this.props.placeholder; // \xa0 = non-breaking space | ||
| } | ||
| setSelection(index) { | ||
@@ -72,3 +82,4 @@ if (index > this.props.length - 1) { | ||
| const previousTan = this.state.tan; | ||
| if (!RegExp(`^[${this.props.validChars}${this.props.placeholder}]{0,${this.props.length}}$`).test(tan) && (tan.indexOf(' ') === -1 || !RegExp(`^$[${this.props.validChars}]{${this.props.length}}$`).test(tan.replace(/\s/g, '')))) { | ||
| if (!RegExp(`^[${this.props.validChars}${this.getPlaceholder()}]{0,${this.props.length}}$`).test(tan) | ||
| && (tan.indexOf(' ') === -1 || !RegExp(`^$[${this.props.validChars}]{${this.props.length}}$`).test(tan.replace(/ /g, '')))) { | ||
| this.input.value = previousTan; | ||
@@ -128,3 +139,3 @@ this.moveSelectionBy(0); // set to where it was before | ||
| // if selection is empty | ||
| if (this.state.tan[selectedIndex] === this.props.placeholder) { | ||
| if (this.state.tan[selectedIndex] === this.getPlaceholder()) { | ||
| // move selection to the left | ||
@@ -134,3 +145,3 @@ selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : selectedIndex; | ||
| // delete character (replace with placeholder) | ||
| tan = `${this.state.tan.substring(0, selectedIndex)}${this.props.placeholder}${this.state.tan.substring(selectedIndex + 1)}`; | ||
| tan = `${this.state.tan.substring(0, selectedIndex)}${this.getPlaceholder()}${this.state.tan.substring(selectedIndex + 1)}`; | ||
| this.handleChange(tan, selectedIndex); | ||
@@ -160,3 +171,3 @@ return; | ||
| // if selection is empty | ||
| if (this.state.tan[selectedIndex] === this.props.placeholder) { | ||
| if (this.state.tan[selectedIndex] === this.getPlaceholder()) { | ||
| // move selection to the right | ||
@@ -167,3 +178,3 @@ selectedIndex = selectedIndex < this.props.length ? selectedIndex + 1 : selectedIndex; | ||
| tan = `${this.state.tan.substring(0, selectedIndex)}${ | ||
| this.state.tan.substring(selectedIndex + 1) ? `${this.props.placeholder}${this.state.tan.substring(selectedIndex + 1)}` : '' | ||
| this.state.tan.substring(selectedIndex + 1) ? `${this.getPlaceholder()}${this.state.tan.substring(selectedIndex + 1)}` : '' | ||
| }`; | ||
@@ -200,3 +211,2 @@ this.handleChange(tan, selectedIndex); | ||
| length, | ||
| placeholder, | ||
| container, | ||
@@ -227,2 +237,4 @@ inputField, | ||
| className: characterClassName, | ||
| classNameInactive: characterClassNameInactive, | ||
| classNameSelected: characterClassNameSelected, | ||
| ...characterProps, | ||
@@ -264,3 +276,5 @@ } = character; | ||
| 'verification-input__character--selected': this.state.selectedIndex === i && this.state.isActive, | ||
| [characterClassNameSelected]: this.state.selectedIndex === i && this.state.isActive, | ||
| 'verification-input__character--inactive': this.state.tan.length < i, | ||
| [characterClassNameInactive]: this.state.tan.length < i, | ||
| })} | ||
@@ -272,3 +286,3 @@ onClick={this.handleClick.bind(this)} | ||
| {...characterProps} | ||
| >{this.state.tan[i] || placeholder}</div> | ||
| >{this.state.tan[i] || this.getPlaceholder()}</div> | ||
| ))} | ||
@@ -275,0 +289,0 @@ </div> |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
185921
1.73%- Lines of code
315
4.65%- Number of lines in readme file
145
137.7%- Number of medium supply chain risk alerts
0
-100%No dependency changes