{props.i18n('importFrom', { name: props.activePickerPanel.name })}
-
+ onclick={props.hideAllPanels}
+ >{props.i18n('done')}
+
{props.getPlugin(props.activePickerPanel.id).render(props.state)}
diff --git a/packages/@uppy/dashboard/src/components/PickerPanelTopBar.js b/packages/@uppy/dashboard/src/components/PickerPanelTopBar.js
index abea2bd3b9..e5fd46206a 100644
--- a/packages/@uppy/dashboard/src/components/PickerPanelTopBar.js
+++ b/packages/@uppy/dashboard/src/components/PickerPanelTopBar.js
@@ -78,36 +78,36 @@ function PanelTopBar (props) {
return (
- { // always on the left
- !props.isAllComplete
- ?
- :
- }
+ {!props.isAllComplete ? (
+
+ ) : (
+
+ )}
- { // always on the right
- allowNewUpload
- ?
- :
- }
+ {allowNewUpload ? (
+
+ ) : (
+
+ )}
)
}
diff --git a/packages/@uppy/dashboard/src/components/icons.js b/packages/@uppy/dashboard/src/components/icons.js
index 453416ef2a..ab3223c1cc 100644
--- a/packages/@uppy/dashboard/src/components/icons.js
+++ b/packages/@uppy/dashboard/src/components/icons.js
@@ -3,111 +3,143 @@ const { h } = require('preact')
// https://css-tricks.com/creating-svg-icon-system-react/
function defaultPickerIcon () {
- return
+ return (
+
+ )
}
function iconCopy () {
- return
+ return (
+
+ )
}
function iconResume () {
- return
+ return (
+
+ )
}
function iconPause () {
- return
+ return (
+
+ )
}
function localIcon () {
- return
+ return (
+
+ )
}
function iconRetry () {
- return
+ return (
+
+ )
}
function checkIcon () {
- return
+ return (
+
+ )
}
function iconAudio () {
- return
+ return (
+
+ )
}
function iconVideo () {
- return
+ return (
+
+ )
}
function iconPDF () {
- return
+ return (
+
+ )
}
function iconFile () {
- return
+ return (
+
+ )
}
function iconText () {
- return
+ return (
+
+ )
}
function iconCopyLink () {
- return
+ return (
+
+ )
}
function iconPencil () {
- return
+ return (
+
+ )
}
function iconCross () {
- return
+ return (
+
+ )
}
function iconPlus () {
- return
+ return (
+
+ )
}
module.exports = {
diff --git a/packages/@uppy/dashboard/src/utils/createSuperFocus.js b/packages/@uppy/dashboard/src/utils/createSuperFocus.js
index e5dfe17052..72c2301ed7 100644
--- a/packages/@uppy/dashboard/src/utils/createSuperFocus.js
+++ b/packages/@uppy/dashboard/src/utils/createSuperFocus.js
@@ -19,7 +19,7 @@ module.exports = function createSuperFocus () {
// [Practical check] without this line, typing in the search input in googledrive overlay won't work.
if (isFocusInOverlay && lastFocusWasOnSuperFocusableEl) return
- const superFocusableEl = overlayEl.querySelector(`[data-uppy-super-focusable]`)
+ const superFocusableEl = overlayEl.querySelector('[data-uppy-super-focusable]')
// If we are already in the topmost overlay, AND there are no super focusable elements yet, - leave focus up to the user.
// [Practical check] without this line, if you are in an empty folder in google drive, and something's uploading in the bg, - focus will be jumping to Done all the time.
if (isFocusInOverlay && !superFocusableEl) return
diff --git a/packages/@uppy/drag-drop/src/index.js b/packages/@uppy/drag-drop/src/index.js
index 98d72abe94..2697183abf 100644
--- a/packages/@uppy/drag-drop/src/index.js
+++ b/packages/@uppy/drag-drop/src/index.js
@@ -139,7 +139,8 @@ module.exports = class DragDrop extends Plugin {
name={this.opts.inputName}
multiple={restrictions.maxNumberOfFiles !== 1}
accept={restrictions.allowedFileTypes}
- onchange={this.handleInputChange} />
+ onchange={this.handleInputChange}
+ />
)
}
@@ -189,7 +190,8 @@ module.exports = class DragDrop extends Plugin {
onClick={() => this.fileInputRef.click()}
onDragOver={this.handleDragOver}
onDragLeave={this.handleDragLeave}
- onDrop={this.handleDrop} >
+ onDrop={this.handleDrop}
+ >
{this.renderHiddenFileInput()}
{this.renderArrowSvg()}
diff --git a/packages/@uppy/facebook/src/index.js b/packages/@uppy/facebook/src/index.js
index ef0d88eb76..e53b28841e 100644
--- a/packages/@uppy/facebook/src/index.js
+++ b/packages/@uppy/facebook/src/index.js
@@ -12,14 +12,20 @@ module.exports = class Facebook extends Plugin {
Provider.initPlugin(this, opts)
this.title = this.opts.title || 'Facebook'
this.icon = () => (
-
)
diff --git a/packages/@uppy/file-input/src/index.js b/packages/@uppy/file-input/src/index.js
index 5954b6459a..6fa1f2790b 100644
--- a/packages/@uppy/file-input/src/index.js
+++ b/packages/@uppy/file-input/src/index.js
@@ -90,21 +90,24 @@ module.exports = class FileInput extends Plugin {
return (
- { this.input = input }} />
+ ref={(input) => { this.input = input }}
+ />
{this.opts.pretty &&
-
- }
+ }
)
}
diff --git a/packages/@uppy/informer/src/index.js b/packages/@uppy/informer/src/index.js
index 0d2f7abf20..646ca8088a 100644
--- a/packages/@uppy/informer/src/index.js
+++ b/packages/@uppy/informer/src/index.js
@@ -30,17 +30,23 @@ module.exports = class Informer extends Plugin {
const { isHidden, message, details } = state.info
return (
-
- { props.showFilter &&
}
+ {props.showFilter &&
}
- this.props.filterQuery(e)}
- value={this.props.filterInput} />
-
- { this.props.filterInput &&
-
- }
-
+ return (
+
+
this.props.filterQuery(e)}
+ value={this.props.filterInput}
+ />
+
+ {this.props.filterInput && (
+
+ )}
+
+ )
}
}
diff --git a/packages/@uppy/provider-views/src/FooterActions.js b/packages/@uppy/provider-views/src/FooterActions.js
index fa00e654ab..d26a282f8c 100644
--- a/packages/@uppy/provider-views/src/FooterActions.js
+++ b/packages/@uppy/provider-views/src/FooterActions.js
@@ -1,14 +1,16 @@
const { h } = require('preact')
module.exports = (props) => {
- return
+ return (
+
+ )
}
diff --git a/packages/@uppy/provider-views/src/Item/components/GridLi.js b/packages/@uppy/provider-views/src/Item/components/GridLi.js
index 096b85e052..8bb98a0cae 100644
--- a/packages/@uppy/provider-views/src/Item/components/GridLi.js
+++ b/packages/@uppy/provider-views/src/Item/components/GridLi.js
@@ -2,21 +2,23 @@ const { h } = require('preact')
// it could be a
module.exports = (props) => {
- return
-
-
+ role="option"
+ aria-label={props.isChecked ? props.i18n('unselectFileNamed', { name: props.title }) : props.i18n('selectFileNamed', { name: props.title })}
+ aria-selected={props.isChecked}
+ aria-disabled={props.isDisabled}
+ data-uppy-super-focusable
+ >
+ {props.itemIconEl}
+ {props.showTitles && props.title}
+
+
+ )
}
diff --git a/packages/@uppy/provider-views/src/Item/components/ItemIcon.js b/packages/@uppy/provider-views/src/Item/components/ItemIcon.js
index 4252220231..406723f60d 100644
--- a/packages/@uppy/provider-views/src/Item/components/ItemIcon.js
+++ b/packages/@uppy/provider-views/src/Item/components/ItemIcon.js
@@ -1,21 +1,40 @@
const { h } = require('preact')
+function FileIcon () {
+ return (
+
+ )
+}
+
+function FolderIcon () {
+ return (
+
+ )
+}
+
+function VideoIcon () {
+ return (
+
+ )
+}
+
module.exports = (props) => {
if (props.itemIconString === null) return
switch (props.itemIconString) {
case 'file':
- return
+ return
case 'folder':
- return
+ return
case 'video':
- return
+ return
default:
return
}
diff --git a/packages/@uppy/provider-views/src/Item/components/ListLi.js b/packages/@uppy/provider-views/src/Item/components/ListLi.js
index 4716772513..844615e258 100644
--- a/packages/@uppy/provider-views/src/Item/components/ListLi.js
+++ b/packages/@uppy/provider-views/src/Item/components/ListLi.js
@@ -23,29 +23,30 @@ const getAriaLabelOfCheckbox = (props) => {
// + checkbox (selects file)
// + file name (selects file)
module.exports = (props) => {
- return
-
- id={props.id}
- role="option"
- aria-label={getAriaLabelOfCheckbox(props)}
- aria-selected={props.isChecked}
- aria-disabled={props.isDisabled}
- data-uppy-super-focusable
- />
+ return (
+
+
+ id={props.id}
+ role="option"
+ aria-label={getAriaLabelOfCheckbox(props)}
+ aria-selected={props.isChecked}
+ aria-disabled={props.isDisabled}
+ data-uppy-super-focusable
+ />
- {
- props.type === 'file'
+ {props.type === 'file' ? (
// label for a checkbox
- ?
+ )}
+
+ )
}
diff --git a/packages/@uppy/provider-views/src/ItemList.js b/packages/@uppy/provider-views/src/ItemList.js
index 1f88b0fba2..1d773d0649 100644
--- a/packages/@uppy/provider-views/src/ItemList.js
+++ b/packages/@uppy/provider-views/src/ItemList.js
@@ -20,11 +20,13 @@ module.exports = (props) => {
return (
-
not focusable for firefox
- tabindex="-1">
+ tabindex="-1"
+ >
{props.folders.map(folder =>
Item({
...getSharedProps(folder, props),
diff --git a/packages/@uppy/provider-views/src/Loader.js b/packages/@uppy/provider-views/src/Loader.js
index 03b8fd6475..83d629ae2a 100644
--- a/packages/@uppy/provider-views/src/Loader.js
+++ b/packages/@uppy/provider-views/src/Loader.js
@@ -1,7 +1,9 @@
const { h } = require('preact')
module.exports = (props) => {
- return
- {props.i18n('loading')}
-
+ return (
+
+ {props.i18n('loading')}
+
+ )
}
diff --git a/packages/@uppy/provider-views/src/index.js b/packages/@uppy/provider-views/src/index.js
index 63a644bde9..0b22685a4e 100644
--- a/packages/@uppy/provider-views/src/index.js
+++ b/packages/@uppy/provider-views/src/index.js
@@ -41,7 +41,8 @@ module.exports = class ProviderView {
static VERSION = require('../package.json').version
/**
- * @param {object} instance of the plugin
+ * @param {object} plugin instance of the plugin
+ * @param {object} opts
*/
constructor (plugin, opts) {
this.plugin = plugin
@@ -586,7 +587,8 @@ module.exports = class ProviderView {
pluginIcon={this.plugin.icon}
handleAuth={this.handleAuth}
i18n={this.plugin.uppy.i18n}
- i18nArray={this.plugin.uppy.i18nArray} />
+ i18nArray={this.plugin.uppy.i18nArray}
+ />
)
}
diff --git a/packages/@uppy/react-native/file-picker/index.js b/packages/@uppy/react-native/file-picker/index.js
index 27b811d4fd..afc81c5273 100644
--- a/packages/@uppy/react-native/file-picker/index.js
+++ b/packages/@uppy/react-native/file-picker/index.js
@@ -4,7 +4,8 @@ import {
Modal,
Text,
ScrollView,
- TouchableOpacity } from 'react-native'
+ TouchableOpacity
+} from 'react-native'
import takePicture from './takePicture'
import selectImage from './selectImage'
import selectDocument from './selectDocument'
@@ -104,20 +105,23 @@ export default class UppyReactNativeFilePicker extends React.Component {
renderSourceList () {
return (
+ contentContainerStyle={styles.providerList}
+ >
{this.state.providers.map((item, index) => {
return (
this.chooseProvider(item.id)}>
+ onPress={ev => this.chooseProvider(item.id)}
+ >
{item.title}
)
})}
this.props.onRequestClose()}>
+ onPress={ev => this.props.onRequestClose()}
+ >
Cancel
@@ -131,9 +135,10 @@ export default class UppyReactNativeFilePicker extends React.Component {
transparent={false}
visible={this.props.show}
supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
- onRequestClose={this.props.onRequestClose}>
- {this.state.openProvider
- ?
+ {this.state.openProvider ? (
+ {
@@ -142,9 +147,11 @@ export default class UppyReactNativeFilePicker extends React.Component {
})
this.props.onRequestClose()
}}
- {...this.props} />
- : this.renderSourceList()
- }
+ {...this.props}
+ />
+ ) : (
+ this.renderSourceList()
+ )}
)
}
diff --git a/packages/@uppy/react-native/file-picker/instagram.js b/packages/@uppy/react-native/file-picker/instagram.js
index 1805b68ef6..2372dc80a6 100644
--- a/packages/@uppy/react-native/file-picker/instagram.js
+++ b/packages/@uppy/react-native/file-picker/instagram.js
@@ -4,7 +4,8 @@ import {
View,
FlatList,
Image,
- WebView } from 'react-native'
+ WebView
+} from 'react-native'
import Instagram from '@uppy/instagram'
function getQueryParamValueFromUrl (name, url) {
@@ -78,18 +79,20 @@ export default class UppyRNInstagram extends React.Component {
renderInstagram () {
console.log(this.state.authUrl)
- return {
- const url = ev.url
- const token = getQueryParamValueFromUrl('uppyAuthToken', url)
- console.log(token)
- this.plugin.provider.setAuthToken(token)
- console.log(this.plugin.provider.list('recent'))
- // return this.renderGrid(this.state.instagram.items)
- }}
- />
+ return (
+ {
+ const url = ev.url
+ const token = getQueryParamValueFromUrl('uppyAuthToken', url)
+ console.log(token)
+ this.plugin.provider.setAuthToken(token)
+ console.log(this.plugin.provider.list('recent'))
+ // return this.renderGrid(this.state.instagram.items)
+ }}
+ />
+ )
}
render () {
diff --git a/packages/@uppy/react-native/file-picker/url.js b/packages/@uppy/react-native/file-picker/url.js
index d6dc3de8dc..a836a97850 100644
--- a/packages/@uppy/react-native/file-picker/url.js
+++ b/packages/@uppy/react-native/file-picker/url.js
@@ -5,7 +5,8 @@ import {
TouchableOpacity,
Text,
TextInput,
- View } from 'react-native'
+ View
+} from 'react-native'
import Url from '@uppy/url'
export default class UppyRNUrl extends React.Component {
@@ -58,12 +59,14 @@ export default class UppyRNUrl extends React.Component {
/>
+ onPress={this.onPressImport}
+ >
Import
this.props.onDone()}>
+ onPress={ev => this.props.onDone()}
+ >
Cancel
diff --git a/packages/@uppy/redux-dev-tools/src/index.js b/packages/@uppy/redux-dev-tools/src/index.js
index a44f00425d..fe6673f912 100644
--- a/packages/@uppy/redux-dev-tools/src/index.js
+++ b/packages/@uppy/redux-dev-tools/src/index.js
@@ -40,11 +40,12 @@ module.exports = class ReduxDevTools extends Plugin {
case 'RESET':
this.uppy.reset()
return
- case 'IMPORT_STATE':
+ case 'IMPORT_STATE': {
const computedStates = message.payload.nextLiftedState.computedStates
this.uppy.store.state = Object.assign({}, this.uppy.getState(), computedStates[computedStates.length - 1].state)
this.uppy.updateAll(this.uppy.getState())
return
+ }
case 'JUMP_TO_STATE':
case 'JUMP_TO_ACTION':
this.uppy.store.state = Object.assign({}, this.uppy.getState(), JSON.parse(message.state))
diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js
index 55edf8141a..2750f68645 100644
--- a/packages/@uppy/status-bar/src/StatusBar.js
+++ b/packages/@uppy/status-bar/src/StatusBar.js
@@ -52,7 +52,8 @@ function togglePauseResume (props) {
module.exports = (props) => {
props = props || {}
- const { newFiles,
+ const {
+ newFiles,
allowNewUpload,
isUploadInProgress,
isAllPaused,
@@ -61,7 +62,8 @@ module.exports = (props) => {
hideUploadButton,
hidePauseResumeButton,
hideCancelButton,
- hideRetryButton } = props
+ hideRetryButton
+ } = props
const uploadState = props.uploadState
@@ -120,18 +122,20 @@ module.exports = (props) => {
return (
-
+ aria-valuenow={progressValue}
+ />
{progressBarContent}
- { showUploadBtn ?
: null }
- { showRetryBtn ?
: null }
- { showPauseResumeBtn ?
: null }
- { showCancelBtn ?
: null }
+ {showUploadBtn ?
: null}
+ {showRetryBtn ?
: null}
+ {showPauseResumeBtn ?
: null}
+ {showCancelBtn ?
: null}