monday-ui-react-core/dist/esm/src/components/EditableTypography/EditableTypography.js

Official monday.com UI resources for application development in React.js

import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as n,useRef as r,useState as a,useEffect as i}from"react";import l from"classnames";import s from"../../hooks/useMergeRef.js";import u from"./EditableTypography.module.scss.js";import"../../constants/dialog.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import"../../constants/positions.js";import{useKeyboardButtonPressedFunc as d}from"../../hooks/useKeyboardButtonPressedFunc.js";import p from"../../hooks/usePrevious/index.js";var m=n((function(n,m){var f=n.id,y=n.className,h=n["data-testid"],g=n.value,v=n.onChange,b=n.onClick,E=n.readOnly,j=void 0!==E&&E,C=n.ariaLabel,k=void 0===C?"":C,P=n.placeholder,w=n.clearable,N=n.typographyClassName,B=n.component,T=n.isEditMode,x=n.onEditModeChange,D=n.tooltipProps,K=n.type,M=n.weight,R=r(null),A=s(m,R),_=a(T||!1),z=e(_,2),F=z[0],H=z[1],I=a(g),L=e(I,2),O=L[0],S=L[1],q=a(0),G=e(q,2),J=G[0],Q=G[1],U=p(g),V=r(null),W=r(null);function X(e){j||F||(e.preventDefault(),Y(!0))}function Y(e){null==x||x(e),H(e)}function Z(){(Y(!1),g!==O)&&(O||w&&P?(S(O),null==v||v(O)):S(g))}i((function(){F||g===U||g===O||S(g)}),[U,F,g,O]),i((function(){H(T)}),[T]);var $=d(X);return i((function(){var e;F&&V.current&&(null===(e=V.current)||void 0===e||e.focus())}),[F]),i((function(){if(W.current){var e=W.current.getBoundingClientRect();Q(e.width)}}),[O,F]),t.createElement("div",{ref:A,id:f,"aria-label":k,"data-testid":h,className:l(u.editableTypography,y),role:F?null:"button",onClick:function(e){null==b||b(e),X(e)},onKeyDown:$},F&&t.createElement("input",{ref:V,className:l(u.input,N),value:O,onChange:function(e){S(e.target.value)},onKeyDown:function(e){e.key===c.ENTER&&Z(),e.key===c.ESCAPE&&(Y(!1),S(g))},onBlur:function(){Z()},"aria-label":k,placeholder:P,style:{width:J},role:"input"}),t.createElement(B,{ref:W,"aria-hidden":F,className:l(u.typography,N,o(o(o({},u.hidden,F),u.disabled,j),u.placeholder,!O&&P)),tabIndex:0,tooltipProps:D,weight:M,type:K},O||P))}));export{m as default};
//# sourceMappingURL=EditableTypography.js.map