fix: dropdown fixes related to object description

Redocly · Jul 29, 2019 · 0504ad4 · 0504ad4
1 parent 7883fad
commit 0504ad4
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 21 deletions.
diff --git a/src/components/ObjectDescription/ObjectDescription.tsx b/src/components/ObjectDescription/ObjectDescription.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 
-import { DarkRightPanel, MiddlePanel, Row, Section } from '../../common-elements';
+import { DarkRightPanel, MiddlePanel, MimeLabel, Row, Section } from '../../common-elements';
 import { MediaTypeModel, OpenAPIParser, RedocNormalizedOptions } from '../../services';
 import styled from '../../styled-components';
 import { OpenAPIMediaType } from '../../types';
+import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel';
 import { MediaTypeSamples } from '../PayloadSamples/MediaTypeSamples';
+import { InvertedSimpleDropdown } from '../PayloadSamples/styled.elements';
 import { Schema } from '../Schema';
 
 export interface ObjectDescriptionProps {
@@ -64,13 +66,17 @@ export class ObjectDescription extends React.PureComponent<ObjectDescriptionProp
           </MiddlePanel>
           <DarkRightPanel>
             <MediaSamplesWrap>
-              <MediaTypeSamples mediaType={this.mediaModel} />
+              <MediaTypeSamples renderDropdown={this.renderDropdown} mediaType={this.mediaModel} />
             </MediaSamplesWrap>
           </DarkRightPanel>
         </Row>
       </Section>
     );
   }
+
+  private renderDropdown = props => {
+    return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />;
+  };
 }
 
 const MediaSamplesWrap = styled.div`

diff --git a/src/components/PayloadSamples/MediaTypeSamples.tsx b/src/components/PayloadSamples/MediaTypeSamples.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import styled from '../../styled-components';
+
 import { DropdownProps } from '../../common-elements';
 import { MediaTypeModel } from '../../services/models';
 import { Markdown } from '../Markdown/Markdown';
@@ -48,7 +50,7 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
       const description = example.description;
 
       return (
-        <>
+        <SamplesWrapper>
           <DropdownWrapper>
             <DropdownLabel>Example</DropdownLabel>
             {this.props.renderDropdown({
@@ -61,16 +63,20 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
             {description && <Markdown source={description} />}
             <Example example={example} mimeType={mimeType} />
           </div>
-        </>
+        </SamplesWrapper>
       );
     } else {
       const example = examples[examplesNames[0]];
       return (
-        <div>
+        <SamplesWrapper>
           {example.description && <Markdown source={example.description} />}
           <Example example={example} mimeType={mimeType} />
-        </div>
+        </SamplesWrapper>
       );
     }
   }
 }
+
+const SamplesWrapper = styled.div`
+  margin-top: 15px;
+`;
diff --git a/src/components/PayloadSamples/PayloadSamples.tsx b/src/components/PayloadSamples/PayloadSamples.tsx
@@ -2,11 +2,9 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 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 { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch';
 import { InvertedSimpleDropdown, MimeLabel } from './styled.elements';
 
 export interface PayloadSamplesProps {
@@ -24,13 +22,11 @@ export class PayloadSamples extends React.Component<PayloadSamplesProps> {
     return (
       <MediaTypesSwitch content={mimeContent} renderDropdown={this.renderDropdown} withLabel={true}>
         {mediaType => (
-          <SamplesWrapper>
-            <MediaTypeSamples
-              key="samples"
-              mediaType={mediaType}
-              renderDropdown={this.renderDropdown}
-            />
-          </SamplesWrapper>
+          <MediaTypeSamples
+            key="samples"
+            mediaType={mediaType}
+            renderDropdown={this.renderDropdown}
+          />
         )}
       </MediaTypesSwitch>
     );
@@ -40,7 +36,3 @@ export class PayloadSamples extends React.Component<PayloadSamplesProps> {
     return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />;
   };
 }
-
-const SamplesWrapper = styled.div`
-  margin-top: 15px;
-`;
diff --git a/src/components/PayloadSamples/styled.elements.ts b/src/components/PayloadSamples/styled.elements.ts
@@ -53,7 +53,7 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
   }
   .Dropdown-menu {
     margin: 0;
-    margin-top: 10px;
+    margin-top: 2px;
   }
 `;