LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

use aria-hidden for filedrop component

Browse source
This commit is contained in:
btzr-io 2021-07-13 15:31:42 -05:00
parent 6eca14f140
commit 9f18822754
1 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
ui/component/fileDrop/view.jsx
View file

@ -23,7 +23,7 @@ type Props = {
index: number, index: number,
length: number, length: number,
location: { pathname: string }, location: { pathname: string },
push: string => void, push: (string) => void,
}, },
}; };
@ -43,7 +43,7 @@ function FileDrop(props: Props) {
const navigationTimer = React.useRef(null); const navigationTimer = React.useRef(null);
// Gets respective icon given a mimetype // Gets respective icon given a mimetype
const getFileIcon = type => { const getFileIcon = (type) => {
// Not all files have a type // Not all files have a type
if (!type) return ICONS.FILE; if (!type) return ICONS.FILE;
// Detect common types // Detect common types
@ -77,10 +77,13 @@ function FileDrop(props: Props) {
}, [navigateToPublish]); }, [navigateToPublish]);
// Handle file selection // Handle file selection
const handleFileSelected = React.useCallback((selectedFile) => { const handleFileSelected = React.useCallback(
updatePublishForm({ filePath: selectedFile }); (selectedFile) => {
hideDropArea(); updatePublishForm({ filePath: selectedFile });
}, [updatePublishForm, hideDropArea]); hideDropArea();
},
[updatePublishForm, hideDropArea]
);
// Clear timers when unmounted // Clear timers when unmounted
React.useEffect(() => { React.useEffect(() => {
@ -114,12 +117,12 @@ function FileDrop(props: Props) {
React.useEffect(() => { React.useEffect(() => {
if (dropData && !files.length && (!modal || modal.id !== MODALS.FILE_SELECTION)) { if (dropData && !files.length && (!modal || modal.id !== MODALS.FILE_SELECTION)) {
getTree(dropData) getTree(dropData)
.then(entries => { .then((entries) => {
if (entries && entries.length) { if (entries && entries.length) {
setFiles(entries); setFiles(entries);
} }
}) })
.catch(error => { .catch((error) => {
setError(error || true); setError(error || true);
}); });
} }
@ -146,7 +149,7 @@ function FileDrop(props: Props) {
const show = files.length === 1 || (!target && drag && (!modal || modal.id !== MODALS.FILE_SELECTION)); const show = files.length === 1 || (!target && drag && (!modal || modal.id !== MODALS.FILE_SELECTION));
return ( return (
<div className={classnames('file-drop', show && 'file-drop--show')}> <div aria-hidden={!show} className={classnames('file-drop', show && 'file-drop--show')}>
<div className={classnames('card', 'file-drop__area')}> <div className={classnames('card', 'file-drop__area')}>
<Icon size={64} icon={icon} className={'main-icon'} /> <Icon size={64} icon={icon} className={'main-icon'} />
<p>{target ? target.name : __(`Drop here to publish!`)} </p> <p>{target ? target.name : __(`Drop here to publish!`)} </p>