$(document).ready(() => $(ref).scrollSpy())}
23 | />
24 | );
25 |
26 | ApiDescriptionField.propTypes = {
27 | description: PropTypes.string,
28 | };
29 |
30 | export default ApiDescriptionField;
31 |
--------------------------------------------------------------------------------
/src/component/Drawer.css:
--------------------------------------------------------------------------------
1 | header, main, footer {
2 | padding-left: 300px;
3 | }
4 |
5 | @media only screen and (max-width: 992px) {
6 | header, main, footer {
7 | padding-left: 0;
8 | }
9 | }
10 |
11 | ul.side-nav > li > a {
12 | font-weight: bold;
13 | }
14 |
15 | ul.side-nav > li > a > span {
16 | font-weight: normal;
17 | margin-left: 8px;
18 | }
19 |
20 | .side-nav li .collapsible-body ul > .active {
21 | background-color: rgba(0, 0, 0, 0.08) !important;
22 | }
23 |
24 | .side-nav li .collapsible-body ul > .active a {
25 | color: #000 !important;
26 | }
27 |
--------------------------------------------------------------------------------
/src/component/Drawer.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import { StyleSheet, css } from 'aphrodite';
3 | import _ from 'lodash';
4 | import './Drawer.css';
5 |
6 | const style = StyleSheet.create({
7 | taglist: {
8 | display: 'flex',
9 | flexDirection: 'column',
10 | },
11 | });
12 |
13 | const Drawer = ({ tags }) => (
14 | {
16 | const offset = (typeof $(ref).offset === 'function' ? $(ref).offset() : {}) || {};
17 | const top = offset.top;
18 | $(ref).pushpin({ top });
19 |
20 | $(window).scroll(() => {
21 | $('.side-nav li').removeClass('active');
22 | $('.side-nav li .collapsible-body').css('display', 'none');
23 | $('.side-nav li .collapsible-body ul li a').parent().removeClass('active');
24 |
25 | const activeAnchor = $('.side-nav li .collapsible-body ul li .active').first();
26 | activeAnchor.parent().parent().parent().parent()
27 | .addClass('active');
28 | activeAnchor.parent().parent().parent().css('display', 'block');
29 | activeAnchor.parent().addClass('active');
30 | });
31 | }}
32 | id="slide-out"
33 | className={`side-nav fixed collapsible ${css(style.taglist)}`}
34 | data-collapsible="accordion"
35 | >
36 | -
37 | Api Description
38 |
39 | {tags.map(tag =>
40 | -
41 |
42 | {tag.name}
43 | {_.truncate(tag.description)}
44 |
45 |
57 |
58 | )}
59 |
60 | );
61 |
62 | Drawer.propTypes = {
63 | tags: PropTypes.arrayOf(PropTypes.shape({
64 | name: PropTypes.string,
65 | description: PropTypes.string,
66 | entrypoints: PropTypes.arrayOf(PropTypes.shape({
67 | path: PropTypes.string,
68 | method: PropTypes.string,
69 | })),
70 | })),
71 | };
72 |
73 | export default Drawer;
74 |
--------------------------------------------------------------------------------
/src/component/EntrypointCard.css:
--------------------------------------------------------------------------------
1 | .entrypoint-method {
2 | height: 55px;
3 | border-top-left-radius: 2px;
4 | border-top-right-radius: 2px;
5 | line-height: 48px;
6 | display: flex;
7 | align-items: center;
8 | padding-left: 2vw;
9 | justify-content: space-between;
10 | }
11 |
12 | .entrypoint-method-name {
13 | font-size: 24px;
14 | margin-right: 1.5vw;
15 | }
16 |
17 | .entrypoint-method-path {
18 | font-size: 20px;
19 | }
20 |
21 | .entrypoint-get {
22 | background-color: #2196F3;
23 | }
24 |
25 | .entrypoint-post {
26 | background-color: #009688;
27 | }
28 |
29 | .entrypoint-put {
30 | background-color: #FF9800;
31 | }
32 |
33 | .entrypoint-delete {
34 | background-color: #FF5722;
35 | }
36 |
37 | .entrypoint-deprecated {
38 | background-color: gray !important;
39 | }
40 |
41 | .card-content > .entrypoint-info {
42 | margin-top: 20px;
43 | display: flex;
44 | align-items: flex-end;
45 | justify-content: space-between;
46 | }
47 |
48 | .card-content > .entrypoint-details-btn {
49 | float: right;
50 | }
51 |
--------------------------------------------------------------------------------
/src/component/EntrypointCard.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import marked from 'marked';
3 | import classNames from 'classnames';
4 | import _ from 'lodash';
5 | import Request from './Request';
6 | import Response from './Response';
7 | import SecurityChips from './SecurityChips';
8 | import './EntrypointCard.css';
9 |
10 | export default class EntrypointCard extends Component {
11 | static propTypes = {
12 | method: PropTypes.string.isRequired,
13 | path: PropTypes.string.isRequired,
14 | operation: PropTypes.shape({
15 | description: PropTypes.string,
16 | summary: PropTypes.string,
17 | parameters: PropTypes.array,
18 | responses: PropTypes.object,
19 | security: PropTypes.array,
20 | }).isRequired,
21 | };
22 |
23 | state = {
24 | revealed: false,
25 | };
26 |
27 | render() {
28 | const { method, path, operation } = this.props;
29 | const { description = '', summary, parameters = [], responses = {}, security = [] } = operation;
30 | const { revealed } = this.state;
31 | const href = _.kebabCase(method + path);
32 |
33 | return (
34 | $(document).ready(() => {
39 | $(ref).scrollSpy({ scrollOffset: 50 });
40 | })}
41 | >
42 |
43 |
58 |
59 |
{summary}
60 |
66 |
73 |
74 |
79 | {parameters.length > 0 ? : null}
80 | {_.map(responses, (value, key) => )}
81 |
82 |
30 | {
31 | lists.map(({ title, description, entrypoints }) =>
32 |
$(document).ready(() => {
38 | $(ref).scrollSpy({ scrollOffset: 0 });
39 | })}
40 | >
41 |
42 | {title}
43 | {description}
44 |
45 |
46 | {entrypoints.map(entrypoint =>
47 | )}
53 |
54 |
55 | )
56 | }
57 |
63 |
88 |
89 | this.codeBlock = ref}>
90 | {this.state.modelTab === 'schema'
91 | ? formatSchema(this.props.schema)
92 | : JSON.stringify(this.props.examples && this.props.examples[this.state.mimeType],
93 | null, 2)
94 | }
95 |
96 |
97 |
12 |
Request
13 | {
14 | params.length > 0 ?
15 |
16 |
17 | | Parameter Name |
18 | Description |
19 | Parameter Type |
20 | Data Type |
21 |
22 |
23 |
24 | {params.map(param =>
25 |
26 | | {param.name} |
27 | |
32 | {param.in} |
33 |
34 | {param.type}{param.required ? '(required)' : null}
35 | {
36 | param.enum ?
37 | (
38 |
45 | )
46 | : null
47 | }
48 | |
49 |
50 | )}
51 |
52 |
: null
53 | }
54 | { body ?
: null}
55 |
10 |
Response
11 |
= 400,
16 | })}
17 | >{status}
18 |
24 | { schema || examples ?
: null}
25 |
19 | {Object.getOwnPropertyNames(object).map(scope => {
20 | const names = object[scope];
21 | return (
22 |
$(document).ready(() => {
29 | $(ref).tooltip({ delay: 50 });
30 | })}
31 | >{scope}
32 | );
33 | })}
34 |