docusaurus-theme-openapi-docs 1.1.0 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/markdown/schema.js +85 -20
- package/lib/theme/ApiDemoPanel/Server/index.js +2 -2
- package/lib/theme/ApiItem/Layout/styles.module.css +12 -0
- package/lib/theme/ApiLogo/index.js +29 -0
- package/lib/theme/DiscriminatorTabs/index.js +263 -0
- package/lib/theme/DiscriminatorTabs/styles.module.css +111 -0
- package/lib/theme/ResponseSamples/index.js +27 -0
- package/lib/theme/ResponseSamples/styles.module.css +7 -0
- package/lib/theme/SchemaTabs/styles.module.css +0 -8
- package/lib-next/markdown/schema.js +88 -22
- package/lib-next/theme/ApiDemoPanel/Server/index.js +2 -2
- package/lib-next/theme/ApiItem/Layout/styles.module.css +12 -0
- package/lib-next/theme/ApiLogo/index.js +21 -0
- package/lib-next/theme/DiscriminatorTabs/index.js +263 -0
- package/lib-next/theme/DiscriminatorTabs/styles.module.css +111 -0
- package/lib-next/theme/ResponseSamples/index.js +27 -0
- package/lib-next/theme/ResponseSamples/styles.module.css +7 -0
- package/lib-next/theme/SchemaTabs/styles.module.css +0 -8
- package/package.json +6 -6
- package/src/markdown/schema.ts +86 -20
- package/src/theme/ApiDemoPanel/Server/index.tsx +2 -2
- package/src/theme/ApiItem/Layout/styles.module.css +12 -0
- package/src/theme/ApiLogo/index.tsx +25 -0
- package/src/theme/DiscriminatorTabs/index.js +263 -0
- package/src/theme/DiscriminatorTabs/styles.module.css +111 -0
- package/src/theme/ResponseSamples/index.js +27 -0
- package/src/theme/ResponseSamples/styles.module.css +7 -0
- package/src/theme/SchemaTabs/styles.module.css +0 -8
package/lib/markdown/schema.js
CHANGED
|
@@ -15,22 +15,39 @@ exports.getSchemaName = getSchemaName;
|
|
|
15
15
|
function prettyName(schema, circular) {
|
|
16
16
|
var _schema$title;
|
|
17
17
|
|
|
18
|
-
if (schema.$ref) {
|
|
19
|
-
return schema.$ref.replace("#/components/schemas/", "") + circular ? " (circular)" : "";
|
|
20
|
-
}
|
|
21
|
-
|
|
22
18
|
if (schema.format) {
|
|
23
19
|
return schema.format;
|
|
24
20
|
}
|
|
25
21
|
|
|
26
22
|
if (schema.allOf) {
|
|
23
|
+
if (typeof schema.allOf[0] === "string") {
|
|
24
|
+
// @ts-ignore
|
|
25
|
+
if (schema.allOf[0].includes("circular")) {
|
|
26
|
+
return schema.allOf[0];
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return "object";
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (schema.oneOf) {
|
|
34
|
+
return "object";
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (schema.anyOf) {
|
|
27
38
|
return "object";
|
|
28
39
|
}
|
|
29
40
|
|
|
30
41
|
if (schema.type === "object") {
|
|
31
42
|
var _schema$xml$name, _schema$xml;
|
|
32
43
|
|
|
33
|
-
return (_schema$xml$name = (_schema$xml = schema.xml) === null || _schema$xml === void 0 ? void 0 : _schema$xml.name) !== null && _schema$xml$name !== void 0 ? _schema$xml$name : schema.type;
|
|
44
|
+
return (_schema$xml$name = (_schema$xml = schema.xml) === null || _schema$xml === void 0 ? void 0 : _schema$xml.name) !== null && _schema$xml$name !== void 0 ? _schema$xml$name : schema.type; // return schema.type;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
if (schema.type === "array") {
|
|
48
|
+
var _schema$xml$name2, _schema$xml2;
|
|
49
|
+
|
|
50
|
+
return (_schema$xml$name2 = (_schema$xml2 = schema.xml) === null || _schema$xml2 === void 0 ? void 0 : _schema$xml2.name) !== null && _schema$xml$name2 !== void 0 ? _schema$xml$name2 : schema.type; // return schema.type;
|
|
34
51
|
}
|
|
35
52
|
|
|
36
53
|
return (_schema$title = schema.title) !== null && _schema$title !== void 0 ? _schema$title : schema.type;
|
|
@@ -48,8 +65,6 @@ function getSchemaName(schema, circular) {
|
|
|
48
65
|
|
|
49
66
|
function getQualifierMessage(schema) {
|
|
50
67
|
// TODO:
|
|
51
|
-
// - maxItems
|
|
52
|
-
// - minItems
|
|
53
68
|
// - uniqueItems
|
|
54
69
|
// - maxProperties
|
|
55
70
|
// - minProperties
|
|
@@ -58,24 +73,46 @@ function getQualifierMessage(schema) {
|
|
|
58
73
|
return undefined;
|
|
59
74
|
}
|
|
60
75
|
|
|
61
|
-
if (schema.items) {
|
|
76
|
+
if (schema.items && schema.minItems === undefined && schema.maxItems === undefined) {
|
|
62
77
|
return getQualifierMessage(schema.items);
|
|
63
78
|
}
|
|
64
79
|
|
|
65
80
|
let message = "**Possible values:** ";
|
|
66
81
|
let qualifierGroups = [];
|
|
67
82
|
|
|
83
|
+
if (schema.items && schema.items.enum) {
|
|
84
|
+
if (schema.items.enum) {
|
|
85
|
+
qualifierGroups.push(`[${schema.items.enum.map(e => `\`${e}\``).join(", ")}]`);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
68
89
|
if (schema.minLength || schema.maxLength) {
|
|
69
90
|
let lengthQualifier = "";
|
|
91
|
+
let minLength;
|
|
92
|
+
let maxLength;
|
|
70
93
|
|
|
71
|
-
if (schema.minLength) {
|
|
72
|
-
|
|
94
|
+
if (schema.minLength && schema.minLength > 1) {
|
|
95
|
+
minLength = `\`>= ${schema.minLength} characters\``;
|
|
73
96
|
}
|
|
74
97
|
|
|
75
|
-
|
|
98
|
+
if (schema.minLength && schema.minLength === 1) {
|
|
99
|
+
minLength = `\`non-empty\``;
|
|
100
|
+
}
|
|
76
101
|
|
|
77
102
|
if (schema.maxLength) {
|
|
78
|
-
|
|
103
|
+
maxLength = `\`<= ${schema.maxLength} characters\``;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
if (minLength && !maxLength) {
|
|
107
|
+
lengthQualifier += minLength;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
if (maxLength && !minLength) {
|
|
111
|
+
lengthQualifier += maxLength;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
if (minLength && maxLength) {
|
|
115
|
+
lengthQualifier += `${minLength} and ${maxLength}`;
|
|
79
116
|
}
|
|
80
117
|
|
|
81
118
|
qualifierGroups.push(lengthQualifier);
|
|
@@ -83,23 +120,35 @@ function getQualifierMessage(schema) {
|
|
|
83
120
|
|
|
84
121
|
if (schema.minimum || schema.maximum || typeof schema.exclusiveMinimum === "number" || typeof schema.exclusiveMaximum === "number") {
|
|
85
122
|
let minmaxQualifier = "";
|
|
123
|
+
let minimum;
|
|
124
|
+
let maximum;
|
|
86
125
|
|
|
87
126
|
if (typeof schema.exclusiveMinimum === "number") {
|
|
88
|
-
|
|
127
|
+
minimum = `\`> ${schema.exclusiveMinimum}\``;
|
|
89
128
|
} else if (schema.minimum && !schema.exclusiveMinimum) {
|
|
90
|
-
|
|
129
|
+
minimum = `\`>= ${schema.minimum}\``;
|
|
91
130
|
} else if (schema.minimum && schema.exclusiveMinimum === true) {
|
|
92
|
-
|
|
131
|
+
minimum = `\`> ${schema.minimum}\``;
|
|
93
132
|
}
|
|
94
133
|
|
|
95
|
-
minmaxQualifier += "value";
|
|
96
|
-
|
|
97
134
|
if (typeof schema.exclusiveMaximum === "number") {
|
|
98
|
-
|
|
135
|
+
maximum = `\`< ${schema.exclusiveMaximum}\``;
|
|
99
136
|
} else if (schema.maximum && !schema.exclusiveMaximum) {
|
|
100
|
-
|
|
137
|
+
maximum = `\`<= ${schema.maximum}\``;
|
|
101
138
|
} else if (schema.maximum && schema.exclusiveMaximum === true) {
|
|
102
|
-
|
|
139
|
+
maximum = `\`< ${schema.maximum}\``;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
if (minimum && !maximum) {
|
|
143
|
+
minmaxQualifier += minimum;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
if (maximum && !minimum) {
|
|
147
|
+
minmaxQualifier += maximum;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
if (minimum && maximum) {
|
|
151
|
+
minmaxQualifier += `${minimum} and ${maximum}`;
|
|
103
152
|
}
|
|
104
153
|
|
|
105
154
|
qualifierGroups.push(minmaxQualifier);
|
|
@@ -107,12 +156,28 @@ function getQualifierMessage(schema) {
|
|
|
107
156
|
|
|
108
157
|
if (schema.pattern) {
|
|
109
158
|
qualifierGroups.push(`Value must match regular expression \`${schema.pattern}\``);
|
|
159
|
+
} // Check if discriminator mapping
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
const discriminator = schema;
|
|
163
|
+
|
|
164
|
+
if (discriminator.mapping) {
|
|
165
|
+
const values = Object.keys(discriminator.mapping);
|
|
166
|
+
qualifierGroups.push(`[${values.map(e => `\`${e}\``).join(", ")}]`);
|
|
110
167
|
}
|
|
111
168
|
|
|
112
169
|
if (schema.enum) {
|
|
113
170
|
qualifierGroups.push(`[${schema.enum.map(e => `\`${e}\``).join(", ")}]`);
|
|
114
171
|
}
|
|
115
172
|
|
|
173
|
+
if (schema.minItems) {
|
|
174
|
+
qualifierGroups.push(`\`>= ${schema.minItems}\``);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
if (schema.maxItems) {
|
|
178
|
+
qualifierGroups.push(`\`<= ${schema.maxItems}\``);
|
|
179
|
+
}
|
|
180
|
+
|
|
116
181
|
if (qualifierGroups.length === 0) {
|
|
117
182
|
return undefined;
|
|
118
183
|
}
|
|
@@ -43,7 +43,7 @@ function Server() {
|
|
|
43
43
|
return null;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
if (options.length
|
|
46
|
+
if (options.length < 1 && (value === null || value === void 0 ? void 0 : value.variables) === undefined) {
|
|
47
47
|
return null;
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -76,7 +76,7 @@ function Server() {
|
|
|
76
76
|
<button className={_stylesModule.default.showMoreButton} onClick={() => setIsEditing(false)} tabIndex={0}>
|
|
77
77
|
Hide
|
|
78
78
|
</button>
|
|
79
|
-
<_FormItem.default label="
|
|
79
|
+
<_FormItem.default label="Base URL">
|
|
80
80
|
<_FormSelect.default options={options.map(s => s.url)} onChange={e => dispatch((0, _slice.setServer)(e.target.value))} />
|
|
81
81
|
</_FormItem.default>
|
|
82
82
|
{(value === null || value === void 0 ? void 0 : value.variables) && Object.keys(value.variables).map(key => {
|
|
@@ -126,6 +126,18 @@
|
|
|
126
126
|
border-left: thin solid var(--ifm-color-gray-500) !important;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
+
:global(.discriminatorItem) {
|
|
130
|
+
list-style: none;
|
|
131
|
+
position: relative;
|
|
132
|
+
margin: 0 !important;
|
|
133
|
+
padding: 5px 0 5px 0 !important;
|
|
134
|
+
border-left: thin solid var(--ifm-color-gray-500) !important;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
:global(.discriminatorTabsContainer) {
|
|
138
|
+
padding-left: 0 !important;
|
|
139
|
+
}
|
|
140
|
+
|
|
129
141
|
:global(.schemaItem:hover) {
|
|
130
142
|
background-color: var(--ifm-menu-color-background-active);
|
|
131
143
|
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = ApiLogo;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _themeCommon = require("@docusaurus/theme-common");
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
14
|
+
/* ============================================================================
|
|
15
|
+
* Copyright (c) Palo Alto Networks
|
|
16
|
+
*
|
|
17
|
+
* This source code is licensed under the MIT license found in the
|
|
18
|
+
* LICENSE file in the root directory of this source tree.
|
|
19
|
+
* ========================================================================== */
|
|
20
|
+
function ApiLogo(props) {
|
|
21
|
+
const {
|
|
22
|
+
colorMode
|
|
23
|
+
} = (0, _themeCommon.useColorMode)();
|
|
24
|
+
const {
|
|
25
|
+
logo,
|
|
26
|
+
darkLogo
|
|
27
|
+
} = props;
|
|
28
|
+
return logo ? <img alt={colorMode === "dark" && darkLogo ? darkLogo.altText : logo.altText} src={colorMode === "dark" && darkLogo ? darkLogo.url : logo.url} width="250px" /> : <div />;
|
|
29
|
+
}
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
/* ============================================================================
|
|
2
|
+
* Copyright (c) Palo Alto Networks
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
* ========================================================================== */
|
|
7
|
+
|
|
8
|
+
import React, {
|
|
9
|
+
Children,
|
|
10
|
+
cloneElement,
|
|
11
|
+
isValidElement,
|
|
12
|
+
useEffect,
|
|
13
|
+
useRef,
|
|
14
|
+
useState,
|
|
15
|
+
} from "react";
|
|
16
|
+
|
|
17
|
+
import { duplicates } from "@docusaurus/theme-common";
|
|
18
|
+
import useIsBrowser from "@docusaurus/useIsBrowser";
|
|
19
|
+
import clsx from "clsx";
|
|
20
|
+
|
|
21
|
+
import styles from "./styles.module.css"; // A very rough duck type, but good enough to guard against mistakes while
|
|
22
|
+
|
|
23
|
+
const {
|
|
24
|
+
useScrollPositionBlocker,
|
|
25
|
+
useTabGroupChoice,
|
|
26
|
+
} = require("@docusaurus/theme-common/internal");
|
|
27
|
+
|
|
28
|
+
// allowing customization
|
|
29
|
+
|
|
30
|
+
function isTabItem(comp) {
|
|
31
|
+
return typeof comp.props.value !== "undefined";
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function DiscriminatorTabsComponent(props) {
|
|
35
|
+
const {
|
|
36
|
+
lazy,
|
|
37
|
+
block,
|
|
38
|
+
defaultValue: defaultValueProp,
|
|
39
|
+
values: valuesProp,
|
|
40
|
+
groupId,
|
|
41
|
+
className,
|
|
42
|
+
} = props;
|
|
43
|
+
const children = Children.map(props.children, (child) => {
|
|
44
|
+
if (isValidElement(child) && isTabItem(child)) {
|
|
45
|
+
return child;
|
|
46
|
+
} // child.type.name will give non-sensical values in prod because of
|
|
47
|
+
// minification, but we assume it won't throw in prod.
|
|
48
|
+
|
|
49
|
+
throw new Error(
|
|
50
|
+
`Docusaurus error: Bad <Tabs> child <${
|
|
51
|
+
// @ts-expect-error: guarding against unexpected cases
|
|
52
|
+
typeof child.type === "string" ? child.type : child.type.name
|
|
53
|
+
}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`
|
|
54
|
+
);
|
|
55
|
+
});
|
|
56
|
+
const values =
|
|
57
|
+
valuesProp ?? // We only pick keys that we recognize. MDX would inject some keys by default
|
|
58
|
+
children.map(({ props: { value, label, attributes } }) => ({
|
|
59
|
+
value,
|
|
60
|
+
label,
|
|
61
|
+
attributes,
|
|
62
|
+
}));
|
|
63
|
+
const dup = duplicates(values, (a, b) => a.value === b.value);
|
|
64
|
+
|
|
65
|
+
if (dup.length > 0) {
|
|
66
|
+
throw new Error(
|
|
67
|
+
`Docusaurus error: Duplicate values "${dup
|
|
68
|
+
.map((a) => a.value)
|
|
69
|
+
.join(", ")}" found in <Tabs>. Every value needs to be unique.`
|
|
70
|
+
);
|
|
71
|
+
} // When defaultValueProp is null, don't show a default tab
|
|
72
|
+
|
|
73
|
+
const defaultValue =
|
|
74
|
+
defaultValueProp === null
|
|
75
|
+
? defaultValueProp
|
|
76
|
+
: defaultValueProp ??
|
|
77
|
+
children.find((child) => child.props.default)?.props.value ??
|
|
78
|
+
children[0]?.props.value;
|
|
79
|
+
|
|
80
|
+
if (defaultValue !== null && !values.some((a) => a.value === defaultValue)) {
|
|
81
|
+
throw new Error(
|
|
82
|
+
`Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${values
|
|
83
|
+
.map((a) => a.value)
|
|
84
|
+
.join(
|
|
85
|
+
", "
|
|
86
|
+
)}. If you intend to show no default tab, use defaultValue={null} instead.`
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
const { tabGroupChoices, setTabGroupChoices } = useTabGroupChoice();
|
|
91
|
+
const [selectedValue, setSelectedValue] = useState(defaultValue);
|
|
92
|
+
const tabRefs = [];
|
|
93
|
+
const { blockElementScrollPositionUntilNextRender } =
|
|
94
|
+
useScrollPositionBlocker();
|
|
95
|
+
|
|
96
|
+
if (groupId != null) {
|
|
97
|
+
const relevantTabGroupChoice = tabGroupChoices[groupId];
|
|
98
|
+
|
|
99
|
+
if (
|
|
100
|
+
relevantTabGroupChoice != null &&
|
|
101
|
+
relevantTabGroupChoice !== selectedValue &&
|
|
102
|
+
values.some((value) => value.value === relevantTabGroupChoice)
|
|
103
|
+
) {
|
|
104
|
+
setSelectedValue(relevantTabGroupChoice);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
const handleTabChange = (event) => {
|
|
109
|
+
const newTab = event.currentTarget;
|
|
110
|
+
const newTabIndex = tabRefs.indexOf(newTab);
|
|
111
|
+
const newTabValue = values[newTabIndex].value;
|
|
112
|
+
|
|
113
|
+
if (newTabValue !== selectedValue) {
|
|
114
|
+
blockElementScrollPositionUntilNextRender(newTab);
|
|
115
|
+
setSelectedValue(newTabValue);
|
|
116
|
+
|
|
117
|
+
if (groupId != null) {
|
|
118
|
+
setTabGroupChoices(groupId, newTabValue);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
const handleKeydown = (event) => {
|
|
124
|
+
let focusElement = null;
|
|
125
|
+
|
|
126
|
+
switch (event.key) {
|
|
127
|
+
case "ArrowRight": {
|
|
128
|
+
const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
|
|
129
|
+
focusElement = tabRefs[nextTab] || tabRefs[0];
|
|
130
|
+
break;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
case "ArrowLeft": {
|
|
134
|
+
const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
|
|
135
|
+
focusElement = tabRefs[prevTab] || tabRefs[tabRefs.length - 1];
|
|
136
|
+
break;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
default:
|
|
140
|
+
break;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
focusElement?.focus();
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
const tabItemListContainerRef = useRef(null);
|
|
147
|
+
const [showTabArrows, setShowTabArrows] = useState(false);
|
|
148
|
+
|
|
149
|
+
useEffect(() => {
|
|
150
|
+
const tabOffsetWidth = tabItemListContainerRef.current.offsetWidth;
|
|
151
|
+
const tabScrollWidth = tabItemListContainerRef.current.scrollWidth;
|
|
152
|
+
|
|
153
|
+
if (tabOffsetWidth < tabScrollWidth) {
|
|
154
|
+
setShowTabArrows(true);
|
|
155
|
+
}
|
|
156
|
+
}, []);
|
|
157
|
+
|
|
158
|
+
const handleRightClick = () => {
|
|
159
|
+
tabItemListContainerRef.current.scrollLeft += 90;
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
const handleLeftClick = () => {
|
|
163
|
+
tabItemListContainerRef.current.scrollLeft -= 90;
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
return (
|
|
167
|
+
<div className="tabs__container">
|
|
168
|
+
<div className={styles.discriminatorTabsTopSection}>
|
|
169
|
+
<div className={clsx(styles.discriminatorTabsContainer)}>
|
|
170
|
+
{showTabArrows && (
|
|
171
|
+
<button
|
|
172
|
+
className={clsx(styles.tabArrow, styles.tabArrowLeft)}
|
|
173
|
+
onClick={handleLeftClick}
|
|
174
|
+
/>
|
|
175
|
+
)}
|
|
176
|
+
<ul
|
|
177
|
+
ref={tabItemListContainerRef}
|
|
178
|
+
role="tablist"
|
|
179
|
+
aria-orientation="horizontal"
|
|
180
|
+
className={clsx(
|
|
181
|
+
styles.discriminatorTabsListContainer,
|
|
182
|
+
"tabs",
|
|
183
|
+
{
|
|
184
|
+
"tabs--block": block,
|
|
185
|
+
},
|
|
186
|
+
className
|
|
187
|
+
)}
|
|
188
|
+
>
|
|
189
|
+
{values.map(({ value, label, attributes }) => {
|
|
190
|
+
return (
|
|
191
|
+
<li
|
|
192
|
+
role="tab"
|
|
193
|
+
tabIndex={selectedValue === value ? 0 : -1}
|
|
194
|
+
aria-selected={selectedValue === value}
|
|
195
|
+
key={value}
|
|
196
|
+
ref={(tabControl) => tabRefs.push(tabControl)}
|
|
197
|
+
onKeyDown={handleKeydown}
|
|
198
|
+
onFocus={handleTabChange}
|
|
199
|
+
onClick={handleTabChange}
|
|
200
|
+
{...attributes}
|
|
201
|
+
className={clsx(
|
|
202
|
+
"tabs__item",
|
|
203
|
+
styles.tabItem,
|
|
204
|
+
attributes?.className,
|
|
205
|
+
{
|
|
206
|
+
[styles.discriminatorTabActive]: selectedValue === value,
|
|
207
|
+
}
|
|
208
|
+
)}
|
|
209
|
+
>
|
|
210
|
+
<span className={styles.discriminatorTabLabel}>
|
|
211
|
+
{label ?? value}
|
|
212
|
+
</span>
|
|
213
|
+
</li>
|
|
214
|
+
);
|
|
215
|
+
})}
|
|
216
|
+
</ul>
|
|
217
|
+
{showTabArrows && (
|
|
218
|
+
<button
|
|
219
|
+
className={clsx(styles.tabArrow, styles.tabArrowRight)}
|
|
220
|
+
onClick={handleRightClick}
|
|
221
|
+
/>
|
|
222
|
+
)}
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
<hr />
|
|
226
|
+
{lazy ? (
|
|
227
|
+
cloneElement(
|
|
228
|
+
children.filter(
|
|
229
|
+
(tabItem) => tabItem.props.value === selectedValue
|
|
230
|
+
)[0],
|
|
231
|
+
{
|
|
232
|
+
className: clsx(
|
|
233
|
+
"margin-vert--md",
|
|
234
|
+
styles.discriminatorTabsContainer
|
|
235
|
+
),
|
|
236
|
+
}
|
|
237
|
+
)
|
|
238
|
+
) : (
|
|
239
|
+
<div
|
|
240
|
+
className={clsx("margin-vert--md", styles.discriminatorTabsContainer)}
|
|
241
|
+
>
|
|
242
|
+
{children.map((tabItem, i) =>
|
|
243
|
+
cloneElement(tabItem, {
|
|
244
|
+
key: i,
|
|
245
|
+
hidden: tabItem.props.value !== selectedValue,
|
|
246
|
+
})
|
|
247
|
+
)}
|
|
248
|
+
</div>
|
|
249
|
+
)}
|
|
250
|
+
</div>
|
|
251
|
+
);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
export default function DiscriminatorTabs(props) {
|
|
255
|
+
const isBrowser = useIsBrowser();
|
|
256
|
+
return (
|
|
257
|
+
<DiscriminatorTabsComponent // Remount tabs after hydration
|
|
258
|
+
// Temporary fix for https://github.com/facebook/docusaurus/issues/5653
|
|
259
|
+
key={String(isBrowser)}
|
|
260
|
+
{...props}
|
|
261
|
+
/>
|
|
262
|
+
);
|
|
263
|
+
}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
.tabItem {
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
height: 1.8rem;
|
|
13
|
+
margin-top: 0 !important;
|
|
14
|
+
margin-right: 0.5rem;
|
|
15
|
+
border: 1px solid var(--openapi-code-dim-dark);
|
|
16
|
+
border-radius: var(--ifm-global-radius);
|
|
17
|
+
color: var(--openapi-code-dim-dark);
|
|
18
|
+
font-size: 12px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.tabItem:hover {
|
|
22
|
+
color: var(--ifm-color-emphasis-500) !important;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.tabItem:last-child {
|
|
26
|
+
margin-right: 0 !important;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Open API Schema Tabs */
|
|
30
|
+
.discriminatorTabsTopSection {
|
|
31
|
+
margin-top: 1rem;
|
|
32
|
+
margin-left: 0.9rem;
|
|
33
|
+
display: flex;
|
|
34
|
+
justify-content: space-between;
|
|
35
|
+
align-items: center;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.discriminatorTabsTopSection + hr {
|
|
39
|
+
display: none;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.discriminatorTabsContainer {
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
max-width: 390px;
|
|
46
|
+
padding-left: 3px;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.discriminatorTabsListContainer {
|
|
51
|
+
padding: 0 0.25rem;
|
|
52
|
+
overflow-y: hidden;
|
|
53
|
+
overflow-x: scroll;
|
|
54
|
+
scroll-behavior: smooth;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.discriminatorTabsListContainer::-webkit-scrollbar {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.tabItem.discriminatorTabActive {
|
|
62
|
+
border: 1px solid var(--ifm-color-primary);
|
|
63
|
+
color: var(--ifm-color-primary);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.discriminatorTabLabel {
|
|
67
|
+
white-space: nowrap;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.discriminatorTabsContainer {
|
|
71
|
+
max-width: 600px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Tab Arrows */
|
|
75
|
+
.tabArrow {
|
|
76
|
+
content: "";
|
|
77
|
+
height: 1.25rem;
|
|
78
|
+
width: 1.25rem;
|
|
79
|
+
padding: 0 0.75rem;
|
|
80
|
+
border: none;
|
|
81
|
+
min-width: 1.25rem;
|
|
82
|
+
background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
|
|
83
|
+
filter: var(--ifm-menu-link-sublist-icon-filter);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.tabArrow:hover {
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.tabArrowLeft {
|
|
91
|
+
transform: rotate(270deg);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.tabArrowRight {
|
|
95
|
+
transform: rotate(90deg);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@media screen and (max-width: 500px) {
|
|
99
|
+
.discriminatorTabsTopSection {
|
|
100
|
+
flex-direction: column;
|
|
101
|
+
align-items: flex-start;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.discriminatorTabsContainer {
|
|
105
|
+
width: 100%;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.tabItem {
|
|
109
|
+
height: 100%;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/* ============================================================================
|
|
2
|
+
* Copyright (c) Palo Alto Networks
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
* ========================================================================== */
|
|
7
|
+
|
|
8
|
+
import React from "react";
|
|
9
|
+
|
|
10
|
+
import CodeBlock from "@theme/CodeBlock";
|
|
11
|
+
|
|
12
|
+
import styles from "./styles.module.css";
|
|
13
|
+
|
|
14
|
+
function ResponseSamples({ responseExample }) {
|
|
15
|
+
return (
|
|
16
|
+
<div className={styles.responseSamplesContainer}>
|
|
17
|
+
<CodeBlock
|
|
18
|
+
language="javascript"
|
|
19
|
+
className={styles.responseSamplesCodeBlock}
|
|
20
|
+
>
|
|
21
|
+
{responseExample}
|
|
22
|
+
</CodeBlock>
|
|
23
|
+
</div>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export default ResponseSamples;
|