@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
61 lines • 2.99 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { CollapsibleSection } from '@uifabric/experiments';
import { Label, Spinner } from 'office-ui-fabric-react';
var AsyncData = /** @class */ (function (_super) {
tslib_1.__extends(AsyncData, _super);
function AsyncData(props) {
var _this = _super.call(this, props) || this;
_this.state = { loading: true };
return _this;
}
AsyncData.prototype.componentDidMount = function () {
var _this = this;
setTimeout(function () { return _this.setState({ loading: false }); }, 3000);
};
AsyncData.prototype.render = function () {
var loading = this.state.loading;
var _a = this.props, render = _a.render, data = _a.data;
return render(loading ? undefined : data);
};
return AsyncData;
}(React.Component));
var titleTextStyles = function (props, theme) { return ({
text: [
theme.fonts.large,
{
fontWeight: 800
}
]
}); };
var titleTextRender = function (render) {
return render(function (ComponentType, props) { return (React.createElement(AsyncData, { data: "done",
// tslint:disable-next-line:jsx-no-lambda
render: function (data) { return (data ? React.createElement(ComponentType, tslib_1.__assign({}, props)) : React.createElement(Spinner, { styles: { root: { alignItems: 'flex-start' } } })); } })); }, 'Title loaded');
};
var bodyRender = function (render) {
return render(function (ComponentType, props) { return (React.createElement(AsyncData, { data: "done",
// tslint:disable-next-line:jsx-no-lambda
render: function (data) { return (React.createElement("div", { style: { border: '1px solid black' } },
React.createElement(ComponentType, tslib_1.__assign({}, props), data ? React.createElement(Label, null, props.children) : React.createElement(Spinner, { styles: { root: { alignItems: 'flex-start' } } })))); } })); });
};
var SlotsAsyncExample = /** @class */ (function (_super) {
tslib_1.__extends(SlotsAsyncExample, _super);
function SlotsAsyncExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
SlotsAsyncExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement(CollapsibleSection, { key: 1, defaultCollapsed: true, title: {
styles: titleTextStyles,
text: titleTextRender
}, body: bodyRender }, "Data loaded"),
React.createElement(CollapsibleSection, { key: 1, defaultCollapsed: true, title: {
styles: titleTextStyles,
text: titleTextRender
}, body: bodyRender }, "Data loaded")));
};
return SlotsAsyncExample;
}(React.Component));
export { SlotsAsyncExample };
//# sourceMappingURL=Slots.Async.Example.js.map