monday-ui-react-core
Version:
Official monday.com UI resources for application development in React.js
3 lines (2 loc) • 2.91 kB
JavaScript
import{slicedToArray as o,defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import r,{forwardRef as n,useState as i,useRef as s,useCallback as a,useEffect as u}from"react";import l from"autosize";import c from"../../hooks/useStyle.js";import d from"../../hooks/useMergeRef.js";import m from"../../hooks/ssr/useIsomorphicLayoutEffect.js";import{isTabEvent as f,isEnterEvent as p,isEscapeEvent as v,isArrowUpEvent as E,isArrowDownEvent as T,isArrowLeftEvent as b,isArrowRightEvent as g}from"../../utils/dom-event-utils.js";import{withStaticProps as h}from"../../types/withStaticProps.js";import{InputType as y}from"./EditableInputConstants.js";import{getTestId as A,ComponentDefaultTestId as I}from"../../tests/testIds.js";import C from"./EditableInput.module.scss.js";var j=h(n((function(n,h){var j=n.className,P=n.inputType,_=void 0===P?y.INPUT:P,w=n.autoSize,x=void 0!==w&&w,B=n.id,L=n.tabIndex,R=n.autoComplete,k=void 0===R||R,D=n.disabled,F=void 0!==D&&D,K=n.maxLength,S=n.placeholder,N=void 0===S?"":S,X=n.onClick,z=n.onKeyPress,M=n.shouldFocusOnMount,O=void 0===M||M,H=n.selectOnMount,U=n.value,V=n.customColor,q=n.ignoreBlurClass,W=n.onFinishEditing,G=n.onIgnoreBlurEvent,J=n.onFocus,Q=n.onBlur,Y=n.isValidValue,Z=n.onChange,$=n.onError,oo=n.onSuccess,eo=n.onKeyDown,to=n.onTabHandler,ro=n.onCancelEditing,no=n.textareaSubmitOnEnter,io=void 0!==no&&no,so=n.onArrowKeyDown,ao=n.ariaLabel,uo=n["data-testid"],lo=i(U||""),co=o(lo,2),mo=co[0],fo=co[1],po=s(null),vo=d(h,po),Eo=a((function(){po.current&&x&&_===y.TEXT_AREA&&l(po.current)}),[po,x,_]),To=a((function(){po.current&&requestAnimationFrame((function(){var o;null===(o=po.current)||void 0===o||o.focus()}))}),[po]),bo=a((function(o){J&&J(o)}),[J]),go=a((function(o){if(t=q,(e=o.relatedTarget)&&t&&e.classList.contains(t))G(mo);else{var e,t,r=o;r.origin="blur",W&&W(mo,r),Q&&Q(r)}}),[q,mo,W,Q,G]),ho=a((function(o){var e=o.target.value;!Y||Y(e)?(fo(e),Z&&Z(e),oo&&oo()):$&&$()}),[Y,Z,$,oo]),yo=a((function(){po.current&&po.current.select()}),[po]),Ao=a((function(){po.current&&(po.current.value="",po.current.value=mo)}),[po,mo]),Io=a((function(o){return eo?eo(o,mo):to&&f(o)&&_!==y.TEXT_AREA?(o.preventDefault(),to(mo,o)):(W&&p(o)&&(_!==y.TEXT_AREA||io)&&W(mo,o),ro&&v(o)&&ro(o),void(so&&(E(o)||T(o)||b(o)||g(o))&&so(mo,o)))}),[eo,_,mo,to,io,W,ro,so]);m((function(){O&&To(),Eo(),H?yo():Ao()}),[]),u((function(){fo(U)}),[U]);var Co=c(void 0,{color:V}),jo=_===y.TEXT_AREA&&x?1:void 0;return r.createElement(_,{ref:vo,id:B,"data-testid":uo||A(I.EDITABLE_INPUT,B),style:Co,className:t(C.editableInputWrapper,j,e({},C.noResize,x)),onChange:ho,onKeyDown:Io,onBlur:go,onFocus:bo,onClick:X,onKeyPress:z,value:mo,placeholder:N,dir:"auto",tabIndex:L,autoComplete:k?"on":"off",rows:jo,maxLength:K,"aria-label":ao,disabled:F})})),{inputTypes:y});export{j as default};
//# sourceMappingURL=EditableInput.js.map