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
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|