monday-ui-react-core
Version:
Official monday.com UI resources for application development in React.js
3 lines (2 loc) • 3.86 kB
JavaScript
import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as t}from"lodash-es";import{getStyle as i}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as n,ComponentDefaultTestId as s}from"../../tests/testIds.js";import a from"classnames";import r,{useState as l,useRef as u,useCallback as d,useEffect as c}from"react";import m from"../../hooks/ssr/useIsomorphicLayoutEffect.js";import p from"../LegacyHeading/LegacyHeading.js";import g from"../Clickable/Clickable.js";import f from"../EditableInput/EditableInput.js";import y from"../../hooks/usePrevious/index.js";import{InputType as E}from"../EditableInput/EditableInputConstants.js";import{HeadingTypes as h,HeadingSizes as v}from"../LegacyHeading/LegacyHeadingConstants.js";import{withStaticProps as C}from"../../types/withStaticProps.js";import b from"../LegacyHeading/LegacyHeading.module.scss.js";import L from"./LegacyEditableHeading.module.scss.js";import{backwardCompatibilityForProperties as j}from"../../helpers/backwardCompatibilityForProperties.js";var T=C((function(h){var C=h.id,T=void 0===C?"":C,H=h.className,I=h.inputClassName,x=void 0===I?"":I,O=h.dataTestId,P=h["data-testid"],A=h.value,F=h.editing,M=h.disabled,k=h.onFinishEditing,w=h.onCancelEditing,B=h.onIgnoreBlurEvent,N=h.errorClassTimeout,S=void 0===N?2e3:N,z=h.style,D=h.customColor,K=h.onStartEditing,V=h.contentRenderer,_=h.tooltip,R=h.autoSize,G=void 0===R||R,W=h.highlightTerm,X=void 0===W?null:W,q=h.insetFocus,J=void 0!==q&&q,Q=h.size,U=void 0===Q?v.LARGE:Q,Y=h.displayPlaceholderInTextMode,Z=void 0===Y||Y,$=h.suggestEditOnHover,ee=void 0===$||$,oe=h.type,te=void 0===oe?p.types.h1:oe,ie=j([void 0===P?"":P,void 0===O?"":O]),ne=l(F&&!M),se=e(ne,2),ae=se[0],re=se[1],le=l(!1),ue=e(le,2),de=ue[0],ce=ue[1],me=l(A||""),pe=e(me,2),ge=pe[0],fe=pe[1],ye=y(A),Ee=u(null),he=d((function(e){M||ae||(re(!0),K&&K(e))}),[ae,M,re,K]),ve=d((function(e,o){re(!1),fe(e),null==k||k(e,o)}),[k,re,fe]),Ce=d((function(e){re(!1),null==w||w(e)}),[w,re]),be=d((function(e){null==B||B(e)}),[B]),Le=d((function(){ce(!1)}),[ce]),je=d((function(){ce(!0)}),[ce]),Te=d((function(){Le()}),[Le]);c((function(){F||A===ye||A===ge||fe(A)}),[F,A,ye,ge,fe]),c((function(){re(F)}),[F]),m((function(){F||ge||!A||fe(A)}),[F,A,ye,ge,fe]),c((function(){var e;return de&&(e=setTimeout(Le,S)),function(){return e&&clearTimeout(e)}}),[de,ce,Le,S]);var He,Ie,xe,Oe=!M&&ae;return r.createElement("div",{ref:Ee,style:z,className:a(L.editableHeadingWrapper,H,o({},L.insetFocus,J)),"aria-label":"".concat(A," ").concat(_||""),id:T,"data-testid":ie||n(s.EDITABLE_HEADING,T)},r.createElement(g,{role:Oe?"button":"input",onClick:he,disabled:M},Oe?(Ie=h.inputType||(h.ellipsisMaxLines>1?E.TEXT_AREA:void 0),xe={value:ge,className:a(i(b,t("element-type-"+te)),i(b,t("size-"+U)),x),isValidValue:h.isValidValue,onChange:h.onChange,onKeyDown:h.onKeyDown,onKeyPress:h.onKeyPress,onClick:h.onClick,customColor:D,onTabHandler:h.onTabHandler,onArrowKeyDown:h.onArrowKeyDown,autoComplete:h.autoComplete,maxLength:h.maxLength,placeholder:h.placeholder,shouldFocusOnMount:h.shouldFocusOnMount,selectOnMount:h.selectOnMount,onBlur:h.onBlur,onFocus:h.onFocus,inputType:Ie,ignoreBlurClass:h.ignoreBlurClass,autoSize:G,textareaSubmitOnEnter:h.textareaSubmitOnEnter,onFinishEditing:ve,onCancelEditing:Ce,onIgnoreBlurEvent:be,onError:je,onSuccess:Te,ariaLabel:h.inputAriaLabel},r.createElement(f,Object.assign({},xe))):(He={value:Z?ge||h.placeholder||"":ge,type:te,customColor:D,suggestEditOnHover:ee&&!M,tooltipPosition:h.tooltipPosition,ellipsisMaxLines:h.ellipsisMaxLines,nonEllipsisTooltip:h.tooltip,size:U,highlightTerm:X,className:a(L.headingComponent,h.headingClassName)},V?V(He):r.createElement(p,Object.assign({},He)))))}),{types:h,sizes:v});export{T as default};
//# sourceMappingURL=LegacyEditableHeading.js.map