react-rxinput
Version:
react-rxinput React extends input element to validate against a regular expression as you type input (incremental regex matcher)
6 lines • 11.6 kB
JavaScript
/*!
* react-rxinput v1.1.0 - https://nurulc.github..io
* ISC Licensed
*/
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("incr-regex-package"),require("react-bootstrap")):"function"==typeof define&&define.amd?define(["react","incr-regex-package","react-bootstrap"],e):"object"==typeof exports?exports.RxInput=e(require("react"),require("incr-regex-package"),require("react-bootstrap")):t.RxInput=e(t.React,t.iRX,t.ReactBootstrap)}(window,function(t,e,n){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=3)}([function(e,n){e.exports=t},function(t,n){t.exports=e},function(t,e){t.exports=n},function(t,e,n){t.exports=n(4)},function(t,e,n){"use strict";n.r(e),n.d(e,"hashStr",function(){return g}),n.d(e,"RxInputBase",function(){return k}),n.d(e,"RxInput",function(){return _});var r=n(0),o=n.n(r),a=n(2),i=n(1),s=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};function u(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function l(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 c(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)}var p=new RegExp(Object(i.convertMask)("[?*]")),f=90,h=89;function m(t){return(t.ctrlKey||t.metaKey)&&t.keyCode===(t.shiftKey?h:f)}function d(t){return(t.ctrlKey||t.metaKey)&&t.keyCode===(t.shiftKey?f:h)}function y(t){var e=void 0,n=void 0,r=void 0,o=void 0;if(void 0!==t.selectionStart)e=t.selectionStart,n=t.selectionEnd;else try{t.focus(),o=(r=t.createTextRange()).duplicate(),r.moveToBookmark(document.selection.createRange().getBookmark()),o.setEndPoint("EndToStart",r),n=(e=o.text.length)+r.text.length}catch(t){}return{start:e,end:n}}var v={DONE:[o.a.createElement("span",{className:"glyphicon glyphicon-ok form-control-feedback"}),""],MORE:[o.a.createElement("span",{className:"glyphicon glyphicon-arrow-right form-control-feedback"})," has-warning"],OK:[o.a.createElement("span",{className:"glyphicon glyphicon-option-horizontal form-control-feedback"}),""]};!function(t){function e(){return u(this,e),l(this,t.apply(this,arguments))}c(e,t),e.prototype.render=function(){var t=this.props.mask.pattern.getInputTracker()||[];return o.a.createElement("div",null,t.map(function(t){var e=t[0];return void 0===t[1]?e:o.a.createElement("b",null,e)}))}}(r.Component);function g(t){for(var e=5381,n=t.length;n;)e=33*e^t.charCodeAt(--n);return 12+(e>>>0)}var k=function(t){function e(n){u(this,e);var r=l(this,t.call(this,n));return r.state=r.getInitialState(),r._onChange=r._onChange.bind(r),r._onKeyDown=r._onKeyDown.bind(r),r._onKeyPress=r._onKeyPress.bind(r),r._onPaste=r._onPaste.bind(r),r._onFocus=r._onFocus.bind(r),r._onBlur=r._onBlur.bind(r),r.input=null,r}return c(e,t),e.prototype.getInitialState=function(){var t={pattern:this.props.mask||/.*/,value:this.props.value||""};return{focus:!1,value:this.props.value||"",selection:this.props.selection,mask:new i.RXInputMask(t)}},e.prototype.componentWillReceiveProps=function(t){this.props.mask.toString()!==t.mask.toString()?(this.state.mask.setPattern(t.mask,{value:t.value,selection:this.state.mask.selection}),this.setState({selection:this.state.selection,value:t.value})):this.props.value!==t.value&&this.state.mask.setValue(t.value)},e.prototype._updateMaskSelection=function(){this.state.mask.selection=y(this.input)},e.prototype._updateInputSelection=function(){(function(t,e){return t===e||void 0!==t&&void 0!==e&&t.start===e.start&&t.end===e.end})(y(this.input),this.state.mask.selection)||function(t,e){var n=void 0;try{void 0!==t.selectionStart?(t.focus(),t.setSelectionRange(e.start,e.end)):(t.focus(),(n=t.createTextRange()).collapse(!0),n.moveStart("character",e.start),n.moveEnd("character",e.end-e.start),n.select())}catch(t){}}(this.input,this.state.mask.selection)},e.prototype._onFocus=function(t){this.props.onFocus&&this.props.onFocus(t)},e.prototype._onBlur=function(t){this.fireChange(t)},e.prototype.fireChange=function(t){if(this.props.onChange){var e={value:this.state.mask._getValue(),target:t.target,name:this.props.name,mask:this.state.mask};this.props.onChange({target:e})}},e.prototype._onChange=function(t){var e=this.state.mask,n=e.getValue();if(t.target.value!==n){if(t.target.value.length<n.length){var r=n.length-t.target.value.length;this._updateMaskSelection(),e.selection.end=e.selection.start+r,e.backspace()}var o=this._getDisplayValue();t.target.value=o,o&&this._updateInputSelection()}this.setState({selection:this.mask.selection}),this.fireChange(t)},e.prototype._onKeyDown=function(t){var e=this,n=this.state.mask,r=function(t){return function(e){return e.key===t}},o=function(r,o){if(!r(t))return!1;if(t.preventDefault(),e._updateMaskSelection(),o()){var a=t.target.value,i=e._getDisplayValue();t.target.value=i,i&&e._updateInputSelection(),e.props.onChange&&a!=i&&e.fireChange(t)}return e.setState({selection:n.selection}),!0};if(!(o(m,function(){return n.undo()})||o(d,function(){return n.redo()})||o(r("Backspace"),function(){return n.backspace()})||o(r("Delete"),function(){return n.del()})||t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||"Enter"===t.key||"Tab"===t.key||"ArrowLeft"!==t.key&&"ArrowRight"!=t.key)){var a=y(this.input);a.start===a.end&&void 0!==n.left&&(t.preventDefault(),"ArrowLeft"===t.key?n.left(a):n.right(a),this._updateInputSelection())}},e.prototype._onKeyPress=function(t){var e=this.state.mask;if(!(t.metaKey||t.altKey||t.ctrlKey||"Enter"===t.key)){y(this.input),e.getSelection();if(t.preventDefault(),this._updateMaskSelection(),function(t){if(e.input(t))return!0;if(t!==t.toUpperCase())return e.input(t.toUpperCase());if(t!=t.toLowerCase())return e.input(t.toLowerCase());return!1}(t.key)){var n=t.target.value,r=e.getValue();if(t.target.value=r,this._updateInputSelection(),this.setState({selection:e.selection}),this.props.onChange&&n!=r){var o={target:{value:e._getValue()}};this.props.onChange(o)}}}},e.prototype._onPaste=function(t){var e=this.state.mask;t.preventDefault(),this._updateMaskSelection(),e.paste(t.clipboardData.getData("Text"))&&(t.target.value=e.getValue(),setTimeout(this._updateInputSelection,0),this.setState({selection:e.selection}))},e.prototype._getMaskList=function(t){var e=this.state.mask.minCharsList(!!t);return e&&e.length<20?e:this.state.mask.minCharsList()},e.prototype._getDisplayValue=function(){var t=this.state.mask.getValue();return t===this.state.mask.emptyValue?"":t},e.prototype.selected=function(t,e){if(!t.split("").find(function(t){return Object(i.isMeta)(t)?t:void 0})){var n=this.state.mask;n.setValue(t),this.setState({mask:n})}},e.prototype.getMaxWidth=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:200;if(e)return Math.max(e,n);if(!t||!t.length)return n;var r=t.map(function(t){return t.replace(/\u0332/g,"").length}).map(function(t){return function(e){return Math.max(t,e)}}(20));return 12*Math.max.apply(null,r)},e.prototype.getMapImg=function(){return v},e.prototype.getRxPlaceHolder=function(){return p},e.prototype.getInput=function(t){return t},e.prototype.inputClassName=function(){return"form-control"},e.prototype.getPopoverData=function(t,e,n,r){var o=this,a=this.getMaxWidth(t,n,300);if(!t||t.length<=1){if(!r)return;t=[r]}return{valueList:t,headers:e,MAXWIDTH:a,hasSmallHeader:[this._getDisplayValue()||"",r||this.state.mask.emptyValue].concat(t).find(function(t){return t.match(o.getRxPlaceHolder())})}},e.prototype.render=function(){var t=this,e=this.props,n=(e.mask,e.size),r=e.placeholder,a=(e.popover,e.selection,e.showAll,function(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}(e,["mask","size","placeholder","popover","selection","showAll"])),i=this.state.mask.pattern.length,u=o.a.createElement("input",s({style:{padding:"3px 0px 3px 0px"},className:this.inputClassName()},a,{ref:function(e){t.input=e},maxLength:i,onChange:this._onChange,onKeyDown:this._onKeyDown,onKeyPress:this._onKeyPress,onPaste:this._onPaste,onFocus:this._onFocus,onBlur:this._onBlur,placeholder:r||this.state.mask.emptyValue,size:n||i,value:this._getDisplayValue()}));return this.getInput(u,r)},e}(r.Component);function b(t,e){var n=t.toUpperCase(),r=e.toUpperCase();return n<r?-1:n>r?1:0}var _=function(t){function e(){return u(this,e),l(this,t.apply(this,arguments))}return c(e,t),e.prototype._createPopover=function(t){var e=this;if(!t)return o.a.createElement("span",null);var n=t.MAXWIDTH,r=t.hasSmallHeader,s=t.valueList,u=t.headers,l=r?l=o.a.createElement("pre",{className:"text-muted small-text"},Object(i.convertMask)("? - optional, * - zero or more")):"",c={width:n-50,maxWidth:n-50},p=void 0,f=void 0;console.log("valueList",s),s.length>20&&(p={height:"400px",display:"block",overflow:"auto"},f=o.a.createElement("div",null," "));var h=this;return o.a.createElement(a.Popover,{id:this.props.name+"myPopover",className:"col-xs-10 col-md-10",style:{width:n,maxWidth:n,fontSize:"10px",marginTop:"10px",marginBottom:"10px"}},l,o.a.createElement("table",{key:this.props.name+"myPopover1",className:"table-responsive table-striped table-hover table-condensed col-xs-10 col-md-10",style:c},o.a.createElement("thead",null,o.a.createElement("tr",null,u.map(function(t){return o.a.createElement("th",{key:e.props.name+t},t)}))),o.a.createElement("tbody",{style:p},s.sort(b).map(function(t){return o.a.createElement("tr",{onClick:function(e){return h.selected(t,e)},key:e.props.name+"L"+g(t)},o.a.createElement("td",{onClick:function(e){return h.selected(t,e)}},t))}))),f)},e.prototype.getInput=function(t,e){var n=void 0,r=this.getMapImg(),i=this.getPopoverData(this._getMaskList("no"!==this.props.showAll),["Possible Values"],void 0,e),s=this.props.popover?this._createPopover(i):o.a.createElement("span",null),u=this.state.mask.isDone();return u&&(n=r[this.state.mask.isDone()]),o.a.createElement("div",{style:{marginBotton:"0px",paddingLeft:"100px"}},o.a.createElement("div",{style:{marginBotton:"0px",fontSize:"70%",color:"red",fontStyle:"italic"}},u," "),"",o.a.createElement("div",{className:"form-group has-feedback"+n[1]},o.a.createElement(a.OverlayTrigger,{trigger:"focus",style:{marginBotton:"0px"},placement:"bottom",overlay:s},t),n[0]))},e}(k)}]).default});
//# sourceMappingURL=react-rxinput.min.js.map