redoc/src/components/Endpoint/Endpoint.tsx

79 lines
2.2 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';
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 {
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 => (
<ServerItem key={server.url}>
<div>{server.description}</div>
<SelectOnClick>
<ServerUrl>
{!(hideHostname || options.hideHostname) && <span>{server.url}</span>}
{operation.path}
</ServerUrl>
</SelectOnClick>
</ServerItem>
))}
</ServersOverlay>
</OperationEndpointWrap>
)}
</OptionsContext.Consumer>
2017-10-12 00:01:37 +03:00
);
}
}