componentDidUpdate(prevProps, prevState) {
if (this.shouldUpdateToolboxTabs(prevProps, this.props)) {
this.updateCachedToolTabsWidthMap();
this.updateOverflowedTabs();
this._tabsOrderManager.setCurrentPanelDefinitions(this.props.panelDefinitions);
}
}
/**
* Render all of the tabs, based on the panel definitions and builds out
* a toolbox tab for each of them. Will render the chevron button if the
* container has an overflow.
*/
render() {
const {
currentToolId,
focusButton,
focusedButton,
highlightedTools,
panelDefinitions,
selectTool,
} = this.props;
this._tabsOrderManager.setCurrentPanelDefinitions(panelDefinitions);
const tabs = panelDefinitions.map(panelDefinition => {
// Don't display overflowed tab.
if (!this.state.overflowedTabIds.includes(panelDefinition.id)) {
return ToolboxTab({
key: panelDefinition.id,
currentToolId,
focusButton,
focusedButton,
highlightedTools,
panelDefinition,
selectTool,
});
}
return null;
});
return div(
{
className: "toolbox-tabs-wrapper"
},
div(
{
className: "toolbox-tabs",
onMouseDown: (e) => this._tabsOrderManager.onMouseDown(e),
},
tabs,
(this.state.overflowedTabIds.length > 0)
? this.renderToolsChevronButton() : null
)
);
}
componentWillUnmount() {
window.removeEventListener("resize", this.resizeHandler);
window.cancelIdleCallback(this._resizeTimerId);
this._tabsOrderManager.destroy();
}
onMouseDown: (e) => this._tabsOrderManager.onMouseDown(e),