@gsretail.com/gui-core
Version:
A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
2 lines (1 loc) • 5.8 kB
JavaScript
import{DIRECTION as s}from"../core/utils.js";import t from"../core/action-details.js";import e,{maskedClass as i}from"../masked/factory.js";import n from"./mask-element.js";import a from"./html-input-mask-element.js";import o from"./html-contenteditable-mask-element.js";import h from"../core/holder.js";import r from"./input-history.js";import"./html-mask-element.js";class u{constructor(s,t){this.el=s instanceof n?s:s.isContentEditable&&"INPUT"!==s.tagName&&"TEXTAREA"!==s.tagName?new o(s):new a(s),this.masked=e(t),this._listeners={},this._value="",this._unmaskedValue="",this._rawInputValue="",this.history=new r,this._saveSelection=this._saveSelection.bind(this),this._onInput=this._onInput.bind(this),this._onChange=this._onChange.bind(this),this._onDrop=this._onDrop.bind(this),this._onFocus=this._onFocus.bind(this),this._onClick=this._onClick.bind(this),this._onUndo=this._onUndo.bind(this),this._onRedo=this._onRedo.bind(this),this.alignCursor=this.alignCursor.bind(this),this.alignCursorFriendly=this.alignCursorFriendly.bind(this),this._bindEvents(),this.updateValue(),this._onChange()}maskEquals(s){return null==s||this.masked?.maskEquals(s)}get mask(){return this.masked.mask}set mask(s){if(this.maskEquals(s))return;if(!(s instanceof h.Masked)&&this.masked.constructor===i(s))return void this.masked.updateOptions({mask:s});const t=s instanceof h.Masked?s:e({mask:s});t.unmaskedValue=this.masked.unmaskedValue,this.masked=t}get value(){return this._value}set value(s){this.value!==s&&(this.masked.value=s,this.updateControl("auto"))}get unmaskedValue(){return this._unmaskedValue}set unmaskedValue(s){this.unmaskedValue!==s&&(this.masked.unmaskedValue=s,this.updateControl("auto"))}get rawInputValue(){return this._rawInputValue}set rawInputValue(s){this.rawInputValue!==s&&(this.masked.rawInputValue=s,this.updateControl(),this.alignCursor())}get typedValue(){return this.masked.typedValue}set typedValue(s){this.masked.typedValueEquals(s)||(this.masked.typedValue=s,this.updateControl("auto"))}get displayValue(){return this.masked.displayValue}_bindEvents(){this.el.bindEvents({selectionChange:this._saveSelection,input:this._onInput,drop:this._onDrop,click:this._onClick,focus:this._onFocus,commit:this._onChange,undo:this._onUndo,redo:this._onRedo})}_unbindEvents(){this.el&&this.el.unbindEvents()}_fireEvent(s,t){const e=this._listeners[s];e&&e.forEach((s=>s(t)))}get selectionStart(){return this._cursorChanging?this._changingCursorPos:this.el.selectionStart}get cursorPos(){return this._cursorChanging?this._changingCursorPos:this.el.selectionEnd}set cursorPos(s){this.el&&this.el.isActive&&(this.el.select(s,s),this._saveSelection())}_saveSelection(){this.displayValue!==this.el.value&&console.warn("Element value was changed outside of mask. Syncronize mask using `mask.updateValue()` to work properly."),this._selection={start:this.selectionStart,end:this.cursorPos}}updateValue(){this.masked.value=this.el.value,this._value=this.masked.value}updateControl(s){const t=this.masked.unmaskedValue,e=this.masked.value,i=this.masked.rawInputValue,n=this.displayValue,a=this.unmaskedValue!==t||this.value!==e||this._rawInputValue!==i;this._unmaskedValue=t,this._value=e,this._rawInputValue=i,this.el.value!==n&&(this.el.value=n),"auto"===s?this.alignCursor():null!=s&&(this.cursorPos=s),a&&this._fireChangeEvents(),this._historyChanging||!a&&!this.history.isEmpty||this.history.push({unmaskedValue:t,selection:{start:this.selectionStart,end:this.cursorPos}})}updateOptions(s){const{mask:t,...e}=s,i=!this.maskEquals(t),n=this.masked.optionsIsChanged(e);i&&(this.mask=t),n&&this.masked.updateOptions(e),(i||n)&&this.updateControl()}updateCursor(s){null!=s&&(this.cursorPos=s,this._delayUpdateCursor(s))}_delayUpdateCursor(s){this._abortUpdateCursor(),this._changingCursorPos=s,this._cursorChanging=setTimeout((()=>{this.el&&(this.cursorPos=this._changingCursorPos,this._abortUpdateCursor())}),10)}_fireChangeEvents(){this._fireEvent("accept",this._inputEvent),this.masked.isComplete&&this._fireEvent("complete",this._inputEvent)}_abortUpdateCursor(){this._cursorChanging&&(clearTimeout(this._cursorChanging),delete this._cursorChanging)}alignCursor(){this.cursorPos=this.masked.nearestInputPos(this.masked.nearestInputPos(this.cursorPos,s.LEFT))}alignCursorFriendly(){this.selectionStart===this.cursorPos&&this.alignCursor()}on(s,t){return this._listeners[s]||(this._listeners[s]=[]),this._listeners[s].push(t),this}off(s,t){if(!this._listeners[s])return this;if(!t)return delete this._listeners[s],this;const e=this._listeners[s].indexOf(t);return e>=0&&this._listeners[s].splice(e,1),this}_onInput(e){this._inputEvent=e,this._abortUpdateCursor();const i=new t({value:this.el.value,cursorPos:this.cursorPos,oldValue:this.displayValue,oldSelection:this._selection}),n=this.masked.rawInputValue,a=this.masked.splice(i.startChangePos,i.removed.length,i.inserted,i.removeDirection,{input:!0,raw:!0}).offset,o=n===this.masked.rawInputValue?i.removeDirection:s.NONE;let h=this.masked.nearestInputPos(i.startChangePos+a,o);o!==s.NONE&&(h=this.masked.nearestInputPos(h,s.NONE)),this.updateControl(h),delete this._inputEvent}_onChange(){this.displayValue!==this.el.value&&this.updateValue(),this.masked.doCommit(),this.updateControl(),this._saveSelection()}_onDrop(s){s.preventDefault(),s.stopPropagation()}_onFocus(s){this.alignCursorFriendly()}_onClick(s){this.alignCursorFriendly()}_onUndo(){this._applyHistoryState(this.history.undo())}_onRedo(){this._applyHistoryState(this.history.redo())}_applyHistoryState(s){s&&(this._historyChanging=!0,this.unmaskedValue=s.unmaskedValue,this.el.select(s.selection.start,s.selection.end),this._saveSelection(),this._historyChanging=!1)}destroy(){this._unbindEvents(),this._listeners.length=0,delete this.el}}h.InputMask=u;export{u as default};