Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-12 01:23:52 +00:00
Code Issues Releases Activity

toolbar: use function form of Dropzone

Browse Source
This commit is contained in:
David Lechner
2021-12-27 12:38:50 -06:00
parent eb9ea2876e
commit 11e0fefb1d
1 changed files with 80 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/toolbar/OpenFileButton.tsx
+80 -87
View File
@@ -5,7 +5,7 @@ import { Button, IRef, Intent, Spinner } from '@blueprintjs/core';
import { Tooltip2 } from '@blueprintjs/popover2';
import { useI18n } from '@shopify/react-i18n';
import React from 'react';
import Dropzone from 'react-dropzone';
import { useDropzone } from 'react-dropzone';
import { tooltipDelay } from '../app/constants';
import { TooltipId } from './i18n';
import en from './i18n.en.json';
@@ -43,94 +43,87 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
fallback: en,
});
return (
<Dropzone
accept={props.fileExtension}
multiple={false}
noClick={props.onClick !== undefined}
onDropAccepted={(acceptedFiles) => {
// should only be one file since multiple={false}
acceptedFiles.forEach((f) => {
const reader = new FileReader();
const { getRootProps, getInputProps } = useDropzone({
accept: props.fileExtension,
multiple: false,
noClick: props.onClick !== undefined,
onDropAccepted: (acceptedFiles) => {
// should only be one file since multiple={false}
acceptedFiles.forEach((f) => {
const reader = new FileReader();
reader.onabort = (): void =>
console.error('file reading was aborted');
reader.onerror = (): void =>
console.error('file reading has failed');
reader.onload = (): void => {
const binaryStr = reader.result;
if (binaryStr === null) {
throw Error('Unexpected null binaryStr');
}
if (typeof binaryStr === 'string') {
throw Error('Unexpected string binaryStr');
}
props.onFile(binaryStr);
};
reader.readAsArrayBuffer(f);
});
}}
onDropRejected={(fileRejections) => {
// should only be one file since multiple={false}
fileRejections.forEach((r) => {
props.onReject(r.file);
});
}}
>
{({ getRootProps, getInputProps }): JSX.Element => (
<Tooltip2
content={i18n.translate(
props.tooltip,
props.tooltip === TooltipId.FlashProgress
? {
percent:
props.progress === undefined
? ''
: i18n.formatPercentage(props.progress),
}
: undefined,
)}
placement="bottom"
hoverOpenDelay={tooltipDelay}
renderTarget={({
ref: tooltipRef,
isOpen: _tooltipIsOpen,
...tooltipProps
}) => (
<Button
{...getRootProps({
refKey: 'elementRef',
elementRef: tooltipRef as IRef<HTMLButtonElement>,
...tooltipProps,
intent: Intent.PRIMARY,
disabled: props.enabled === false,
style:
props.enabled === false
? { pointerEvents: 'none' }
: undefined,
// prevent focus from mouse click
onMouseDown: (e) => e.preventDefault(),
onClick: props.onClick,
})}
>
<input {...getInputProps()} />
{props.showProgress ? (
<Spinner
value={props.progress}
intent={Intent.PRIMARY}
/>
) : (
<img
src={props.icon}
alt={props.id}
style={{ pointerEvents: 'none' }}
/>
)}
</Button>
)}
/>
reader.onabort = (): void => console.error('file reading was aborted');
reader.onerror = (): void => console.error('file reading has failed');
reader.onload = (): void => {
const binaryStr = reader.result;
if (binaryStr === null) {
throw Error('Unexpected null binaryStr');
}
if (typeof binaryStr === 'string') {
throw Error('Unexpected string binaryStr');
}
props.onFile(binaryStr);
};
reader.readAsArrayBuffer(f);
});
},
onDropRejected: (fileRejections) => {
// should only be one file since multiple={false}
fileRejections.forEach((r) => {
props.onReject(r.file);
});
},
});
return (
<Tooltip2
content={i18n.translate(
props.tooltip,
props.tooltip === TooltipId.FlashProgress
? {
percent:
props.progress === undefined
? ''
: i18n.formatPercentage(props.progress),
}
: undefined,
)}
</Dropzone>
placement="bottom"
hoverOpenDelay={tooltipDelay}
renderTarget={({
ref: tooltipRef,
isOpen: _tooltipIsOpen,
...tooltipProps
}) => (
<Button
{...getRootProps({
refKey: 'elementRef',
elementRef: tooltipRef as IRef<HTMLButtonElement>,
...tooltipProps,
intent: Intent.PRIMARY,
disabled: props.enabled === false,
style:
props.enabled === false
? { pointerEvents: 'none' }
: undefined,
// prevent focus from mouse click
onMouseDown: (e) => e.preventDefault(),
onClick: props.onClick,
})}
>
<input {...getInputProps()} />
{props.showProgress ? (
<Spinner value={props.progress} intent={Intent.PRIMARY} />
) : (
<img
src={props.icon}
alt={props.id}
style={{ pointerEvents: 'none' }}
/>
)}
</Button>
)}
/>
);
};