office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
76 lines • 4.35 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Link_1 = require("../../Link");
var AllComponents_checklist_1 = require("./AllComponents.checklist");
var ComponentStatusState_1 = require("./ComponentStatusState");
var ComponentStatus_1 = require("./ComponentStatus");
require("./ComponentStatusPage.scss");
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