added send button

This commit is contained in:
Harjeet Singh 2018-04-20 15:55:09 -07:00
parent 63847ff3b6
commit 2a7ce2b64e
4 changed files with 31 additions and 7 deletions

View File

@ -0,0 +1,14 @@
import styled, { StyledComponentClass, withProps } from '../styled-components';
export const Button = styled.button`
background: #248fb2;
border-radius: 0px;
border: none;
color: white;
font-size: 0.929em;
`;
export const SendButton = Button.extend`
background: #B0045E;
`;

View File

@ -38,3 +38,9 @@ export const Row = styled.div`
flex-direction: column; flex-direction: column;
`}; `};
`; `;
export const FlexLayout = styled.div`
align-items: flex-end;
display: flex;
width: 100%;
`;

View File

@ -33,7 +33,7 @@ export class ConsoleEditor extends React.Component<ConsoleEditorProps> {
for (let mediaType of mediaTypes) { for (let mediaType of mediaTypes) {
if (mediaType.name.indexOf('json') > -1) { if (mediaType.name.indexOf('json') > -1) {
if (mediaType.examples) { if (mediaType.examples) {
sample = mediaType.examples && mediaType.examples.default; sample = mediaType.examples && mediaType.examples.default && mediaType.examples.default.value;
} }
break; break;
} }
@ -51,12 +51,11 @@ export class ConsoleEditor extends React.Component<ConsoleEditorProps> {
*/ */
return ( return (
<div> <div>
<h3>ConsoleEditor</h3>
<AceEditor <AceEditor
tabSize={1} tabSize={1}
fontSize={10} fontSize={10}
mode="json" mode="json"
theme="monokai" theme="github"
name="request-builder-editor" name="request-builder-editor"
editorProps={{ $blockScrolling: true }} editorProps={{ $blockScrolling: true }}
value={JSON.stringify(sample, null, 2)} value={JSON.stringify(sample, null, 2)}

View File

@ -3,6 +3,8 @@ import * as React from 'react';
import { OperationModel } from '../../services/models'; import { OperationModel } from '../../services/models';
import { PayloadSamples } from '../PayloadSamples/PayloadSamples'; import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
import { SourceCodeWithCopy } from '../SourceCode/SourceCode'; import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
import { SendButton } from '../../common-elements/buttons';
import { FlexLayout } from '../../common-elements/panels';
import { ConsoleEditor } from './ConsoleEditor'; import { ConsoleEditor } from './ConsoleEditor';
export interface ConsoleViewerProps { export interface ConsoleViewerProps {
@ -30,6 +32,9 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps> {
{samples.map(sample => ( {samples.map(sample => (
<SourceCodeWithCopy lang={sample.lang} source={sample.source} /> <SourceCodeWithCopy lang={sample.lang} source={sample.source} />
))} ))}
<FlexLayout>
<SendButton>Send Request</SendButton>
</FlexLayout>
</div> </div>
); );
} }