feat(#1251): Add file selector to demo application (#1859)

* feat(#1251): Add file selector to demo application

This PR should fix the request to add a file selector to the demo application see issue #1251 .

* refactor(): Remove function, use it implicit

* refactor(): Add interface props

* refactor(): Update method usage

use regular func as a Component declaration and the arrow func as a handler inside the component.

demo/components/FileInput.tsx

@@ -0,0 +1,52 @@
+import * as yaml from 'js-yaml';
+import * as React from 'react';
+import { ChangeEvent, RefObject, useRef } from 'react';
+import styled from '../../src/styled-components';
+
+const Button = styled.button`
+  background-color: #fff;
+  color: #333;
+  padding: 2px 10px;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid #ccc;
+  font-size: 16px;
+  height: 28px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 1;
+  outline: none;
+  white-space: nowrap;
+  @media (max-width: 699px) {
+    display: none;
+  }
+`;
+
+function FileInput(props: { onUpload }) {
+  const hiddenFileInput: RefObject<HTMLInputElement> = useRef<HTMLInputElement>(null);
+
+  const handleClick = () => {
+    if (hiddenFileInput && hiddenFileInput.current) {
+      hiddenFileInput.current.click();
+    }
+  };
+
+  const uploadFile = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = (event.target as HTMLInputElement).files![0];
+    const reader = new FileReader();
+    reader.onload = () => {
+      props.onUpload(yaml.load(reader.result));
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <span>
+      <Button onClick={handleClick}>Upload a file</Button>
+      <input type="file" style={{ display: 'none' }} onChange={uploadFile} ref={hiddenFileInput} />
+    </span>
+  );
+}
+
+export default FileInput;

demo/index.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { resolve as urlResolve } from 'url';
 import { RedocStandalone } from '../src';
 import ComboBox from './ComboBox';
+import FileInput from './components/FileInput';
 
 const DEFAULT_SPEC = 'openapi.yaml';
 const NEW_VERSION_SPEC = 'openapi-3-1.yaml';
@@ -22,7 +23,7 @@ const demos = [
 
 class DemoApp extends React.Component<
   {},
-  { specUrl: string; dropdownOpen: boolean; cors: boolean }
+  { spec: object | undefined; specUrl: string; dropdownOpen: boolean; cors: boolean }
 > {
   constructor(props) {
     super(props);
@@ -40,15 +41,24 @@ class DemoApp extends React.Component<
     }
 
     this.state = {
+      spec: undefined,
       specUrl: url,
       dropdownOpen: false,
       cors,
     };
   }
 
+  handleUploadFile = (spec: object) => {
+    this.setState({
+      spec,
+      specUrl: '',
+    });
+  };
+
   handleChange = (url: string) => {
     if (url === NEW_VERSION_SPEC) {
-      this.setState({ cors: false })
+      this.setState({ cors: false });
+      0;
     }
     this.setState({
       specUrl: url,
@@ -90,6 +100,7 @@ class DemoApp extends React.Component<
             />
           </a>
           <ControlsContainer>
+            <FileInput onUpload={this.handleUploadFile} />
             <ComboBox
               placeholder={'URL to a spec to try'}
               options={demos}
@@ -110,6 +121,7 @@ class DemoApp extends React.Component<
           />
         </Heading>
         <RedocStandalone
+          spec={this.state.spec}
           specUrl={proxiedUrl}
           options={{ scrollYOffset: 'nav', untrustedSpec: true }}
         />