@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
50 lines (49 loc) • 2.93 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import useDraggable from '../utils/useDraggable';
import join from '../utils/join';
import useProperty from '../utils/useProperty';
export function Dashboard(props) {
const { title, children, left, right, onShowDashboardPopup } = props;
const [activeTabIndex, setActiveTabIndex] = useProperty(props, 'activeTabIndex', 0);
const [collapsed, setCollapsed] = useProperty(props, 'collapsed', false);
const [floating, setFloating] = useProperty(props, 'floating', false);
const [position, setPosition] = useProperty(props, 'position', {
x: 0,
y: 0,
});
const expanded = !floating && !collapsed;
const { handleRef, targetRef } = useDraggable({
onDrop(dx, dy) {
setPosition(({ x, y }) => {
return { x: x + dx, y: y + dy };
});
},
});
const floatingStyle = {
position: 'absolute',
left: position.x,
top: position.y,
};
const renderTabs = () => (_jsx("div", { className: "ab-Dashboard__tabs twa:whitespace-nowrap", children: children &&
React.Children.map(children, (child, index) => (_jsx("button", { type: "button", className: join('ab-Dashboard__tab', !collapsed && activeTabIndex === index ? 'ab-Dashboard__tab--active' : ''), onClick: () => {
if (activeTabIndex === index) {
setCollapsed(!collapsed);
}
else {
setActiveTabIndex(index);
setCollapsed(false);
}
}, children: child.props.title }, index))) }));
const renderBar = () => (_jsxs("div", { className: "ab-Dashboard__header", onDoubleClick: (event) => {
const target = event.target;
if (!props.canFloat) {
return;
}
if (target.closest('button, input')) {
return;
}
setFloating(!floating);
}, children: [_jsxs("div", { className: "ab-Dashboard__header-left", children: [left, !floating && renderTabs()] }), floating ? (_jsx("div", { className: "ab-Dashboard__title", ref: handleRef, style: { cursor: 'move' }, children: title }, "title-drag")) : (_jsx("div", { className: "ab-Dashboard__title", children: title }, "title")), _jsx("div", { className: "ab-Dashboard__header-right", children: right })] }));
return (_jsxs("div", { ref: targetRef, className: join(`ab-Dashboard`, collapsed ? 'ab-Dashboard--collapsed' : '', floating ? 'ab-Dashboard--floating' : ''), style: floating ? floatingStyle : undefined, children: [renderBar(), expanded && children && children.length ? (_jsx("div", { className: "ab-Dashboard__content", children: children[activeTabIndex] ? children[activeTabIndex].props.children : null })) : null, props.footer] }));
}