I have minimize/restore working (click the M and R, these will be icons eventually), but when adding resize it works until you do actually resize, then it ignores the style tag entirely. How can I override this? I've tried 'resizable={windowSize.current==="show"}' but it has no effect
import React, { useState } from 'react';
import './App.css';
import { Dialog, LinkButton } from 'rc-easyui';
function App() {
const [closed, setClosed] = useState(false);
const [windowSize, setWindowSize] = useState({
current:"show",
show: {
height:315, width:285,
icon:"M"
},
hide: {
height:28, width:150,
icon:"R"
}
});
function onClose() {
if(!closed) {
setClosed(true);
}
}
function header() {
return (
<div key="x">
<div className="panel-title">Test</div>
<LinkButton style={{ position: "absolute", right: "20px", top: "0px", height: "19px" }} plain onClick={onMinRestore}>
<i>{windowSize[windowSize.current].icon}</i>
</LinkButton>
<LinkButton style={{ position: "absolute", right: "0px", top: "0px", height: "19px" }} plain onClick={onClose}>
<i >X</i>
</LinkButton>
</div>
)
}
function onResize({...size}) {
let newState = {...{}, ...windowSize};
newState.show.height = size.height;
newState.show.width = size.width;
setWindowSize(newState);
}
function onMinRestore() {
let newState = {...{}, ...windowSize};
if(newState.current==="show") {
newState.current = "hide";
} else {
newState.current = "show";
}
setWindowSize(newState);
}
return (
<div>
<Dialog
header={header}
style={{ position:"fixed", top:(window.innerHeight-(windowSize[windowSize.current].height+10))+"px", left: (window.innerWidth-(windowSize[windowSize.current].width+20))+"px", height: windowSize[windowSize.current].height+"px", width: windowSize[windowSize.current].width+"px" }}
closed={closed}
closable={false}
resizable={true}
onResize={onResize}
>
Content
</Dialog>
</div>
);
}
export default App;