azure-devops-ui
Version:
React components for building web UI in Azure DevOps
70 lines (69 loc) • 3.7 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import * as React from "react";
import { MasterDetailsContext } from '../../MasterDetailsContext';
import { Observer } from '../../Observer';
import { Surface, SurfaceBackground } from '../../Surface';
import { css } from '../../Util';
import { SingleLayerMasterPanel, SingleLayerMasterPanelHeader } from "../SingleLayerMasterPanel/SingleLayerMasterPanel";
import * as Utils_Accessibility from '../../Core/Util/Accessibility';
/**
* Context-controlled implementation of MasterDetails MasterPanel that allows for arbitrary layers of drill-down
* If you don't need drill-down behavior, @see SingleLayerMasterPanel instead
*/
export const MasterPanel = props => {
const { className, showOnSmallScreens } = props;
const contentElement = React.useRef(null);
const masterDetailsContext = React.useContext(MasterDetailsContext);
return (React.createElement(Surface, { background: SurfaceBackground.neutral },
React.createElement(Observer, { masterDetailsLayer: masterDetailsContext.getCurrentLayer(), hideDetailsPanel: masterDetailsContext.hideDetailsPanel }, (observerProps) => {
return (React.createElement(MasterPanelInternal, { className: css(className, observerProps.hideDetailsPanel && "full-screen"), layer: observerProps.masterDetailsLayer, showOnSmallScreens: showOnSmallScreens || observerProps.hideDetailsPanel }));
})));
};
const MasterPanelInternal = props => {
const { className, layer, showOnSmallScreens } = props;
const tabStop = React.createRef();
const firstUpdate = React.useRef(true);
React.useEffect(() => {
// don't set focus on first update
if (firstUpdate.current) {
firstUpdate.current = false;
}
else {
tabStop.current && tabStop.current.focus();
Utils_Accessibility.announce(layer.ariaLabel);
}
}, [props.layer]);
const masterPanelDetails = layer.masterPanelContent;
const parentItem = layer.parentItem;
const selectedItemObservable = layer.selectedMasterItem;
const renderHeader = masterPanelDetails.renderHeader
? () => {
return masterPanelDetails.renderHeader(parentItem);
}
: undefined;
const renderSearch = masterPanelDetails.renderSearch
? () => {
return masterPanelDetails.renderSearch(parentItem);
}
: undefined;
const renderContent = masterPanelDetails.renderContent
? () => {
return masterPanelDetails.renderContent(parentItem, selectedItemObservable);
}
: undefined;
return (React.createElement(React.Fragment, null,
React.createElement("div", { ref: tabStop, tabIndex: -1 }),
React.createElement(SingleLayerMasterPanel, { className: className, key: `master-panel-${layer.key}`, renderContent: renderContent, renderHeader: renderHeader, renderSearch: renderSearch, showOnSmallScreens: showOnSmallScreens })));
};
export const MasterPanelHeader = props => {
const masterDetailsContext = React.useContext(MasterDetailsContext);
const masterPanelDetails = masterDetailsContext.getCurrentLayer().value.masterPanelContent;
const onBackClick = () => {
const shouldPop = masterPanelDetails.onBackButtonClick && masterPanelDetails.onBackButtonClick();
if (shouldPop !== false) {
masterDetailsContext.pop();
}
};
return React.createElement(SingleLayerMasterPanelHeader, Object.assign({}, props, { onBackButtonClick: masterPanelDetails.hideBackButton !== false ? undefined : onBackClick }));
};