import e from"@babel/runtime/helpers/defineProperty";import t from"@babel/runtime/helpers/slicedToArray";import{jsxs as i,jsx as n}from"react/jsx-runtime";import{useState as o,useEffect as l}from"react";import a from"prop-types";import r from"classnames";import{makeStyles as c,ClickAwayListener as s,TextField as d,Tooltip as m,InputAdornment as p}from"@material-ui/core";import u from"@material-ui/icons/Edit";import f from"@material-ui/icons/Close";import v from"@material-ui/icons/Done";import g from"../../IconButton/index.js";var h=c((function(e){return{editableItem:{width:"100%",height:36,position:"relative",backgroundColor:e.palette.background.b8,"&:hover":{backgroundColor:"rgba(3, 188, 212, 0.07)"},"&:hover svg":{visibility:"visible"}},editableItemActive:{backgroundColor:"rgba(3, 188, 212, 0.15)  !important"},container:{display:"flex",alignItems:"center",justifyContent:"space-between","&:hover $editIcon":{visibility:"visible"}},value:{color:e.palette.primary.text6,fontSize:"0.875rem",height:"100%",letterSpacing:".13132px",lineHeight:"36px",overflow:"hidden",paddingLeft:48,textOverflow:"ellipsis",whiteSpace:"nowrap",width:"calc(100% - 32px)",userSelect:"none"},textField:{width:"100%"},inputRoot:{height:36,paddingLeft:48,fontSize:"0.875rem"},inputDisabled:{backgroundColor:"unset",paddingRight:16,"&::before":{display:"none"},pointerEvents:"none"},editIcon:{visibility:"hidden",marginRight:4},closeIcon:{color:e.palette.primary.text6,"&:hover svg":{fill:"".concat(e.palette.primary.contrastText," !important")},"& svg":{fill:"".concat(e.palette.primary.text6," !important"),"&:hover":{fill:"#FFFFFF !important"}}},inputAdornment:{marginTop:1,marginRight:4}}})),b=function(a){var c=a.className,b=a.isEditable,y=a.isEditing,C=a.onClick,k=a.onClickAway,x=a.onCancel,w=a.onSave,E=a.value,I=o(E),S=t(I,2),A=S[0],N=S[1],F=o(y),P=t(F,2),z=P[0],R=P[1],L=h(),T=function(e){var t;e.stopPropagation(),A.length&&A!==E&&(null==w||null===(t=w(A))||void 0===t||t.then((function(){return R(!1)})))};l((function(){var e=function(e){"Escape"===e.key||"Esc"===e.key?(N(E),R(!1),null==k||k()):"Enter"===e.key&&T(e)};return z&&document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}),[z,E,A]);var j=function(e){e.stopPropagation(),N(E),R(!1),null==x||x()};l((function(){N(E)}),[E]);var q=r(L.editableItem,e({},L.editableItemActive,z),c);return i("div",{className:r(q,L.container),onClick:null!=C?C:void 0,children:[!z&&n("div",{className:L.value,children:A}),z&&n(s,{onClickAway:function(){N(E),R(!1),null==k||k()},children:n(d,{autoFocus:!0,type:"text",value:A,onChange:function(e){e.stopPropagation(),N(e.target.value)},placeholder:"Page Name...",className:L.textField,InputProps:{classes:{root:L.inputRoot},endAdornment:z?n(p,{position:"end",children:i("span",{className:L.inputAdornment,children:[n(m,{title:"Cancel",placement:"bottom-end",children:n(g,{onClick:j,size:"small",className:L.closeIcon,children:n(f,{fontSize:"small"})})}),n(m,{title:"Save",placement:"bottom-end",children:n(g,{onClick:T,size:"small",disabled:A===E,children:n(v,{color:A===E?"disabled":"primary",fontSize:"small"})})})]})}):null}})}),b&&!z&&n(m,{title:"Rename Page",placement:"bottom-end",children:n(g,{className:L.editIcon,size:"small",onClick:function(e){e.stopPropagation(),R(!0)},children:n(u,{fontSize:"small"})})})]})},y={className:a.string,isEditable:a.bool,isEditing:a.bool,onClick:a.func,onSave:a.func.isRequired,onClickAway:a.func,onCancel:a.func,value:a.string.isRequired};b.propTypes=y,b.defaultProps={className:"",isEditable:!0,isEditing:!1,onClick:function(){},onClickAway:function(){},onCancel:function(){}};export{b as default};
//# sourceMappingURL=index.js.map
