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

UI Component for chief editor

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