65 lines
1.8 KiB
JavaScript
65 lines
1.8 KiB
JavaScript
/*
|
|
* @Author: zhp
|
|
* @Date: 2024-09-12 16:11:31
|
|
* @LastEditTime: 2024-09-13 13:39:40
|
|
* @LastEditors: zhp
|
|
* @Description:
|
|
*/
|
|
import { useEffect } from "react";
|
|
import useIcon from "../../../hooks/useIcon";
|
|
import cls from "./container.module.scss";
|
|
import React, { useState } from 'react';
|
|
const Container = (props) => {
|
|
let icon = useIcon(props.icon);
|
|
// console.log(props);
|
|
// const [visible, setVisible] = useState(props.isVisible);
|
|
const desc = props.desc;
|
|
const [localVisible, setLocalVisible] = useState(props.isVisible);
|
|
|
|
// 确保局部状态与传入的isVisible同步
|
|
useEffect(() => {
|
|
setLocalVisible(props.isVisible);
|
|
}, [props.isVisible]);
|
|
|
|
const handleChangeIsVisible = () => {
|
|
const newVisibility = !localVisible;
|
|
setLocalVisible(newVisibility);
|
|
props.onVisibilityChange(newVisibility);
|
|
};
|
|
return (
|
|
<div
|
|
className={`${cls.container} ${props.className}`}
|
|
style={props.pending ? { filter: "grayscale(100%)" } : props.style}
|
|
>
|
|
<div className={cls.container__head}>
|
|
<h2>{props.title}</h2>
|
|
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
|
|
<img
|
|
src={icon}
|
|
alt="#"
|
|
onClick={handleChangeIsVisible}
|
|
className={props.icon == "close" ? cls.bigger : ""}
|
|
/>
|
|
</div>
|
|
<div className={cls.container__content}>{props.children}</div>
|
|
{props.pending && (
|
|
<div
|
|
className={`${cls.container__content} pending-modal`}
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
borderRadius: "20px",
|
|
userSelect: "none",
|
|
cursor: "not-allowed",
|
|
}}
|
|
></div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Container;
|