From 995e557d6d1a4759045415754628f962146d0a3b Mon Sep 17 00:00:00 2001 From: Anya Stasiuk Date: Fri, 5 Jul 2019 13:16:59 +0300 Subject: [PATCH] fix: organize response examples in dropdown and display description --- .../MediaTypeSwitch/MediaTypesSwitch.tsx | 14 +++-- .../PayloadSamples/MediaTypeSamples.tsx | 62 ++++++++++++++----- .../PayloadSamples/PayloadSamples.tsx | 15 ++++- .../PayloadSamples/styled.elements.ts | 34 ++++++++-- 4 files changed, 100 insertions(+), 25 deletions(-) diff --git a/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx b/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx index 9b0ffcb7d3..3c40483a12 100644 --- a/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx +++ b/src/components/MediaTypeSwitch/MediaTypesSwitch.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { DropdownProps } from '../../common-elements/dropdown'; import { MediaContentModel, MediaTypeModel, SchemaModel } from '../../services/models'; +import { DropdownLabel, DropdownWrapper } from '../PayloadSamples/styled.elements'; export interface MediaTypeChildProps { schema: SchemaModel; @@ -39,11 +40,14 @@ export class MediaTypesSwitch extends React.Component { return ( <> - {this.props.renderDropdown({ - value: options[activeMimeIdx], - options, - onChange: this.switchMedia, - })} + + Content type + {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 251f182f6f..de6e200867 100644 --- a/src/components/PayloadSamples/MediaTypeSamples.tsx +++ b/src/components/PayloadSamples/MediaTypeSamples.tsx @@ -1,17 +1,31 @@ import * as React from 'react'; -import { SmallTabs, Tab, TabList, TabPanel } from '../../common-elements'; +import { DropdownProps } from '../../common-elements'; import { MediaTypeModel } from '../../services/models'; import { Example } from './Example'; -import { NoSampleLabel } from './styled.elements'; +import { Description, DropdownLabel, DropdownWrapper, NoSampleLabel } from './styled.elements'; export interface PayloadSamplesProps { mediaType: MediaTypeModel; + renderDropdown: (props: DropdownProps) => JSX.Element; } -export class MediaTypeSamples extends React.Component { +interface MediaTypeSamplesState { + activeIdx: number; +} + +export class MediaTypeSamples extends React.Component { + state = { + activeIdx: 0, + }; + switchMedia = ({ value }) => { + this.setState({ + activeIdx: parseInt(value, 10), + }); + }; render() { + const { activeIdx } = this.state; const examples = this.props.mediaType.examples || {}; const mimeType = this.props.mediaType.name; @@ -22,24 +36,42 @@ export class MediaTypeSamples extends React.Component { return noSample; } if (examplesNames.length > 1) { + const options = examplesNames.map((name, idx) => { + return { + label: examples[name].summary || name, + value: idx.toString(), + }; + }); return ( - - - {examplesNames.map(name => ( - {examples[name].summary || name} - ))} - - {examplesNames.map(name => ( - - - - ))} - + <> + + Example + {this.props.renderDropdown({ + value: options[activeIdx], + options, + onChange: this.switchMedia, + })} + + {examplesNames.map(name => { + const description = examples[name].description; + const activeValue = options[activeIdx].label; + + return ( + (name === activeValue || examples[name].summary === activeValue) && ( +
+ {description && {description}} + +
+ ) + ); + })} + ); } else { const name = examplesNames[0]; return (
+ {examples[name].description && {examples[name].description}}
); diff --git a/src/components/PayloadSamples/PayloadSamples.tsx b/src/components/PayloadSamples/PayloadSamples.tsx index 03db3a7064..16b9832283 100644 --- a/src/components/PayloadSamples/PayloadSamples.tsx +++ b/src/components/PayloadSamples/PayloadSamples.tsx @@ -4,6 +4,7 @@ import { MediaTypeSamples } from './MediaTypeSamples'; import { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch'; +import styled from '../../../src/styled-components'; import { MediaContentModel } from '../../services/models'; import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel'; import { InvertedSimpleDropdown, MimeLabel } from './styled.elements'; @@ -22,7 +23,15 @@ export class PayloadSamples extends React.Component { return ( - {mediaType => } + {mediaType => ( + + + + )} ); } @@ -31,3 +40,7 @@ export class PayloadSamples extends React.Component { return ; }; } + +const SamplesWrapper = styled.div` + margin-top: 15px; +`; diff --git a/src/components/PayloadSamples/styled.elements.ts b/src/components/PayloadSamples/styled.elements.ts index e9e99151dd..56f0842f46 100644 --- a/src/components/PayloadSamples/styled.elements.ts +++ b/src/components/PayloadSamples/styled.elements.ts @@ -1,24 +1,44 @@ // @ts-ignore import Dropdown from 'react-dropdown'; + +import { transparentize } from 'polished'; import styled from '../../styled-components'; import { StyledDropdown } from '../../common-elements'; export const MimeLabel = styled.div` - border-bottom: 1px solid rgba(255, 255, 255, 0.9); + padding: 12px; + background-color: ${({ theme }) => transparentize(0.6, theme.rightPanel.backgroundColor)}; margin: 0 0 10px 0; display: block; - color: rgba(255, 255, 255, 0.8); +`; + +export const DropdownLabel = styled.span` + font-family: ${({ theme }) => theme.typography.headings.fontFamily}; + font-size: 12px; + position: absolute; + z-index: 1; + top: -11px; + left: 12px; + font-weight: ${({ theme }) => theme.typography.fontWeightBold}; + color: ${({ theme }) => transparentize(0.6, theme.rightPanel.textColor)}; +`; + +export const DropdownWrapper = styled.div` + position: relative; `; export const InvertedSimpleDropdown = styled(StyledDropdown)` margin-left: 10px; text-transform: none; font-size: 0.929em; - border-bottom: 1px solid ${({ theme }) => theme.rightPanel.textColor}; + padding: 12px; margin: 0 0 10px 0; display: block; - + background-color: ${({ theme }) => transparentize(0.6, theme.rightPanel.backgroundColor)}; + .Dropdown-control { + margin-top: 0; + } .Dropdown-control, .Dropdown-control:hover { font-size: 1em; @@ -34,6 +54,7 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)` } .Dropdown-menu { margin: 0; + margin-top: 10px; } `; @@ -42,3 +63,8 @@ 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)}; +`;