Title: Dialog resize with minimize
Post by: chrwei on September 21, 2020, 10:15:39 AM
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;
|