-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
Redoc.tsx
69 lines (61 loc) · 2.14 KB
/
Redoc.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ThemeProvider } from '../../styled-components';
import { OptionsProvider } from '../OptionsProvider';
import { AppStore } from '../../services';
import { ApiInfo } from '../ApiInfo/';
import { ApiLogo } from '../ApiLogo/ApiLogo';
import { ContentItems } from '../ContentItems/ContentItems';
import { SideMenu } from '../SideMenu/SideMenu';
import { StickyResponsiveSidebar } from '../StickySidebar/StickyResponsiveSidebar';
import { ApiContentWrap, BackgroundStub, RedocWrap } from './styled.elements';
import { SearchBox } from '../SearchBox/SearchBox';
import { StoreProvider } from '../StoreBuilder';
export interface RedocProps {
store: AppStore;
}
export class Redoc extends React.Component<RedocProps> {
static propTypes = {
store: PropTypes.instanceOf(AppStore).isRequired,
};
componentDidMount() {
this.props.store.onDidMount();
}
componentWillUnmount() {
this.props.store.dispose();
}
render() {
const {
store: { spec, menu, options, search, marker },
} = this.props;
const store = this.props.store;
return (
<ThemeProvider theme={options.theme}>
<StoreProvider value={store}>
<OptionsProvider value={options}>
<RedocWrap className="redoc-wrap">
<StickyResponsiveSidebar menu={menu} className="menu-content">
<ApiLogo info={spec.info} />
{(!options.disableSearch && (
<SearchBox
search={search!}
marker={marker}
getItemById={menu.getItemById}
onActivate={menu.activateAndScroll}
/>
)) ||
null}
<SideMenu menu={menu} />
</StickyResponsiveSidebar>
<ApiContentWrap className="api-content">
<ApiInfo store={store} />
<ContentItems items={menu.items as any} />
</ApiContentWrap>
<BackgroundStub />
</RedocWrap>
</OptionsProvider>
</StoreProvider>
</ThemeProvider>
);
}
}