@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
222 lines • 13 kB
JavaScript
/*!
* Copyright (C) Microsoft Corporation. All rights reserved.
*/
define(["require", "exports", "tslib", "office-ui-fabric-react", "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, office_ui_fabric_react_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;
// tslint:disable-next-line:no-any
_this._renderSidebarButtonMenuItem = function (item, dismissMenu) {
return _this._renderSidebarButton(item, true);
};
_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 ? 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); })))));
};
Sidebar.prototype.toggleCollapsed = function () {
var _this = this;
this.setState(function (prevState) {
return { isCollapsed: !_this.state.isCollapsed };
});
if (this.props.onCollapseChanged) {
this.props.onCollapseChanged();
}
};
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);
return (React.createElement("div", { key: item.key },
React.createElement(ButtonAs, { text: this.state.isCollapsed && !overrideCollapse ? null : item.name, iconProps: item.iconProps ? item.iconProps : { iconName: '' }, menuIconProps: this.state.isCollapsed ? null : item.subMenuIconProps, className: this._getClassNames('ba-SidebarButton', item), role: "menuitem", ariaLabel: item.name, title: item.title ? item.title : item.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);
return (React.createElement("div", { className: this._getClassNames('ba-SidebarAccordion', item), key: item.key },
React.createElement(Accordion_1.Accordion, { text: item.name, iconProps: item.iconProps, menuIconProps: item.subMenuIconProps, role: 'menuitem', ariaLabel: item.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,
/*tslint:disable:jsx-no-lambda*/
onRenderContent: function () {
return _this._renderAccordionItems(item.items);
},
/*tslint:disable:jsx-no-lambda*/
onOpen: function () {
_this.componentDidMount();
},
/*tslint:disable:jsx-no-lambda*/
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;
});
if (item.name) {
children.unshift({
key: item.name + '-header',
name: item.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 ? '' : item.name, iconProps: item.iconProps, menuIconProps: this.state.isCollapsed ? { iconName: '' } : item.subMenuIconProps, menuProps: {
items: children,
directionalHint: DirectionalHint_1.DirectionalHint.rightTopEdge,
ariaLabel: item.name,
calloutProps: {
styles: {
root: {
borderWidth: '0'
}
}
}
}, menuTriggerKeyCode: Utilities_1.KeyCodes.right, className: this._getClassNames('ba-SidebarContextualMenuButton', item), role: "menuitem", ariaLabel: item.name, title: item.title ? item.title : item.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);
}
};
};
// tslint:disable-next-line:no-any
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;
};
tslib_1.__decorate([
office_ui_fabric_react_1.autobind
], Sidebar.prototype, "toggleCollapsed", null);
return Sidebar;
}(Utilities_1.BaseComponent));
exports.Sidebar = Sidebar;
});
//# sourceMappingURL=Sidebar.js.map