dockview
Version:
Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support
55 lines (54 loc) • 2.17 kB
JavaScript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { isReactElement, ReactPartContext } from '../react';
const Tab = (props) => {
return React.createElement(React.Fragment, null, props.children);
};
const Content = (props) => {
return React.createElement(React.Fragment, null, props.children);
};
const Actions = (props) => {
return React.createElement(React.Fragment, null, props.children);
};
function isValidComponent(element) {
return [Content, Actions, Tab].find((comp) => element.type === comp);
}
const Panel = (props) => {
const context = React.useContext(ReactPartContext);
const sections = React.useMemo(() => {
var _a;
const childs = ((_a = React.Children.map(props.children, (_) => _)) === null || _a === void 0 ? void 0 : _a.filter(isReactElement)) || [];
const isInvalid = !!childs.find((_) => !isValidComponent(_));
if (isInvalid) {
throw new Error('Children of DockviewComponents.Panel must be one of the following: DockviewComponents.Content, DockviewComponents.Actions, DockviewComponents.Tab');
}
const body = childs.find((_) => _.type === Content);
const actions = childs.find((_) => _.type === Actions);
const tab = childs.find((_) => _.type === Tab);
return { body, actions, tab };
}, [props.children]);
React.useEffect(() => {
/**
* hide or show the default tab behavior based on whether we want to override
* with our own React tab.
*/
if (sections.tab) {
context.tabPortalElement.hide();
}
else {
context.tabPortalElement.show();
}
}, [sections.tab]);
return (React.createElement(React.Fragment, null,
sections.actions &&
ReactDOM.createPortal(sections.actions, context.actionsPortalElement),
sections.tab &&
ReactDOM.createPortal(sections.tab, context.tabPortalElement.element),
sections.body || props.children));
};
export const DockviewComponents = {
Tab,
Content,
Actions,
Panel,
};