逐渐而不是完全公开模态

Question

我的网站上有一个过滤器按钮可以打开模式 window。您可以按四个参数进行过滤（在下面的代码中，它们是 FilterMethod、FilterStatusCode、FilterLink、FilterDate）。这四个参数都以下拉列表的形式制作。

我的问题是，如果我打开其中一个过滤选项，那么模态 window 会立即扩展到 85%（如代码中所示）。但我希望模式 window 逐渐打开。

所以，如果我打开其中一个过滤参数，那么模态 window 的高度小于 85%，它不会立即打开到全高，而是逐渐填充。

    const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 300,
    bgcolor: 'background.paper',
    border: '1px solid #000',
    boxShadow: 24,
    p: 4,
    overflow: 'auto',

};


    export default function ModalWindow() {
    const [open, setOpen] = React.useState(false);
    const [isFilterMethodExpanded, setIsFilterMethodExpanded] = React.useState(false);
    const [isFilterStatusCodeExpanded, setIsFilterStatusCodeExpanded] = React.useState(false);
    const [isFilterLinkExpanded, setIsFilterLinkExpanded] = React.useState(false);
    const [isFilterDateExpanded, setIsFilterDateExpanded] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <div>
            <Button onClick={handleOpen}><FilterAltIcon /></Button>
            <Modal
                open={open}
                onClose={handleClose}
                disableScrollLock={true}
            >
                <Box sx={style} style={{
                    height: (
                        isFilterMethodExpanded ||
                        isFilterStatusCodeExpanded ||
                        isFilterLinkExpanded ||
                        isFilterDateExpanded) ? '85%' : 'auto'
                }}>
                    <Typography id="modal-modal-title" variant="h6" component="h2">
                        Filters
                    </Typography>

                    <Typography sx={{ mt: 1 }}>
                        <FilterMethod isExpanded={isFilterMethodExpanded} setIsExpanded={setIsFilterMethodExpanded}></FilterMethod>
                    </Typography>

                    <Typography sx={{ mt: 1 }}>
                        <FilterStatusCode isExpanded={isFilterStatusCodeExpanded} setIsExpanded={setIsFilterStatusCodeExpanded}></FilterStatusCode>
                    </Typography>

                    <Typography sx={{ mt: 1 }}>
                        <FilterLink isExpanded={isFilterLinkExpanded} setIsExpanded={setIsFilterLinkExpanded}></FilterLink>
                    </Typography>

                    <Typography sx={{ mt: 1 }}>
                        <FilterDate isExpanded={isFilterDateExpanded} setIsExpanded={setIsFilterDateExpanded}></FilterDate>
                    </Typography>

                    <Typography sx={{ mt: 1 }}>
                        <ApplyCancelButtons setOpen={setOpen} />
                    </Typography>
                </Box>
            </Modal>
        </div>
    );
}

Answer 1

您可以根据打开过滤器的数量进行简单的计算，请参见以下示例：

    export default function ModalWindow() {
    const [open, setOpen] = React.useState(false);
    const [isFilterMethodExpanded, setIsFilterMethodExpanded] = React.useState(false);
    const [isFilterStatusCodeExpanded, setIsFilterStatusCodeExpanded] = React.useState(false);
    const [isFilterLinkExpanded, setIsFilterLinkExpanded] = React.useState(false);
    const [isFilterDateExpanded, setIsFilterDateExpanded] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

// -- Start --    
    const height = React.useMemo(() => {
        const openedFiltersCount = isFilterMethodExpanded + isFilterStatusCodeExpanded + isFilterLinkExpanded + isFilterDateExpanded;
        return openedFiltersCount ? `${85 / openedFiltersCount}%` : "auto";
      }, [isFilterMethodExpanded, isFilterStatusCodeExpanded, isFilterLinkExpanded, isFilterDateExpanded]);
// -- End --

    return (
        <div>
            <Button onClick={handleOpen}><FilterAltIcon /></Button>
            <Modal
                open={open}
                onClose={handleClose}
                disableScrollLock={true}
            >
                <Box sx={style} style={{
                    height
                }}>
                    <Typography id="modal-modal-title" variant="h6" component="h2">
                        Filters
                    </Typography>

                    <Typography sx={{ mt: 1 }}>
                        <FilterMethod isExpanded={isFilterMethodExpanded} setIsExpanded={setIsFilterMethodExpanded}></FilterMethod>
                    </Typography>

                    <Typography sx={{ mt: 1 }}>
                        <FilterStatusCode isExpanded={isFilterStatusCodeExpanded} setIsExpanded={setIsFilterStatusCodeExpanded}></FilterStatusCode>
                    </Typography>

                    <Typography sx={{ mt: 1 }}>
                        <FilterLink isExpanded={isFilterLinkExpanded} setIsExpanded={setIsFilterLinkExpanded}></FilterLink>
                    </Typography>

                    <Typography sx={{ mt: 1 }}>
                        <FilterDate isExpanded={isFilterDateExpanded} setIsExpanded={setIsFilterDateExpanded}></FilterDate>
                    </Typography>

                    <Typography sx={{ mt: 1 }}>
                        <ApplyCancelButtons setOpen={setOpen} />
                    </Typography>
                </Box>
            </Modal>
        </div>
    );
}

Answer 2

我想我之前的回答有误。替换||使用 && 它应该可以工作。

  const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 300,
    bgcolor: 'background.paper',
    border: '1px solid #000',
    boxShadow: 24,
    p: 4,
    overflow: 'scroll',
    maxHeight: '85%'
};


export default function ModalWindow() {
const [open, setOpen] = React.useState(false);
const [isFilterMethodExpanded, setIsFilterMethodExpanded] = React.useState(false);
const [isFilterStatusCodeExpanded, setIsFilterStatusCodeExpanded] = React.useState(false);
const [isFilterLinkExpanded, setIsFilterLinkExpanded] = React.useState(false);
const [isFilterDateExpanded, setIsFilterDateExpanded] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

return (
    <div>
        <Button onClick={handleOpen}><FilterAltIcon /></Button>
        <Modal
            open={open}
            onClose={handleClose}
            disableScrollLock={true}
        >
            <Box sx={style} style={{
                height: (
                    isFilterMethodExpanded &&
                    isFilterStatusCodeExpanded &&
                    isFilterLinkExpanded &&
                    isFilterDateExpanded) ? '85%' : 'auto'

            }}>
                <Typography id="modal-modal-title" variant="h6" component="h2">
                    Filters
                </Typography>

                <Typography sx={{ mt: 1 }}>
                    <FilterMethod isExpanded={isFilterMethodExpanded} setIsExpanded={setIsFilterMethodExpanded}></FilterMethod>
                </Typography>

                <Typography sx={{ mt: 1 }}>
                    <FilterStatusCode isExpanded={isFilterStatusCodeExpanded} setIsExpanded={setIsFilterStatusCodeExpanded}></FilterStatusCode>
                </Typography>

                <Typography sx={{ mt: 1 }}>
                    <FilterLink isExpanded={isFilterLinkExpanded} setIsExpanded={setIsFilterLinkExpanded}></FilterLink>
                </Typography>

逐渐而不是完全公开模态

disclose modal gradually, not completely

javascript

reactjs