@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
42 lines • 2.57 kB
JavaScript
var _this = this;
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Button } from '@uifabric/experiments';
import { Stack } from 'office-ui-fabric-react';
import { stackProps } from './SlotExampleUtils';
var AsComponent = /** @class */ (function (_super) {
tslib_1.__extends(AsComponent, _super);
function AsComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
AsComponent.prototype.render = function () {
return React.createElement("div", tslib_1.__assign({}, this.props));
};
return AsComponent;
}(React.Component));
var AsComponentSFC = function (props) {
return React.createElement("div", tslib_1.__assign({}, _this.props));
};
// tslint:disable:jsx-no-lambda
// tslint:disable:jsx-key
var SlotsStackExample = /** @class */ (function (_super) {
tslib_1.__extends(SlotsStackExample, _super);
function SlotsStackExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
SlotsStackExample.prototype.render = function () {
return (React.createElement(Stack, tslib_1.__assign({}, stackProps),
React.createElement(Button, { icon: "share", content: "Stack: Props, as: 'AsComponent'", stack: { as: AsComponent } }),
React.createElement(Button, { icon: "share", content: "Stack: Props, as: 'AsComponentSFC'", stack: { as: AsComponentSFC } }),
React.createElement(Button, { icon: "share", content: "Stack: Props, as: 'div'", stack: { as: 'div' } }),
React.createElement(Button, { icon: "share", content: "Stack: Props, as: 'span'", stack: { as: 'span' } }),
React.createElement(Button, { icon: "share", stack: { horizontalAlign: 'start' }, content: "Stack: Object, horizontalAlign: left" }),
React.createElement(Button, { icon: "share", stack: function (render) { return render(function (StackType, props) { return React.createElement(StackType, tslib_1.__assign({}, props)); }); }, content: "Stack: Function" }),
React.createElement(Button, { icon: "share", content: "Stack: Function, VerticalStack",
// Have to override component's default horizontal prop value
stack: function (render) { return render(function (StackType, props) { return React.createElement(Stack, tslib_1.__assign({}, props, { horizontal: false })); }); } })));
};
return SlotsStackExample;
}(React.Component));
export { SlotsStackExample };
//# sourceMappingURL=Slots.Stack.Example.js.map