added try it checkbox

.gitignore

@@ -33,3 +33,6 @@ cli/index.js
 .ghpages-tmp
 stats.json
 /package-lock.json
+
+//npmrc for local npm
+.npmrc

demo/.gitignore

@@ -0,0 +1 @@
+intent.json

demo/webpack.config.ts

@@ -68,6 +68,8 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
     stats: 'minimal',
   },
 
+  devtool: 'source-map',
+
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
   },

src/common-elements/index.ts

@@ -9,3 +9,5 @@ export * from './mixins';
 export * from './tabs';
 export * from './samples';
 export * from './perfect-scrollbar';
+export * from './toggle';
+export * from './input';

src/common-elements/input.tsx

@@ -0,0 +1,8 @@
+import styled, { css } from '../styled-components';
+
+export const TextField = styled.input`
+  padding: 0.5em;
+  margin: 0.5em;
+  border: 1px solid rgba(38,50,56,0.5);
+  border-radius: 3px;
+`;

src/common-elements/toggle.tsx

@@ -0,0 +1,10 @@
+import styled, { css } from '../styled-components';
+
+export const Toggle = styled.input`
+  padding: 0.5em;
+  margin: 0.5em;
+  color: palevioletred;
+  background: papayawhip;
+  border: none;
+  border-radius: 3px;
+`;

src/components/Fields/Field.tsx

@@ -11,7 +11,7 @@ import {
   PropertyNameCell,
 } from '../../common-elements/fields-layout';
 
-import { ShelfIcon } from '../../common-elements/';
+import { ShelfIcon, TextField } from '../../common-elements/';
 
 import { FieldModel } from '../../services/models';
 import { Schema, SchemaOptions } from '../Schema/Schema';
@@ -43,12 +43,12 @@ export class Field extends React.PureComponent<FieldProps> {
         {required && <RequiredLabel> required </RequiredLabel>}
       </ClickablePropertyNameCell>
     ) : (
-      <PropertyNameCell className={deprecated ? 'deprecated' : undefined}>
-        <PropertyBullet />
-        {name}
-        {required && <RequiredLabel> required </RequiredLabel>}
-      </PropertyNameCell>
-    );
+        <PropertyNameCell className={deprecated ? 'deprecated' : undefined}>
+          <PropertyBullet />
+          {name}
+          {required && <RequiredLabel> required </RequiredLabel>}
+        </PropertyNameCell>
+      );
     return (
       <>
         <tr className={isLast ? 'last ' + className : className}>
@@ -56,6 +56,9 @@ export class Field extends React.PureComponent<FieldProps> {
           <PropertyDetailsCell>
             <FieldDetails {...this.props} />
           </PropertyDetailsCell>
+          {field && field.in === 'path' &&
+            <td><TextField placeholder="foo" /></td>
+          }
         </tr>
         {field.expanded &&
           withSubSchema && (

src/components/Operation/Operation.tsx

@@ -4,7 +4,7 @@ import { SecurityRequirements } from '../SecurityRequirement/SecuirityRequiremen
 
 import { observer } from 'mobx-react';
 
-import { Badge, DarkRightPanel, H2, MiddlePanel, Row } from '../../common-elements';
+import { Badge, DarkRightPanel, H2, MiddlePanel, Row, Toggle } from '../../common-elements';
 
 import { OptionsContext } from '../OptionsProvider';
 
@@ -39,12 +39,43 @@ interface OperationProps {
   operation: OperationType;
 }
 
+export interface OperationState {
+  executeMode: boolean;
+}
+
 @observer
-export class Operation extends React.Component<OperationProps> {
+export class Operation extends React.Component<OperationProps, OperationState> {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      executeMode: false,
+    };
+  }
+
+  onTry(e) {
+    this.setState({
+      executeMode: e.target.checked
+    });
+    console.log(e.target.checked + ' ' + this.props.operation);
+  }
+
+  /*
+  activate = (item: IMenuItem) => {
+    this.props.menu.activateAndScroll(item, true);
+    setTimeout(() => {
+      if (this._updateScroll) {
+        this._updateScroll();
+      }
+    });
+  };
+  */
+
   render() {
     const { operation } = this.props;
 
     const { name: summary, description, deprecated } = operation;
+    const { executeMode } = this.state;
     return (
       <OptionsContext.Consumer>
         {options => (
@@ -54,6 +85,8 @@ export class Operation extends React.Component<OperationProps> {
                 <ShareLink href={'#' + operation.id} />
                 {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
               </H2>
+              <Toggle type="checkbox" onChange={this.onTry.bind(this)} />
+              <span>Try it out!</span>
               {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}
               {description !== undefined && <Markdown source={description} />}
               <SecurityRequirements securities={operation.security} />
@@ -62,8 +95,15 @@ export class Operation extends React.Component<OperationProps> {
             </MiddlePanel>
             <DarkRightPanel>
               {!options.pathInMiddlePanel && <Endpoint operation={operation} />}
-              <RequestSamples operation={operation} />
-              <ResponseSamples operation={operation} />
+              {executeMode &&
+                <div>Execute Mode</div>
+              }
+              {!executeMode &&
+                <RequestSamples operation={operation} />
+              }
+              {!executeMode &&
+                <ResponseSamples operation={operation} />
+              }
             </DarkRightPanel>
           </OperationRow>
         )}