88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import React, { useEffect, useState, useCallback } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { LayoutSelector as OHIFLayoutSelector, ToolbarButton } from '@ohif/ui';
|
|
import { ServicesManager } from '@ohif/core';
|
|
|
|
function ToolbarLayoutSelectorWithServices({ servicesManager, commands, ...props }) {
|
|
const { toolbarService, viewportGridService } = servicesManager.services;
|
|
|
|
const onInteraction = useCallback(
|
|
args => {
|
|
const viewportId = viewportGridService.getActiveViewportId();
|
|
const refreshProps = {
|
|
viewportId,
|
|
};
|
|
|
|
if (props.onLayoutChange) {
|
|
props.onLayoutChange(args);
|
|
}
|
|
toolbarService.recordInteraction({ commands }, { ...args, refreshProps });
|
|
},
|
|
[toolbarService]
|
|
);
|
|
|
|
return (
|
|
<LayoutSelector
|
|
{...props}
|
|
onInteraction={onInteraction}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function LayoutSelector({ rows, columns, className, onInteraction, ...rest }) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const closeOnOutsideClick = () => {
|
|
if (isOpen) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('click', closeOnOutsideClick);
|
|
return () => {
|
|
window.removeEventListener('click', closeOnOutsideClick);
|
|
};
|
|
}, [isOpen]);
|
|
|
|
const onInteractionHandler = () => setIsOpen(!isOpen);
|
|
const DropdownContent = isOpen ? OHIFLayoutSelector : null;
|
|
|
|
return (
|
|
<ToolbarButton
|
|
id="Layout"
|
|
label="Grid Layout"
|
|
icon="tool-layout"
|
|
onInteraction={onInteractionHandler}
|
|
className={className}
|
|
rounded={rest.rounded}
|
|
dropdownContent={
|
|
DropdownContent !== null && (
|
|
<DropdownContent
|
|
rows={rows}
|
|
columns={columns}
|
|
onSelection={onInteraction}
|
|
/>
|
|
)
|
|
}
|
|
isActive={isOpen}
|
|
type="toggle"
|
|
/>
|
|
);
|
|
}
|
|
|
|
LayoutSelector.propTypes = {
|
|
rows: PropTypes.number,
|
|
columns: PropTypes.number,
|
|
onLayoutChange: PropTypes.func,
|
|
servicesManager: PropTypes.instanceOf(ServicesManager),
|
|
};
|
|
|
|
LayoutSelector.defaultProps = {
|
|
rows: 3,
|
|
columns: 3,
|
|
onLayoutChange: () => {},
|
|
};
|
|
|
|
export default ToolbarLayoutSelectorWithServices;
|