mirror of
https://github.com/Redocly/redoc.git
synced 2024-12-05 06:43:43 +03:00
b74dcde42b
* 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.
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
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;
|