@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
61 lines • 3.42 kB
JavaScript
define(["require", "exports", "tslib", "react", "@uifabric/experiments", "office-ui-fabric-react"], function (require, exports, tslib_1, React, experiments_1, office_ui_fabric_react_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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(office_ui_fabric_react_1.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(office_ui_fabric_react_1.Label, null, props.children) : React.createElement(office_ui_fabric_react_1.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(experiments_1.CollapsibleSection, { key: 1, defaultCollapsed: true, title: {
styles: titleTextStyles,
text: titleTextRender
}, body: bodyRender }, "Data loaded"),
React.createElement(experiments_1.CollapsibleSection, { key: 1, defaultCollapsed: true, title: {
styles: titleTextStyles,
text: titleTextRender
}, body: bodyRender }, "Data loaded")));
};
return SlotsAsyncExample;
}(React.Component));
exports.SlotsAsyncExample = SlotsAsyncExample;
});
//# sourceMappingURL=Slots.Async.Example.js.map