forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-05-26 23:26:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactored UploadMenu component from class-based to functional

Browse Source
This commit is contained in:
Przemek Wiech
2021-11-02 18:00:04 +01:00
parent 0386655fe0
commit 60aa526e62
1 changed files with 32 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/menu/upload_menu.tsx
View File

@@ -1,11 +1,11 @@
import * as queryString from 'query-string'; import * as queryString from 'query-string';
import * as React from 'react';
import md5 from 'md5'; import md5 from 'md5';
import {analyticsEvent} from '../util/analytics'; import {analyticsEvent} from '../util/analytics';
import {Dropdown, Icon, Menu} from 'semantic-ui-react'; import {Dropdown, Icon, Menu} from 'semantic-ui-react';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import {MenuType} from './menu_item'; import {MenuType} from './menu_item';
import {RouteComponentProps} from 'react-router-dom'; import {RouteComponentProps} from 'react-router-dom';
import {SyntheticEvent} from 'react';
function loadFileAsText(file: File): Promise<string> { function loadFileAsText(file: File): Promise<string> {
return new Promise((resolve) => { return new Promise((resolve) => {
@@ -27,8 +27,8 @@ interface Props {
} }
/** Displays and handles the "Open file" menu. */ /** Displays and handles the "Open file" menu. */
export class UploadMenu extends React.Component<RouteComponentProps & Props> { export function UploadMenu(props: RouteComponentProps & Props) {
private async handleUpload(event: React.SyntheticEvent<HTMLInputElement>) { async function handleUpload(event: SyntheticEvent<HTMLInputElement>) {
const files = (event.target as HTMLInputElement).files; const files = (event.target as HTMLInputElement).files;
if (!files || !files.length) { if (!files || !files.length) {
return; return;
@@ -68,11 +68,9 @@ export class UploadMenu extends React.Component<RouteComponentProps & Props> {
// Use history.replace() when reuploading the same file and history.push() when loading // Use history.replace() when reuploading the same file and history.push() when loading
// a new file. // a new file.
const search = queryString.parse(this.props.location.search); const search = queryString.parse(props.location.search);
const historyPush = const historyPush =
search.file === hash search.file === hash ? props.history.replace : props.history.push;
? this.props.history.replace
: this.props.history.push;
historyPush({ historyPush({
pathname: '/view', pathname: '/view',
@@ -81,33 +79,31 @@ export class UploadMenu extends React.Component<RouteComponentProps & Props> {
}); });
} }
render() { const content = (
const content = ( <>
<> <Icon name="folder open" />
<Icon name="folder open" /> <FormattedMessage id="menu.open_file" defaultMessage="Open file" />
<FormattedMessage id="menu.open_file" defaultMessage="Open file" /> </>
</> );
); return (
return ( <>
<> {props.menuType === MenuType.Menu ? (
{this.props.menuType === MenuType.Menu ? ( <label htmlFor="fileInput">
<label htmlFor="fileInput"> <Menu.Item as="a">{content}</Menu.Item>
<Menu.Item as="a">{content}</Menu.Item> </label>
</label> ) : (
) : ( <Dropdown.Item as="label" htmlFor="fileInput">
<Dropdown.Item as="label" htmlFor="fileInput"> {content}
{content} </Dropdown.Item>
</Dropdown.Item> )}
)} <input
<input className="hidden"
className="hidden" type="file"
type="file" accept=".ged,image/*"
accept=".ged,image/*" id="fileInput"
id="fileInput" multiple
multiple onChange={handleUpload}
onChange={(e) => this.handleUpload(e)} />
/> </>
</> );
);
}
} }