mirror of
https://github.com/Redocly/redoc.git
synced 2025-08-06 13:20:19 +03:00
feat: add try-live poc
This commit is contained in:
cge
parent
6c41e95aa0
commit
1a9d7bea4d
|
|
@ -45,6 +45,8 @@ module.exports = {
|
||||||
'unfetch/**',
|
'unfetch/**',
|
||||||
'raf/polyfill',
|
'raf/polyfill',
|
||||||
'**/fixtures/**', // for tests
|
'**/fixtures/**', // for tests
|
||||||
|
'ace-builds/**',
|
||||||
|
'jsoneditor/**',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
||||||
14
demo/css/img/description.txt
Normal file
14
demo/css/img/description.txt
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
JSON Editor Icons
|
||||||
|
|
||||||
|
size: outer: 24x24 px
|
||||||
|
inner: 16x16 px
|
||||||
|
|
||||||
|
blue background: RGBA 97b0f8ff
|
||||||
|
gray background: RGBA 4d4d4dff
|
||||||
|
grey background: RGBA d3d3d3ff
|
||||||
|
|
||||||
|
red foreground: RGBA ff3300ff
|
||||||
|
green foreground: RGBA 13ae00ff
|
||||||
|
|
||||||
|
characters are based on the Arial font
|
||||||
|
|
||||||
749
demo/css/img/jsoneditor-icons.svg
Normal file
749
demo/css/img/jsoneditor-icons.svg
Normal file
|
|
@ -0,0 +1,749 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="240"
|
||||||
|
height="144"
|
||||||
|
id="svg4136"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.91 r13725"
|
||||||
|
sodipodi:docname="jsoneditor-icons.svg">
|
||||||
|
<title
|
||||||
|
id="title6512">JSON Editor Icons</title>
|
||||||
|
<metadata
|
||||||
|
id="metadata4148">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title>JSON Editor Icons</dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs4146" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ff63ff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1026"
|
||||||
|
id="namedview4144"
|
||||||
|
showgrid="true"
|
||||||
|
inkscape:zoom="4"
|
||||||
|
inkscape:cx="13.229181"
|
||||||
|
inkscape:cy="119.82429"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4136"
|
||||||
|
showguides="false"
|
||||||
|
borderlayer="false"
|
||||||
|
inkscape:showpageshadow="true"
|
||||||
|
showborder="true">
|
||||||
|
<inkscape:grid
|
||||||
|
type="xygrid"
|
||||||
|
id="grid4640"
|
||||||
|
empspacing="24" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
|
||||||
|
id="svg_1"
|
||||||
|
height="16"
|
||||||
|
width="16"
|
||||||
|
y="4"
|
||||||
|
x="4" />
|
||||||
|
<rect
|
||||||
|
id="svg_1-7"
|
||||||
|
height="16"
|
||||||
|
width="16"
|
||||||
|
y="3.999995"
|
||||||
|
x="28.000006"
|
||||||
|
style="fill:#ec3f29;fill-opacity:0.94117647;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
|
||||||
|
x="52.000004"
|
||||||
|
y="3.999995"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
id="rect4165" />
|
||||||
|
<rect
|
||||||
|
id="rect4175"
|
||||||
|
height="16"
|
||||||
|
width="16"
|
||||||
|
y="3.9999852"
|
||||||
|
x="172.00002"
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
id="rect4175-3"
|
||||||
|
height="16"
|
||||||
|
width="16"
|
||||||
|
y="3.999995"
|
||||||
|
x="196"
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
|
||||||
|
<g
|
||||||
|
id="g4299"
|
||||||
|
style="stroke:none">
|
||||||
|
<rect
|
||||||
|
x="7.0000048"
|
||||||
|
y="10.999998"
|
||||||
|
width="9.9999924"
|
||||||
|
height="1.9999986"
|
||||||
|
id="svg_1-1"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
x="11.000005"
|
||||||
|
y="7.0000114"
|
||||||
|
width="1.9999955"
|
||||||
|
height="9.9999838"
|
||||||
|
id="svg_1-1-1"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="g4299-3"
|
||||||
|
transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,19.029435,12.000001)"
|
||||||
|
style="stroke:none">
|
||||||
|
<rect
|
||||||
|
x="7.0000048"
|
||||||
|
y="10.999998"
|
||||||
|
width="9.9999924"
|
||||||
|
height="1.9999986"
|
||||||
|
id="svg_1-1-0"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
x="11.000005"
|
||||||
|
y="7.0000114"
|
||||||
|
width="1.9999955"
|
||||||
|
height="9.9999838"
|
||||||
|
id="svg_1-1-1-9"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
|
||||||
|
</g>
|
||||||
|
<rect
|
||||||
|
id="svg_1-7-5"
|
||||||
|
height="6.9999905"
|
||||||
|
width="6.9999909"
|
||||||
|
y="7.0000048"
|
||||||
|
x="55.000004"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
x="58"
|
||||||
|
y="10.00001"
|
||||||
|
width="6.9999909"
|
||||||
|
height="6.9999905"
|
||||||
|
id="rect4354" />
|
||||||
|
<rect
|
||||||
|
id="svg_1-7-5-7"
|
||||||
|
height="6.9999905"
|
||||||
|
width="6.9999909"
|
||||||
|
y="10.000005"
|
||||||
|
x="58.000004"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#3c80df;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
|
||||||
|
<g
|
||||||
|
id="g4378">
|
||||||
|
<rect
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
|
||||||
|
x="198"
|
||||||
|
y="10.999999"
|
||||||
|
width="7.9999909"
|
||||||
|
height="1.9999965"
|
||||||
|
id="svg_1-7-5-3" />
|
||||||
|
<rect
|
||||||
|
id="rect4374"
|
||||||
|
height="1.9999946"
|
||||||
|
width="11.999995"
|
||||||
|
y="7.0000005"
|
||||||
|
x="198"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
id="rect4376"
|
||||||
|
height="1.9999995"
|
||||||
|
width="3.9999928"
|
||||||
|
y="14.999996"
|
||||||
|
x="198"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="matrix(1,0,0,-1,-23.999995,23.999995)"
|
||||||
|
id="g4383">
|
||||||
|
<rect
|
||||||
|
id="rect4385"
|
||||||
|
height="1.9999965"
|
||||||
|
width="7.9999909"
|
||||||
|
y="10.999999"
|
||||||
|
x="198"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
|
||||||
|
x="198"
|
||||||
|
y="7.0000005"
|
||||||
|
width="11.999995"
|
||||||
|
height="1.9999946"
|
||||||
|
id="rect4387" />
|
||||||
|
<rect
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
|
||||||
|
x="198"
|
||||||
|
y="14.999996"
|
||||||
|
width="3.9999928"
|
||||||
|
height="1.9999995"
|
||||||
|
id="rect4389" />
|
||||||
|
</g>
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none"
|
||||||
|
id="rect3754-4"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
x="76"
|
||||||
|
y="3.9999199" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 85.10447,6.0157384 -0.0156,1.4063 c 3.02669,-0.2402 0.33008,3.6507996 2.48438,4.5780996 -2.18694,1.0938 0.49191,4.9069 -2.45313,4.5781 l -0.0156,1.4219 c 5.70828,0.559 1.03264,-5.1005 4.70313,-5.2656 l 0,-1.4063 c -3.61303,-0.027 1.11893,-5.7069996 -4.70313,-5.3124996 z"
|
||||||
|
id="path4351"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccccccc" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 82.78125,5.9984384 0.0156,1.4063 c -3.02668,-0.2402 -0.33007,3.6506996 -2.48437,4.5780996 2.18694,1.0938 -0.49192,4.9069 2.45312,4.5781 l 0.0156,1.4219 c -5.70827,0.559 -1.03263,-5.1004 -4.70312,-5.2656 l 0,-1.4063 c 3.61303,-0.027 -1.11894,-5.7070996 4.70312,-5.3124996 z"
|
||||||
|
id="path4351-9"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccccccc" />
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none"
|
||||||
|
id="rect3754-25"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
x="100"
|
||||||
|
y="3.9999199" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:none"
|
||||||
|
d="m 103.719,5.6719384 0,12.7187996 3.03125,0 0,-1.5313 -1.34375,0 0,-9.6249996 1.375,0 0,-1.5625 z"
|
||||||
|
id="path2987"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:none"
|
||||||
|
d="m 112.2185,5.6721984 0,12.7187996 -3.03125,0 0,-1.5313 1.34375,0 0,-9.6249996 -1.375,0 0,-1.5625 z"
|
||||||
|
id="path2987-1"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none"
|
||||||
|
id="rect3754-73"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
x="124"
|
||||||
|
y="3.9999199" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:none"
|
||||||
|
d="m 126.2824,17.602938 1.78957,0 1.14143,-2.8641 5.65364,0 1.14856,2.8641 1.76565,0 -4.78687,-11.1610996 -1.91903,0 z"
|
||||||
|
id="path3780"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="ccccccccc" />
|
||||||
|
<path
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none"
|
||||||
|
d="m 129.72704,13.478838 4.60852,0.01 -2.30426,-5.5497996 z"
|
||||||
|
id="path3782"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none"
|
||||||
|
id="rect3754-35"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
x="148"
|
||||||
|
y="3.9999199" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:none"
|
||||||
|
d="m 156.47655,5.8917384 0,2.1797 0.46093,2.3983996 1.82813,0 0.39844,-2.3983996 0,-2.1797 z"
|
||||||
|
id="path5008-2"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="ccccccc" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:none"
|
||||||
|
d="m 152.51561,5.8906384 0,2.1797 0.46094,2.3983996 1.82812,0 0.39844,-2.3983996 0,-2.1797 z"
|
||||||
|
id="path5008-2-8"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="ccccccc" />
|
||||||
|
<rect
|
||||||
|
id="svg_1-7-2"
|
||||||
|
height="1.9999961"
|
||||||
|
width="11.999996"
|
||||||
|
y="64"
|
||||||
|
x="54"
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
id="svg_1-7-2-2"
|
||||||
|
height="2.9999905"
|
||||||
|
width="2.9999907"
|
||||||
|
y="52"
|
||||||
|
x="80.000008"
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
|
||||||
|
x="85.000008"
|
||||||
|
y="52"
|
||||||
|
width="2.9999907"
|
||||||
|
height="2.9999905"
|
||||||
|
id="rect4561" />
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
|
||||||
|
x="80.000008"
|
||||||
|
y="58"
|
||||||
|
width="2.9999907"
|
||||||
|
height="2.9999905"
|
||||||
|
id="rect4563" />
|
||||||
|
<rect
|
||||||
|
id="rect4565"
|
||||||
|
height="2.9999905"
|
||||||
|
width="2.9999907"
|
||||||
|
y="58"
|
||||||
|
x="85.000008"
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
id="rect4567"
|
||||||
|
height="2.9999905"
|
||||||
|
width="2.9999907"
|
||||||
|
y="64"
|
||||||
|
x="80.000008"
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
|
||||||
|
x="85.000008"
|
||||||
|
y="64"
|
||||||
|
width="2.9999907"
|
||||||
|
height="2.9999905"
|
||||||
|
id="rect4569" />
|
||||||
|
<circle
|
||||||
|
style="opacity:1;fill:none;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
id="path4571"
|
||||||
|
cx="110.06081"
|
||||||
|
cy="57.939209"
|
||||||
|
r="4.7438836" />
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
|
||||||
|
x="116.64566"
|
||||||
|
y="-31.79752"
|
||||||
|
width="4.229713"
|
||||||
|
height="6.4053884"
|
||||||
|
id="rect4563-2"
|
||||||
|
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
|
||||||
|
<path
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 125,56 138.77027,56.095 132,64 Z"
|
||||||
|
id="path4613"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccc" />
|
||||||
|
<path
|
||||||
|
sodipodi:nodetypes="cccc"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
id="path4615"
|
||||||
|
d="M 149,64 162.77027,63.905 156,56 Z"
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
|
||||||
|
x="54"
|
||||||
|
y="53"
|
||||||
|
width="11.999996"
|
||||||
|
height="1.9999961"
|
||||||
|
id="rect4638" />
|
||||||
|
<rect
|
||||||
|
id="svg_1-7-2-24"
|
||||||
|
height="1.9999957"
|
||||||
|
width="12.99999"
|
||||||
|
y="-56"
|
||||||
|
x="53"
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
|
||||||
|
transform="matrix(0,1,-1,0,0,0)" />
|
||||||
|
<rect
|
||||||
|
transform="matrix(0,1,-1,0,0,0)"
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
|
||||||
|
x="53"
|
||||||
|
y="-66"
|
||||||
|
width="12.99999"
|
||||||
|
height="1.9999957"
|
||||||
|
id="rect4657" />
|
||||||
|
<rect
|
||||||
|
id="rect4659"
|
||||||
|
height="0.99999291"
|
||||||
|
width="11.999999"
|
||||||
|
y="57"
|
||||||
|
x="54"
|
||||||
|
style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
|
||||||
|
x="54"
|
||||||
|
y="88.000122"
|
||||||
|
width="11.999996"
|
||||||
|
height="1.9999961"
|
||||||
|
id="rect4661" />
|
||||||
|
<rect
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
|
||||||
|
x="80.000008"
|
||||||
|
y="76.000122"
|
||||||
|
width="2.9999907"
|
||||||
|
height="2.9999905"
|
||||||
|
id="rect4663" />
|
||||||
|
<rect
|
||||||
|
id="rect4665"
|
||||||
|
height="2.9999905"
|
||||||
|
width="2.9999907"
|
||||||
|
y="76.000122"
|
||||||
|
x="85.000008"
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
|
||||||
|
<rect
|
||||||
|
id="rect4667"
|
||||||
|
height="2.9999905"
|
||||||
|
width="2.9999907"
|
||||||
|
y="82.000122"
|
||||||
|
x="80.000008"
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
|
||||||
|
<rect
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
|
||||||
|
x="85.000008"
|
||||||
|
y="82.000122"
|
||||||
|
width="2.9999907"
|
||||||
|
height="2.9999905"
|
||||||
|
id="rect4669" />
|
||||||
|
<rect
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
|
||||||
|
x="80.000008"
|
||||||
|
y="88.000122"
|
||||||
|
width="2.9999907"
|
||||||
|
height="2.9999905"
|
||||||
|
id="rect4671" />
|
||||||
|
<rect
|
||||||
|
id="rect4673"
|
||||||
|
height="2.9999905"
|
||||||
|
width="2.9999907"
|
||||||
|
y="88.000122"
|
||||||
|
x="85.000008"
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
|
||||||
|
<circle
|
||||||
|
r="4.7438836"
|
||||||
|
cy="81.939331"
|
||||||
|
cx="110.06081"
|
||||||
|
id="circle4675"
|
||||||
|
style="opacity:1;fill:none;fill-opacity:1;stroke:#d3d3d3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
|
<rect
|
||||||
|
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
|
||||||
|
id="rect4677"
|
||||||
|
height="6.4053884"
|
||||||
|
width="4.229713"
|
||||||
|
y="-14.826816"
|
||||||
|
x="133.6163"
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:#d3d3d3;stroke-width:0;stroke-opacity:1" />
|
||||||
|
<path
|
||||||
|
sodipodi:nodetypes="cccc"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
id="path4679"
|
||||||
|
d="m 125,80.000005 13.77027,0.09499 L 132,87.999992 Z"
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
|
<path
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 149,88.0002 162.77027,87.9052 156,80.0002 Z"
|
||||||
|
id="path4681"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccc" />
|
||||||
|
<rect
|
||||||
|
id="rect4683"
|
||||||
|
height="1.9999961"
|
||||||
|
width="11.999996"
|
||||||
|
y="77.000122"
|
||||||
|
x="54"
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
|
||||||
|
<rect
|
||||||
|
transform="matrix(0,1,-1,0,0,0)"
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
|
||||||
|
x="77.000122"
|
||||||
|
y="-56"
|
||||||
|
width="12.99999"
|
||||||
|
height="1.9999957"
|
||||||
|
id="rect4685" />
|
||||||
|
<rect
|
||||||
|
id="rect4687"
|
||||||
|
height="1.9999957"
|
||||||
|
width="12.99999"
|
||||||
|
y="-66"
|
||||||
|
x="77.000122"
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
|
||||||
|
transform="matrix(0,1,-1,0,0,0)" />
|
||||||
|
<rect
|
||||||
|
style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
|
||||||
|
x="54"
|
||||||
|
y="81.000122"
|
||||||
|
width="11.999999"
|
||||||
|
height="0.99999291"
|
||||||
|
id="rect4689" />
|
||||||
|
<rect
|
||||||
|
id="rect4761-1"
|
||||||
|
height="1.9999945"
|
||||||
|
width="15.99999"
|
||||||
|
y="101"
|
||||||
|
x="76.000008"
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
id="rect4761-0"
|
||||||
|
height="1.9999945"
|
||||||
|
width="15.99999"
|
||||||
|
y="105"
|
||||||
|
x="76.000008"
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
id="rect4761-7"
|
||||||
|
height="1.9999945"
|
||||||
|
width="9"
|
||||||
|
y="109"
|
||||||
|
x="76.000008"
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
id="rect4761-1-1"
|
||||||
|
height="1.9999945"
|
||||||
|
width="12"
|
||||||
|
y="125"
|
||||||
|
x="76.000008"
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
id="rect4761-1-1-4"
|
||||||
|
height="1.9999945"
|
||||||
|
width="10"
|
||||||
|
y="137"
|
||||||
|
x="76.000008"
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
id="rect4761-1-1-4-4"
|
||||||
|
height="1.9999945"
|
||||||
|
width="10"
|
||||||
|
y="129"
|
||||||
|
x="82"
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
id="rect4761-1-1-4-4-3"
|
||||||
|
height="1.9999945"
|
||||||
|
width="9"
|
||||||
|
y="133"
|
||||||
|
x="82"
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
|
||||||
|
<path
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||||
|
d="m 36.398438,100.0254 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,100.5991 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1452 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533865,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550756,0 6.710442,-2.4113 7.650391,-5.9414 0.939949,-3.5301 -0.618463,-7.2736 -3.710938,-9.0703 -1.159678,-0.6738 -2.431087,-1.0231 -3.701171,-1.0625 z"
|
||||||
|
id="path4138" />
|
||||||
|
<path
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||||
|
d="m 59.722656,99.9629 c -1.270084,0.039 -2.541493,0.3887 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5402 -3.710937,9.0703 0.939949,3.5301 4.09768,5.9414 7.648437,5.9414 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4056 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
|
||||||
|
id="path4138-1" />
|
||||||
|
<path
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
d="m 10.5,100 0,2 -2.4999996,0 L 12,107 l 4,-5 -2.5,0 0,-2 -3,0 z"
|
||||||
|
id="path3055-0-77" />
|
||||||
|
<path
|
||||||
|
style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.96599996;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 4.9850574,108.015 14.0298856,-0.03"
|
||||||
|
id="path5244-5-0-5"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<path
|
||||||
|
style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.96599996;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 4.9849874,132.015 14.0298866,-0.03"
|
||||||
|
id="path5244-5-0-5-8"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<path
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||||
|
d="m 36.398438,123.9629 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,124.5366 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1453 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533864,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550757,0 6.710442,-2.4093 7.650391,-5.9394 0.939949,-3.5301 -0.618463,-7.2756 -3.710938,-9.0723 -1.159678,-0.6737 -2.431087,-1.0231 -3.701171,-1.0625 z"
|
||||||
|
id="path4138-12" />
|
||||||
|
<path
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||||
|
d="m 59.722656,123.9629 c -1.270084,0.039 -2.541493,0.3888 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5422 -3.710937,9.0723 0.939949,3.5301 4.09768,5.9394 7.648437,5.9394 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4055 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
|
||||||
|
id="path4138-1-3" />
|
||||||
|
<path
|
||||||
|
id="path6191"
|
||||||
|
d="m 10.5,116 0,-2 -2.4999996,0 L 12,109 l 4,5 -2.5,0 0,2 -3,0 z"
|
||||||
|
style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<path
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
d="m 10.5,129 0,-2 -2.4999996,0 L 12,122 l 4,5 -2.5,0 0,2 -3,0 z"
|
||||||
|
id="path6193" />
|
||||||
|
<path
|
||||||
|
id="path6195"
|
||||||
|
d="m 10.5,135 0,2 -2.4999996,0 L 12,142 l 4,-5 -2.5,0 0,-2 -3,0 z"
|
||||||
|
style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<path
|
||||||
|
sodipodi:type="star"
|
||||||
|
style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
id="path4500"
|
||||||
|
sodipodi:sides="3"
|
||||||
|
sodipodi:cx="11.55581"
|
||||||
|
sodipodi:cy="60.073242"
|
||||||
|
sodipodi:r1="5.1116104"
|
||||||
|
sodipodi:r2="2.5558052"
|
||||||
|
sodipodi:arg1="0"
|
||||||
|
sodipodi:arg2="1.0471976"
|
||||||
|
inkscape:flatsided="false"
|
||||||
|
inkscape:rounded="0"
|
||||||
|
inkscape:randomized="0"
|
||||||
|
d="m 16.66742,60.073242 -3.833708,2.213392 -3.8337072,2.213393 0,-4.426785 0,-4.426784 3.8337082,2.213392 z"
|
||||||
|
inkscape:transform-center-x="-1.2779026" />
|
||||||
|
<path
|
||||||
|
inkscape:transform-center-x="1.277902"
|
||||||
|
d="m -31.500004,60.073242 -3.833708,2.213392 -3.833707,2.213393 0,-4.426785 0,-4.426784 3.833707,2.213392 z"
|
||||||
|
inkscape:randomized="0"
|
||||||
|
inkscape:rounded="0"
|
||||||
|
inkscape:flatsided="false"
|
||||||
|
sodipodi:arg2="1.0471976"
|
||||||
|
sodipodi:arg1="0"
|
||||||
|
sodipodi:r2="2.5558052"
|
||||||
|
sodipodi:r1="5.1116104"
|
||||||
|
sodipodi:cy="60.073242"
|
||||||
|
sodipodi:cx="-36.611614"
|
||||||
|
sodipodi:sides="3"
|
||||||
|
id="path4502"
|
||||||
|
style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
sodipodi:type="star"
|
||||||
|
transform="scale(-1,1)" />
|
||||||
|
<path
|
||||||
|
d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z"
|
||||||
|
inkscape:randomized="0"
|
||||||
|
inkscape:rounded="0"
|
||||||
|
inkscape:flatsided="false"
|
||||||
|
sodipodi:arg2="1.0471976"
|
||||||
|
sodipodi:arg1="0"
|
||||||
|
sodipodi:r2="2.5558052"
|
||||||
|
sodipodi:r1="5.1116104"
|
||||||
|
sodipodi:cy="60.073212"
|
||||||
|
sodipodi:cx="11.55581"
|
||||||
|
sodipodi:sides="3"
|
||||||
|
id="path4504"
|
||||||
|
style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
sodipodi:type="star"
|
||||||
|
transform="matrix(0,1,-1,0,72.0074,71.7877)"
|
||||||
|
inkscape:transform-center-y="1.2779029" />
|
||||||
|
<path
|
||||||
|
inkscape:transform-center-y="-1.2779026"
|
||||||
|
transform="matrix(0,-1,-1,0,96,96)"
|
||||||
|
sodipodi:type="star"
|
||||||
|
style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
id="path4506"
|
||||||
|
sodipodi:sides="3"
|
||||||
|
sodipodi:cx="11.55581"
|
||||||
|
sodipodi:cy="60.073212"
|
||||||
|
sodipodi:r1="5.1116104"
|
||||||
|
sodipodi:r2="2.5558052"
|
||||||
|
sodipodi:arg1="0"
|
||||||
|
sodipodi:arg2="1.0471976"
|
||||||
|
inkscape:flatsided="false"
|
||||||
|
inkscape:rounded="0"
|
||||||
|
inkscape:randomized="0"
|
||||||
|
d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z" />
|
||||||
|
<path
|
||||||
|
sodipodi:nodetypes="cccc"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
id="path4615-5"
|
||||||
|
d="m 171.82574,65.174193 16.34854,0 -8.17427,-13.348454 z"
|
||||||
|
style="fill:#fbb917;fill-opacity:1;fill-rule:evenodd;stroke:#fbb917;stroke-width:1.65161395;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
|
<path
|
||||||
|
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="m 179,55 0,6 2,0 0,-6"
|
||||||
|
id="path4300"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccc" />
|
||||||
|
<path
|
||||||
|
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="m 179,62 0,2 2,0 0,-2"
|
||||||
|
id="path4300-6"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccc" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:0.8"
|
||||||
|
d="M 99.994369,113.0221 102,114.98353 l 7,-6.9558 3,0.97227 2,-1 1,-2 0,-3 -3,3 -3,-3 3,-3 -3,0 -2,1 -1,2 0.99437,3.0221 z"
|
||||||
|
id="path4268"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="ccccccccccccccc" />
|
||||||
|
<rect
|
||||||
|
id="rect4175-3-5"
|
||||||
|
height="16"
|
||||||
|
width="16"
|
||||||
|
y="4"
|
||||||
|
x="220"
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="m 234,6 0,2 -5,5 0,5 -2,0 0,-5 -5,-5 0,-2"
|
||||||
|
id="path3546"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccccccc" />
|
||||||
|
<g
|
||||||
|
transform="matrix(1.3333328,0,0,-1.5999992,-139.9999,127.19999)"
|
||||||
|
id="g4383-6">
|
||||||
|
<rect
|
||||||
|
id="rect4385-2"
|
||||||
|
height="1.2499905"
|
||||||
|
width="5.9999924"
|
||||||
|
y="12.625005"
|
||||||
|
x="198.00002"
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0" />
|
||||||
|
<rect
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
|
||||||
|
x="198.00002"
|
||||||
|
y="15.125007"
|
||||||
|
width="7.4999928"
|
||||||
|
height="1.2499949"
|
||||||
|
id="rect4387-9" />
|
||||||
|
<rect
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
|
||||||
|
x="198.00002"
|
||||||
|
y="7.6250024"
|
||||||
|
width="2.9999909"
|
||||||
|
height="1.2499905"
|
||||||
|
id="rect4389-1-0" />
|
||||||
|
<rect
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
|
||||||
|
x="198.00002"
|
||||||
|
y="10.125004"
|
||||||
|
width="4.4999919"
|
||||||
|
height="1.2499905"
|
||||||
|
id="rect4389-1-9" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="m 207.00001,16.375004 0,-5.625005 -2.25,0 3,-3.1250014 3,3.1250014 -2.25,0 0,5.625005 -1.5,0"
|
||||||
|
id="path4402"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccccccc" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="m 164,100 0,3 -6,6 0,7 -4,0 0,-7 -6,-6 0,-3"
|
||||||
|
id="path3546-2-2"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccccccc" />
|
||||||
|
<rect
|
||||||
|
style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
|
||||||
|
id="svg_1-3"
|
||||||
|
height="16"
|
||||||
|
width="16"
|
||||||
|
y="28"
|
||||||
|
x="4" />
|
||||||
|
<path
|
||||||
|
sodipodi:nodetypes="ccccccccc"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
id="path4402-5-7"
|
||||||
|
d="m 15,41 0,-7 -4,0 0,3 -5,-4 5,-4 0,3 6,0 0,9"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 31 KiB |
2025
demo/css/jsoneditor.css
Normal file
2025
demo/css/jsoneditor.css
Normal file
File diff suppressed because it is too large
Load Diff
71
demo/css/styles.css
Normal file
71
demo/css/styles.css
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
.jsoneditor {
|
||||||
|
border-color: transparent;
|
||||||
|
border-bottom: thin solid #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace_editor {
|
||||||
|
border-top: thin solid #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jsoneditor-poweredBy {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jsoneditor-menu {
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.je-wrapper {
|
||||||
|
margin-top: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.je-ft-resize {
|
||||||
|
border-color: rgba(38, 50, 56, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* comment everything below for defaults */
|
||||||
|
.jsoneditor-statusbar,
|
||||||
|
.ace-twilight .ace_gutter {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.jsoneditor-statusbar,
|
||||||
|
.ace-twilight .ace_gutter {
|
||||||
|
background-color: #171c20;
|
||||||
|
border-color: #171c20;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight {
|
||||||
|
background-color: #111;
|
||||||
|
color: #f8f8f8;
|
||||||
|
font-family: Courier, monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight .ace_variable {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight .ace_string {
|
||||||
|
color: #a0fbaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight .ace_constant,
|
||||||
|
.ace-twilight .ace_constant.ace_character,
|
||||||
|
.ace-twilight .ace_constant.ace_character.ace_escape,
|
||||||
|
.ace-twilight .ace_constant.ace_other,
|
||||||
|
.ace-twilight .ace_heading,
|
||||||
|
.ace-twilight .ace_markup.ace_heading,
|
||||||
|
.ace-twilight .ace_support.ace_constant {
|
||||||
|
color: firebrick;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight .boolean {
|
||||||
|
color: firebrick;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight .ace_numeric {
|
||||||
|
color: firebrick;
|
||||||
|
}
|
||||||
77
demo/css/styles.scss
Normal file
77
demo/css/styles.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
$editor-top-bottom-line-color: #262626;
|
||||||
|
$editor-gutter-status-color: #171c20;
|
||||||
|
$editor-gutter-status-text-color: grey;
|
||||||
|
$editor-background-color: #111; // #141414
|
||||||
|
$editor-text-color: #f8f8f8;
|
||||||
|
|
||||||
|
.jsoneditor {
|
||||||
|
border-color: transparent;
|
||||||
|
border-bottom: thin solid $editor-top-bottom-line-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace_editor {
|
||||||
|
border-top: thin solid $editor-top-bottom-line-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jsoneditor-poweredBy {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jsoneditor-menu {
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.je-wrapper {
|
||||||
|
margin-top: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.je-ft-resize {
|
||||||
|
border-color: rgba(38, 50, 56, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
// comment everything below for defaults
|
||||||
|
.jsoneditor-statusbar,
|
||||||
|
.ace-twilight .ace_gutter {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.jsoneditor-statusbar,
|
||||||
|
.ace-twilight .ace_gutter {
|
||||||
|
background-color: $editor-gutter-status-color;
|
||||||
|
border-color: $editor-gutter-status-color;
|
||||||
|
color: $editor-gutter-status-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight {
|
||||||
|
background-color: $editor-background-color;
|
||||||
|
color: $editor-text-color;
|
||||||
|
font-family: Courier, monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight .ace_variable {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight .ace_string {
|
||||||
|
color: #a0fbaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight .ace_constant,
|
||||||
|
.ace-twilight .ace_constant.ace_character,
|
||||||
|
.ace-twilight .ace_constant.ace_character.ace_escape,
|
||||||
|
.ace-twilight .ace_constant.ace_other,
|
||||||
|
.ace-twilight .ace_heading,
|
||||||
|
.ace-twilight .ace_markup.ace_heading,
|
||||||
|
.ace-twilight .ace_support.ace_constant {
|
||||||
|
color: firebrick;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight .boolean {
|
||||||
|
color: firebrick;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace-twilight .ace_numeric {
|
||||||
|
color: firebrick;
|
||||||
|
}
|
||||||
|
|
@ -1,34 +1,45 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>ReDoc Interactive Demo</title>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="ReDoc Interactive Demo. OpenAPI/Swagger-generated API Reference Documentation"
|
||||||
|
/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
<head>
|
<meta property="og:title" content="ReDoc Interactive Demo" />
|
||||||
<meta charset="UTF-8" />
|
<meta
|
||||||
<title>ReDoc Interactive Demo</title>
|
property="og:description"
|
||||||
<meta name="description" content="ReDoc Interactive Demo. OpenAPI/Swagger-generated API Reference Documentation" />
|
content="ReDoc Interactive Demo. OpenAPI/Swagger-generated API Reference Documentation"
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:image"
|
||||||
|
content="https://user-images.githubusercontent.com/3975738/37729752-8a9ea38a-2d46-11e8-8438-42ed26bf1751.png"
|
||||||
|
/>
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
<meta property="og:title" content="ReDoc Interactive Demo">
|
<style>
|
||||||
<meta property="og:description" content="ReDoc Interactive Demo. OpenAPI/Swagger-generated API Reference Documentation">
|
body {
|
||||||
<meta property="og:image" content="https://user-images.githubusercontent.com/3975738/37729752-8a9ea38a-2d46-11e8-8438-42ed26bf1751.png">
|
margin: 0;
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
<style>
|
redoc {
|
||||||
body {
|
display: block;
|
||||||
margin: 0;
|
}
|
||||||
padding: 0;
|
</style>
|
||||||
}
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
|
||||||
redoc {
|
<body>
|
||||||
display: block;
|
<div id="container"></div>
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<!-- <script>
|
||||||
<div id="container"> </div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function (i, s, o, g, r, a, m) {
|
(function (i, s, o, g, r, a, m) {
|
||||||
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
|
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
|
||||||
(i[r].q = i[r].q || []).push(arguments)
|
(i[r].q = i[r].q || []).push(arguments)
|
||||||
|
|
@ -40,7 +51,6 @@
|
||||||
ga('create', 'UA-81703547-1', 'auto');
|
ga('create', 'UA-81703547-1', 'auto');
|
||||||
ga('send', 'pageview');
|
ga('send', 'pageview');
|
||||||
}
|
}
|
||||||
</script>
|
</script> -->
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -50,6 +50,7 @@ info:
|
||||||
x-logo:
|
x-logo:
|
||||||
url: 'https://redocly.github.io/redoc/petstore-logo.png'
|
url: 'https://redocly.github.io/redoc/petstore-logo.png'
|
||||||
altText: Petstore logo
|
altText: Petstore logo
|
||||||
|
disabled: true
|
||||||
license:
|
license:
|
||||||
name: Apache 2.0
|
name: Apache 2.0
|
||||||
url: 'http://www.apache.org/licenses/LICENSE-2.0.html'
|
url: 'http://www.apache.org/licenses/LICENSE-2.0.html'
|
||||||
|
|
@ -88,7 +89,7 @@ paths:
|
||||||
parameters:
|
parameters:
|
||||||
- name: Accept-Language
|
- name: Accept-Language
|
||||||
in: header
|
in: header
|
||||||
description: "The language you prefer for messages. Supported values are en-AU, en-CA, en-GB, en-US"
|
description: 'The language you prefer for messages. Supported values are en-AU, en-CA, en-GB, en-US'
|
||||||
example: en-US
|
example: en-US
|
||||||
required: false
|
required: false
|
||||||
schema:
|
schema:
|
||||||
|
|
@ -254,7 +255,7 @@ paths:
|
||||||
required: false
|
required: false
|
||||||
schema:
|
schema:
|
||||||
type: string
|
type: string
|
||||||
example: "Bearer <TOKEN>"
|
example: 'Bearer <TOKEN>'
|
||||||
- name: petId
|
- name: petId
|
||||||
in: path
|
in: path
|
||||||
description: Pet id to delete
|
description: Pet id to delete
|
||||||
|
|
@ -429,7 +430,7 @@ paths:
|
||||||
application/json:
|
application/json:
|
||||||
example:
|
example:
|
||||||
status: 400
|
status: 400
|
||||||
message: "Invalid Order"
|
message: 'Invalid Order'
|
||||||
requestBody:
|
requestBody:
|
||||||
content:
|
content:
|
||||||
application/json:
|
application/json:
|
||||||
|
|
@ -877,11 +878,11 @@ paths:
|
||||||
type: string
|
type: string
|
||||||
examples:
|
examples:
|
||||||
response:
|
response:
|
||||||
value: <Message> OK </Message>
|
value: <Message> OK </Message>
|
||||||
text/plain:
|
text/plain:
|
||||||
examples:
|
examples:
|
||||||
response:
|
response:
|
||||||
value: OK
|
value: OK
|
||||||
'400':
|
'400':
|
||||||
description: Invalid username/password supplied
|
description: Invalid username/password supplied
|
||||||
/user/logout:
|
/user/logout:
|
||||||
|
|
@ -1027,8 +1028,8 @@ components:
|
||||||
properties:
|
properties:
|
||||||
id:
|
id:
|
||||||
externalDocs:
|
externalDocs:
|
||||||
description: "Find more info here"
|
description: 'Find more info here'
|
||||||
url: "https://example.com"
|
url: 'https://example.com'
|
||||||
description: Pet ID
|
description: Pet ID
|
||||||
allOf:
|
allOf:
|
||||||
- $ref: '#/components/schemas/Id'
|
- $ref: '#/components/schemas/Id'
|
||||||
|
|
@ -1201,7 +1202,7 @@ x-webhooks:
|
||||||
content:
|
content:
|
||||||
application/json:
|
application/json:
|
||||||
schema:
|
schema:
|
||||||
$ref: "#/components/schemas/Pet"
|
$ref: '#/components/schemas/Pet'
|
||||||
responses:
|
responses:
|
||||||
"200":
|
'200':
|
||||||
description: Return a 200 status to indicate that the data was received successfully
|
description: Return a 200 status to indicate that the data was received successfully
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,28 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>ReDoc</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
<head>
|
redoc {
|
||||||
<meta charset="UTF-8" />
|
display: block;
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
}
|
||||||
<title>ReDoc</title>
|
</style>
|
||||||
<style>
|
<link
|
||||||
body {
|
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700"
|
||||||
margin: 0;
|
rel="stylesheet"
|
||||||
padding: 0;
|
/>
|
||||||
}
|
<link href="./css/jsoneditor.css" rel="stylesheet" />
|
||||||
|
<link href="./css/styles.css" rel="stylesheet" />
|
||||||
redoc {
|
</head>
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<redoc id="example"></redoc>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<redoc id="example"></redoc>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -69,7 +69,11 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
|
||||||
|
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
{ test: [/\.eot$/, /\.gif$/, /\.woff$/, /\.svg$/, /\.ttf$/], use: 'null-loader' },
|
{ test: [/\.eot$/, /\.gif$/, /\.woff$/, /\.ttf$/], use: 'null-loader' },
|
||||||
|
{
|
||||||
|
test: /\.svg$/,
|
||||||
|
use: ['@svgr/webpack', 'url-loader'],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
test: /\.tsx?$/,
|
test: /\.tsx?$/,
|
||||||
use: [getBabelLoader({ useBuiltIns: true, hot: true })],
|
use: [getBabelLoader({ useBuiltIns: true, hot: true })],
|
||||||
|
|
|
||||||
3821
package-lock.json
generated
3821
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -76,6 +76,7 @@
|
||||||
"@cypress/webpack-preprocessor": "^5.9.0",
|
"@cypress/webpack-preprocessor": "^5.9.0",
|
||||||
"@hot-loader/react-dom": "^17.0.1",
|
"@hot-loader/react-dom": "^17.0.1",
|
||||||
"@size-limit/preset-app": "^7.0.4",
|
"@size-limit/preset-app": "^7.0.4",
|
||||||
|
"@svgr/webpack": "^6.1.2",
|
||||||
"@types/chai": "^4.2.18",
|
"@types/chai": "^4.2.18",
|
||||||
"@types/dompurify": "^2.2.2",
|
"@types/dompurify": "^2.2.2",
|
||||||
"@types/enzyme": "^3.10.5",
|
"@types/enzyme": "^3.10.5",
|
||||||
|
|
@ -138,6 +139,7 @@
|
||||||
"ts-node": "^10.0.0",
|
"ts-node": "^10.0.0",
|
||||||
"typescript": "~4.1.0",
|
"typescript": "~4.1.0",
|
||||||
"unfetch": "^4.2.0",
|
"unfetch": "^4.2.0",
|
||||||
|
"url-loader": "^4.1.1",
|
||||||
"url-polyfill": "^1.1.12",
|
"url-polyfill": "^1.1.12",
|
||||||
"webpack": "^5.38.1",
|
"webpack": "^5.38.1",
|
||||||
"webpack-cli": "^4.7.2",
|
"webpack-cli": "^4.7.2",
|
||||||
|
|
@ -156,11 +158,14 @@
|
||||||
"@babel/runtime": "^7.14.0",
|
"@babel/runtime": "^7.14.0",
|
||||||
"@redocly/openapi-core": "^1.0.0-beta.54",
|
"@redocly/openapi-core": "^1.0.0-beta.54",
|
||||||
"@redocly/react-dropdown-aria": "^2.0.11",
|
"@redocly/react-dropdown-aria": "^2.0.11",
|
||||||
|
"ace-builds": "^1.4.13",
|
||||||
|
"axios": "^0.24.0",
|
||||||
"classnames": "^2.3.1",
|
"classnames": "^2.3.1",
|
||||||
"decko": "^1.2.0",
|
"decko": "^1.2.0",
|
||||||
"dompurify": "^2.2.8",
|
"dompurify": "^2.2.8",
|
||||||
"eventemitter3": "^4.0.7",
|
"eventemitter3": "^4.0.7",
|
||||||
"json-pointer": "^0.6.1",
|
"json-pointer": "^0.6.1",
|
||||||
|
"jsoneditor": "^9.5.7",
|
||||||
"lunr": "^2.3.9",
|
"lunr": "^2.3.9",
|
||||||
"mark.js": "^8.11.1",
|
"mark.js": "^8.11.1",
|
||||||
"marked": "^3.0.4",
|
"marked": "^3.0.4",
|
||||||
|
|
|
||||||
|
|
@ -135,6 +135,30 @@ export const SimpleDropdown = styled(StyledDropdown)`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const SimpleDropdown2 = styled(SimpleDropdown)`
|
||||||
|
&& {
|
||||||
|
border: 1px solid #999;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
.dropdown-selector {
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
.dropdown-option {
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
.dropdown-selector-content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus-within {
|
||||||
|
border: 1px solid #32329f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
export const MimeLabel = styled.span`
|
export const MimeLabel = styled.span`
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,14 @@ export const RightPanelHeader = styled.h3`
|
||||||
${extensionsHook('RightPanelHeader')};
|
${extensionsHook('RightPanelHeader')};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const RightPanelHeaderDiv = styled.div`
|
||||||
|
color: ${({ theme }) => theme.rightPanel.textColor};
|
||||||
|
font-family: Roboto, sans-serif;
|
||||||
|
padding: 4px 0;
|
||||||
|
|
||||||
|
${extensionsHook('RightPanelHeaderDiv')};
|
||||||
|
`;
|
||||||
|
|
||||||
export const UnderlinedHeader = styled.h5`
|
export const UnderlinedHeader = styled.h5`
|
||||||
border-bottom: 1px solid rgba(38, 50, 56, 0.3);
|
border-bottom: 1px solid rgba(38, 50, 56, 0.3);
|
||||||
margin: 1em 0 1em 0;
|
margin: 1em 0 1em 0;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { SimpleDropdown2 as Dropdown } from '../../common-elements/dropdown';
|
||||||
|
|
||||||
import { AppStore } from '../../services/AppStore';
|
import { AppStore } from '../../services/AppStore';
|
||||||
|
|
||||||
|
|
@ -22,6 +23,10 @@ export interface ApiInfoProps {
|
||||||
|
|
||||||
@observer
|
@observer
|
||||||
export class ApiInfo extends React.Component<ApiInfoProps> {
|
export class ApiInfo extends React.Component<ApiInfoProps> {
|
||||||
|
handleServerSelect = option => {
|
||||||
|
this.props.store.spec.setSelectedServerIndex(option.idx);
|
||||||
|
};
|
||||||
|
|
||||||
handleDownloadClick = e => {
|
handleDownloadClick = e => {
|
||||||
if (!e.target.href) {
|
if (!e.target.href) {
|
||||||
e.target.href = this.props.store.spec.info.downloadLink;
|
e.target.href = this.props.store.spec.info.downloadLink;
|
||||||
|
|
@ -30,9 +35,8 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { store } = this.props;
|
const { store } = this.props;
|
||||||
const { info, externalDocs } = store.spec;
|
const { info, externalDocs, selectedServerIndex, servers } = store.spec;
|
||||||
const hideDownloadButton = store.options.hideDownloadButton;
|
const hideDownloadButton = store.options.hideDownloadButton;
|
||||||
|
|
||||||
const downloadFilename = info.downloadFileName;
|
const downloadFilename = info.downloadFileName;
|
||||||
const downloadLink = info.downloadLink;
|
const downloadLink = info.downloadLink;
|
||||||
|
|
||||||
|
|
@ -76,6 +80,11 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
|
||||||
|
|
||||||
const version = (info.version && <span>({info.version})</span>) || null;
|
const version = (info.version && <span>({info.version})</span>) || null;
|
||||||
|
|
||||||
|
const serverItems = (servers || []).map((item, index) => ({
|
||||||
|
value: `${item.url} (${item.description})`,
|
||||||
|
idx: index,
|
||||||
|
}));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Section>
|
<Section>
|
||||||
<Row>
|
<Row>
|
||||||
|
|
@ -109,6 +118,12 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
|
||||||
<Markdown source={store.spec.info.summary} data-role="redoc-summary" />
|
<Markdown source={store.spec.info.summary} data-role="redoc-summary" />
|
||||||
<Markdown source={store.spec.info.description} data-role="redoc-description" />
|
<Markdown source={store.spec.info.description} data-role="redoc-description" />
|
||||||
{externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
|
{externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
|
||||||
|
<Markdown source="Servers" data-role="list-servers" />
|
||||||
|
<Dropdown
|
||||||
|
value={serverItems[selectedServerIndex].value}
|
||||||
|
options={serverItems}
|
||||||
|
onChange={this.handleServerSelect}
|
||||||
|
/>
|
||||||
</MiddlePanel>
|
</MiddlePanel>
|
||||||
</Row>
|
</Row>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const logoHref = logoInfo.href || (info.contact && info.contact.url);
|
const logoHref = !logoInfo.disabled && (logoInfo.href || (info.contact && info.contact.url));
|
||||||
|
|
||||||
// Use the english word logo if no alt text is provided
|
// Use the english word logo if no alt text is provided
|
||||||
const altText = logoInfo.altText ? logoInfo.altText : 'logo';
|
const altText = logoInfo.altText ? logoInfo.altText : 'logo';
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,11 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { ShelfIcon } from '../../common-elements';
|
|
||||||
import { OperationModel } from '../../services';
|
import { OperationModel } from '../../services';
|
||||||
import { Markdown } from '../Markdown/Markdown';
|
|
||||||
import { OptionsContext } from '../OptionsProvider';
|
|
||||||
import { SelectOnClick } from '../SelectOnClick/SelectOnClick';
|
|
||||||
|
|
||||||
import { expandDefaultServerVariables, getBasePath } from '../../utils';
|
|
||||||
import {
|
import {
|
||||||
EndpointInfo,
|
EndpointInfo,
|
||||||
HttpVerb,
|
HttpVerb,
|
||||||
OperationEndpointWrap,
|
OperationEndpointWrap,
|
||||||
ServerItem,
|
|
||||||
ServerRelativeURL,
|
ServerRelativeURL,
|
||||||
ServersOverlay,
|
|
||||||
ServerUrl,
|
|
||||||
} from './styled.elements';
|
} from './styled.elements';
|
||||||
|
|
||||||
export interface EndpointProps {
|
export interface EndpointProps {
|
||||||
|
|
@ -36,60 +28,19 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
toggle = () => {
|
|
||||||
this.setState({ expanded: !this.state.expanded });
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { operation, inverted, hideHostname } = this.props;
|
const { operation, inverted } = this.props;
|
||||||
const { expanded } = this.state;
|
const { expanded } = this.state;
|
||||||
|
|
||||||
// TODO: highlight server variables, e.g. https://{user}.test.com
|
|
||||||
return (
|
return (
|
||||||
<OptionsContext.Consumer>
|
<OperationEndpointWrap>
|
||||||
{options => (
|
<EndpointInfo expanded={expanded} inverted={inverted}>
|
||||||
<OperationEndpointWrap>
|
<HttpVerb type={operation.httpVerb} compact={this.props.compact}>
|
||||||
<EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
|
{operation.httpVerb}
|
||||||
<HttpVerb type={operation.httpVerb} compact={this.props.compact}>
|
</HttpVerb>
|
||||||
{operation.httpVerb}
|
<ServerRelativeURL>{operation.path}</ServerRelativeURL>
|
||||||
</HttpVerb>
|
</EndpointInfo>
|
||||||
<ServerRelativeURL>{operation.path}</ServerRelativeURL>
|
</OperationEndpointWrap>
|
||||||
<ShelfIcon
|
|
||||||
float={'right'}
|
|
||||||
color={inverted ? 'black' : 'white'}
|
|
||||||
size={'20px'}
|
|
||||||
direction={expanded ? 'up' : 'down'}
|
|
||||||
style={{ marginRight: '-25px' }}
|
|
||||||
/>
|
|
||||||
</EndpointInfo>
|
|
||||||
<ServersOverlay expanded={expanded} aria-hidden={!expanded}>
|
|
||||||
{operation.servers.map(server => {
|
|
||||||
const normalizedUrl = options.expandDefaultServerVariables
|
|
||||||
? expandDefaultServerVariables(server.url, server.variables)
|
|
||||||
: server.url;
|
|
||||||
const basePath = getBasePath(normalizedUrl);
|
|
||||||
return (
|
|
||||||
<ServerItem key={normalizedUrl}>
|
|
||||||
<Markdown source={server.description || ''} compact={true} />
|
|
||||||
<SelectOnClick>
|
|
||||||
<ServerUrl>
|
|
||||||
<span>
|
|
||||||
{hideHostname || options.hideHostname
|
|
||||||
? basePath === '/'
|
|
||||||
? ''
|
|
||||||
: basePath
|
|
||||||
: normalizedUrl}
|
|
||||||
</span>
|
|
||||||
{operation.path}
|
|
||||||
</ServerUrl>
|
|
||||||
</SelectOnClick>
|
|
||||||
</ServerItem>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ServersOverlay>
|
|
||||||
</OperationEndpointWrap>
|
|
||||||
)}
|
|
||||||
</OptionsContext.Consumer>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import styled from '../../styled-components';
|
import styled from '../../styled-components';
|
||||||
|
|
||||||
export const OperationEndpointWrap = styled.div`
|
export const OperationEndpointWrap = styled.div`
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
`;
|
`;
|
||||||
|
|
@ -9,23 +8,20 @@ export const OperationEndpointWrap = styled.div`
|
||||||
export const ServerRelativeURL = styled.span`
|
export const ServerRelativeURL = styled.span`
|
||||||
font-family: ${props => props.theme.typography.code.fontFamily};
|
font-family: ${props => props.theme.typography.code.fontFamily};
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
flex: 1;
|
word-break: break-all;
|
||||||
overflow-x: hidden;
|
overflow-wrap: anywhere;
|
||||||
text-overflow: ellipsis;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boolean }>`
|
export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean }>`
|
||||||
outline: 0;
|
outline: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
cursor: pointer;
|
padding: 10px 20px;
|
||||||
padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
|
|
||||||
border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
|
border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
|
||||||
background-color: ${props =>
|
background-color: ${props =>
|
||||||
props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
|
props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
|
||||||
display: flex;
|
display: flex;
|
||||||
white-space: nowrap;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: ${props => (props.inverted ? '0' : '1px solid transparent')};
|
border: ${props => (props.inverted ? '0' : '1px solid transparent')};
|
||||||
border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
|
border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
|
||||||
|
|
@ -37,9 +33,6 @@ export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boole
|
||||||
.${ServerRelativeURL} {
|
.${ServerRelativeURL} {
|
||||||
color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')};
|
color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')};
|
||||||
}
|
}
|
||||||
&:focus {
|
|
||||||
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25);
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({
|
export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({
|
||||||
|
|
|
||||||
192
src/components/JsonEditor/JsonEditor.tsx
Normal file
192
src/components/JsonEditor/JsonEditor.tsx
Normal file
|
|
@ -0,0 +1,192 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { cloneDeep, isEqual } from 'lodash';
|
||||||
|
import JSONEditorRaw from 'jsoneditor';
|
||||||
|
import 'jsoneditor/dist/jsoneditor.css';
|
||||||
|
import 'ace-builds/src-noconflict/theme-monokai.js';
|
||||||
|
import 'ace-builds/src-noconflict/theme-twilight.js';
|
||||||
|
import 'ace-builds/src-noconflict/theme-ambiance.js';
|
||||||
|
import { JeFt, JeFtResize } from './styled.elements';
|
||||||
|
import { EmptyObject } from '../../types';
|
||||||
|
|
||||||
|
export enum Mode {
|
||||||
|
tree = 'tree',
|
||||||
|
form = 'form',
|
||||||
|
view = 'view',
|
||||||
|
code = 'code',
|
||||||
|
text = 'text',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum Theme {
|
||||||
|
monokai = 'ace/theme/monokai',
|
||||||
|
twilight = 'ace/theme/twilight',
|
||||||
|
ambiance = 'ace/theme/ambiance',
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TMode = keyof typeof Mode;
|
||||||
|
|
||||||
|
interface IJSONEditorRaw extends Object {
|
||||||
|
set: (json?: EmptyObject) => void;
|
||||||
|
setText: (text?: string) => void;
|
||||||
|
update: (json?: EmptyObject) => void;
|
||||||
|
updateText: (text?: string) => void;
|
||||||
|
setMode: (mode?: Mode) => void;
|
||||||
|
setSchema: (schema?: EmptyObject, schemaRefs?: EmptyObject) => void;
|
||||||
|
destroy: () => void;
|
||||||
|
resize: () => void;
|
||||||
|
setTheme: (theme: string) => void;
|
||||||
|
ace: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IJsonEditor {
|
||||||
|
json?: EmptyObject;
|
||||||
|
text?: string;
|
||||||
|
search?: boolean;
|
||||||
|
schema?: EmptyObject;
|
||||||
|
schemaRefs?: EmptyObject;
|
||||||
|
mode?: Mode;
|
||||||
|
modes?: Mode[];
|
||||||
|
indentation?: number;
|
||||||
|
modalAnchor?: HTMLElement;
|
||||||
|
enableSort?: boolean;
|
||||||
|
enableTransform?: boolean;
|
||||||
|
onChangeText?: (text: string) => void;
|
||||||
|
onChangeJSON?: (json: EmptyObject) => void;
|
||||||
|
onModeChange?: (mode: Mode) => void;
|
||||||
|
theme?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface JsonEditorState {
|
||||||
|
contentMinH: number;
|
||||||
|
contentH: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
class JsonEditor extends React.Component<IJsonEditor, JsonEditorState> {
|
||||||
|
jsoneditor?: IJSONEditorRaw | null = null;
|
||||||
|
schema?: EmptyObject;
|
||||||
|
schemaRefs?: EmptyObject;
|
||||||
|
content: HTMLDivElement | null = null;
|
||||||
|
container: HTMLDivElement | null = null;
|
||||||
|
|
||||||
|
startResizeY?: number;
|
||||||
|
startHeight?: number;
|
||||||
|
|
||||||
|
state = {
|
||||||
|
contentMinH: 260,
|
||||||
|
contentH: 260,
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const { json, text, ...opts } = this.props;
|
||||||
|
|
||||||
|
this.jsoneditor = new JSONEditorRaw(this.container, opts);
|
||||||
|
if (!this.jsoneditor) return;
|
||||||
|
|
||||||
|
if (json) {
|
||||||
|
this.jsoneditor.set(json);
|
||||||
|
}
|
||||||
|
if (text) {
|
||||||
|
this.jsoneditor.setText(text);
|
||||||
|
}
|
||||||
|
this.schema = cloneDeep(opts.schema);
|
||||||
|
this.schemaRefs = cloneDeep(opts.schemaRefs);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
if (!this.jsoneditor) return;
|
||||||
|
const { json, text, mode, schema, schemaRefs } = this.props;
|
||||||
|
|
||||||
|
if (json) {
|
||||||
|
this.jsoneditor.update(json);
|
||||||
|
}
|
||||||
|
if (text) {
|
||||||
|
this.jsoneditor.updateText(text);
|
||||||
|
}
|
||||||
|
if (mode) {
|
||||||
|
this.jsoneditor.setMode(mode);
|
||||||
|
}
|
||||||
|
|
||||||
|
// store a clone of the schema to keep track of when it actually changes
|
||||||
|
const schemaChanged = !isEqual(schema, this.schema);
|
||||||
|
const schemaRefsChanged = !isEqual(schemaRefs, this.schemaRefs);
|
||||||
|
if (schemaChanged || schemaRefsChanged) {
|
||||||
|
this.schema = cloneDeep(schema);
|
||||||
|
this.schemaRefs = cloneDeep(schemaRefs);
|
||||||
|
this.jsoneditor.setSchema(schema, schemaRefs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
if (this.jsoneditor) {
|
||||||
|
this.jsoneditor.destroy();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
focusView = () => {
|
||||||
|
if (this.container) {
|
||||||
|
this.container.focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
resizeMove = event => {
|
||||||
|
event.preventDefault();
|
||||||
|
const deltaY = this.startResizeY! - event.clientY;
|
||||||
|
this.setState(state => ({
|
||||||
|
...state,
|
||||||
|
contentH: Math.max(state.contentMinH, this.startHeight! - deltaY),
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
resizeUp = event => {
|
||||||
|
event.preventDefault();
|
||||||
|
document.removeEventListener('mousemove', this.resizeMove);
|
||||||
|
document.removeEventListener('mouseup', this.resizeUp);
|
||||||
|
};
|
||||||
|
|
||||||
|
onResizeDown = event => {
|
||||||
|
event.preventDefault();
|
||||||
|
this.startResizeY = event.clientY;
|
||||||
|
this.startHeight = this.content ? this.content.clientHeight : this.state.contentMinH;
|
||||||
|
document.addEventListener('mousemove', this.resizeMove);
|
||||||
|
document.addEventListener('mouseup', this.resizeUp);
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (this.jsoneditor) {
|
||||||
|
// delay said not to be necessary.. we have to call this for proper editor resizing
|
||||||
|
// in code or text modes
|
||||||
|
this.jsoneditor.resize();
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
ref={node => {
|
||||||
|
this.content = node;
|
||||||
|
}}
|
||||||
|
className="je-content"
|
||||||
|
style={{
|
||||||
|
minHeight: this.state.contentMinH,
|
||||||
|
height: this.state.contentH,
|
||||||
|
}}
|
||||||
|
onClick={this.focusView}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="jsoneditor-react-container"
|
||||||
|
ref={node => (this.container = node)}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
minHeight: this.state.contentMinH,
|
||||||
|
height: this.state.contentH,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<JeFt className="je-ft" onMouseDown={this.onResizeDown}>
|
||||||
|
<JeFtResize className="je-ft-resize">
|
||||||
|
<span>◢</span>
|
||||||
|
</JeFtResize>
|
||||||
|
</JeFt>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default JsonEditor;
|
||||||
108
src/components/JsonEditor/JsonEditorWrapper.tsx
Normal file
108
src/components/JsonEditor/JsonEditorWrapper.tsx
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import JsonEditor, { Mode, Theme } from './JsonEditor';
|
||||||
|
import { EmptyObject } from '../../types';
|
||||||
|
|
||||||
|
// const schema = {
|
||||||
|
// title: 'Example Schema',
|
||||||
|
// type: 'object',
|
||||||
|
// properties: {
|
||||||
|
// array: {
|
||||||
|
// type: 'array',
|
||||||
|
// items: {
|
||||||
|
// type: 'number'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// boolean: {
|
||||||
|
// type: 'boolean',
|
||||||
|
// },
|
||||||
|
// number: {
|
||||||
|
// type: 'number'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// required: ['array', 'boolean']
|
||||||
|
// };
|
||||||
|
|
||||||
|
// const json = {
|
||||||
|
// array: [1, 2, 3],
|
||||||
|
// boolean: true,
|
||||||
|
// string: 'four'
|
||||||
|
// }
|
||||||
|
|
||||||
|
const modes = [];
|
||||||
|
|
||||||
|
interface JsonEditorWrapperProps {
|
||||||
|
schema?: EmptyObject;
|
||||||
|
text?: string;
|
||||||
|
json?: EmptyObject;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
|
theme?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface JsonEditorWrapperState {
|
||||||
|
schema?: EmptyObject;
|
||||||
|
text?: string;
|
||||||
|
json?: EmptyObject;
|
||||||
|
mode: Mode;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO
|
||||||
|
// - messy json / text interplay
|
||||||
|
// - schema validation
|
||||||
|
class JsonEditorWrapper extends React.Component<JsonEditorWrapperProps, JsonEditorWrapperState> {
|
||||||
|
constructor(props: JsonEditorWrapperProps) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
const { schema, text } = this.props;
|
||||||
|
const defaultSchema = {};
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
schema: schema || defaultSchema,
|
||||||
|
text: text || '',
|
||||||
|
json: {}, //text || '',
|
||||||
|
mode: Mode.code,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
onChangeText = (text: string) => {
|
||||||
|
this.setState({ text });
|
||||||
|
if (this.props.onChange) {
|
||||||
|
this.props.onChange(text);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onChangeJSON = (text: string) => {
|
||||||
|
this.setState({ text });
|
||||||
|
if (this.props.onChange) {
|
||||||
|
this.props.onChange(text);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onModeChange = (mode: Mode) => {
|
||||||
|
this.setState({ mode });
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { theme } = this.props;
|
||||||
|
const { schema, text, mode } = this.state;
|
||||||
|
return (
|
||||||
|
<div className="je-wrapper">
|
||||||
|
<JsonEditor
|
||||||
|
search={false}
|
||||||
|
schema={schema}
|
||||||
|
text={text}
|
||||||
|
mode={mode}
|
||||||
|
modes={modes}
|
||||||
|
theme={theme || Theme.twilight}
|
||||||
|
indentation={4}
|
||||||
|
enableSort={false}
|
||||||
|
enableTransform={false}
|
||||||
|
onChangeText={this.onChangeText}
|
||||||
|
// onChangeJSON={this.onChangeJSON}
|
||||||
|
onModeChange={this.onModeChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default JsonEditorWrapper;
|
||||||
23
src/components/JsonEditor/styled.elements.ts
Normal file
23
src/components/JsonEditor/styled.elements.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import styled from '../../styled-components';
|
||||||
|
|
||||||
|
export const JeFt = styled.div`
|
||||||
|
background-color: rgba(38, 50, 56, 0.4);
|
||||||
|
border-color: rgba(38, 50, 56, 0.5);
|
||||||
|
color: #999;
|
||||||
|
margin-top: -2px;
|
||||||
|
width: 100%;
|
||||||
|
height: 28px;
|
||||||
|
cursor: pointer !important;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const JeFtResize = styled.div`
|
||||||
|
position: relative;
|
||||||
|
line-height: normal;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
position: absolute;
|
||||||
|
right: 3px;
|
||||||
|
top: 7px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
@ -17,6 +17,7 @@ import { RequestSamples } from '../RequestSamples/RequestSamples';
|
||||||
import { ResponsesList } from '../Responses/ResponsesList';
|
import { ResponsesList } from '../Responses/ResponsesList';
|
||||||
import { ResponseSamples } from '../ResponseSamples/ResponseSamples';
|
import { ResponseSamples } from '../ResponseSamples/ResponseSamples';
|
||||||
import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
|
import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
|
||||||
|
import { StoreContext } from '..';
|
||||||
|
|
||||||
const Description = styled.div`
|
const Description = styled.div`
|
||||||
margin-bottom: ${({ theme }) => theme.spacing.unit * 6}px;
|
margin-bottom: ${({ theme }) => theme.spacing.unit * 6}px;
|
||||||
|
|
@ -37,35 +38,39 @@ export class Operation extends React.Component<OperationProps> {
|
||||||
return (
|
return (
|
||||||
<OptionsContext.Consumer>
|
<OptionsContext.Consumer>
|
||||||
{options => (
|
{options => (
|
||||||
<Row>
|
<StoreContext.Consumer>
|
||||||
<MiddlePanel>
|
{store => (
|
||||||
<H2>
|
<Row>
|
||||||
<ShareLink to={operation.id} />
|
<MiddlePanel>
|
||||||
{summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
|
<H2>
|
||||||
{isWebhook && <Badge type="primary"> Webhook </Badge>}
|
<ShareLink to={operation.id} />
|
||||||
</H2>
|
{summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
|
||||||
{options.pathInMiddlePanel && !isWebhook && (
|
{isWebhook && <Badge type="primary"> Webhook </Badge>}
|
||||||
<Endpoint operation={operation} inverted={true} />
|
</H2>
|
||||||
)}
|
{options.pathInMiddlePanel && !isWebhook && (
|
||||||
{hasDescription && (
|
<Endpoint operation={operation} inverted={true} />
|
||||||
<Description>
|
)}
|
||||||
{description !== undefined && <Markdown source={description} />}
|
{hasDescription && (
|
||||||
{externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
|
<Description>
|
||||||
</Description>
|
{description !== undefined && <Markdown source={description} />}
|
||||||
)}
|
{externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
|
||||||
<Extensions extensions={operation.extensions} />
|
</Description>
|
||||||
<SecurityRequirements securities={operation.security} />
|
)}
|
||||||
<Parameters parameters={operation.parameters} body={operation.requestBody} />
|
<Extensions extensions={operation.extensions} />
|
||||||
<ResponsesList responses={operation.responses} />
|
<SecurityRequirements securities={operation.security} />
|
||||||
<CallbacksList callbacks={operation.callbacks} />
|
<Parameters parameters={operation.parameters} body={operation.requestBody} />
|
||||||
</MiddlePanel>
|
<ResponsesList responses={operation.responses} />
|
||||||
<DarkRightPanel>
|
<CallbacksList callbacks={operation.callbacks} />
|
||||||
{!options.pathInMiddlePanel && !isWebhook && <Endpoint operation={operation} />}
|
</MiddlePanel>
|
||||||
<RequestSamples operation={operation} />
|
<DarkRightPanel>
|
||||||
<ResponseSamples operation={operation} />
|
{!options.pathInMiddlePanel && !isWebhook && <Endpoint operation={operation} />}
|
||||||
<CallbackSamples callbacks={operation.callbacks} />
|
<RequestSamples operation={operation} store={store} />
|
||||||
</DarkRightPanel>
|
<ResponseSamples operation={operation} />
|
||||||
</Row>
|
<CallbackSamples callbacks={operation.callbacks} />
|
||||||
|
</DarkRightPanel>
|
||||||
|
</Row>
|
||||||
|
)}
|
||||||
|
</StoreContext.Consumer>
|
||||||
)}
|
)}
|
||||||
</OptionsContext.Consumer>
|
</OptionsContext.Consumer>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -8,24 +8,42 @@ import { useExternalExample } from './exernalExampleHook';
|
||||||
export interface ExampleProps {
|
export interface ExampleProps {
|
||||||
example: ExampleModel;
|
example: ExampleModel;
|
||||||
mimeType: string;
|
mimeType: string;
|
||||||
|
editable?: boolean;
|
||||||
|
value?: any;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Example({ example, mimeType }: ExampleProps) {
|
export function Example({ example, mimeType, editable = false, value, onChange }: ExampleProps) {
|
||||||
if (example.value === undefined && example.externalValueUrl) {
|
if (example.value === undefined && example.externalValueUrl) {
|
||||||
return <ExternalExample example={example} mimeType={mimeType} />;
|
return (
|
||||||
|
<ExternalExample
|
||||||
|
example={example}
|
||||||
|
mimeType={mimeType}
|
||||||
|
editable={editable}
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
return <ExampleValue value={example.value} mimeType={mimeType} />;
|
return (
|
||||||
|
<ExampleValue
|
||||||
|
value={value || example.value}
|
||||||
|
mimeType={mimeType}
|
||||||
|
editable={editable}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ExternalExample({ example, mimeType }: ExampleProps) {
|
export function ExternalExample({ example, mimeType, editable, value, onChange }: ExampleProps) {
|
||||||
const value = useExternalExample(example, mimeType);
|
const value_ = useExternalExample(example, mimeType);
|
||||||
|
|
||||||
if (value === undefined) {
|
if (value_ === undefined) {
|
||||||
return <span>Loading...</span>;
|
return <span>Loading...</span>;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (value instanceof Error) {
|
if (value_ instanceof Error) {
|
||||||
return (
|
return (
|
||||||
<StyledPre>
|
<StyledPre>
|
||||||
Error loading external example: <br />
|
Error loading external example: <br />
|
||||||
|
|
@ -41,5 +59,12 @@ export function ExternalExample({ example, mimeType }: ExampleProps) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return <ExampleValue value={value} mimeType={mimeType} />;
|
return (
|
||||||
|
<ExampleValue
|
||||||
|
value={value || value_}
|
||||||
|
mimeType={mimeType}
|
||||||
|
editable={editable}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,15 +3,32 @@ import * as React from 'react';
|
||||||
import { isJsonLike, langFromMime } from '../../utils/openapi';
|
import { isJsonLike, langFromMime } from '../../utils/openapi';
|
||||||
import { JsonViewer } from '../JsonViewer/JsonViewer';
|
import { JsonViewer } from '../JsonViewer/JsonViewer';
|
||||||
import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
|
import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
|
||||||
|
import { OptionsConsumer } from '..';
|
||||||
|
import { JsonEditorWrapper } from '../';
|
||||||
|
|
||||||
export interface ExampleValueProps {
|
export interface ExampleValueProps {
|
||||||
value: any;
|
value: any;
|
||||||
mimeType: string;
|
mimeType: string;
|
||||||
|
editable?: boolean;
|
||||||
|
onChange?: (value: any) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ExampleValue({ value, mimeType }: ExampleValueProps) {
|
export function ExampleValue({ value, mimeType, editable, onChange }: ExampleValueProps) {
|
||||||
if (isJsonLike(mimeType)) {
|
if (isJsonLike(mimeType)) {
|
||||||
return <JsonViewer data={value} />;
|
return editable ? (
|
||||||
|
<OptionsConsumer>
|
||||||
|
{options => (
|
||||||
|
<JsonEditorWrapper
|
||||||
|
schema={{}}
|
||||||
|
text={JSON.stringify(value, null, 2)}
|
||||||
|
onChange={onChange}
|
||||||
|
theme={options.tryLiveEditorTheme}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</OptionsConsumer>
|
||||||
|
) : (
|
||||||
|
<JsonViewer data={value} />
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
if (typeof value === 'object') {
|
if (typeof value === 'object') {
|
||||||
// just in case example was cached as json but used as non-json
|
// just in case example was cached as json but used as non-json
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import * as React from 'react';
|
||||||
import styled from '../../styled-components';
|
import styled from '../../styled-components';
|
||||||
|
|
||||||
import { DropdownProps } from '../../common-elements';
|
import { DropdownProps } from '../../common-elements';
|
||||||
import { MediaTypeModel } from '../../services/models';
|
import { ExampleModel, MediaTypeModel } from '../../services/models';
|
||||||
import { Markdown } from '../Markdown/Markdown';
|
import { Markdown } from '../Markdown/Markdown';
|
||||||
import { Example } from './Example';
|
import { Example } from './Example';
|
||||||
import { DropdownLabel, DropdownWrapper, NoSampleLabel } from './styled.elements';
|
import { DropdownLabel, DropdownWrapper, NoSampleLabel } from './styled.elements';
|
||||||
|
|
@ -11,6 +11,9 @@ import { DropdownLabel, DropdownWrapper, NoSampleLabel } from './styled.elements
|
||||||
export interface PayloadSamplesProps {
|
export interface PayloadSamplesProps {
|
||||||
mediaType: MediaTypeModel;
|
mediaType: MediaTypeModel;
|
||||||
renderDropdown: (props: DropdownProps) => JSX.Element;
|
renderDropdown: (props: DropdownProps) => JSX.Element;
|
||||||
|
editable?: boolean;
|
||||||
|
value?: any;
|
||||||
|
onContentChange?: (value: any) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface MediaTypeSamplesState {
|
interface MediaTypeSamplesState {
|
||||||
|
|
@ -18,15 +21,32 @@ interface MediaTypeSamplesState {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class MediaTypeSamples extends React.Component<PayloadSamplesProps, MediaTypeSamplesState> {
|
export class MediaTypeSamples extends React.Component<PayloadSamplesProps, MediaTypeSamplesState> {
|
||||||
state = {
|
constructor(props: PayloadSamplesProps) {
|
||||||
activeIdx: 0,
|
super(props);
|
||||||
};
|
|
||||||
|
this.state = {
|
||||||
|
activeIdx: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.props.editable && this.props.onContentChange) {
|
||||||
|
this.props.onContentChange(this.getExample().value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
switchMedia = ({ idx }) => {
|
switchMedia = ({ idx }) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
activeIdx: idx,
|
activeIdx: idx,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
getExample = () => {
|
||||||
|
const examples = this.props.mediaType.examples || {};
|
||||||
|
const examplesNames = Object.keys(examples);
|
||||||
|
return examples[examplesNames[this.state.activeIdx]];
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { editable = false, value, onContentChange } = this.props;
|
||||||
const { activeIdx } = this.state;
|
const { activeIdx } = this.state;
|
||||||
const examples = this.props.mediaType.examples || {};
|
const examples = this.props.mediaType.examples || {};
|
||||||
const mimeType = this.props.mediaType.name;
|
const mimeType = this.props.mediaType.name;
|
||||||
|
|
@ -38,7 +58,7 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
|
||||||
return noSample;
|
return noSample;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (examplesNames.length > 1) {
|
if (!editable && examplesNames.length > 1) {
|
||||||
const options = examplesNames.map((name, idx) => {
|
const options = examplesNames.map((name, idx) => {
|
||||||
return {
|
return {
|
||||||
value: examples[name].summary || name,
|
value: examples[name].summary || name,
|
||||||
|
|
@ -62,20 +82,51 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
|
||||||
</DropdownWrapper>
|
</DropdownWrapper>
|
||||||
<div>
|
<div>
|
||||||
{description && <Markdown source={description} />}
|
{description && <Markdown source={description} />}
|
||||||
<Example example={example} mimeType={mimeType} />
|
{this.getExampleComponent(example, mimeType, editable, value, onContentChange)}
|
||||||
</div>
|
</div>
|
||||||
</SamplesWrapper>
|
</SamplesWrapper>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
const example = examples[examplesNames[0]];
|
const example = examples[examplesNames[0]];
|
||||||
return (
|
return editable ? (
|
||||||
|
<SamplesWrapper>
|
||||||
|
<DropdownLabel>Request body</DropdownLabel>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(38, 50, 56, 0.4)',
|
||||||
|
borderColor: 'rgba(38, 50, 56, 0.5)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ height: 8 }}></div>
|
||||||
|
{this.getExampleComponent(example, mimeType, editable, value, onContentChange)}
|
||||||
|
</div>
|
||||||
|
</SamplesWrapper>
|
||||||
|
) : (
|
||||||
<SamplesWrapper>
|
<SamplesWrapper>
|
||||||
{example.description && <Markdown source={example.description} />}
|
{example.description && <Markdown source={example.description} />}
|
||||||
<Example example={example} mimeType={mimeType} />
|
{this.getExampleComponent(example, mimeType, editable, value, onContentChange)}
|
||||||
</SamplesWrapper>
|
</SamplesWrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getExampleComponent = (
|
||||||
|
example: ExampleModel,
|
||||||
|
mimeType: string,
|
||||||
|
editable: boolean,
|
||||||
|
value: any,
|
||||||
|
onContentChange,
|
||||||
|
) => {
|
||||||
|
return (
|
||||||
|
<Example
|
||||||
|
example={example}
|
||||||
|
mimeType={mimeType}
|
||||||
|
editable={editable}
|
||||||
|
value={value}
|
||||||
|
onChange={onContentChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const SamplesWrapper = styled.div`
|
const SamplesWrapper = styled.div`
|
||||||
|
|
|
||||||
299
src/components/PayloadSamples/TryLive.tsx
Normal file
299
src/components/PayloadSamples/TryLive.tsx
Normal file
|
|
@ -0,0 +1,299 @@
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import * as React from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { MediaTypeSamples } from './MediaTypeSamples';
|
||||||
|
|
||||||
|
import { MediaContentModel, OperationModel } from '../..';
|
||||||
|
import { DropdownOrLabel, JsonViewer, MediaTypesSwitch } from '..';
|
||||||
|
import {
|
||||||
|
DropdownLabel,
|
||||||
|
InvertedSimpleDropdown,
|
||||||
|
MimeLabel,
|
||||||
|
ParamBox,
|
||||||
|
ParamPrompt,
|
||||||
|
ParamInput,
|
||||||
|
ParamTable,
|
||||||
|
TryUrl,
|
||||||
|
TryBtn,
|
||||||
|
TryTitle,
|
||||||
|
TrySubtitle,
|
||||||
|
} from './styled.elements';
|
||||||
|
import { EmptyObject } from '../../types';
|
||||||
|
|
||||||
|
export interface TryLiveProps {
|
||||||
|
content?: MediaContentModel | null;
|
||||||
|
operation: OperationModel;
|
||||||
|
selectedServerUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TryLiveState {
|
||||||
|
url: { html: any[]; str: string };
|
||||||
|
response: any;
|
||||||
|
error: any;
|
||||||
|
body: any;
|
||||||
|
params: Record<string, string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export class Trylive extends React.Component<TryLiveProps, TryLiveState> {
|
||||||
|
constructor(props: TryLiveProps) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
const { selectedServerUrl, operation } = this.props;
|
||||||
|
const initParams = this.getInitParams();
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
url: this.getParamString(selectedServerUrl + operation.path, initParams),
|
||||||
|
response: null,
|
||||||
|
error: null,
|
||||||
|
body: null,
|
||||||
|
params: initParams,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getInitParams = () => {
|
||||||
|
const { operation } = this.props;
|
||||||
|
const path = operation.path;
|
||||||
|
const paramRe = /\{([a-zA-Z_][a-zA-Z0-9_]*)\}/gi;
|
||||||
|
let match;
|
||||||
|
const params = {};
|
||||||
|
while ((match = paramRe.exec(path)) !== null) {
|
||||||
|
params[match[1]] = '';
|
||||||
|
}
|
||||||
|
return params;
|
||||||
|
};
|
||||||
|
|
||||||
|
getParamString = (str: string, params = {}) => {
|
||||||
|
const regex1 = RegExp('{[a-zA-Z_][a-zA-Z0-9_]*}', 'gi');
|
||||||
|
let count = 0;
|
||||||
|
let lastIndex = 0;
|
||||||
|
|
||||||
|
let outHtml: any[] = []; // url as html fragments
|
||||||
|
let outStr = ''; // url as a string (used for making requests)
|
||||||
|
|
||||||
|
let tmpStr = str;
|
||||||
|
let tmpArr;
|
||||||
|
while ((tmpArr = regex1.exec(tmpStr)) !== null) {
|
||||||
|
const match = tmpArr[0];
|
||||||
|
lastIndex = regex1.lastIndex;
|
||||||
|
|
||||||
|
const preParamStr = tmpStr.substr(0, lastIndex - match.length);
|
||||||
|
const paramValue = params[match.replace('{', '').replace('}', '')];
|
||||||
|
|
||||||
|
outHtml = outHtml.concat([
|
||||||
|
<React.Fragment key={count}>{preParamStr}</React.Fragment>,
|
||||||
|
<span key={count + 1}>{paramValue || match}</span>,
|
||||||
|
]);
|
||||||
|
outStr += preParamStr + paramValue;
|
||||||
|
|
||||||
|
tmpStr = tmpStr.slice(lastIndex);
|
||||||
|
count += 2;
|
||||||
|
}
|
||||||
|
if (tmpStr.length > 0) {
|
||||||
|
if (count === 0) {
|
||||||
|
outHtml = [<React.Fragment key={count}>{str}</React.Fragment>];
|
||||||
|
outStr = str;
|
||||||
|
} else {
|
||||||
|
outHtml = outHtml.concat([<React.Fragment key={count}>{tmpStr}</React.Fragment>]);
|
||||||
|
outStr += tmpStr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
html: outHtml,
|
||||||
|
str: outStr,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
onInputChange = e => {
|
||||||
|
e.preventDefault();
|
||||||
|
const name = e.target.name;
|
||||||
|
const value = e.target.value;
|
||||||
|
this.setState(
|
||||||
|
state => ({
|
||||||
|
...state,
|
||||||
|
params: {
|
||||||
|
...state.params,
|
||||||
|
[name]: value,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
() => this.updateUrl(),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
updateUrl = () => {
|
||||||
|
const { selectedServerUrl, operation } = this.props;
|
||||||
|
this.setState(state => ({
|
||||||
|
...state,
|
||||||
|
url: this.getParamString(selectedServerUrl + operation.path, this.state.params),
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.updateUrl();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
if (
|
||||||
|
this.props.selectedServerUrl &&
|
||||||
|
this.props.selectedServerUrl !== prevProps.selectedServerUrl
|
||||||
|
) {
|
||||||
|
this.updateUrl();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getTryLiveParams = () => {
|
||||||
|
return this.props.operation.tryLiveParams;
|
||||||
|
};
|
||||||
|
|
||||||
|
getVerb = () => {
|
||||||
|
return this.props.operation.httpVerb;
|
||||||
|
};
|
||||||
|
|
||||||
|
onTry = () => {
|
||||||
|
this.setState(
|
||||||
|
state => ({ ...state, response: null, error: null }),
|
||||||
|
() => {
|
||||||
|
this.doTry();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
doTry = () => {
|
||||||
|
const body = this.state.body || {};
|
||||||
|
const apiAccessToken = this.getTryLiveParams().tryLiveAccessToken;
|
||||||
|
|
||||||
|
const headers = {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json;charset=UTF-8',
|
||||||
|
};
|
||||||
|
if (apiAccessToken) {
|
||||||
|
headers['Authorization'] = 'Bearer' + apiAccessToken;
|
||||||
|
}
|
||||||
|
|
||||||
|
const options: EmptyObject = {
|
||||||
|
url: this.state.url.str,
|
||||||
|
method: this.getVerb(),
|
||||||
|
headers,
|
||||||
|
data: body,
|
||||||
|
};
|
||||||
|
axios(options)
|
||||||
|
.then(response => {
|
||||||
|
this.setState({ response });
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
this.setState({ error });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onContentChange = (_value: any) => {
|
||||||
|
let value = {};
|
||||||
|
if (typeof _value === 'string') {
|
||||||
|
try {
|
||||||
|
value = JSON.parse(_value.split('\\n').join('').trim());
|
||||||
|
} catch (error) {}
|
||||||
|
} else {
|
||||||
|
value = _value;
|
||||||
|
}
|
||||||
|
this.setState({ body: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { content: mimeContent } = this.props;
|
||||||
|
const { params, body, error, response, url } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{ position: 'relative' }}>
|
||||||
|
<DropdownLabel>Request url</DropdownLabel>
|
||||||
|
<TryUrl>
|
||||||
|
<div>
|
||||||
|
<span>{url.html}</span>
|
||||||
|
</div>
|
||||||
|
<TryBtn onClick={this.onTry}>
|
||||||
|
<span>SEND</span>
|
||||||
|
</TryBtn>
|
||||||
|
</TryUrl>
|
||||||
|
</div>
|
||||||
|
{Object.keys(params).length > 0 && (
|
||||||
|
<ParamBox>
|
||||||
|
<DropdownLabel>Parameters</DropdownLabel>
|
||||||
|
<ParamTable>
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
{Object.keys(params).map(key => {
|
||||||
|
return (
|
||||||
|
<tr key={key}>
|
||||||
|
<td>
|
||||||
|
<ParamPrompt>{key}</ParamPrompt>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<ParamInput>
|
||||||
|
<input
|
||||||
|
name={key}
|
||||||
|
value={params[key]}
|
||||||
|
onChange={this.onInputChange}
|
||||||
|
type="text"
|
||||||
|
spellCheck={false}
|
||||||
|
/>
|
||||||
|
</ParamInput>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</ParamTable>
|
||||||
|
</ParamBox>
|
||||||
|
)}
|
||||||
|
{mimeContent && (
|
||||||
|
<div style={{ marginTop: 16 }}>
|
||||||
|
<MediaTypesSwitch
|
||||||
|
content={mimeContent}
|
||||||
|
renderDropdown={this.renderDropdown}
|
||||||
|
withLabel={true}
|
||||||
|
>
|
||||||
|
{mediaType => (
|
||||||
|
<MediaTypeSamples
|
||||||
|
key="samples"
|
||||||
|
mediaType={mediaType}
|
||||||
|
renderDropdown={this.renderDropdown}
|
||||||
|
editable={true}
|
||||||
|
value={body}
|
||||||
|
onContentChange={this.onContentChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</MediaTypesSwitch>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{response && (
|
||||||
|
<div style={{ padding: 0 }}>
|
||||||
|
<TryTitle>Response</TryTitle>
|
||||||
|
Status: {response.status}
|
||||||
|
{response.data && <JsonViewer data={response.data} />}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<div style={{ padding: 0 }}>
|
||||||
|
<TryTitle>Error</TryTitle>
|
||||||
|
{error.message && (
|
||||||
|
<>
|
||||||
|
<TrySubtitle>Message</TrySubtitle>
|
||||||
|
<span style={{ color: '#e27a7a' }}>{error.message}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{error.response && (
|
||||||
|
<>
|
||||||
|
<TrySubtitle>Response</TrySubtitle>
|
||||||
|
<JsonViewer data={error.response} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderDropdown = props => {
|
||||||
|
return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { transparentize } from 'polished';
|
import { transparentize } from 'polished';
|
||||||
import styled from '../../styled-components';
|
import styled from '../../styled-components';
|
||||||
import { StyledDropdown } from '../../common-elements';
|
import { StyledDropdown, RightPanelHeaderDiv } from '../../common-elements';
|
||||||
|
|
||||||
export const MimeLabel = styled.div`
|
export const MimeLabel = styled.div`
|
||||||
padding: 0.9em;
|
padding: 0.9em;
|
||||||
|
|
@ -75,3 +75,133 @@ export const NoSampleLabel = styled.div`
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #ee807f;
|
color: #ee807f;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const TryUrlTop = styled.div`
|
||||||
|
outline: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-family: Courier, monospace;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background: #fff;
|
||||||
|
word-break: break-all;
|
||||||
|
background-color: rgba(38, 50, 56, 0.4);
|
||||||
|
border-color: rgba(38, 50, 56, 0.5);
|
||||||
|
font-size: 1em;
|
||||||
|
border: none;
|
||||||
|
color: ${props => props.theme.colors.primary.main};
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const TryUrl = styled(TryUrlTop)`
|
||||||
|
background-color: rgba(38, 50, 56, 0.4);
|
||||||
|
padding: 10px;
|
||||||
|
> div:nth-child(1) {
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
border-color: rgba(38, 50, 56, 0.5);
|
||||||
|
padding: 6px 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
> span {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
font-family: Courier, monospace;
|
||||||
|
font-size: 0.95em;
|
||||||
|
background: transparent;
|
||||||
|
color: #ffffff !important;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
color: #a0fbaa !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const TryBtn = styled.div`
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin: 5px 0 5px 8px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 24px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 52px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: Montserrat, sans-serif;
|
||||||
|
cursor: pointer;
|
||||||
|
> span {
|
||||||
|
padding: 5px;
|
||||||
|
color: black !important;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const TryTitle = styled(RightPanelHeaderDiv)`
|
||||||
|
font-size: 1.2em;
|
||||||
|
padding: 5px 0;
|
||||||
|
font-weight: 400;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const TrySubtitle = styled(RightPanelHeaderDiv)`
|
||||||
|
font-size: 1.1em;
|
||||||
|
padding: 4px 0;
|
||||||
|
font-weight: 300;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ParamBox = styled(TryUrlTop)`
|
||||||
|
padding: 10px 0;
|
||||||
|
margin-top: 15px;
|
||||||
|
position: relative;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ParamPrompt = styled.div`
|
||||||
|
padding: 4px 0;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 0.9em;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #ffffff !important;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ParamInput = styled(TryUrlTop)`
|
||||||
|
max-width: 250px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
> input {
|
||||||
|
padding: 0.5em;
|
||||||
|
width: 100%;
|
||||||
|
font-family: Courier, monospace;
|
||||||
|
background: transparent;
|
||||||
|
color: #a0fbaa !important;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ParamTable = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
background: none;
|
||||||
|
> table {
|
||||||
|
width: 100%;
|
||||||
|
tab-index: -1;
|
||||||
|
cell-padding: 1;
|
||||||
|
cell-spacing: 0;
|
||||||
|
|
||||||
|
td {
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: right;
|
||||||
|
padding: 5px 10px 0 10px;
|
||||||
|
}
|
||||||
|
td:nth-child(2) {
|
||||||
|
text-align: left;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,14 @@
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { isPayloadSample, OperationModel, RedocNormalizedOptions } from '../../services';
|
import {
|
||||||
|
isPayloadSample,
|
||||||
|
isTrySample,
|
||||||
|
OperationModel,
|
||||||
|
RedocNormalizedOptions,
|
||||||
|
AppStore,
|
||||||
|
} from '../../services';
|
||||||
import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
|
import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
|
||||||
|
import { Trylive } from '../PayloadSamples/TryLive';
|
||||||
import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
|
import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
|
||||||
|
|
||||||
import { RightPanelHeader, Tab, TabList, TabPanel, Tabs } from '../../common-elements';
|
import { RightPanelHeader, Tab, TabList, TabPanel, Tabs } from '../../common-elements';
|
||||||
|
|
@ -10,6 +17,7 @@ import { l } from '../../services/Labels';
|
||||||
|
|
||||||
export interface RequestSamplesProps {
|
export interface RequestSamplesProps {
|
||||||
operation: OperationModel;
|
operation: OperationModel;
|
||||||
|
store?: AppStore;
|
||||||
}
|
}
|
||||||
|
|
||||||
@observer
|
@observer
|
||||||
|
|
@ -19,39 +27,59 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
|
||||||
operation: OperationModel;
|
operation: OperationModel;
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { operation } = this.props;
|
const { operation, store } = this.props;
|
||||||
const samples = operation.codeSamples;
|
const samples = operation.codeSamples;
|
||||||
|
|
||||||
const hasSamples = samples.length > 0;
|
const hasSamples = samples.length > 0;
|
||||||
const hideTabList = samples.length === 1 ? this.context.hideSingleRequestSampleTab : false;
|
const hideTabList = samples.length === 1 ? this.context.hideSingleRequestSampleTab : false;
|
||||||
return (
|
const selectedServerUrl = store?.spec.selectedServerUrl || '';
|
||||||
(hasSamples && (
|
|
||||||
<div>
|
|
||||||
<RightPanelHeader> {l('requestSamples')} </RightPanelHeader>
|
|
||||||
|
|
||||||
<Tabs defaultIndex={0}>
|
return hasSamples ? (
|
||||||
<TabList hidden={hideTabList}>
|
<div>
|
||||||
{samples.map(sample => (
|
<RightPanelHeader> {l('requestSamples')} </RightPanelHeader>
|
||||||
<Tab key={sample.lang + '_' + (sample.label || '')}>
|
|
||||||
{sample.label !== undefined ? sample.label : sample.lang}
|
<Tabs defaultIndex={0}>
|
||||||
</Tab>
|
<TabList hidden={hideTabList}>
|
||||||
))}
|
|
||||||
</TabList>
|
|
||||||
{samples.map(sample => (
|
{samples.map(sample => (
|
||||||
<TabPanel key={sample.lang + '_' + (sample.label || '')}>
|
<Tab key={sample.lang + '_' + (sample.label || '')}>
|
||||||
{isPayloadSample(sample) ? (
|
{sample.label !== undefined ? sample.label : sample.lang}
|
||||||
<div>
|
</Tab>
|
||||||
<PayloadSamples content={sample.requestBodyContent} />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<SourceCodeWithCopy lang={sample.lang} source={sample.source} />
|
|
||||||
)}
|
|
||||||
</TabPanel>
|
|
||||||
))}
|
))}
|
||||||
</Tabs>
|
</TabList>
|
||||||
</div>
|
{samples.map(sample => (
|
||||||
)) ||
|
<TabPanel key={sample.lang + '_' + (sample.label || '')}>
|
||||||
null
|
{isPayloadSample(sample) ? (
|
||||||
|
<div>
|
||||||
|
<PayloadSamples content={sample.requestBodyContent} />
|
||||||
|
</div>
|
||||||
|
) : isTrySample(sample) ? (
|
||||||
|
<div>
|
||||||
|
<Trylive
|
||||||
|
content={sample.requestBodyContent}
|
||||||
|
operation={operation}
|
||||||
|
selectedServerUrl={selectedServerUrl}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<SourceCodeWithCopy lang={sample.lang} source={sample.source} />
|
||||||
|
)}
|
||||||
|
</TabPanel>
|
||||||
|
))}
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<Tabs defaultIndex={0}>
|
||||||
|
<TabList hidden={false}>
|
||||||
|
<Tab key="try">Try</Tab>
|
||||||
|
</TabList>
|
||||||
|
<TabPanel>
|
||||||
|
<div>
|
||||||
|
<Trylive content={null} operation={operation} selectedServerUrl={selectedServerUrl} />
|
||||||
|
</div>
|
||||||
|
</TabPanel>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -34,3 +34,5 @@ export * from './StickySidebar/StickyResponsiveSidebar';
|
||||||
export * from './SearchBox/SearchBox';
|
export * from './SearchBox/SearchBox';
|
||||||
export * from './SchemaDefinition/SchemaDefinition';
|
export * from './SchemaDefinition/SchemaDefinition';
|
||||||
export * from './SourceCode/SourceCode';
|
export * from './SourceCode/SourceCode';
|
||||||
|
|
||||||
|
export { default as JsonEditorWrapper } from './JsonEditor/JsonEditorWrapper';
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,11 @@ export interface RedocRawOptions {
|
||||||
payloadSampleIdx?: number;
|
payloadSampleIdx?: number;
|
||||||
expandSingleSchemaField?: boolean | string;
|
expandSingleSchemaField?: boolean | string;
|
||||||
|
|
||||||
|
// try live
|
||||||
|
tryLiveAccessToken?: string;
|
||||||
|
tryLiveSandboxServerIndex?: number;
|
||||||
|
tryLiveEditorTheme?: string;
|
||||||
|
|
||||||
unstable_ignoreMimeParameters?: boolean;
|
unstable_ignoreMimeParameters?: boolean;
|
||||||
|
|
||||||
allowedMdComponents?: Record<string, MDXComponentMeta>;
|
allowedMdComponents?: Record<string, MDXComponentMeta>;
|
||||||
|
|
@ -221,6 +226,11 @@ export class RedocNormalizedOptions {
|
||||||
payloadSampleIdx: number;
|
payloadSampleIdx: number;
|
||||||
expandSingleSchemaField: boolean;
|
expandSingleSchemaField: boolean;
|
||||||
|
|
||||||
|
// try live
|
||||||
|
tryLiveAccessToken: string;
|
||||||
|
tryLiveSandboxServerIndex: number;
|
||||||
|
tryLiveEditorTheme: string;
|
||||||
|
|
||||||
/* tslint:disable-next-line */
|
/* tslint:disable-next-line */
|
||||||
unstable_ignoreMimeParameters: boolean;
|
unstable_ignoreMimeParameters: boolean;
|
||||||
allowedMdComponents: Record<string, MDXComponentMeta>;
|
allowedMdComponents: Record<string, MDXComponentMeta>;
|
||||||
|
|
@ -282,6 +292,14 @@ export class RedocNormalizedOptions {
|
||||||
this.payloadSampleIdx = RedocNormalizedOptions.normalizePayloadSampleIdx(raw.payloadSampleIdx);
|
this.payloadSampleIdx = RedocNormalizedOptions.normalizePayloadSampleIdx(raw.payloadSampleIdx);
|
||||||
this.expandSingleSchemaField = argValueToBoolean(raw.expandSingleSchemaField);
|
this.expandSingleSchemaField = argValueToBoolean(raw.expandSingleSchemaField);
|
||||||
|
|
||||||
|
// try live
|
||||||
|
this.tryLiveAccessToken = raw.tryLiveAccessToken || '';
|
||||||
|
this.tryLiveSandboxServerIndex =
|
||||||
|
typeof raw.tryLiveSandboxServerIndex === 'number'
|
||||||
|
? raw.tryLiveSandboxServerIndex
|
||||||
|
: argValueToNumber(raw.tryLiveSandboxServerIndex) || 1;
|
||||||
|
this.tryLiveEditorTheme = raw.tryLiveAccessToken || '';
|
||||||
|
|
||||||
this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters);
|
this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters);
|
||||||
|
|
||||||
this.allowedMdComponents = raw.allowedMdComponents || {};
|
this.allowedMdComponents = raw.allowedMdComponents || {};
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,10 @@
|
||||||
import { OpenAPIExternalDocumentation, OpenAPIPath, OpenAPISpec, Referenced } from '../types';
|
import {
|
||||||
|
OpenAPIExternalDocumentation,
|
||||||
|
OpenAPIPath,
|
||||||
|
OpenAPIServer,
|
||||||
|
OpenAPISpec,
|
||||||
|
Referenced,
|
||||||
|
} from '../types';
|
||||||
|
|
||||||
import { ContentItemModel, MenuBuilder } from './MenuBuilder';
|
import { ContentItemModel, MenuBuilder } from './MenuBuilder';
|
||||||
import { ApiInfoModel } from './models/ApiInfo';
|
import { ApiInfoModel } from './models/ApiInfo';
|
||||||
|
|
@ -6,6 +12,7 @@ import { WebhookModel } from './models/Webhook';
|
||||||
import { SecuritySchemesModel } from './models/SecuritySchemes';
|
import { SecuritySchemesModel } from './models/SecuritySchemes';
|
||||||
import { OpenAPIParser } from './OpenAPIParser';
|
import { OpenAPIParser } from './OpenAPIParser';
|
||||||
import { RedocNormalizedOptions } from './RedocNormalizedOptions';
|
import { RedocNormalizedOptions } from './RedocNormalizedOptions';
|
||||||
|
import { action, computed, observable, makeObservable } from 'mobx';
|
||||||
/**
|
/**
|
||||||
* Store that contains all the specification related information in the form of tree
|
* Store that contains all the specification related information in the form of tree
|
||||||
*/
|
*/
|
||||||
|
|
@ -18,11 +25,18 @@ export class SpecStore {
|
||||||
securitySchemes: SecuritySchemesModel;
|
securitySchemes: SecuritySchemesModel;
|
||||||
webhooks?: WebhookModel;
|
webhooks?: WebhookModel;
|
||||||
|
|
||||||
|
@observable
|
||||||
|
selectedServerIndex: number;
|
||||||
|
|
||||||
|
servers: OpenAPIServer[];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
spec: OpenAPISpec,
|
spec: OpenAPISpec,
|
||||||
specUrl: string | undefined,
|
specUrl: string | undefined,
|
||||||
private options: RedocNormalizedOptions,
|
private options: RedocNormalizedOptions,
|
||||||
) {
|
) {
|
||||||
|
makeObservable(this);
|
||||||
|
|
||||||
this.parser = new OpenAPIParser(spec, specUrl, options);
|
this.parser = new OpenAPIParser(spec, specUrl, options);
|
||||||
this.info = new ApiInfoModel(this.parser);
|
this.info = new ApiInfoModel(this.parser);
|
||||||
this.externalDocs = this.parser.spec.externalDocs;
|
this.externalDocs = this.parser.spec.externalDocs;
|
||||||
|
|
@ -33,5 +47,26 @@ export class SpecStore {
|
||||||
...this.parser?.spec.webhooks,
|
...this.parser?.spec.webhooks,
|
||||||
};
|
};
|
||||||
this.webhooks = new WebhookModel(this.parser, options, webhookPath);
|
this.webhooks = new WebhookModel(this.parser, options, webhookPath);
|
||||||
|
|
||||||
|
this.servers = spec.servers || [];
|
||||||
|
this.selectedServerIndex = this.getInitialServerIndex();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
setSelectedServerIndex = (index: number) => {
|
||||||
|
this.selectedServerIndex = index;
|
||||||
|
};
|
||||||
|
|
||||||
|
@computed
|
||||||
|
get selectedServerUrl() {
|
||||||
|
return this.servers[this.selectedServerIndex].url;
|
||||||
|
}
|
||||||
|
|
||||||
|
getInitialServerIndex = () => {
|
||||||
|
return this.options.tryLiveAccessToken
|
||||||
|
? this.options.tryLiveSandboxServerIndex === 0
|
||||||
|
? 1
|
||||||
|
: 0
|
||||||
|
: this.options.tryLiveSandboxServerIndex;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,17 @@ export function isPayloadSample(
|
||||||
return sample.lang === 'payload' && (sample as any).requestBodyContent;
|
return sample.lang === 'payload' && (sample as any).requestBodyContent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface XTrySample {
|
||||||
|
lang: 'try';
|
||||||
|
label: string;
|
||||||
|
requestBodyContent: MediaContentModel;
|
||||||
|
source: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isTrySample(sample: XTrySample | OpenAPIXCodeSample): sample is XTrySample {
|
||||||
|
return sample.lang === 'try' && (sample as any).requestBodyContent;
|
||||||
|
}
|
||||||
|
|
||||||
let isCodeSamplesWarningPrinted = false;
|
let isCodeSamplesWarningPrinted = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -189,7 +200,7 @@ export class OperationModel implements IMenuItem {
|
||||||
|
|
||||||
@memoize
|
@memoize
|
||||||
get codeSamples() {
|
get codeSamples() {
|
||||||
let samples: Array<OpenAPIXCodeSample | XPayloadSample> =
|
let samples: Array<OpenAPIXCodeSample | XPayloadSample | XTrySample> =
|
||||||
this.operationSpec['x-codeSamples'] || this.operationSpec['x-code-samples'] || [];
|
this.operationSpec['x-codeSamples'] || this.operationSpec['x-code-samples'] || [];
|
||||||
|
|
||||||
if (this.operationSpec['x-code-samples'] && !isCodeSamplesWarningPrinted) {
|
if (this.operationSpec['x-code-samples'] && !isCodeSamplesWarningPrinted) {
|
||||||
|
|
@ -209,6 +220,12 @@ export class OperationModel implements IMenuItem {
|
||||||
source: '',
|
source: '',
|
||||||
requestBodyContent,
|
requestBodyContent,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
lang: 'try',
|
||||||
|
label: 'Try',
|
||||||
|
source: '',
|
||||||
|
requestBodyContent,
|
||||||
|
},
|
||||||
...samples.slice(insertInx),
|
...samples.slice(insertInx),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
@ -216,6 +233,15 @@ export class OperationModel implements IMenuItem {
|
||||||
return samples;
|
return samples;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// try live
|
||||||
|
get tryLiveParams() {
|
||||||
|
return {
|
||||||
|
tryLiveAccessToken: this.options.tryLiveAccessToken,
|
||||||
|
tryLiveSandboxServerIndex: this.options.tryLiveSandboxServerIndex,
|
||||||
|
tryLiveEditorTheme: this.options.tryLiveEditorTheme,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
@memoize
|
@memoize
|
||||||
get parameters() {
|
get parameters() {
|
||||||
const _parameters = mergeParams(
|
const _parameters = mergeParams(
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
export * from './open-api';
|
export * from './open-api';
|
||||||
|
|
||||||
export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
||||||
|
export type EmptyObject = Record<string, unknown>;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user