1
1
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:
Roman Hotsiy 2019-07-07 20:29:10 +03:00
parent 995e557d6d
commit f52d9e875b
5 changed files with 31 additions and 30 deletions

View File

@ -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;

View File

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

View File

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

View File

@ -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

View File

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