mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-10 19:06:34 +03:00
* 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.
This commit is contained in:
parent
18f943d2b5
commit
b74dcde42b
52
demo/components/FileInput.tsx
Normal file
52
demo/components/FileInput.tsx
Normal file
|
@ -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;
|
|
@ -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 }}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue
Block a user