Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-08 06:04:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update CallbackDetails

Browse Source
This commit is contained in:
Oleksiy Kachynskyy 2020-04-02 15:08:28 +03:00
parent dd1e0dcec4
commit 0ac08e9407
8 changed files with 70 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demo/openapi.yaml
View File

@ -539,6 +539,9 @@ paths:
post:
summary: Order in Progress (Summary)
description: A callback triggered every time an Order is updated status to "inProgress" (Description)
externalDocs:
description: Find out more
url: 'https://more-details.com/demo'
requestBody:
content:
application/json:

4
src/components/CallbackSamples/CallbackSamples.tsx
View File

@ -27,6 +27,10 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
render() {
const { callbacks } = this.props;
if (!callbacks || callbacks.length === 0) {
return null;
}
const operations = callbacks
.map(callback => callback.operations.map(operation => operation))
.reduce((a, b) => a.concat(b), []);

49
src/components/Callbacks/CallbackDetails.tsx
View File

@ -1,30 +1,47 @@
import { observer } from 'mobx-react';
import * as React from 'react';
import { OperationModel } from '../../services/models';
import { OperationItem } from '../ContentItems/ContentItems';
import { Endpoint } from '../Endpoint/Endpoint';
import { Markdown } from '../Markdown/Markdown';
import styled from '../../styled-components';
import { Endpoint } from '../Endpoint/Endpoint';
import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
import { Extensions } from '../Fields/Extensions';
import { Markdown } from '../Markdown/Markdown';
import { Parameters } from '../Parameters/Parameters';
import { ResponsesList } from '../Responses/ResponsesList';
import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
import { CallbackDetailsWrap } from './styled.elements';
export class CallbackDetails extends React.PureComponent<{ callbackOperation: OperationModel }> {
export interface CallbackDetailsProps {
operation: OperationModel;
}
@observer
export class CallbackDetails extends React.Component<CallbackDetailsProps> {
render() {
const description = this.props.callbackOperation.description;
const { operation } = this.props;
const { description, externalDocs } = operation;
const hasDescription = !!(description || externalDocs);
return (
<div>
{description && (
<CallbackDescription>
<Markdown compact={true} inline={true} source={description} />
</CallbackDescription>
<CallbackDetailsWrap>
{hasDescription && (
<Description>
{description !== undefined && <Markdown source={description} />}
{externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
</Description>
)}
<Endpoint operation={this.props.callbackOperation} inverted={true} compact={true} />
<OperationItem item={this.props.callbackOperation} />
</div>
<Endpoint operation={this.props.operation} inverted={true} compact={true} />
{/* Do we need Extensions in callback details? */}
<Extensions extensions={operation.extensions} />
<SecurityRequirements securities={operation.security} />
<Parameters parameters={operation.parameters} body={operation.requestBody} />
<ResponsesList responses={operation.responses} isCallback={operation.isCallback} />
</CallbackDetailsWrap>
);
}
}
const CallbackDescription = styled.div`
margin-top: 10px;
margin-bottom: 20px;
const Description = styled.div`
margin-bottom: ${({ theme }) => theme.spacing.unit * 3}px;
`;

8
src/components/Callbacks/CallbackOperation.tsx
View File

@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
import * as React from 'react';
import { OperationModel } from '../../services/models';
import { CallbackDetailsWrap, StyledCallbackTitle } from './styled.elements';
import { StyledCallbackTitle } from './styled.elements';
import { CallbackDetails } from './CallbackDetails';
@observer
@ -20,11 +20,7 @@ export class CallbackOperation extends React.Component<{ callbackOperation: Oper
onClick={this.toggle}
callbackOperation={this.props.callbackOperation}
/>
{expanded && (
<CallbackDetailsWrap>
<CallbackDetails callbackOperation={this.props.callbackOperation} />
</CallbackDetailsWrap>
)}
{expanded && <CallbackDetails operation={this.props.callbackOperation} />}
</>
);
}

4
src/components/Callbacks/CallbackTitle.tsx
View File

@ -23,7 +23,7 @@ export class CallbackTitle extends React.PureComponent<CallbackTitleProps> {
<CallbackTitleWrapper className={className} onClick={onClick || undefined}>
<OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
<ShelfIcon size={'1.5em'} direction={expanded ? 'down' : 'right'} float={'left'} />
<CallbackNameStyled deprecated={deprecated}>{name}</CallbackNameStyled>
<CallbackName deprecated={deprecated}>{name}</CallbackName>
{deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
</CallbackTitleWrapper>
);
@ -36,7 +36,7 @@ const CallbackTitleWrapper = styled.div`
}
`;
const CallbackNameStyled = styled.span<{ deprecated?: boolean }>`
const CallbackName = styled.span<{ deprecated?: boolean }>`
text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')};
margin-right: 8px;
`;

16
src/components/Callbacks/CallbacksList.tsx
View File

@ -4,14 +4,6 @@ import { CallbackModel } from '../../services/models';
import styled from '../../styled-components';
import { CallbackOperation } from './CallbackOperation';
const CallbacksHeader = styled.h3`
font-size: 18px;
padding: 0.2em 0;
margin: 3em 0 1.1em;
color: #253137;
font-weight: normal;
`;
export interface CallbacksListProps {
callbacks: CallbackModel[];
}
@ -38,3 +30,11 @@ export class CallbacksList extends React.PureComponent<CallbacksListProps> {
);
}
}
const CallbacksHeader = styled.h3`
font-size: 18px;
padding: 0.2em 0;
margin: 3em 0 1.1em;
color: #253137;
font-weight: normal;
`;

54
src/components/Operation/Operation.tsx
View File

@ -3,8 +3,8 @@ import * as React from 'react';
import { Badge, DarkRightPanel, H2, MiddlePanel, Row } from '../../common-elements';
import { ShareLink } from '../../common-elements/linkify';
import { OperationModel as OperationType } from '../../services/models';
import styled, { media } from '../../styled-components';
import { OperationModel } from '../../services/models';
import styled from '../../styled-components';
import { CallbacksList } from '../Callbacks';
import { CallbackSamples } from '../CallbackSamples/CallbackSamples';
import { Endpoint } from '../Endpoint/Endpoint';
@ -19,7 +19,7 @@ import { ResponseSamples } from '../ResponseSamples/ResponseSamples';
import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
export interface OperationProps {
operation: OperationType;
operation: OperationModel;
}
@observer
@ -29,23 +29,18 @@ export class Operation extends React.Component<OperationProps> {
const { name: summary, description, deprecated, externalDocs } = operation;
const hasDescription = !!(description || externalDocs);
const AdaptiveMiddlePanel = operation.isCallback ? CallbackMiddlePanel : MiddlePanel;
return (
<OptionsContext.Consumer>
{options => (
<OperationRow>
<AdaptiveMiddlePanel>
{!operation.isCallback && (
<H2>
<ShareLink to={operation.id} />
{summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
</H2>
)}
{!operation.isCallback && options.pathInMiddlePanel && (
<Endpoint operation={operation} inverted={true} />
)}
{!operation.isCallback && hasDescription && (
<MiddlePanel>
<H2>
<ShareLink to={operation.id} />
{summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
</H2>
{options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}
{hasDescription && (
<Description>
{description !== undefined && <Markdown source={description} />}
{externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
@ -54,19 +49,15 @@ export class Operation extends React.Component<OperationProps> {
<Extensions extensions={operation.extensions} />
<SecurityRequirements securities={operation.security} />
<Parameters parameters={operation.parameters} body={operation.requestBody} />
<ResponsesList responses={operation.responses} isCallback={operation.isCallback} />
<ResponsesList responses={operation.responses} />
<CallbacksList callbacks={operation.callbacks} />
</AdaptiveMiddlePanel>
{!operation.isCallback && (
<DarkRightPanel>
{!options.pathInMiddlePanel && <Endpoint operation={operation} />}
<RequestSamples operation={operation} />
<ResponseSamples operation={operation} />
{operation.callbacks.length > 0 && (
<CallbackSamples callbacks={operation.callbacks} />
)}
</DarkRightPanel>
)}
</MiddlePanel>
<DarkRightPanel>
{!options.pathInMiddlePanel && <Endpoint operation={operation} />}
<RequestSamples operation={operation} />
<ResponseSamples operation={operation} />
<CallbackSamples callbacks={operation.callbacks} />
</DarkRightPanel>
</OperationRow>
)}
</OptionsContext.Consumer>
@ -74,18 +65,9 @@ export class Operation extends React.Component<OperationProps> {
}
}
const CallbackMiddlePanel = styled(MiddlePanel)`
width: 100%;
padding: 0;
${() => media.lessThan('medium', true)`
padding: 0
`};
`;
const OperationRow = styled(Row)`
backface-visibility: hidden;
contain: content;
overflow: hidden;
`;

1
src/services/models/Operation.ts
View File

@ -254,7 +254,6 @@ export class OperationModel implements IMenuItem {
@memoize
get callbacks() {
console.log('this.operationSpec.callbacks', this.operationSpec.callbacks);
return Object.keys(this.operationSpec.callbacks || []).map(callbackEventName => {
return new CallbackModel(
this.parser,