@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
61 lines • 3.61 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Chiclet_1 = require("../Chiclet");
var Chiclet_types_1 = require("../Chiclet.types");
var exampleStyles = require("./Chiclet.Basic.Example.scss");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Icon_1 = require("office-ui-fabric-react/lib/Icon");
var Tooltip_1 = require("office-ui-fabric-react/lib/Tooltip");
var Breadcrumb_1 = require("office-ui-fabric-react/lib/Breadcrumb");
var Utilities_1 = require("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));
exports.FooterComponent = 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_1.Icon, { iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRightSmall', className: exampleStyles.chevron }); };
var breadcrumb = (React.createElement(Breadcrumb_1.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_1.Chiclet, { url: "http://localhost:4322", size: Chiclet_types_1.ChicletSize.medium, footer: footer, description: breadcrumb });
};
ChicletBreadcrumbExample.prototype._onRenderItem = function (item) {
return (React.createElement(Tooltip_1.TooltipHost, { content: item.text, overflowMode: Tooltip_1.TooltipOverflowMode.Parent, className: exampleStyles.description }, item.text));
};
return ChicletBreadcrumbExample;
}(React.Component));
exports.ChicletBreadcrumbExample = 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(Button_1.IconButton, tslib_1.__assign({}, buttonProp))));
}))));
}
//# sourceMappingURL=Chiclet.Breadcrumb.Example.js.map