82 lines
2.2 KiB
JavaScript
82 lines
2.2 KiB
JavaScript
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import { Icon } from '@ohif/ui';
|
||
|
|
|
||
|
|
import './PanelSection.css';
|
||
|
|
import LoadingIndicator from '../LoadingIndicator/LoadingIndicator';
|
||
|
|
|
||
|
|
const PanelSection = ({
|
||
|
|
title,
|
||
|
|
children,
|
||
|
|
visible = false,
|
||
|
|
expanded = false,
|
||
|
|
loading = false,
|
||
|
|
hideVisibleButton = false,
|
||
|
|
onVisibilityChange = () => { },
|
||
|
|
onExpandChange = () => { }
|
||
|
|
}) => {
|
||
|
|
const [isExpanded, setIsExpanded] = useState(expanded);
|
||
|
|
const [isVisible, setIsVisible] = useState(visible);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setIsVisible(visible);
|
||
|
|
}, [visible]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="dcmrt-panel-section"
|
||
|
|
style={{
|
||
|
|
marginBottom: isExpanded ? 0 : 2,
|
||
|
|
height: isExpanded ? '100%' : 'unset'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="header">
|
||
|
|
<div>{title}</div>
|
||
|
|
<div className="icons">
|
||
|
|
{!hideVisibleButton && (
|
||
|
|
<Icon
|
||
|
|
className={`eye-icon ${isVisible && 'expanded'}`}
|
||
|
|
name={isVisible ? "eye" : "eye-closed"}
|
||
|
|
width="20px"
|
||
|
|
height="20px"
|
||
|
|
onClick={() => {
|
||
|
|
const newVisibility = !isVisible;
|
||
|
|
setIsVisible(newVisibility);
|
||
|
|
onVisibilityChange(newVisibility);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
<Icon
|
||
|
|
className={`angle-double-${isExpanded ? 'down' : 'up'} ${isExpanded && 'expanded'}`}
|
||
|
|
name={`angle-double-${isExpanded ? 'down' : 'up'}`}
|
||
|
|
width="20px"
|
||
|
|
height="20px"
|
||
|
|
onClick={() => {
|
||
|
|
const newExpandValue = !isExpanded;
|
||
|
|
setIsExpanded(newExpandValue);
|
||
|
|
onExpandChange(newExpandValue);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{loading && isExpanded && <LoadingIndicator expand height="70px" width="70px" />}
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
PanelSection.propTypes = {
|
||
|
|
title: PropTypes.string.isRequired,
|
||
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
|
||
|
|
visible: PropTypes.bool,
|
||
|
|
expanded: PropTypes.bool,
|
||
|
|
onVisibilityChange: PropTypes.func
|
||
|
|
};
|
||
|
|
|
||
|
|
PanelSection.defaultProps = {
|
||
|
|
visible: false,
|
||
|
|
expanded: false,
|
||
|
|
onVisibilityChange: () => { }
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PanelSection;
|