@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
224 lines • 12.9 kB
JavaScript
/*!
* Copyright (C) Microsoft Corporation. All rights reserved.
*/
define(["require", "exports", "tslib", "office-ui-fabric-react/lib/FocusZone", "office-ui-fabric-react/lib/common/DirectionalHint", "office-ui-fabric-react/lib/ScrollablePane", "office-ui-fabric-react/lib/Styling", "office-ui-fabric-react/lib/Utilities", "react", "../BAFAccordion/Accordion", "./Sidebar.classNames", "./Sidebar.styles", "./SidebarButton", "./SidebarButton.styles"], function (require, exports, tslib_1, FocusZone_1, DirectionalHint_1, ScrollablePane_1, Styling_1, Utilities_1, React, Accordion_1, Sidebar_classNames_1, Sidebar_styles_1, SidebarButton_1, SidebarButton_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Sidebar = /** @class */ (function (_super) {
tslib_1.__extends(Sidebar, _super);
function Sidebar(props) {
var _this = _super.call(this, props) || this;
_this.toggleCollapsed = function () {
_this.setState(function (prevState) {
return { isCollapsed: !_this.state.isCollapsed };
});
if (_this.props.onCollapseChanged) {
_this.props.onCollapseChanged();
}
};
_this._renderSidebarButtonMenuItem = function (item, dismissMenu) {
return _this._renderSidebarButton(item, true);
};
Utilities_1.initializeComponentRef(_this);
_this.state = {
isCollapsed: false,
};
return _this;
}
/*
* ComponentDidMount is used in the sidebar to adjust the height of the sidebar content
* to allow the content scrollbar to be correctly sized.
*/
Sidebar.prototype.componentDidMount = function () {
var parentId = this.props.id ? this.props.id : '';
var sidebar = document.getElementsByClassName("ba-Sidebar-" + parentId)[0];
var sidebarFooter = document.getElementsByClassName("ba-SidebarFooter-" + parentId)[0];
var sidebarContent = document.getElementsByClassName("ba-SidebarContent-" + parentId)[0];
if (sidebarContent && sidebar && sidebarFooter) {
sidebarContent.setAttribute('style', 'height: ' + (sidebar.offsetHeight - sidebarFooter.offsetHeight + 'px'));
}
};
Sidebar.prototype.render = function () {
var _this = this;
var _a = this.props, theme = _a.theme, styles = _a.styles, collapseButtonStyles = _a.collapseButtonStyles, className = _a.className, collapseButtonAriaLabel = _a.collapseButtonAriaLabel, footerItems = _a.footerItems, id = _a.id, items = _a.items;
this._theme = theme;
this._colors = this.props.colors !== undefined ? this.props.colors : Sidebar_styles_1.SidebarColors.Light;
this._buttonStyles = Sidebar_styles_1.getButtonColoredStyles(theme, this._colors, this.props.buttonStyles);
this._classNames = Sidebar_classNames_1.getSidebarClassNames(Sidebar_styles_1.getSidebarStyles(theme, this._colors, styles), className, this.state.isCollapsed);
var ButtonAs = this._getButtonAs();
return (React.createElement("div", { className: this._classNames.root, role: "menu", "aria-orientation": 'vertical', "aria-expanded": !this.state.isCollapsed },
React.createElement(ScrollablePane_1.ScrollablePane, { className: this._classNames.content, styles: {
contentContainer: {
overflowX: 'hidden',
},
} },
this.props.collapsible && (React.createElement(ButtonAs, { key: 'baSidebarCollapsibleButton', iconProps: { iconName: 'GlobalNavButton' }, onClick: this.toggleCollapsed, ariaLabel: collapseButtonAriaLabel, theme: this._theme, "aria-expanded": !this.state.isCollapsed, styles: Styling_1.concatStyleSets(this._buttonStyles, collapseButtonStyles) })),
React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.vertical }, items && items.map(function (item) { return _this._renderItemInSidebar(item); }))),
footerItems && (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.vertical, className: this._classNames.footer, key: "baSidebarFooter" + id }, footerItems.map(function (item) { return _this._renderItemInSidebar(item); }))),
React.createElement(Utilities_1.FocusRects, null)));
};
Sidebar.prototype.setCollapsed = function (newValue) {
this.setState(function (prevState) {
return { isCollapsed: newValue };
});
if (this.props.onCollapseChanged) {
this.props.onCollapseChanged();
}
};
Sidebar.prototype.getCollapsed = function () {
return this.state.isCollapsed;
};
Sidebar.prototype._renderItemInSidebar = function (item) {
if (!item) {
return null;
}
if (item.onRender) {
return item.onRender(item, function () { return undefined; });
}
else if (item.items && item.items.length > 0) {
return this._renderSidebarItemWithChildren(item);
}
return this._renderSidebarButton(item);
};
Sidebar.prototype._renderSidebarButton = function (item, overrideCollapse) {
if (overrideCollapse === void 0) { overrideCollapse = false; }
if (!item) {
return null;
}
var ButtonAs = this._getButtonAs(item);
// eslint-disable-next-line deprecation/deprecation
var name = item.text || item.name;
return (React.createElement("div", { key: item.key },
React.createElement(ButtonAs, { text: this.state.isCollapsed && !overrideCollapse ? null : name, iconProps: item.iconProps ? item.iconProps : { iconName: '' }, menuIconProps: this.state.isCollapsed ? null : item.subMenuIconProps, className: this._getClassNames('ba-SidebarButton', item), role: "menuitem", ariaLabel: name, title: item.title ? item.title : name, styles: Styling_1.concatStyleSets(this._buttonStyles, item.styles), theme: this._theme, checked: item.active, disabled: item.disabled, onClick: this._onItemClick(item), "aria-current": item.active })));
};
Sidebar.prototype._renderSidebarItemWithChildren = function (item) {
if (!item || !item.items) {
return null;
}
if (!this.state.isCollapsed && item.items) {
return this._renderSidebarAccordion(item);
}
return this._renderSidebarButtonWithMenu(item);
};
Sidebar.prototype._renderSidebarAccordion = function (item) {
var _this = this;
if (!item || !item.items) {
return null;
}
var numActiveChildren = 0;
if (item.items) {
numActiveChildren = item.items.filter(function (child) {
return child.active;
}).length;
}
var ButtonAs = this._getButtonAs(item);
// eslint-disable-next-line deprecation/deprecation
var name = item.text || item.name;
return (React.createElement("div", { className: this._getClassNames('ba-SidebarAccordion', item), key: item.key },
React.createElement(Accordion_1.Accordion, { text: name, iconProps: item.iconProps, menuIconProps: item.subMenuIconProps, role: 'menuitem', ariaLabel: name, title: item.tooltip, styles: Styling_1.concatStyleSets(this._buttonStyles, item.styles), theme: this._theme, checked: numActiveChildren > 0 ? true : false, "aria-current": numActiveChildren > 0 ? true : false, buttonAs: ButtonAs,
// eslint-disable-next-line react/jsx-no-bind
onRenderContent: function () {
return _this._renderAccordionItems(item.items);
},
// eslint-disable-next-line react/jsx-no-bind
onOpen: function () {
_this.componentDidMount();
},
// eslint-disable-next-line react/jsx-no-bind
onClose: function () {
_this.componentDidMount();
} })));
};
Sidebar.prototype._renderAccordionItems = function (items) {
var _this = this;
if (!items) {
return null;
}
var children = items.map(function (item) {
var style = item.styles;
item.styles = SidebarButton_styles_1.getSidebarChildrenStyles(_this._theme, item.styles);
var button = _this._renderSidebarButton(item);
item.styles = style;
return button;
});
return React.createElement("div", null, children);
};
Sidebar.prototype._renderSidebarButtonWithMenu = function (item) {
var _this = this;
if (!item || !item.items) {
return null;
}
var numActiveChildren = item.items.filter(function (child) {
return child.active;
}).length;
var children = item.items.map(function (child) {
child.onRender = _this._renderSidebarButtonMenuItem;
return child;
});
// eslint-disable-next-line deprecation/deprecation
var name = item.text || item.name;
if (name) {
children.unshift({
key: name + '-header',
name: name,
iconProps: { iconName: '' },
className: 'ba-SidebarContextualMenuButton-header ',
disabled: true,
styles: Styling_1.concatStyleSets(item.styles, {
root: {
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
borderBottomColor: this._theme.semanticColors.bodyDivider,
},
icon: {
width: '0',
marginRight: '0',
},
}),
onRender: this._renderSidebarButtonMenuItem,
});
}
var ButtonAs = this._getButtonAs(item);
return (React.createElement("div", { key: item.key },
React.createElement(ButtonAs, { key: item.key, text: this.state.isCollapsed ? '' : name, iconProps: item.iconProps, menuIconProps: this.state.isCollapsed ? { iconName: '' } : item.subMenuIconProps, menuProps: {
items: children,
directionalHint: DirectionalHint_1.DirectionalHint.rightTopEdge,
ariaLabel: name,
calloutProps: {
styles: {
root: {
borderWidth: '0',
},
},
},
}, menuTriggerKeyCode: Utilities_1.KeyCodes.right, className: this._getClassNames('ba-SidebarContextualMenuButton', item), role: "menuitem", ariaLabel: name, title: item.title ? item.title : name, styles: Styling_1.concatStyleSets(this._buttonStyles, item.styles), theme: this._theme, checked: numActiveChildren > 0 ? true : false, "aria-current": numActiveChildren > 0 ? true : false, disabled: item.disabled, onClick: this._onItemClick(item) })));
};
Sidebar.prototype._onItemClick = function (item) {
return function (ev) {
if (item.active) {
return;
}
if (item.onClick) {
item.onClick(ev, item);
}
};
};
Sidebar.prototype._getButtonAs = function (item) {
if (item && item.buttonAs) {
return item.buttonAs;
}
else if (this.props.defaultButton) {
return this.props.defaultButton;
}
return SidebarButton_1.SidebarButton;
};
Sidebar.prototype._getClassNames = function (defaultClass, item) {
var className = defaultClass + ' ';
className += item.className ? item.className : '';
return className;
};
return Sidebar;
}(React.Component));
exports.Sidebar = Sidebar;
});
//# sourceMappingURL=Sidebar.js.map