@chief-editor/ui/lib/components/input-wrapper/InputWrapper.js

UI Component for chief editor

"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,n=1,a=arguments.length;n<a;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(e);o<a.length;o++)t.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(e,a[o])&&(n[a[o]]=e[a[o]])}return n},__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t};Object.defineProperty(exports,"__esModule",{value:!0});var util_1=require("@co-hooks/util"),animation_1=require("@rc-hooks/animation"),use_1=require("@rc-hooks/use"),react_1=__importStar(require("react")),const_1=require("./const");function InputWrapper(e){var t=e.domRef,n=void 0===t?null:t,a=e.inputRef,o=void 0===a?null:a,r=e.tag,i=void 0===r?"input":r,s=e.prefix,u=e.suffix,l=e.clear,c=e.children,p=e.inputClassName,f=e.inputStyle,_=e.className,d=e.type,m=void 0===d?"text":d,C=e.value,v=void 0===C?"":C,y=e.disabled,b=void 0!==y&&y,g=e.disableSuffixAnimation,h=e.onValueChange,E=e.onChange,k=e.onFocus,O=e.onBlur,P=e.onKeyDown,R=e.onKeyUp,S=e.onKeyPress,x=e.onPressEnter,T=e.onCopy,N=e.onCompositionStart,K=e.onCompositionUpdate,I=e.onCompositionEnd,j=__rest(e,["domRef","inputRef","tag","prefix","suffix","clear","children","inputClassName","inputStyle","className","type","value","disabled","disableSuffixAnimation","onValueChange","onChange","onFocus","onBlur","onKeyDown","onKeyUp","onKeyPress","onPressEnter","onCopy","onCompositionStart","onCompositionUpdate","onCompositionEnd"]),w=react_1.useState(v),A=w[0],U=w[1],M=react_1.useRef(!1),q=react_1.useRef(null),V=use_1.useCombineRef(q,o),W=use_1.useRefCallback(E),B=use_1.useRefCallback(h),D=use_1.useCombineCallback(P,(function(e){return 13===e.keyCode&&x&&x(e)})),F=function(e){var t=e.currentTarget.value,n=t[t.length-1]||"";M.current=!util_1.isKorean(n)},X=use_1.useCombineCallback(N,F),L=use_1.useCombineCallback(K,F),z=use_1.useCombineCallback(I,(function(e){var t=e.currentTarget.value;M.current=!1,U(t),B(t)})),G=react_1.useCallback((function(e){var t=e.target;if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName)return e.stopPropagation(),void e.nativeEvent.stopImmediatePropagation()}),[]),H=react_1.useCallback((function(e){U(e.target.value),W(e),M.current||B(e.target.value)}),[]),J=react_1.useCallback((function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation();var t=q.current;if(null!=t){var n=Object.create(e),a=t.value;n.target=t,n.currentTarget=t,t.value="",M.current=!1,W(n),t.value=a,B("")}}),[]),Q=util_1.pick(j,"textarea"===i?const_1.TEXTAREA_COMMON_ATTRS:const_1.INPUT_COMMON_ATTRS),Y=Q[0],Z=Q[1],$=animation_1.useChildrenEnterLeave(function(){if(!b&&A&&react_1.default.isValidElement(l))return react_1.default.cloneElement(l,{onClick:J,key:"clear"});var e=u||c;return react_1.default.isValidElement(e)?react_1.default.cloneElement(e,{key:"suffix"}):e}(),{duration:100,childRefKey:null,enterTick:function(){},ignoreInitialRender:!0,skipChildWithoutRef:!1,disabled:g,enterChildProps:{"data-motion-fade":"in"},leaveChildProps:{"data-motion-fade":"out"}}),ee=$[0],te=$[1];return react_1.useEffect(te),react_1.useEffect((function(){v!==A&&U(v)}),[v]),react_1.default.createElement("label",__assign({},Z,{className:_,ref:n,onClick:G}),s,react_1.default.createElement(i,__assign(__assign({},Y),{tabIndex:0,type:m,className:p,style:f,disabled:b,value:A,onCompositionStart:X,onCompositionUpdate:L,onCompositionEnd:z,onChange:H,onKeyDown:D,onKeyUp:R,onKeyPress:S,onFocus:k,onBlur:O,onCopy:T,ref:V})),ee)}exports.InputWrapper=InputWrapper;