feat(Try it out): switch button implemented

react-switch added to the project to use in try it out component

package.json

@@ -135,10 +135,10 @@
     "styled-components": "^4.1.1"
   },
   "dependencies": {
-    "classnames": "^2.2.6",
     "ajv": "^6.4.0",
     "ajv-errors": "^1.0.0",
     "brace": "^0.11.1",
+    "classnames": "^2.2.6",
     "decko": "^1.2.0",
     "dompurify": "^1.0.11",
     "eventemitter3": "^4.0.0",
@@ -154,12 +154,13 @@
     "polished": "^3.4.1",
     "prismjs": "^1.17.1",
     "prop-types": "^15.7.2",
-    "react-dropdown": "^1.6.4",
-    "react-hot-loader": "^4.12.10",
-    "react-tabs": "^3.0.0",
-    "slugify": "^1.3.4",
     "qs": "^6.5.2",
     "react-ace": "^6.0.0",
+    "react-dropdown": "^1.6.4",
+    "react-hot-loader": "^4.12.10",
+    "react-switch": "^5.0.1",
+    "react-tabs": "^3.0.0",
+    "slugify": "^1.3.4",
     "stickyfill": "^1.1.1",
     "swagger2openapi": "^5.3.1",
     "tslib": "^1.10.0",

src/common-elements/SwitchBox.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import Switch from 'react-switch';
+import {FlexLayout} from './index';
+
+import styled from '../styled-components';
+
+const CustomFlexLayout = styled(FlexLayout)`
+  align-items: center;
+`;
+
+interface LabelProps {
+  active: boolean;
+}
+
+const Label = styled.label<LabelProps>`
+  color: ${props => props.active ? props.theme.colors.success.main : props.theme.colors.text.secondary}
+  margin-left: 10px;
+  font-size: 120%;
+`;
+
+interface TryItOutProps {
+  label: string;
+  checked: boolean;
+  onClick: () => void;
+}
+
+export class SwitchBox extends React.PureComponent<TryItOutProps> {
+  id = 'toggle-id-' + Date.now();
+  render() {
+    const { label, checked, onClick } = this.props;
+    return (
+      <CustomFlexLayout>
+        <Switch
+          id={this.id}
+          onChange={onClick}
+          checked={checked}
+          uncheckedIcon={false}
+        />
+        <Label active={checked} htmlFor={this.id}>{label}</Label>
+      </CustomFlexLayout>
+    );
+  }
+}

src/components/Operation/Operation.tsx

@@ -1,25 +1,25 @@
-import * as React from 'react';
-import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
-
 import { observer } from 'mobx-react';
+import * as React from 'react';
 
-import { Badge, ConsoleButton, DarkRightPanel, FlexLayoutReverse, H2, MiddlePanel, Row } from '../../common-elements';
+import { Badge, DarkRightPanel, H2, MiddlePanel, Row } from '../../common-elements';
-
-import { OptionsContext } from '../OptionsProvider';
 
 import { ShareLink } from '../../common-elements/linkify';
-import { ConsoleViewer } from '../Console/ConsoleViewer';
-import { Endpoint } from '../Endpoint/Endpoint';
-import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
-import { Markdown } from '../Markdown/Markdown';
-import { Parameters } from '../Parameters/Parameters';
-import { RequestSamples } from '../RequestSamples/RequestSamples';
-import { ResponsesList } from '../Responses/ResponsesList';
-import { ResponseSamples } from '../ResponseSamples/ResponseSamples';
 
 import { OperationModel as OperationType } from '../../services/models';
 import styled from '../../styled-components';
+import { ConsoleViewer } from '../Console/ConsoleViewer';
+import { Endpoint } from '../Endpoint/Endpoint';
+import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { Extensions } from '../Fields/Extensions';
+import { Markdown } from '../Markdown/Markdown';
+
+import {SwitchBox} from '../../common-elements/SwitchBox';
+import {OptionsContext } from '../OptionsProvider';
+import {Parameters } from '../Parameters/Parameters';
+import {RequestSamples } from '../RequestSamples/RequestSamples';
+import {ResponsesList } from '../Responses/ResponsesList';
+import {ResponseSamples } from '../ResponseSamples/ResponseSamples';
+import {SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
 
 const OperationRow = styled(Row)`
   backface-visibility: hidden;
@@ -62,7 +62,6 @@ export class Operation extends React.Component<OperationProps, OperationState> {
 
     const { name: summary, description, deprecated, externalDocs } = operation;
     const hasDescription = !!(description || externalDocs);
-    const consoleButtonLabel = (executeMode) ? 'Hide Console' : 'Show Console';
 
     return (
       <OptionsContext.Consumer>
@@ -74,9 +73,11 @@ export class Operation extends React.Component<OperationProps, OperationState> {
                 {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
               </H2>
               {options.enableConsole &&
-                <FlexLayoutReverse>
+                <SwitchBox
-                  <ConsoleButton onClick={this.onConsoleClick}>{consoleButtonLabel}</ConsoleButton>
+                  onClick={this.onConsoleClick}
-                </FlexLayoutReverse>
+                  checked={this.state.executeMode}
+                  label="Try it out!"
+                />
               }
               {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}
               {hasDescription && (

yarn.lock

@@ -8072,6 +8072,13 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-switch@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-5.0.1.tgz#449277f4c3aed5286fffd0f50d5cbc2a23330406"
+  integrity sha512-Pa5kvqRfX85QUCK1Jv0rxyeElbC3aNpCP5hV0LoJpU/Y6kydf0t4kRriQ6ZYA4kxWwAYk/cH51T4/sPzV9mCgQ==
+  dependencies:
+    prop-types "^15.6.2"
+
 react-tabs@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-tabs/-/react-tabs-3.0.0.tgz#60311a17c755eb6aa9b3310123e67db421605127"