EasyUI Forum
April 18, 2024, 12:04:39 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Dialog resize with minimize  (Read 4092 times)
chrwei
Full Member
***
Posts: 219


View Profile Email
« 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

Code:
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;
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!