"use strict";var e=require('./../../../ext-esm/tslib/tslib.es6.js'),t=require("react/jsx-runtime"),i=require("react"),n=require("prop-types"),a=require("classnames"),o=require("@material-ui/core"),l=require("@material-ui/icons/Edit"),s=require("@material-ui/icons/Close"),r=require("@material-ui/icons/Done"),c=require("../../IconButton/index.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(n),p=d(a),m=d(l),f=d(s),g=d(r),v=o.makeStyles((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}}})),h=function(n){var a,l=n.className,s=n.isEditable,r=n.isEditing,d=n.onClick,u=n.onClickAway,h=n.onCancel,b=n.onSave,x=n.value,y=i.useState(x),k=y[0],C=y[1],_=i.useState(r),j=_[0],w=_[1],E=v(),S=function(e){e.stopPropagation(),k.length&&k!==x&&b(k).then((function(){return w(!1)}))};i.useEffect((function(){var e=function(e){"Escape"===e.key||"Esc"===e.key?(C(x),w(!1),u()):"Enter"===e.key&&S(e)};return j&&document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}),[j,x,k]);var I=function(e){e.stopPropagation(),C(x),w(!1),h()};i.useEffect((function(){C(x)}),[x]);var q=p.default(E.editableItem,((a={})[E.editableItemActive]=j,a),l);return t.jsxs("div",e.__assign({className:p.default(q,E.container),onClick:d},{children:[!j&&t.jsx("div",e.__assign({className:E.value},{children:k})),j&&t.jsx(o.ClickAwayListener,e.__assign({onClickAway:function(){C(x),w(!1),u()}},{children:t.jsx(o.TextField,{autoFocus:!0,type:"text",value:k,onChange:function(e){e.stopPropagation(),C(e.target.value)},placeholder:"Page Name...",className:E.textField,InputProps:{classes:{root:E.inputRoot},endAdornment:j?t.jsx(o.InputAdornment,e.__assign({position:"end"},{children:t.jsxs("span",e.__assign({className:E.inputAdornment},{children:[t.jsx(o.Tooltip,e.__assign({title:"Cancel",placement:"bottom-end"},{children:t.jsx(c,e.__assign({onClick:I,size:"small",className:E.closeIcon},{children:t.jsx(f.default,{fontSize:"small"})}))})),t.jsx(o.Tooltip,e.__assign({title:"Save",placement:"bottom-end"},{children:t.jsx(c,e.__assign({onClick:S,size:"small",disabled:k===x},{children:t.jsx(g.default,{color:k===x?"disabled":"primary",fontSize:"small"})}))}))]}))})):null}})})),s&&!j&&t.jsx(o.Tooltip,e.__assign({title:"Rename Page",placement:"bottom-end"},{children:t.jsx(c,e.__assign({className:E.editIcon,size:"small",onClick:function(e){e.stopPropagation(),w(!0)}},{children:t.jsx(m.default,{fontSize:"small"})}))}))]}))},b={className:u.default.string,isEditable:u.default.bool,isEditing:u.default.bool,onClick:u.default.func,onSave:u.default.func.isRequired,onClickAway:u.default.func,onCancel:u.default.func,value:u.default.string.isRequired};h.propTypes=b,h.defaultProps={className:"",isEditable:!0,isEditing:!1,onClick:function(){},onClickAway:function(){},onCancel:function(){}},module.exports=h;
