UNPKG

@uifabric/experiments

Version:

Experimental React components for building experiences for Office 365.

45 lines 2.26 kB
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'; 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 ChicletBasicExample = /** @class */ (function (_super) { tslib_1.__extends(ChicletBasicExample, _super); function ChicletBasicExample(props) { return _super.call(this, props) || this; } ChicletBasicExample.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" }); return React.createElement(Chiclet, { url: "http://localhost:4322", size: ChicletSize.medium, footer: footer }); }; return ChicletBasicExample; }(React.Component)); export { ChicletBasicExample }; 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.Basic.Example.js.map