@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
59 lines • 3.42 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Chiclet } from '../Chiclet';
import { ChicletSize } from '../Chiclet.types';
import * as exampleStyles from './Chiclet.Basic.Example.scss';
import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { TooltipHost, TooltipOverflowMode } from 'office-ui-fabric-react/lib/Tooltip';
import { Breadcrumb } from 'office-ui-fabric-react/lib/Breadcrumb';
import { getRTL } from 'office-ui-fabric-react/lib/Utilities';
var FooterComponent = /** @class */ (function (_super) {
tslib_1.__extends(FooterComponent, _super);
function FooterComponent(props) {
return _super.call(this, props) || this;
}
FooterComponent.prototype.render = function () {
var _a = this.props, buttonProps = _a.buttonProps, activities = _a.activities;
return _renderFooter(buttonProps, activities);
};
return FooterComponent;
}(React.Component));
export { FooterComponent };
var ChicletBreadcrumbExample = /** @class */ (function (_super) {
tslib_1.__extends(ChicletBreadcrumbExample, _super);
function ChicletBreadcrumbExample(props) {
return _super.call(this, props) || this;
}
ChicletBreadcrumbExample.prototype.render = function () {
var footerButtonProps = [
{ iconProps: { iconName: 'More' } },
{ iconProps: { iconName: 'Save' } },
{ iconProps: { iconName: 'Share' } }
];
var footer = React.createElement(FooterComponent, { buttonProps: footerButtonProps, activities: "10 Comments 16 Shares 87 Views" });
var divider = function () { return React.createElement(Icon, { iconName: getRTL() ? 'ChevronLeft' : 'ChevronRightSmall', className: exampleStyles.chevron }); };
var breadcrumb = (React.createElement(Breadcrumb, { items: [
{ text: 'Files', key: 'Files' },
{ text: 'OneDrive Design', key: 'OneDrive Design' },
{ text: 'Emails', key: 'Emails' },
{ text: 'Campaigns', key: 'Campaigns' }
], className: exampleStyles.description, onRenderItem: this._onRenderItem, dividerAs: divider }));
return React.createElement(Chiclet, { url: "http://localhost:4322", size: ChicletSize.medium, footer: footer, description: breadcrumb });
};
ChicletBreadcrumbExample.prototype._onRenderItem = function (item) {
return (React.createElement(TooltipHost, { content: item.text, overflowMode: TooltipOverflowMode.Parent, className: exampleStyles.description }, item.text));
};
return ChicletBreadcrumbExample;
}(React.Component));
export { ChicletBreadcrumbExample };
function _renderFooter(buttonProps, activities) {
return (React.createElement("div", { className: exampleStyles.footer },
React.createElement("div", { className: exampleStyles.activities }, activities ? activities : null),
React.createElement("div", { className: exampleStyles.actions }, buttonProps &&
buttonProps.map(function (buttonProp, index) {
return (React.createElement("div", { className: exampleStyles.action, key: index },
React.createElement(IconButton, tslib_1.__assign({}, buttonProp))));
}))));
}
//# sourceMappingURL=Chiclet.Breadcrumb.Example.js.map