office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
70 lines • 4.57 kB
JavaScript
define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "../../Link", "./AllComponents.checklist", "./ComponentStatusState", "./ComponentStatus", "./ComponentStatusPage.scss"], function (require, exports, tslib_1, React, example_app_base_1, Link_1, AllComponents_checklist_1, ComponentStatusState_1, ComponentStatus_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ComponentStatusPage = /** @class */ (function (_super) {
tslib_1.__extends(ComponentStatusPage, _super);
function ComponentStatusPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ComponentStatusPage.prototype.render = function () {
var sections = [{ title: 'Badges', section: this._renderStatusesInfo() }, { title: 'Status', section: this._renderComponents() }];
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Components Checklist', componentName: 'Components Checklist', overview: this._renderOverView(), otherSections: sections }));
};
ComponentStatusPage.prototype._renderOverView = function () {
return (React.createElement("div", null, "Badges are used to track a component's status regarding different criteria. They reflect if a component is localizable, accessible and reliable."));
};
ComponentStatusPage.prototype._renderComponents = function () {
var _this = this;
return (React.createElement("div", null,
React.createElement("table", { className: 'componentTable' },
React.createElement("tbody", null, Object.keys(AllComponents_checklist_1.AllComponentsStatus).map(function (componentName, index) {
return _this._renderComponent(componentName);
})))));
};
ComponentStatusPage.prototype._renderComponent = function (componentName) {
var component = AllComponents_checklist_1.AllComponentsStatus[componentName];
return (React.createElement("tr", { key: componentName + '-key' },
React.createElement("th", { className: 'componentCells' },
React.createElement("h3", null,
componentName,
" "),
" "),
React.createElement("td", { className: 'componentBadgeCell' },
React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, component)))));
};
ComponentStatusPage.prototype._renderStatusesInfo = function () {
var _this = this;
return (React.createElement("div", null,
React.createElement("table", { className: 'componentTable' },
React.createElement("tbody", null,
React.createElement("tr", null,
React.createElement("th", { className: 'componentCells' }, "Name"),
React.createElement("th", { className: 'componentCells' }, "Description"),
React.createElement("th", { className: 'componentCells' }, "Success")),
ComponentStatusState_1.ComponentStatusInfoState.map(function (name) {
return _this._renderStatusInfo(name);
})))));
};
ComponentStatusPage.prototype._renderStatusInfo = function (statusInfo) {
return (React.createElement("tr", { key: statusInfo.name + '-key' },
React.createElement("th", { className: 'componentCells' },
" ",
statusInfo.name,
" "),
React.createElement("td", { className: 'componentCells' },
" ",
statusInfo.description,
" "),
React.createElement("td", { className: 'componentCells' },
" ",
statusInfo.success,
statusInfo.link && this._createLink(statusInfo.link))));
};
ComponentStatusPage.prototype._createLink = function (information) {
return (React.createElement(Link_1.Link, { href: information.link }, ' ' + information.renderedText));
};
return ComponentStatusPage;
}(React.Component));
exports.ComponentStatusPage = ComponentStatusPage;
});
//# sourceMappingURL=ComponentStatusPage.js.map