@asyncapi/react-component
Version:
A React component for AsyncAPI specification.
142 lines • 11.4 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Schema = void 0;
var react_1 = __importStar(require("react"));
var index_1 = require("../index");
var helpers_1 = require("../../helpers");
var SchemaItems_1 = require("./SchemaItems");
var AdditionalItems_1 = require("./AdditionalItems");
var SchemaProperties_1 = require("./SchemaProperties");
var AdditionalProperties_1 = require("./AdditionalProperties");
var Conditions_1 = require("./Conditions/Conditions");
var Rules_1 = require("./Rules/Rules");
var FieldStatusIndicators_1 = require("./FieldStatusIndicators");
var SchemaContext = react_1.default.createContext({
reverse: false,
deepExpanded: false,
});
var Schema = function (_a) {
var _b, _c;
var schemaName = _a.schemaName, schema = _a.schema, _d = _a.required, required = _d === void 0 ? false : _d, _e = _a.isPatternProperty, isPatternProperty = _e === void 0 ? false : _e, _f = _a.isProperty, isProperty = _f === void 0 ? false : _f, _g = _a.isCircular, isCircular = _g === void 0 ? false : _g, dependentRequired = _a.dependentRequired, _h = _a.expanded, propExpanded = _h === void 0 ? false : _h, _j = _a.isArray, isArray = _j === void 0 ? false : _j;
var _k = (0, react_1.useContext)(SchemaContext), reverse = _k.reverse, deepExpanded = _k.deepExpanded;
var _l = (0, react_1.useState)(propExpanded || isArray), expanded = _l[0], setExpanded = _l[1];
var _m = (0, react_1.useState)(false), deepExpand = _m[0], setDeepExpand = _m[1];
var _o = (0, react_1.useState)('RULES'), tabOpen = _o[0], setTabOpen = _o[1];
var constraints = schema ? helpers_1.SchemaHelpers.humanizeConstraints(schema) : [];
var rulesExist = schema
? helpers_1.SchemaHelpers.hasRules(schema, constraints)
: false;
var conditionsExist = schema ? helpers_1.SchemaHelpers.hasConditions(schema) : false;
(0, react_1.useEffect)(function () {
if (!rulesExist)
setTabOpen('CONDITIONS');
}, [rulesExist]);
(0, react_1.useEffect)(function () {
if (!isArray) {
setDeepExpand(deepExpanded);
}
}, [isArray, deepExpanded, setDeepExpand]);
(0, react_1.useEffect)(function () {
if (!isArray) {
setExpanded(deepExpand);
}
}, [isArray, deepExpand]);
var contextValue = (0, react_1.useMemo)(function () { return ({
reverse: !reverse,
deepExpanded: deepExpand,
}); }, [reverse, deepExpand]);
if (!schema ||
(typeof schemaName === 'string' &&
((schemaName === null || schemaName === void 0 ? void 0 : schemaName.startsWith('x-parser-')) ||
(schemaName === null || schemaName === void 0 ? void 0 : schemaName.startsWith('x-schema-private-'))))) {
return null;
}
var dependentSchemas = helpers_1.SchemaHelpers.getDependentSchemas(schema);
var externalDocs = schema.externalDocs();
var parameterLocationExt = schema
.extensions()
.get(helpers_1.SchemaHelpers.extParameterLocation);
var parameterLocation = (parameterLocationExt === null || parameterLocationExt === void 0 ? void 0 : parameterLocationExt.value()) === true;
var schemaType = helpers_1.SchemaHelpers.toSchemaType(schema);
isCircular = isCircular || schema.isCircular() || false;
var uid = schema.$id();
var styledSchemaName = isProperty ? 'italic' : '';
var renderedSchemaName = typeof schemaName === 'string' ? (react_1.default.createElement("span", { className: "break-anywhere text-sm w-full ".concat(styledSchemaName) }, schemaName)) : (schemaName);
var isExpandable = helpers_1.SchemaHelpers.isExpandable(schema) || rulesExist || conditionsExist;
return (react_1.default.createElement(SchemaContext.Provider, { value: contextValue },
react_1.default.createElement("div", { className: "flex mb-4 gap-2" },
react_1.default.createElement("div", { className: "border rounded overflow-visible w-full" },
react_1.default.createElement("div", { className: "flex flex-col justify-center p-4 bg-gray-100 border-b" },
react_1.default.createElement("div", { className: "flex justify-between items-start" },
react_1.default.createElement("div", { className: "flex items-center gap-2 w-full" },
isExpandable && !isCircular && !isArray ? (react_1.default.createElement("div", { className: "flex items-center gap-2" },
react_1.default.createElement(index_1.CollapseButton, { onClick: function () { return setExpanded(function (prev) { return !prev; }); }, expanded: expanded }, renderedSchemaName))) : (react_1.default.createElement("span", { className: "text-sm ".concat(isProperty ? 'italic' : '') }, schemaName)),
react_1.default.createElement("span", { className: "capitalize text-sm text-teal-500 font-bold" }, isCircular ? "".concat(schemaType, " [CIRCULAR]") : schemaType),
schema.contentMediaType() !== undefined && (react_1.default.createElement("strong", { className: "bg-yellow-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs" },
"media type: ",
schema.contentMediaType())),
uid && !uid.startsWith('<anonymous-') && (react_1.default.createElement("span", { className: "border text-orange-600 rounded mr-2 p-1 text-xs" },
"uid: ",
uid)),
react_1.default.createElement(FieldStatusIndicators_1.FieldStatusIndicator, { schema: schema, isPatternProperty: isPatternProperty, required: required, dependentRequired: dependentRequired }),
react_1.default.createElement("div", { className: "ml-auto flex gap-4" }, isExpandable && !isCircular && !isArray && (react_1.default.createElement("button", { type: "button", onClick: function () {
var newExpandedState = !expanded;
setDeepExpand(newExpandedState);
if (!isArray) {
setExpanded(newExpandedState);
}
}, className: "text-sm text-gray-500 hover:text-gray-700" }, expanded ? 'Collapse all' : 'Expand all'))))),
schema.description() && (react_1.default.createElement("div", { className: "mt-2 text-sm text-gray-600" },
react_1.default.createElement(index_1.Markdown, null, schema.description()))),
schema.examples() && (react_1.default.createElement("ul", { className: "text-xs" },
"Examples values:",
' ', (_b = schema.examples()) === null || _b === void 0 ? void 0 :
_b.map(function (e, idx) { return (react_1.default.createElement("li", { key: idx, className: "inline-block bg-gray-600 text-white rounded ml-1 py-0 px-2 break-all" },
react_1.default.createElement("span", null, helpers_1.SchemaHelpers.prettifyValue(e)))); }))),
parameterLocation && (react_1.default.createElement("div", { className: "text-xs" },
"Parameter location:",
' ',
react_1.default.createElement("span", { className: "border text-orange-600 rounded mr-2 p-1 text-xs" }, parameterLocation))),
externalDocs && (react_1.default.createElement("strong", { className: "w-min border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 no-underline text-xs uppercase rounded px-2 py-0 mt-2" },
react_1.default.createElement(index_1.Href, { href: externalDocs.url(), title: (_c = externalDocs.description()) !== null && _c !== void 0 ? _c : '' }, "Documentation")))),
react_1.default.createElement("div", { className: "flex " }, !isCircular && isExpandable && expanded && (react_1.default.createElement("div", { className: "p-4 bg-white relative w-full" },
react_1.default.createElement(SchemaProperties_1.SchemaProperties, { schema: schema }),
react_1.default.createElement(SchemaItems_1.SchemaItems, { schema: schema }),
react_1.default.createElement("div", { className: "" },
react_1.default.createElement("div", { className: "flex gap-1" },
rulesExist && (react_1.default.createElement("button", { className: "text-sm font-semibold text-gray-900 ".concat(tabOpen == 'RULES' ? 'bg-gray-400' : 'bg-gray-200', " p-2 rounded-t cursor-pointer"), onClick: function () { return setTabOpen('RULES'); }, role: "tab", "aria-selected": tabOpen === 'RULES', "aria-controls": "rules-panel" }, "Rules")),
conditionsExist && (react_1.default.createElement("button", { className: "text-sm font-semibold text-gray-900 ".concat(tabOpen == 'CONDITIONS' ? 'bg-gray-400' : 'bg-gray-200', " p-2 rounded-t cursor-pointer"), onClick: function () { return setTabOpen('CONDITIONS'); }, role: "tab", "aria-selected": tabOpen === 'CONDITIONS', "aria-controls": "conditions-panel" }, "Conditions"))),
conditionsExist && tabOpen == 'CONDITIONS' && (react_1.default.createElement("div", { className: "mb-4 w-full" },
react_1.default.createElement(Conditions_1.Conditions, { schema: schema, dependentSchemas: dependentSchemas }))),
rulesExist && tabOpen == 'RULES' && (react_1.default.createElement("div", { className: "z-10 w-full" },
react_1.default.createElement(Rules_1.Rules, { schema: schema, constraints: constraints })))),
react_1.default.createElement("div", { className: "mt-4" },
react_1.default.createElement(AdditionalProperties_1.AdditionalProperties, { schema: schema }),
react_1.default.createElement(AdditionalItems_1.AdditionalItems, { schema: schema })),
react_1.default.createElement(index_1.Extensions, { item: schema }))))))));
};
exports.Schema = Schema;
//# sourceMappingURL=Schema.js.map