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

View File

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