redoc/src/components/Endpoint/Endpoint.tsx

88 lines
2.7 KiB
TypeScript
Raw Normal View History

2017-10-12 00:01:37 +03:00
import * as React from 'react';
import { ShelfIcon } from '../../common-elements';
2018-01-22 21:30:53 +03:00
import { OperationModel } from '../../services';
import { Markdown } from '../Markdown/Markdown';
2018-03-17 23:04:37 +03:00
import { OptionsContext } from '../OptionsProvider';
2017-10-12 00:01:37 +03:00
import { SelectOnClick } from '../SelectOnClick/SelectOnClick';
import { expandDefaultServerVariables, getBasePath } from '../../utils';
2017-10-12 00:01:37 +03:00
import {
EndpointInfo,
HttpVerb,
2018-01-22 21:30:53 +03:00
OperationEndpointWrap,
ServerItem,
2017-10-12 00:01:37 +03:00
ServerRelativeURL,
ServersOverlay,
ServerUrl,
} from './styled.elements';
export interface EndpointProps {
operation: OperationModel;
2017-11-20 23:36:21 +03:00
hideHostname?: boolean;
2017-11-22 11:57:51 +03:00
inverted?: boolean;
2017-10-12 00:01:37 +03:00
}
export interface EndpointState {
expanded: boolean;
}
2018-03-17 23:04:37 +03:00
export class Endpoint extends React.Component<EndpointProps, EndpointState> {
2017-10-12 00:01:37 +03:00
constructor(props) {
super(props);
this.state = {
expanded: false,
};
}
toggle = () => {
this.setState({ expanded: !this.state.expanded });
};
render() {
2018-03-17 23:04:37 +03:00
const { operation, inverted, hideHostname } = this.props;
2017-10-12 00:01:37 +03:00
const { expanded } = this.state;
2017-11-15 00:41:20 +03:00
// TODO: highlight server variables, e.g. https://{user}.test.com
2017-10-12 00:01:37 +03:00
return (
2018-03-17 23:04:37 +03:00
<OptionsContext.Consumer>
{options => (
<OperationEndpointWrap>
<EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
<HttpVerb type={operation.httpVerb}> {operation.httpVerb}</HttpVerb>{' '}
<ServerRelativeURL>{operation.path}</ServerRelativeURL>
<ShelfIcon
float={'right'}
color={inverted ? 'black' : 'white'}
size={'20px'}
direction={expanded ? 'up' : 'down'}
style={{ marginRight: '-25px' }}
/>
</EndpointInfo>
<ServersOverlay expanded={expanded}>
{operation.servers.map(server => {
const normalizedUrl = expandDefaultServerVariables(server.url, server.variables);
return (
<ServerItem key={normalizedUrl}>
<Markdown source={server.description || ''} compact={true} />
<SelectOnClick>
<ServerUrl>
<span>
{hideHostname || options.hideHostname
? getBasePath(normalizedUrl)
: normalizedUrl}
</span>
{operation.path}
</ServerUrl>
</SelectOnClick>
</ServerItem>
);
})}
2018-03-17 23:04:37 +03:00
</ServersOverlay>
</OperationEndpointWrap>
)}
</OptionsContext.Consumer>
2017-10-12 00:01:37 +03:00
);
}
}