mirror of
https://github.com/Redocly/redoc.git
synced 2025-02-25 22:40:32 +03:00
fix: markdown in examples descriptions + minor ui tweaks
This commit is contained in:
parent
995e557d6d
commit
f52d9e875b
src
common-elements
components
MediaTypeSwitch
PayloadSamples
|
@ -55,7 +55,7 @@ export const StyledDropdown = styled(Dropdown)`
|
|||
display: block;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: 0.35em;
|
||||
right: 0.6em;
|
||||
top: 50%;
|
||||
margin-top: -0.125em;
|
||||
width: 0;
|
||||
|
|
|
@ -12,6 +12,8 @@ export interface MediaTypeChildProps {
|
|||
|
||||
export interface MediaTypesSwitchProps {
|
||||
content?: MediaContentModel;
|
||||
withLabel?: boolean;
|
||||
|
||||
renderDropdown: (props: DropdownProps) => JSX.Element;
|
||||
children: (activeMime: MediaTypeModel) => JSX.Element;
|
||||
}
|
||||
|
@ -38,16 +40,25 @@ export class MediaTypesSwitch extends React.Component<MediaTypesSwitchProps> {
|
|||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
const Wrapper = ({ children }) =>
|
||||
this.props.withLabel ? (
|
||||
<DropdownWrapper>
|
||||
<DropdownLabel>Content type</DropdownLabel>
|
||||
{children}
|
||||
</DropdownWrapper>
|
||||
) : (
|
||||
children
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Wrapper>
|
||||
{this.props.renderDropdown({
|
||||
value: options[activeMimeIdx],
|
||||
options,
|
||||
onChange: this.switchMedia,
|
||||
})}
|
||||
</DropdownWrapper>
|
||||
</Wrapper>
|
||||
{this.props.children(content.active)}
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -2,9 +2,9 @@ import * as React from 'react';
|
|||
|
||||
import { DropdownProps } from '../../common-elements';
|
||||
import { MediaTypeModel } from '../../services/models';
|
||||
|
||||
import { Markdown } from '../Markdown/Markdown';
|
||||
import { Example } from './Example';
|
||||
import { Description, DropdownLabel, DropdownWrapper, NoSampleLabel } from './styled.elements';
|
||||
import { DropdownLabel, DropdownWrapper, NoSampleLabel } from './styled.elements';
|
||||
|
||||
export interface PayloadSamplesProps {
|
||||
mediaType: MediaTypeModel;
|
||||
|
@ -35,6 +35,7 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
|
|||
if (examplesNames.length === 0) {
|
||||
return noSample;
|
||||
}
|
||||
|
||||
if (examplesNames.length > 1) {
|
||||
const options = examplesNames.map((name, idx) => {
|
||||
return {
|
||||
|
@ -42,6 +43,10 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
|
|||
value: idx.toString(),
|
||||
};
|
||||
});
|
||||
|
||||
const example = examples[examplesNames[activeIdx]];
|
||||
const description = example.description;
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownWrapper>
|
||||
|
@ -52,27 +57,18 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
|
|||
onChange: this.switchMedia,
|
||||
})}
|
||||
</DropdownWrapper>
|
||||
{examplesNames.map(name => {
|
||||
const description = examples[name].description;
|
||||
const activeValue = options[activeIdx].label;
|
||||
|
||||
return (
|
||||
(name === activeValue || examples[name].summary === activeValue) && (
|
||||
<div key={name}>
|
||||
{description && <Description>{description}</Description>}
|
||||
<Example example={examples[name]} mimeType={mimeType} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
<div>
|
||||
{description && <Markdown source={description} />}
|
||||
<Example example={example} mimeType={mimeType} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
const name = examplesNames[0];
|
||||
const example = examples[examplesNames[0]];
|
||||
return (
|
||||
<div>
|
||||
{examples[name].description && <Description>{examples[name].description}</Description>}
|
||||
<Example example={examples[name]} mimeType={mimeType} />
|
||||
{example.description && <Markdown source={example.description} />}
|
||||
<Example example={example} mimeType={mimeType} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -22,7 +22,7 @@ export class PayloadSamples extends React.Component<PayloadSamplesProps> {
|
|||
}
|
||||
|
||||
return (
|
||||
<MediaTypesSwitch content={mimeContent} renderDropdown={this.renderDropdown}>
|
||||
<MediaTypesSwitch content={mimeContent} renderDropdown={this.renderDropdown} withLabel={true}>
|
||||
{mediaType => (
|
||||
<SamplesWrapper>
|
||||
<MediaTypeSamples
|
||||
|
|
|
@ -32,7 +32,6 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
|
|||
margin-left: 10px;
|
||||
text-transform: none;
|
||||
font-size: 0.929em;
|
||||
padding: 12px;
|
||||
margin: 0 0 10px 0;
|
||||
display: block;
|
||||
background-color: ${({ theme }) => transparentize(0.6, theme.rightPanel.backgroundColor)};
|
||||
|
@ -43,7 +42,7 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
|
|||
.Dropdown-control:hover {
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
padding: 0 1.2em 0 0;
|
||||
padding: 0.9em 1.6em 0.9em 0.9em;
|
||||
background: transparent;
|
||||
color: ${({ theme }) => theme.rightPanel.textColor};
|
||||
box-shadow: none;
|
||||
|
@ -63,8 +62,3 @@ export const NoSampleLabel = styled.div`
|
|||
font-size: 12px;
|
||||
color: #ee807f;
|
||||
`;
|
||||
|
||||
export const Description = styled.span`
|
||||
font-size: 12px;
|
||||
color: ${({ theme }) => transparentize(0.6, theme.rightPanel.textColor)};
|
||||
`;
|
||||
|
|
Loading…
Reference in New Issue
Block a user