@asyncapi/react-component
Version:
A React component for AsyncAPI specification.
115 lines • 9.56 kB
JavaScript
import React, { useState, useEffect, useContext, useMemo } from 'react';
import { Href, CollapseButton, Markdown, Extensions } from '../index';
import { SchemaHelpers } from '../../helpers';
import { SchemaItems } from './SchemaItems';
import { AdditionalItems } from './AdditionalItems';
import { SchemaProperties } from './SchemaProperties';
import { AdditionalProperties } from './AdditionalProperties';
import { Conditions } from './Conditions/Conditions';
import { Rules } from './Rules/Rules';
import { FieldStatusIndicator } from './FieldStatusIndicators';
var SchemaContext = React.createContext({
reverse: false,
deepExpanded: false,
});
export 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 = useContext(SchemaContext), reverse = _k.reverse, deepExpanded = _k.deepExpanded;
var _l = useState(propExpanded || isArray), expanded = _l[0], setExpanded = _l[1];
var _m = useState(false), deepExpand = _m[0], setDeepExpand = _m[1];
var _o = useState('RULES'), tabOpen = _o[0], setTabOpen = _o[1];
var constraints = schema ? SchemaHelpers.humanizeConstraints(schema) : [];
var rulesExist = schema
? SchemaHelpers.hasRules(schema, constraints)
: false;
var conditionsExist = schema ? SchemaHelpers.hasConditions(schema) : false;
useEffect(function () {
if (!rulesExist)
setTabOpen('CONDITIONS');
}, [rulesExist]);
useEffect(function () {
if (!isArray) {
setDeepExpand(deepExpanded);
}
}, [isArray, deepExpanded, setDeepExpand]);
useEffect(function () {
if (!isArray) {
setExpanded(deepExpand);
}
}, [isArray, deepExpand]);
var contextValue = 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 = SchemaHelpers.getDependentSchemas(schema);
var externalDocs = schema.externalDocs();
var parameterLocationExt = schema
.extensions()
.get(SchemaHelpers.extParameterLocation);
var parameterLocation = (parameterLocationExt === null || parameterLocationExt === void 0 ? void 0 : parameterLocationExt.value()) === true;
var schemaType = SchemaHelpers.toSchemaType(schema);
isCircular = isCircular || schema.isCircular() || false;
var uid = schema.$id();
var styledSchemaName = isProperty ? 'italic' : '';
var renderedSchemaName = typeof schemaName === 'string' ? (React.createElement("span", { className: "break-anywhere text-sm w-full ".concat(styledSchemaName) }, schemaName)) : (schemaName);
var isExpandable = SchemaHelpers.isExpandable(schema) || rulesExist || conditionsExist;
return (React.createElement(SchemaContext.Provider, { value: contextValue },
React.createElement("div", { className: "flex mb-4 gap-2" },
React.createElement("div", { className: "border rounded overflow-visible w-full" },
React.createElement("div", { className: "flex flex-col justify-center p-4 bg-gray-100 border-b" },
React.createElement("div", { className: "flex justify-between items-start" },
React.createElement("div", { className: "flex items-center gap-2 w-full" },
isExpandable && !isCircular && !isArray ? (React.createElement("div", { className: "flex items-center gap-2" },
React.createElement(CollapseButton, { onClick: function () { return setExpanded(function (prev) { return !prev; }); }, expanded: expanded }, renderedSchemaName))) : (React.createElement("span", { className: "text-sm ".concat(isProperty ? 'italic' : '') }, schemaName)),
React.createElement("span", { className: "capitalize text-sm text-teal-500 font-bold" }, isCircular ? "".concat(schemaType, " [CIRCULAR]") : schemaType),
schema.contentMediaType() !== undefined && (React.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.createElement("span", { className: "border text-orange-600 rounded mr-2 p-1 text-xs" },
"uid: ",
uid)),
React.createElement(FieldStatusIndicator, { schema: schema, isPatternProperty: isPatternProperty, required: required, dependentRequired: dependentRequired }),
React.createElement("div", { className: "ml-auto flex gap-4" }, isExpandable && !isCircular && !isArray && (React.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.createElement("div", { className: "mt-2 text-sm text-gray-600" },
React.createElement(Markdown, null, schema.description()))),
schema.examples() && (React.createElement("ul", { className: "text-xs" },
"Examples values:",
' ', (_b = schema.examples()) === null || _b === void 0 ? void 0 :
_b.map(function (e, idx) { return (React.createElement("li", { key: idx, className: "inline-block bg-gray-600 text-white rounded ml-1 py-0 px-2 break-all" },
React.createElement("span", null, SchemaHelpers.prettifyValue(e)))); }))),
parameterLocation && (React.createElement("div", { className: "text-xs" },
"Parameter location:",
' ',
React.createElement("span", { className: "border text-orange-600 rounded mr-2 p-1 text-xs" }, parameterLocation))),
externalDocs && (React.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.createElement(Href, { href: externalDocs.url(), title: (_c = externalDocs.description()) !== null && _c !== void 0 ? _c : '' }, "Documentation")))),
React.createElement("div", { className: "flex " }, !isCircular && isExpandable && expanded && (React.createElement("div", { className: "p-4 bg-white relative w-full" },
React.createElement(SchemaProperties, { schema: schema }),
React.createElement(SchemaItems, { schema: schema }),
React.createElement("div", { className: "" },
React.createElement("div", { className: "flex gap-1" },
rulesExist && (React.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.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.createElement("div", { className: "mb-4 w-full" },
React.createElement(Conditions, { schema: schema, dependentSchemas: dependentSchemas }))),
rulesExist && tabOpen == 'RULES' && (React.createElement("div", { className: "z-10 w-full" },
React.createElement(Rules, { schema: schema, constraints: constraints })))),
React.createElement("div", { className: "mt-4" },
React.createElement(AdditionalProperties, { schema: schema }),
React.createElement(AdditionalItems, { schema: schema })),
React.createElement(Extensions, { item: schema }))))))));
};
//# sourceMappingURL=Schema.js.map