diff --git a/src/common-elements/dropdown.ts b/src/common-elements/dropdown.ts index 86623949ae..40cf978d29 100644 --- a/src/common-elements/dropdown.ts +++ b/src/common-elements/dropdown.ts @@ -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; diff --git a/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx b/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx index 3c40483a12..f25b303f4e 100644 --- a/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx +++ b/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx @@ -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 { }; }); - return ( - <> + const Wrapper = ({ children }) => + this.props.withLabel ? ( Content type + {children} + + ) : ( + children + ); + + return ( + <> + {this.props.renderDropdown({ value: options[activeMimeIdx], options, onChange: this.switchMedia, })} - + {this.props.children(content.active)} ); diff --git a/src/components/PayloadSamples/MediaTypeSamples.tsx b/src/components/PayloadSamples/MediaTypeSamples.tsx index de6e200867..2e1c551733 100644 --- a/src/components/PayloadSamples/MediaTypeSamples.tsx +++ b/src/components/PayloadSamples/MediaTypeSamples.tsx @@ -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 1) { const options = examplesNames.map((name, idx) => { return { @@ -42,6 +43,10 @@ export class MediaTypeSamples extends React.Component @@ -52,27 +57,18 @@ export class MediaTypeSamples extends React.Component - {examplesNames.map(name => { - const description = examples[name].description; - const activeValue = options[activeIdx].label; - - return ( - (name === activeValue || examples[name].summary === activeValue) && ( -
- {description && {description}} - -
- ) - ); - })} +
+ {description && } + +
); } else { - const name = examplesNames[0]; + const example = examples[examplesNames[0]]; return (
- {examples[name].description && {examples[name].description}} - + {example.description && } +
); } diff --git a/src/components/PayloadSamples/PayloadSamples.tsx b/src/components/PayloadSamples/PayloadSamples.tsx index 16b9832283..aa9d0e1b1a 100644 --- a/src/components/PayloadSamples/PayloadSamples.tsx +++ b/src/components/PayloadSamples/PayloadSamples.tsx @@ -22,7 +22,7 @@ export class PayloadSamples extends React.Component { } return ( - + {mediaType => ( 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)}; -`;