`experimental` will be moved to a separate branch

src/experimental/core/ReduxCoreDraft.js

@@ -1,24 +0,0 @@
-import { createStore, combineReducers } from 'redux'
-
-export default class Core {
-  constructor (opts) {
-    this.opts = opts
-  }
-
-  parseFiles (files) {
-    // parse file or files
-  }
-
-  use (Plugin, opts) {
-    // ... is same thing as using Object.assign
-    this.reducers = combineReducers({
-    //   [plugin.id]: plugin.reducer,
-    //   ...this.reducers
-    })
-  }
-
-  init () {
-    this.store = createStore(this.reducers)
-    this.dispatch = this.store.dispatch
-  }
-}

src/experimental/plugins/DragDrop.js

@@ -1,60 +0,0 @@
-const DRAG_DROP_SUPPORTED = 'DRAG_DROP_SUPPORTED'
-
-/**
- * Drag & Drop plugin
- *
- */
-export default class DragDrop {
-  constructor (opts) {
-    // Bind `this` to class methods
-    this.checkDragDropSupport = this.checkDragDropSupport.bind(this)
-  }
-
-  getInitialState () {
-    return {
-      dragDropSupported: this.checkDragDropSupport()
-    }
-  }
-
-  reducer (state = this.getInitialState(), action) {
-    switch (action.type) {
-      case DRAG_DROP_SUPPORTED:
-        return {
-          dragDropSupported: action.payload.dragDropSupported
-        }
-    }
-  }
-
-  /**
-   * Checks if the browser supports Drag & Drop (not supported on mobile devices, for example).
-   * @return {Boolean} true if supported, false otherwise
-   */
-  checkDragDropSupport () {
-    const div = document.createElement('div')
-
-    if (!('draggable' in div) || !('ondragstart' in div && 'ondrop' in div)) {
-      return false
-    }
-
-    if (!('FormData' in window)) {
-      return false
-    }
-
-    if (!('FileReader' in window)) {
-      return false
-    }
-
-    return true
-  }
-}
-
-DragDrop.actions = {
-  checkDragDropSupport () {
-    return {
-      type: 'DRAG_DROP_SUPPORTED',
-      payload: {
-        dragDropSupported: this.checkDragDropSupport()
-      }
-    }
-  }
-}

src/experimental/plugins/Informer.js

@@ -1,62 +0,0 @@
-/**
- * Informer
- * Shows rad message bubbles
- * used like this: `bus.emit('informer', 'hello world', 'info', 5000)`
- * or for errors: `bus.emit('informer', 'Error uploading img.jpg', 'error', 5000)`
- *
- */
-
-const SHOW_INFORMER = 'SHOW_INFORMER'
-const HIDE_INFORMER = 'HIDE_INFORMER'
-
-export default class Informer {
-  constructor (opts) {
-    // merge default options with the ones set by user
-    this.opts = opts
-
-    this.getDefaultState = this.getDefaultState.bind(this)
-    this.reducer = this.reducer.bind(this)
-  }
-
-  getInitialState () {
-    return {
-      isHidden: true,
-      msg: '',
-      duration: 0
-    }
-  }
-
-  reducer (state = this.getInitialState(), action) {
-    switch (action.type) {
-      case SHOW_INFORMER:
-        return {
-          isHidden: false,
-          msg: action.payload.msg,
-          duration: action.payload.duration
-        }
-      case HIDE_INFORMER:
-        return {
-          isHidden: true
-        }
-      default:
-        return state
-    }
-  }
-}
-
-Informer.actions = {
-  show (msg, type, duration) {
-    return {
-      type: 'SHOW_INFORMER',
-      payload: {
-        msg,
-        duration
-      }
-    }
-  },
-  hide () {
-    return {
-      type: 'HIDE_INFORMER'
-    }
-  }
-}

src/experimental/plugins/Remote.js

@@ -1,77 +0,0 @@
-import { Remote as RemoteBase } from 'uppy-base'
-
-const REMOTE_AUTH = 'REMOTE_AUTH'
-const REMOTE_LIST = 'REMOTE_LIST'
-const REMOTE_LOGOUT = 'REMOTE_LOGOUT'
-
-class Remote extends RemoteBase {
-  constructor (opts) {
-    super(opts)
-    this.opts = opts
-  }
-
-  reducer (state = this.getInitialState(), action) {
-    const { payload, type } = action
-
-    // if this isn't the right Remote plugin, just return state
-    if (payload.source !== this.id) {
-      return state
-    }
-
-    switch (type) {
-      case REMOTE_AUTH:
-        return Object.assign({}, state, {
-          authed: payload.authed
-        })
-      case REMOTE_LIST:
-        return Object.assign({}, state, {
-          files: payload.files
-        })
-      case REMOTE_LOGOUT:
-        return payload.result.ok ? this.getInitialState() : state
-      default:
-        return state
-    }
-  }
-}
-
-Remote.actions = {
-  auth () {
-    return this.auth()
-    .then((authed) => {
-      return {
-        type: REMOTE_AUTH,
-        payload: {
-          source: this.id,
-          authed
-        }
-      }
-    })
-  },
-  list (directory) {
-    return this.list(directory)
-    .then((files) => {
-      return {
-        type: REMOTE_LIST,
-        payload: {
-          source: this.id,
-          files
-        }
-      }
-    })
-  },
-  logout () {
-    return this.logout()
-    .then((result) => {
-      return {
-        type: REMOTE_LOGOUT,
-        payload: {
-          source: this.id,
-          result
-        }
-      }
-    })
-  }
-}
-
-export default Remote

src/experimental/ui/Dashboard/Dashboard.js

@@ -1,141 +0,0 @@
-import html from '../../core/html'
-import FileList from './FileList'
-import Tabs from './Tabs'
-import FileCard from './FileCard'
-import { isTouchDevice, toArray } from '../../core/Utils'
-import { closeIcon } from './icons'
-
-export default function Dashboard (props) {
-  // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
-
-  const state = props.state
-  const totalProgress = state.totalProgress
-  const files = state.files
-  const modal = state.modal
-
-  const acquirers = modal.targets.filter((target) => {
-    return target.type === 'acquirer'
-  })
-
-  const progressindicators = modal.targets.filter((target) => {
-    return target.type === 'progressindicator'
-  })
-
-  const removeFile = (fileID) => {
-    props.bus.emit('core:file-remove', fileID)
-  }
-
-  const startUpload = (ev) => {
-    props.bus.emit('core:upload')
-  }
-
-  const pauseUpload = (fileID) => {
-    props.bus.emit('core:upload-pause', fileID)
-  }
-
-  const showFileCard = (fileID) => {
-    props.bus.emit('dashboard:file-card', fileID)
-  }
-
-  const fileCardDone = (meta, fileID) => {
-    props.bus.emit('core:update-meta', meta, fileID)
-    props.bus.emit('dashboard:file-card')
-  }
-
-  const info = (text, type, duration) => {
-    props.bus.emit('informer', text, type, duration)
-  }
-
-  const localInputChange = (ev) => {
-    ev.preventDefault()
-
-    const files = toArray(ev.target.files)
-
-    files.forEach((file) => {
-      props.bus.emit('core:file-add', {
-        source: props.id,
-        name: file.name,
-        type: file.type,
-        data: file
-      })
-    })
-  }
-
-  return html`<div class="Uppy UppyTheme--default UppyDashboard
-                          ${isTouchDevice() ? 'Uppy--isTouchDevice' : ''}
-                          ${!props.inline ? 'UppyDashboard--modal' : ''}"
-                   aria-hidden="${props.inline ? 'false' : modal.isHidden}"
-                   aria-label="${!props.inline
-                                 ? props.i18n('dashboardWindowTitle')
-                                 : props.i18n('dashboardTitle')}"
-                   role="dialog"
-                   onpaste=${props.onPaste}>
-
-    <div class="UppyDashboard-overlay"
-         onclick=${props.hideModal}></div>
-
-    <button class="UppyDashboard-close"
-            aria-label="${props.i18n('closeModal')}"
-            title="${props.i18n('closeModal')}"
-            onclick=${props.hideModal}>${closeIcon()}</button>
-
-    <div class="UppyDashboard-inner" tabindex="0">
-      <div class="UppyDashboard-innerWrap">
-
-        ${Tabs({
-          localInputChange: localInputChange,
-          acquirers: acquirers,
-          container: props.container,
-          panelSelectorPrefix: props.panelSelectorPrefix,
-          showPanel: props.showPanel,
-          i18n: props.i18n
-        })}
-
-        ${FileCard({
-          files: files,
-          fileCardFor: modal.fileCardFor,
-          done: fileCardDone,
-          metaFields: state.metaFields,
-          log: props.log,
-          i18n: props.i18n
-        })}
-
-        ${FileList({
-          files: files,
-          showFileCard: showFileCard,
-          showProgressDetails: props.showProgressDetails,
-          totalProgress: totalProgress,
-          info: info,
-          i18n: props.i18n,
-          log: props.log,
-          removeFile: removeFile,
-          pauseAll: props.pauseAll,
-          resumeAll: props.resumeAll,
-          pauseUpload: pauseUpload,
-          startUpload: startUpload
-        })}
-
-        ${acquirers.map((target) => {
-          return html`<div class="UppyDashboardContent-panel"
-                           id="${props.panelSelectorPrefix}--${target.id}"
-                           role="tabpanel"
-                           aria-hidden="${target.isHidden}">
-             <div class="UppyDashboardContent-bar">
-               <h2 class="UppyDashboardContent-title">${props.i18n('importFrom')} ${target.name}</h2>
-               <button class="UppyDashboardContent-back"
-                       onclick=${props.hideAllPanels}>${props.i18n('done')}</button>
-             </div>
-            ${target.render(state)}
-          </div>`
-        })}
-
-        <div class="UppyDashboard-progressindicators">
-          ${progressindicators.map((target) => {
-            return target.render(state)
-          })}
-        </div>
-
-      </div>
-    </div>
-  </div>`
-}

src/experimental/ui/Dashboard/FileItem.js

@@ -1,136 +0,0 @@
-import html from '../../core/html'
-import cx from 'classnames'
-import { getETA,
-         getSpeed,
-         prettyETA,
-         getFileNameAndExtension,
-         truncateString,
-         copyToClipboard } from '../../core/Utils'
-import prettyBytes from 'pretty-bytes'
-import FileItemProgress from './FileItemProgress'
-import { removeIcon, iconText, iconFile, iconAudio, iconEdit, iconCopy } from './icons'
-
-function getIconByMime (fileTypeGeneral) {
-  switch (fileTypeGeneral) {
-    case 'text':
-      return iconText()
-    case 'audio':
-      return iconAudio()
-    default:
-      return iconFile()
-  }
-}
-
-export default function fileItem (props) {
-  const file = props.file
-
-  const isUploaded = file.progress.uploadComplete
-  const uploadInProgressOrComplete = file.progress.uploadStarted
-  const uploadInProgress = file.progress.uploadStarted && !file.progress.uploadComplete
-  const isPaused = file.isPaused || false
-
-  const fileName = getFileNameAndExtension(file.meta.name)[0]
-  const truncatedFileName = truncateString(fileName, 15)
-
-  const itemClasses = cx({
-    'UppyDashboardItem': true,
-    'is-inprogress': uploadInProgress,
-    'is-complete': isUploaded,
-    'is-paused': isPaused
-  })
-
-  // TODO:
-  // maybe pull button onclick to own function
-  // declutter showProgressDetails ternary
-
-  return html`
-    <li
-      class=${itemClasses}
-      id="uppy_${file.id}"
-      title="${file.meta.name}">
-      <div class="UppyDashboardItem-preview">
-        ${file.preview
-          ? html`<img alt="${file.name}" src="${file.preview}">`
-          : getIconByMime(file.type.general)
-        }
-        <div class="UppyDashboardItem-progress">
-          <button
-            class="UppyDashboardItem-progressBtn"
-            title="${isUploaded ? 'upload complete' : file.isPaused ? 'resume upload' : 'pause upload'}"
-            onclick=${() => {
-              if (isUploaded) return
-              props.pauseUpload(file.id)
-            }}>
-            ${FileItemProgress({
-              progress: file.progress.percentage,
-              fileID: file.id
-            })}
-          </button>
-          ${props.showProgressDetails
-            ? html`
-              <div class="UppyDashboardItem-progressInfo"
-                title="${props.i18n('localDisk')}"
-                aria-label="${props.i18n('localDisk')}">
-                ${!file.isPaused && !isUploaded
-                  ? html`<span>${prettyETA(getETA(file.progress))} ・ ↑ ${prettyBytes(getSpeed(file.progress))}/s</span>`
-                  : null
-                }
-              </div>
-            `
-            : null
-          }
-        </div>
-      </div>
-      <div class="UppyDashboardItem-info">
-        <h4 class="UppyDashboardItem-name" title="${fileName}">
-          ${file.uploadURL
-            ? html`<a href="${file.uploadURL}" target="_blank">
-                ${file.extension ? truncatedFileName + '.' + file.extension : truncatedFileName}
-              </a>`
-            : file.extension ? truncatedFileName + '.' + file.extension : truncatedFileName
-          }
-        </h4>
-        <div class="UppyDashboardItem-status">
-          <span class="UppyDashboardItem-statusSize">${file.data.size ? prettyBytes(file.data.size) : '?'}</span>
-        </div>
-        ${!uploadInProgressOrComplete
-          ? html`
-            <button class="UppyDashboardItem-edit"
-              aria-label="Edit file"
-              title="Edit file"
-              onclick=${(e) => props.showFileCard(file.id)}>
-              ${iconEdit()}
-            </button>
-          `
-          : null
-        }
-        ${file.uploadURL ? html`
-          <button class="UppyDashboardItem-copyLink"
-            aria-label="Copy link"
-            title="Copy link"
-            onclick=${() => {
-              copyToClipboard(file.uploadURL, props.i18n('copyLinkToClipboardFallback'))
-              .then(() => {
-                props.log('Link copied to clipboard.')
-                props.info(props.i18n('copyLinkToClipboardSuccess'), 'info', 3000)
-              })
-              .catch(props.log)
-            }}>${iconCopy()}</button>`
-        : null
-        }
-      </div>
-      <div class="UppyDashboardItem-action">
-        ${!isUploaded ? html`
-          <button class="UppyDashboardItem-remove"
-            aria-label="Remove file"
-            title="Remove file"
-            onclick=${() => props.removeFile(file.id)}>
-            ${removeIcon()}
-          </button>
-        `
-        : null
-        }
-      </div>
-    </li>
-  `
-}

src/experimental/ui/Dashboard/FileItemProgress.js

@@ -1,21 +0,0 @@
-import html from '../../core/html'
-
-// http://codepen.io/Harkko/pen/rVxvNM
-// https://gist.github.com/eswak/ad4ea57bcd5ff7aa5d42
-
-export default function (props) {
-  return html`
-    <svg width="70" height="70" viewBox="0 0 36 36" class="UppyIcon UppyIcon-progressCircle">
-      <g class="progress-group">
-        <circle r="15" cx="18" cy="18" stroke-width="2" fill="none" class="bg"/>
-        <circle r="15" cx="18" cy="18" transform="rotate(-90, 18, 18)" stroke-width="2" fill="none" stroke-dasharray="100" stroke-dashoffset="${100 - props.progress || 100}" class="progress"/>
-      </g>
-      <polygon transform="translate(3, 3)" points="12 20 12 10 20 15" class="play"/>
-      <g transform="translate(14.5, 13)" class="pause">
-        <rect x="0" y="0" width="2" height="10" rx="0" />
-        <rect x="5" y="0" width="2" height="10" rx="0" />
-      </g>
-      <polygon transform="translate(2, 3)" points="14 22.5 7 15.2457065 8.99985857 13.1732815 14 18.3547104 22.9729883 9 25 11.1005634" class="check"/>
-    </svg>
-  `
-}

src/experimental/ui/Dashboard/FileList.js

@@ -1,137 +0,0 @@
-import html from '../../core/html'
-import prettyBytes from 'pretty-bytes'
-import FileItem from './FileItem'
-import ProgressCircle from './ProgressCircle'
-import StatusBar from './StatusBar'
-import { getSpeed, getETA, prettyETA } from '../../core/Utils'
-import { dashboardBgIcon,
-         uploadIcon } from './icons'
-
-function getTotalSpeed (files) {
-  let totalSpeed = 0
-  files.forEach((file) => {
-    totalSpeed = totalSpeed + getSpeed(file.progress)
-  })
-  return totalSpeed
-}
-
-function getTotalETA (files) {
-  let totalSeconds = 0
-
-  files.forEach((file) => {
-    totalSeconds = totalSeconds + getETA(file.progress)
-  })
-
-  return totalSeconds
-}
-
-export default (props) => {
-  const files = props.files
-
-  const newFiles = Object.keys(files).filter((file) => {
-    return !files[file].progress.uploadStarted
-  })
-  const uploadStartedFiles = Object.keys(files).filter((file) => {
-    return files[file].progress.uploadStarted
-  })
-  const completeFiles = Object.keys(files).filter((file) => {
-    return files[file].progress.uploadComplete
-  })
-  const inProgressFiles = Object.keys(files).filter((file) => {
-    return !files[file].progress.uploadComplete &&
-           files[file].progress.uploadStarted &&
-           !files[file].isPaused
-  })
-
-  let inProgressFilesArray = []
-  inProgressFiles.forEach((file) => {
-    inProgressFilesArray.push(files[file])
-  })
-
-  const totalSpeed = prettyBytes(getTotalSpeed(inProgressFilesArray))
-  const totalETA = prettyETA(getTotalETA(inProgressFilesArray))
-
-  const uploadStartedFilesCount = uploadStartedFiles.length
-  const completeFilesCount = completeFiles.length
-  const inProgressFilesCount = inProgressFiles.length
-  const isAllComplete = props.totalProgress === 100
-  const isAllPaused = inProgressFilesCount === 0 && !isAllComplete
-  const totalFileCount = Object.keys(files).length
-  const newFileCount = newFiles.length
-
-  const togglePauseResume = () => {
-    if (isAllComplete) return
-
-    if (isAllPaused) {
-      return props.resumeAll()
-    }
-
-    return props.pauseAll()
-  }
-
-  return html`<div class="UppyDashboard-files">
-    <ul class="UppyDashboard-filesInner">
-      ${totalFileCount === 0
-        ? html`<div class="UppyDashboard-bgIcon">${dashboardBgIcon()}</div>`
-        : null
-      }
-      ${Object.keys(props.files).map((fileID) => {
-        return FileItem({
-          file: props.files[fileID],
-          showFileCard: props.showFileCard,
-          showProgressDetails: props.showProgressDetails,
-          info: props.info,
-          log: props.log,
-          i18n: props.i18n,
-          removeFile: props.removeFile,
-          pauseUpload: props.pauseUpload
-        })
-      })}
-    </ul>
-    <div class="UppyDashboard-actions">
-      ${!props.autoProceed && newFileCount > 0
-        ? html`<div class="UppyDashboard-actionsItem">
-          <button class="UppyButton--circular
-                         UppyButton--blue
-                         UppyButton--sizeM
-                         UppyDashboard-upload"
-                       type="button"
-                       title="${props.i18n('uploadAllNewFiles')}"
-                       aria-label="${props.i18n('uploadAllNewFiles')}"
-                       onclick=${props.startUpload}>
-                  ${uploadIcon()}
-                  <sup class="UppyDashboard-uploadCount"
-                       title="${props.i18n('numberOfSelectedFiles')}"
-                       aria-label="${props.i18n('numberOfSelectedFiles')}">
-                        ${newFileCount}</sup>
-          </button>
-        </div>`
-        : null
-      }
-
-      ${uploadStartedFilesCount > 0
-        ? ProgressCircle({
-          totalProgress: props.totalProgress,
-          isAllPaused: isAllPaused,
-          isAllComplete: isAllComplete,
-          togglePauseResume: togglePauseResume
-        })
-        : null
-      }
-    </div>
-
-    ${uploadStartedFilesCount > 0
-      ? StatusBar({
-        totalProgress: props.totalProgress,
-        isAllComplete: isAllComplete,
-        isAllPaused: isAllPaused,
-        complete: completeFilesCount,
-        inProgress: uploadStartedFilesCount,
-        totalSpeed: totalSpeed,
-        totalETA: totalETA
-      })
-      : null
-    }
-
-  </div>`
-}

src/experimental/ui/Dashboard/ProgressCircle.js

@@ -1,26 +0,0 @@
-import html from '../../core/html'
-
-export default (props) => {
-  props = props || {}
-
-  return html`
-    <div class="UppyDashboard-actionsItem">
-      <button class="UppyTotalProgress
-                    ${props.isAllPaused ? 'UppyTotalProgress--is-paused' : ''}
-                    ${props.isAllComplete ? 'UppyTotalProgress--is-complete' : ''}"
-              onclick=${props.togglePauseResume}>
-          <svg width="70" height="70" viewBox="0 0 36 36" class="UppyIcon">
-            <g class="progress-group">
-              <circle r="15" cx="18" cy="18" stroke-width="2" fill="none" class="bg"/>
-              <circle r="15" cx="18" cy="18" transform="rotate(-90, 18, 18)" stroke-width="2" fill="none" stroke-dasharray="100" stroke-dashoffset="${100 - props.totalProgress || 100}" class="progress"/>
-            </g>
-            <polygon transform="translate(3, 3)" points="12 20 12 10 20 15" class="play"/>
-            <g transform="translate(14.5, 13)" class="pause">
-              <rect x="0" y="0" width="2" height="10" rx="0" />
-              <rect x="5" y="0" width="2" height="10" rx="0" />
-            </g>
-            <polygon transform="translate(2, 3)" points="14 22.5 7 15.2457065 8.99985857 13.1732815 14 18.3547104 22.9729883 9 25 11.1005634" class="check"/>
-        </svg>
-      </button>
-    </div>`
-}

src/experimental/ui/Dashboard/doneui/StatusBar.js

@@ -1,15 +0,0 @@
-import html from '../../core/html'
-
-export default (props) => {
-  props = props || {}
-
-  return html`
-    <div class="UppyDashboard-statusBar">
-      ${!props.isAllComplete
-        ? !props.isAllPaused
-          ? `Uploading... ${props.complete} / ${props.inProgress}・${props.totalProgress || 0}%・${props.totalETA}・↑ ${props.totalSpeed}/s`
-          : `Paused ・${props.totalProgress}%`
-        : null
-      }
-    </div>`
-}

src/experimental/ui/Dashboard/index.js

@@ -1,283 +0,0 @@
-import Plugin from '../Plugin'
-import dragDrop from 'drag-drop'
-import Dashboard from './Dashboard'
-import { defaultTabIcon } from './icons'
-
-/**
- * Modal Dialog & Dashboard
- */
-export default class DashboardUI extends Plugin {
-  constructor (core, opts) {
-    super(core, opts)
-    this.id = 'DashboardUI'
-    this.title = 'Dashboard UI'
-    this.type = 'orchestrator'
-
-    // set default options
-    const defaultOptions = {
-      target: 'body',
-      inline: false,
-      defaultTabIcon: defaultTabIcon(),
-      panelSelectorPrefix: 'UppyDashboardContent-panel',
-      showProgressDetails: true
-    }
-
-    // merge default options with the ones set by user
-    this.opts = Object.assign({}, defaultOptions, opts)
-
-    this.hideModal = this.hideModal.bind(this)
-    this.showModal = this.showModal.bind(this)
-
-    this.addTarget = this.addTarget.bind(this)
-    this.actions = this.actions.bind(this)
-    this.hideAllPanels = this.hideAllPanels.bind(this)
-    this.showPanel = this.showPanel.bind(this)
-    this.initEvents = this.initEvents.bind(this)
-    this.handlePaste = this.handlePaste.bind(this)
-    // this.handleInputChange = this.handleInputChange.bind(this)
-    this.handleDrop = this.handleDrop.bind(this)
-    this.pauseAll = this.pauseAll.bind(this)
-    this.resumeAll = this.resumeAll.bind(this)
-    this.render = this.render.bind(this)
-    this.install = this.install.bind(this)
-  }
-
-  addTarget (plugin) {
-    const callerPluginId = plugin.constructor.name
-    const callerPluginName = plugin.title || callerPluginId
-    const callerPluginIcon = plugin.icon || this.opts.defaultTabIcon
-    const callerPluginType = plugin.type
-
-    if (callerPluginType !== 'acquirer' &&
-        callerPluginType !== 'progressindicator' &&
-        callerPluginType !== 'presenter') {
-      let msg = 'Error: Modal can only be used by plugins of types: acquirer, progressindicator, presenter'
-      this.core.log(msg)
-      return
-    }
-
-    const target = {
-      id: callerPluginId,
-      name: callerPluginName,
-      icon: callerPluginIcon,
-      type: callerPluginType,
-      focus: plugin.focus,
-      render: plugin.render,
-      isHidden: true
-    }
-
-    const modal = this.core.getState().modal
-    const newTargets = modal.targets.slice()
-    newTargets.push(target)
-
-    this.core.setState({
-      modal: Object.assign({}, modal, {
-        targets: newTargets
-      })
-    })
-
-    return this.opts.target
-  }
-
-  hideAllPanels () {
-    const modal = this.core.getState().modal
-
-    const newTargets = modal.targets.map((target) => {
-      const isAcquirer = target.type === 'acquirer'
-      return Object.assign({}, target, {
-        isHidden: isAcquirer
-      })
-    })
-
-    this.core.setState({modal: Object.assign({}, modal, {
-      targets: newTargets
-    })})
-  }
-
-  showPanel (id) {
-    const modal = this.core.getState().modal
-
-    // hide all panels, except the one that matches current id
-    const newTargets = modal.targets.map((target) => {
-      if (target.type === 'acquirer') {
-        if (target.id === id) {
-          target.focus()
-          return Object.assign({}, target, {
-            isHidden: false
-          })
-        }
-        return Object.assign({}, target, {
-          isHidden: true
-        })
-      }
-      return target
-    })
-
-    this.core.setState({modal: Object.assign({}, modal, {
-      targets: newTargets
-    })})
-  }
-
-  hideModal () {
-    const modal = this.core.getState().modal
-
-    this.core.setState({
-      modal: Object.assign({}, modal, {
-        isHidden: true
-      })
-    })
-
-    document.body.classList.remove('is-UppyDashboard-open')
-  }
-
-  showModal () {
-    const modal = this.core.getState().modal
-
-    this.core.setState({
-      modal: Object.assign({}, modal, {
-        isHidden: false
-      })
-    })
-
-    // add class to body that sets position fixed
-    document.body.classList.add('is-UppyDashboard-open')
-    // focus on modal inner block
-    document.querySelector('*[tabindex="0"]').focus()
-  }
-
-  initEvents () {
-    // const dashboardEl = document.querySelector(`${this.opts.target} .UppyDashboard`)
-    // Modal open button
-    const showModalTrigger = document.querySelector(this.opts.trigger)
-    showModalTrigger.addEventListener('click', this.showModal)
-
-    // Close the Modal on esc key press
-    document.body.addEventListener('keyup', (event) => {
-      if (event.keyCode === 27) {
-        this.hideModal()
-      }
-    })
-
-    // Close on click outside modal or close buttons
-    // document.addEventListener('click', (e) => {
-    //   if (e.target.classList.contains('js-UppyDashboard-close')) {
-    //     this.hideModal()
-    //   }
-    // })
-
-    // Drag Drop
-    dragDrop(this.el, (files) => {
-      this.handleDrop(files)
-    })
-
-    // @TODO Exprimental, work in progress
-    // Paste from clipboard
-    // dashboardEl.addEventListener('paste', this.handlePaste.bind(this))
-  }
-
-  // @TODO Exprimental, work in progress
-  // no names, weird API, Chrome-only http://stackoverflow.com/a/22940020
-  handlePaste (ev) {
-    const files = ev.clipboardData.items
-
-    for (let i = 0; i < files.length; i++) {
-      const file = files[i]
-
-      if (file.kind === 'file') {
-        const blob = file.getAsFile()
-        console.log(blob)
-        this.core.emitter.emit('file-add', {
-          source: this.id,
-          name: file.name,
-          type: file.type,
-          data: blob
-        })
-      }
-    }
-  }
-
-  actions () {
-    const bus = this.core.bus
-
-    bus.on('core:file-add', () => {
-      this.hideAllPanels()
-    })
-
-    bus.on('dashboard:file-card', (fileId) => {
-      const modal = this.core.getState().modal
-
-      this.core.setState({
-        modal: Object.assign({}, modal, {
-          fileCardFor: fileId || false
-        })
-      })
-    })
-
-    bus.on('core:success', (uploadedCount) => {
-      bus.emit(
-        'informer',
-        `${this.core.i18n('files', {'smart_count': uploadedCount})} successfully uploaded, Sir!`,
-        'info',
-        6000
-      )
-    })
-  }
-
-  handleDrop (files) {
-    this.core.log('All right, someone dropped something...')
-
-    files.forEach((file) => {
-      this.core.bus.emit('core:file-add', {
-        source: this.id,
-        name: file.name,
-        type: file.type,
-        data: file
-      })
-    })
-  }
-
-  pauseAll () {
-    this.core.bus.emit('core:pause-all')
-  }
-
-  resumeAll () {
-    this.core.bus.emit('core:resume-all')
-  }
-
-  render (state) {
-    return Dashboard({
-      state: state,
-      autoProceed: this.core.opts.autoProceed,
-      id: this.id,
-      container: this.opts.target,
-      hideModal: this.hideModal,
-      panelSelectorPrefix: this.opts.panelSelectorPrefix,
-      showProgressDetails: this.opts.showProgressDetails,
-      inline: this.opts.inline,
-      onPaste: this.handlePaste,
-      showPanel: this.showPanel,
-      hideAllPanels: this.hideAllPanels,
-      log: this.core.log,
-      bus: this.core.emitter,
-      i18n: this.core.i18n,
-      pauseAll: this.pauseAll,
-      resumeAll: this.resumeAll
-    })
-  }
-
-  install () {
-    // Set default state for Modal
-    this.core.setState({modal: {
-      isHidden: true,
-      showFileCard: false,
-      targets: []
-    }})
-
-    const target = this.opts.target
-    const plugin = this
-    this.target = this.mount(target, plugin)
-
-    this.initEvents()
-    this.actions()
-  }
-}

src/experimental/ui/Dashboard/newu/ContentPanel.js

@@ -1,23 +0,0 @@
-import html from '../../../../core/html'
-
-const ContentPanel = (props) => {
-  const {
-    i18n,
-    hideAllPanels,
-    target
-  } = props
-
-  return html`
-    <div class="UppyDashboardContent-panel"
-         role="tabpanel">
-      <div class="UppyDashboardContent-bar">
-        <button
-          class="UppyDashboardContent-back"
-          onclick=${hideAllPanels}>${i18n('done')}</button>
-      </div>
-      ${target(props)}
-    </div>
-  `
-}
-
-export default ContentPanel

src/experimental/ui/Dashboard/newu/Dashboard.js

@@ -1,84 +0,0 @@
-import html from '../../../../core/html'
-import cx from 'classnames'
-import Tabs from './Tabs'
-import FileCard from './FileCard'
-import { closeIcon } from './icons'
-
-export default (props) => {
-  const {
-    container,
-    hideModal,
-    i18n,
-    inline,
-    onPaste,
-    panelSelectorPrefix,
-    showPanel
-  } = props
-
-  const getActivePanel = (key) => {
-    switch (key) {
-      case 0:
-        return FileCard(props)
-      case 1:
-        return FileList(props)
-      default:
-        return props.panels[key](props)
-    }
-  }
-
-  // temporary to pass linting
-  const state = {}
-  const modal = false
-  const localInputChange = false
-  const acquirers = []
-  const progressindicators = []
-
-  const dashboardClasses = cx({
-    'Uppy': true,
-    'UppyDashboard': true,
-    'UppyTheme--default': true,
-    // 'Uppy--isTouchDevice': isTouchDevice(),
-    'UppyDashboard--modal': !inline
-  })
-
-  return html`
-    <div class=${dashboardClasses}
-      aria-hidden="${inline ? 'false' : modal.isHidden}"
-      aria-label="${!inline ? i18n('dashboardWindowTitle') : i18n('dashboardTitle')}"
-      role="dialog"
-      onpaste=${onPaste}>
-
-      <div class="UppyDashboard-overlay" onclick=${hideModal}>
-      </div>
-
-      <button class="UppyDashboard-close"
-              aria-label="${i18n('closeModal')}"
-              title="${i18n('closeModal')}"
-              onclick=${hideModal}>
-        ${closeIcon()}
-      </button>
-
-      <div class="UppyDashboard-inner" tabindex="0">
-        <div class="UppyDashboard-innerWrap">
-
-          ${Tabs({
-            localInputChange: localInputChange,
-            acquirers: acquirers,
-            container: container,
-            panelSelectorPrefix: panelSelectorPrefix,
-            showPanel: showPanel,
-            i18n: i18n
-          })}
-
-          ${getActivePanel(props.activePanel)}
-
-          <div class="UppyDashboard-progressindicators">
-            ${progressindicators.map((target) => {
-              return target.render(state)
-            })}
-          </div>
-        </div>
-      </div>
-    </div>
-  `
-}

src/experimental/ui/Dashboard/newu/FileCard.js

@@ -1,112 +0,0 @@
-import html from '../../../../core/html'
-import { iconText, iconFile, iconAudio, checkIcon } from './icons'
-
-function getIconByMime (fileTypeGeneral) {
-  switch (fileTypeGeneral) {
-    case 'text':
-      return iconText()
-    case 'audio':
-      return iconAudio()
-    default:
-      return iconFile()
-  }
-}
-
-export default function fileCard (props) {
-  const {
-    done,
-    fileCardFor,
-    files,
-    metaFields
-  } = props
-
-  // const { bus } = props
-
-  // Notes:
-  // what is this? can a filecard be generated with no file in files?
-  // why not just pass down the individual file?
-  const file = fileCardFor ? files[fileCardFor] : false
-  const meta = {}
-
-  function tempStoreMeta (ev) {
-    const value = ev.target.value
-    const name = ev.target.attributes.name.value
-    meta[name] = value
-  }
-
-  function renderMetaFields (file) {
-    // not sure if this is going to break shit
-    if (!metaFields || !metaFields.map) {
-      return []
-    }
-
-    return metaFields.map((field) => {
-      return html`
-        <fieldset class="UppyDashboardFileCard-fieldset">
-          <label class="UppyDashboardFileCard-label">
-            ${field.name}
-          </label>
-          <input
-            class="UppyDashboardFileCard-input"
-            name="${field.id}"
-            type="text"
-            value="${file.meta[field.id]}"
-            placeholder="${field.placeholder || ''}"
-            onkeyup=${tempStoreMeta}/>
-        </fieldset>
-      `
-    })
-  }
-
-  return html`
-    <div class="UppyDashboardFileCard" aria-hidden="${fileCardFor ? 'false' : 'true'}">
-      <div class="UppyDashboardContent-bar">
-        <h2 class="UppyDashboardContent-title">
-          Editing
-          <span class="UppyDashboardContent-titleFile">
-            ${file.meta ? file.meta.name : file.name}
-          </span>
-        </h2>
-        <button
-          class="UppyDashboardContent-back"
-          title="Finish editing file"
-          onclick=${() => done(meta, file.id)}>
-          Done
-        </button>
-      </div>
-
-      ${fileCardFor
-        ? html`
-          <div class="UppyDashboardFileCard-inner">
-            <div class="UppyDashboardFileCard-preview">
-              ${file.preview
-                ? html`<img alt="${file.name}" src="${file.preview}">`
-                : html`<div class="UppyDashboardItem-previewIcon">${getIconByMime(file.type.general)}</div>`
-              }
-            </div>
-            <div class="UppyDashboardFileCard-info">
-              <fieldset class="UppyDashboardFileCard-fieldset">
-                <label class="UppyDashboardFileCard-label">Name</label>
-                <input
-                  class="UppyDashboardFileCard-input"
-                  name="name"
-                  type="text"
-                  value="${file.meta.name}"
-                  onkeyup=${tempStoreMeta}/>
-              </fieldset>
-              ${renderMetaFields(file)}
-            </div>
-          </div>
-        `
-        : null
-      }
-      <button
-        class="UppyButton--circular UppyButton--blue UppyButton--sizeM UppyDashboardFileCard-done"
-        type="button"
-        title="Finish editing file"
-        onclick=${() => done(meta, file.id)}>
-        ${checkIcon()}
-      </button>
-    </div>
-  `
-}

src/experimental/ui/Dashboard/newu/Tabs.js

@@ -1,66 +0,0 @@
-import html from '../../core/html'
-import { localIcon } from './icons'
-
-export default (props) => {
-  const {
-    acquirers,
-    container,
-    i18n,
-    localInputChange,
-    panelSelectorPrefix,
-    showPanel
-  } = props
-
-  return html`
-    <div class="UppyDashboardTabs">
-      <h3 class="UppyDashboardTabs-title">
-        ${i18n('dropPasteImport')}
-      </h3>
-      <nav>
-        <ul class="UppyDashboardTabs-list" role="tablist">
-          <li class="UppyDashboardTab">
-            <button
-              class="UppyDashboardTab-btn UppyDashboard-focus"
-              role="tab"
-              tabindex="0"
-              onclick=${(ev) => {
-                const input = document.querySelector(`${container} .UppyDashboard-input`)
-                input.click()
-              }}>
-              ${localIcon()}
-              <h5 class="UppyDashboardTab-name">
-                ${i18n('localDisk')}
-              </h5>
-            </button>
-            <input
-              class="UppyDashboard-input"
-              type="file"
-              name="files[]"
-              multiple="true"
-              onchange=${localInputChange}/>
-          </li>
-
-          ${acquirers.map((target) => {
-            return html`
-              <li class="UppyDashboardTab">
-                <button
-                  class="UppyDashboardTab-btn"
-                  role="tab"
-                  tabindex="0"
-                  aria-controls="${panelSelectorPrefix}--${target.id}"
-                  aria-selected="${target.isHidden ? 'false' : 'true'}"
-                  onclick=${() => showPanel(target.id)}>
-                  ${target.icon}
-                  <h5 class="UppyDashboardTab-name">
-                    ${target.name}
-                  </h5>
-                </button>
-              </li>
-            `
-          })}
-
-        </ul>
-      </nav>
-    </div>
-  `
-}

src/experimental/ui/Dashboard/newu/icons.js

@@ -1,103 +0,0 @@
-import html from '../../core/html'
-
-// https://css-tricks.com/creating-svg-icon-system-react/
-
-export function defaultTabIcon () {
-  return html`<svg class="UppyIcon" width="30" height="30" viewBox="0 0 30 30">
-    <path d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm4.258-12.676v6.846h-8.426v-6.846H5.204l9.82-12.364 9.82 12.364H19.26z" />
-  </svg>`
-}
-
-export function iconCopy () {
-  return html`<svg class="UppyIcon" width="51" height="51" viewBox="0 0 51 51">
-    <path d="M17.21 45.765a5.394 5.394 0 0 1-7.62 0l-4.12-4.122a5.393 5.393 0 0 1 0-7.618l6.774-6.775-2.404-2.404-6.775 6.776c-3.424 3.427-3.424 9 0 12.426l4.12 4.123a8.766 8.766 0 0 0 6.216 2.57c2.25 0 4.5-.858 6.214-2.57l13.55-13.552a8.72 8.72 0 0 0 2.575-6.213 8.73 8.73 0 0 0-2.575-6.213l-4.123-4.12-2.404 2.404 4.123 4.12a5.352 5.352 0 0 1 1.58 3.81c0 1.438-.562 2.79-1.58 3.808l-13.55 13.55z"/>
-    <path d="M44.256 2.858A8.728 8.728 0 0 0 38.043.283h-.002a8.73 8.73 0 0 0-6.212 2.574l-13.55 13.55a8.725 8.725 0 0 0-2.575 6.214 8.73 8.73 0 0 0 2.574 6.216l4.12 4.12 2.405-2.403-4.12-4.12a5.357 5.357 0 0 1-1.58-3.812c0-1.437.562-2.79 1.58-3.808l13.55-13.55a5.348 5.348 0 0 1 3.81-1.58c1.44 0 2.792.562 3.81 1.58l4.12 4.12c2.1 2.1 2.1 5.518 0 7.617L39.2 23.775l2.404 2.404 6.775-6.777c3.426-3.427 3.426-9 0-12.426l-4.12-4.12z"/>
-  </svg>`
-}
-
-export function iconResume () {
-  return html`<svg class="UppyIcon" width="25" height="25" viewBox="0 0 44 44">
-    <polygon class="play" transform="translate(6, 5.5)" points="13 21.6666667 13 11 21 16.3333333" />
-  </svg>`
-}
-
-export function iconPause () {
-  return html`<svg class="UppyIcon" width="25px" height="25px" viewBox="0 0 44 44">
-    <g transform="translate(18, 17)" class="pause">
-      <rect x="0" y="0" width="2" height="10" rx="0" />
-      <rect x="6" y="0" width="2" height="10" rx="0" />
-    </g>
-  </svg>`
-}
-
-export function iconEdit () {
-  return html`<svg class="UppyIcon" width="28" height="28" viewBox="0 0 28 28">
-    <path d="M25.436 2.566a7.98 7.98 0 0 0-2.078-1.51C22.638.703 21.906.5 21.198.5a3 3 0 0 0-1.023.17 2.436 2.436 0 0 0-.893.562L2.292 18.217.5 27.5l9.28-1.796 16.99-16.99c.255-.254.444-.56.562-.888a3 3 0 0 0 .17-1.023c0-.708-.205-1.44-.555-2.16a8 8 0 0 0-1.51-2.077zM9.01 24.252l-4.313.834c0-.03.008-.06.012-.09.007-.944-.74-1.715-1.67-1.723-.04 0-.078.007-.118.01l.83-4.29L17.72 5.024l5.264 5.264L9.01 24.252zm16.84-16.96a.818.818 0 0 1-.194.31l-1.57 1.57-5.26-5.26 1.57-1.57a.82.82 0 0 1 .31-.194 1.45 1.45 0 0 1 .492-.074c.397 0 .917.126 1.468.397.55.27 1.13.678 1.656 1.21.53.53.94 1.11 1.208 1.655.272.55.397 1.07.393 1.468.004.193-.027.358-.074.488z" />
-  </svg>`
-}
-
-export function localIcon () {
-  return html`<svg class="UppyIcon" width="27" height="25" viewBox="0 0 27 25">
-    <path d="M5.586 9.288a.313.313 0 0 0 .282.176h4.84v3.922c0 1.514 1.25 2.24 2.792 2.24 1.54 0 2.79-.726 2.79-2.24V9.464h4.84c.122 0 .23-.068.284-.176a.304.304 0 0 0-.046-.324L13.735.106a.316.316 0 0 0-.472 0l-7.63 8.857a.302.302 0 0 0-.047.325z"/>
-    <path d="M24.3 5.093c-.218-.76-.54-1.187-1.208-1.187h-4.856l1.018 1.18h3.948l2.043 11.038h-7.193v2.728H9.114v-2.725h-7.36l2.66-11.04h3.33l1.018-1.18H3.907c-.668 0-1.06.46-1.21 1.186L0 16.456v7.062C0 24.338.676 25 1.51 25h23.98c.833 0 1.51-.663 1.51-1.482v-7.062L24.3 5.093z"/>
-  </svg>`
-}
-
-export function closeIcon () {
-  return html`<svg class="UppyIcon" width="14px" height="14px" viewBox="0 0 19 19">
-    <polygon points="17.3182539 17.2324466 9.93955339 9.85374611 9.586 9.50019272 9.23244661 9.85374611 1.85374611 17.2324466 2.56085289 17.2324466 1.93955339 16.6111471 1.93955865 17.3182486 9.31803946 9.93954813 9.67158232 9.58599474 9.31803419 9.23244661 1.93955339 1.85396581 1.93961588 2.56101008 2.56091538 1.93949089 1.85375137 1.93955865 9.23245187 9.31803946 9.586 9.67157706 9.93954813 9.31803946 17.3182486 1.93955865 16.6111471 1.93955339 17.2324466 2.56085289 17.2324466 1.85374611 9.85374611 9.23244661 9.50019272 9.586 9.85374611 9.93955339 17.2324466 17.3182539 17.9395534 16.6111471 10.5608529 9.23244661 10.5608529 9.93955339 17.9395534 2.56085289 18.2931068 2.2072995 17.9395534 1.85374611 17.3182539 1.23244661 16.9647058 0.878898482 16.6111524 1.23244135 9.23245187 8.61092215 9.93954813 8.61092215 2.56084763 1.23244135 2.20723173 0.87883598 1.85368362 1.23250911 1.23238412 1.85402831 0.878955712 2.20758169 1.23244661 2.56107259 8.61092741 9.93955339 8.61092215 9.23245187 1.23244135 16.6111524 0.878898482 16.9647058 1.23244661 17.3182539 1.85374611 17.9395534 2.2072995 18.2931068 2.56085289 17.9395534 9.93955339 10.5608529 9.23244661 10.5608529 16.6111471 17.9395534"></polygon>
-  </svg>`
-}
-
-export function pluginIcon () {
-  return html`<svg class="UppyIcon" width="16px" height="16px" viewBox="0 0 32 30">
-      <path d="M6.6209894,11.1451162 C6.6823051,11.2751669 6.81374248,11.3572188 6.95463813,11.3572188 L12.6925482,11.3572188 L12.6925482,16.0630427 C12.6925482,17.880509 14.1726048,18.75 16.0000083,18.75 C17.8261072,18.75 19.3074684,17.8801847 19.3074684,16.0630427 L19.3074684,11.3572188 L25.0437478,11.3572188 C25.1875787,11.3572188 25.3164069,11.2751669 25.3790272,11.1451162 C25.4370814,11.0173358 25.4171865,10.8642587 25.3252129,10.7562615 L16.278212,0.127131837 C16.2093949,0.0463771751 16.1069846,0 15.9996822,0 C15.8910751,0 15.7886648,0.0463771751 15.718217,0.127131837 L6.6761083,10.7559371 C6.58250402,10.8642587 6.56293518,11.0173358 6.6209894,11.1451162 L6.6209894,11.1451162 Z"/>
-      <path d="M28.8008722,6.11142645 C28.5417891,5.19831555 28.1583331,4.6875 27.3684848,4.6875 L21.6124454,4.6875 L22.8190234,6.10307874 L27.4986725,6.10307874 L29.9195817,19.3486449 L21.3943891,19.3502502 L21.3943891,22.622552 L10.8023461,22.622552 L10.8023461,19.3524977 L2.07815702,19.3534609 L5.22979699,6.10307874 L9.17871529,6.10307874 L10.3840011,4.6875 L4.6308691,4.6875 C3.83940559,4.6875 3.37421888,5.2390909 3.19815864,6.11142645 L0,19.7470874 L0,28.2212959 C0,29.2043992 0.801477937,30 1.78870751,30 L30.2096773,30 C31.198199,30 32,29.2043992 32,28.2212959 L32,19.7470874 L28.8008722,6.11142645 L28.8008722,6.11142645 Z"/>
-    </svg>`
-}
-
-export function checkIcon () {
-  return html`<svg class="UppyIcon UppyIcon-check" width="13px" height="9px" viewBox="0 0 13 9">
-    <polygon points="5 7.293 1.354 3.647 0.646 4.354 5 8.707 12.354 1.354 11.646 0.647"></polygon>
-  </svg>`
-}
-
-export function iconAudio () {
-  return html`<svg class="UppyIcon" width="34" height="91" viewBox="0 0 34 91">
-    <path d="M22.366 43.134V29.33c5.892-6.588 10.986-14.507 10.986-22.183 0-4.114-2.986-7.1-7.1-7.1-3.914 0-7.1 3.186-7.1 7.1v20.936a92.562 92.562 0 0 1-5.728 5.677l-.384.348C4.643 41.762.428 45.604.428 54.802c0 8.866 7.214 16.08 16.08 16.08.902 0 1.784-.074 2.644-.216v11.26c0 2.702-2.198 4.9-4.9 4.9a4.855 4.855 0 0 1-2.95-1.015c2.364-.24 4.222-2.218 4.222-4.643a4.698 4.698 0 0 0-4.692-4.692 4.738 4.738 0 0 0-4.213 2.628c-.923 1.874-.56 4.386.277 6.228a7.82 7.82 0 0 0 .9 1.502 8.178 8.178 0 0 0 4.23 2.896c.723.207 1.474.31 2.226.31 4.474 0 8.113-3.64 8.113-8.113V69.78c5.98-2.345 10.225-8.176 10.225-14.977 0-5.975-4.464-10.876-10.224-11.67zm0-35.987a3.89 3.89 0 0 1 3.887-3.885c1.933 0 3.885 1.202 3.885 3.885 0 4.95-2.702 10.862-7.772 17.204V7.148zM16.51 67.67c-7.096 0-12.867-5.77-12.867-12.867 0-7.78 3.385-10.865 11.563-18.32l.384-.35c1.166-1.064 2.365-2.2 3.562-3.402v10.404c-5.758.793-10.223 5.695-10.223 11.67 0 3.935 1.948 7.603 5.212 9.81a1.605 1.605 0 1 0 1.8-2.66 8.622 8.622 0 0 1-3.8-7.15c0-4.2 3.025-7.7 7.01-8.456v21.05c-.853.178-1.736.272-2.642.272zm5.856-1.412v-19.91c3.985.756 7.01 4.253 7.01 8.455 0 4.987-2.85 9.32-7.01 11.455z" />
-  </svg>`
-}
-
-export function iconFile () {
-  return html`<svg class="UppyIcon" width="44" height="58" viewBox="0 0 44 58">
-    <path d="M27.437.517a1 1 0 0 0-.094.03H4.25C2.037.548.217 2.368.217 4.58v48.405c0 2.212 1.82 4.03 4.03 4.03H39.03c2.21 0 4.03-1.818 4.03-4.03V15.61a1 1 0 0 0-.03-.28 1 1 0 0 0 0-.093 1 1 0 0 0-.03-.032 1 1 0 0 0 0-.03 1 1 0 0 0-.032-.063 1 1 0 0 0-.03-.063 1 1 0 0 0-.032 0 1 1 0 0 0-.03-.063 1 1 0 0 0-.032-.03 1 1 0 0 0-.03-.063 1 1 0 0 0-.063-.062l-14.593-14a1 1 0 0 0-.062-.062A1 1 0 0 0 28 .708a1 1 0 0 0-.374-.157 1 1 0 0 0-.156 0 1 1 0 0 0-.03-.03l-.003-.003zM4.25 2.547h22.218v9.97c0 2.21 1.82 4.03 4.03 4.03h10.564v36.438a2.02 2.02 0 0 1-2.032 2.032H4.25c-1.13 0-2.032-.9-2.032-2.032V4.58c0-1.13.902-2.032 2.03-2.032zm24.218 1.345l10.375 9.937.75.718H30.5c-1.13 0-2.032-.9-2.032-2.03V3.89z" />
-  </svg>`
-}
-
-export function iconText () {
-  return html`<svg class="UppyIcon" width="50" height="63" viewBox="0 0 50 63">
-    <path d="M0 .5v15.617h6.25l1.7-5.1a6.242 6.242 0 0 1 5.933-4.267h8V50.5c0 3.45-2.8 6.25-6.25 6.25H12.5V63h25v-6.25h-3.133c-3.45 0-6.25-2.8-6.25-6.25V6.75h8a6.257 6.257 0 0 1 5.933 4.267l1.7 5.1H50V.5H0z" />
-  </svg>`
-}
-
-export function removeIcon () {
-  return html `<svg width="22" height="21" viewBox="0 0 18 17">
-    <ellipse fill="#000" cx="8.62" cy="8.383" rx="8.62" ry="8.383"/>
-    <path stroke="#FFF" fill="#FFF" d="M11 6.147L10.85 6 8.5 8.284 6.15 6 6 6.147 8.35 8.43 6 10.717l.15.146L8.5 8.578l2.35 2.284.15-.146L8.65 8.43z"/>
-  </svg>`
-}
-
-export function uploadIcon () {
-  return html`<svg class="UppyIcon" width="37" height="33" viewBox="0 0 37 33">
-    <path d="M29.107 24.5c4.07 0 7.393-3.355 7.393-7.442 0-3.994-3.105-7.307-7.012-7.502l.468.415C29.02 4.52 24.34.5 18.886.5c-4.348 0-8.27 2.522-10.138 6.506l.446-.288C4.394 6.782.5 10.758.5 15.608c0 4.924 3.906 8.892 8.76 8.892h4.872c.635 0 1.095-.467 1.095-1.104 0-.636-.46-1.103-1.095-1.103H9.26c-3.644 0-6.63-3.035-6.63-6.744 0-3.71 2.926-6.685 6.57-6.685h.964l.14-.28.177-.362c1.477-3.4 4.744-5.576 8.347-5.576 4.58 0 8.45 3.452 9.01 8.072l.06.536.05.446h1.101c2.87 0 5.204 2.37 5.204 5.295s-2.333 5.296-5.204 5.296h-6.062c-.634 0-1.094.467-1.094 1.103 0 .637.46 1.104 1.094 1.104h6.12z"/>
-    <path d="M23.196 18.92l-4.828-5.258-.366-.4-.368.398-4.828 5.196a1.13 1.13 0 0 0 0 1.546c.428.46 1.11.46 1.537 0l3.45-3.71-.868-.34v15.03c0 .64.445 1.118 1.075 1.118.63 0 1.075-.48 1.075-1.12V16.35l-.867.34 3.45 3.712a1 1 0 0 0 .767.345 1 1 0 0 0 .77-.345c.416-.33.416-1.036 0-1.485v.003z"/>
-  </svg>`
-}
-
-export function dashboardBgIcon () {
-  return html`<svg class="UppyIcon" width="102" height="124" viewBox="0 0 102 124">
-    <g>
-      <path d="M69.125 124c7.363 0 13.353-5.975 13.353-13.322v-6.15h4c8.56 0 15.522-6.946 15.522-15.482v-59.16c0-2.033-1.087-4.65-2.53-6.088L78.14 2.52C76.7 1.085 74.075 0 72.038 0H32.873c-7.36 0-13.35 6.947-13.35 15.483v3.99h-6.168C5.99 19.472 0 25.445 0 32.792v77.885C0 118.025 5.99 124 13.355 124h55.77zM76.903 7.488l17.59 17.55h-13.13c-2.46 0-4.46-2-4.46-4.454V7.488zm-52.985 7.995c0-6.12 4.016-11.1 8.955-11.1h39.165c.14 0 .3.022.466.05v16.15c0 4.873 3.973 8.837 8.86 8.837h16.19c.028.165.048.323.048.467v59.158c0 6.118-4.99 11.097-11.125 11.097H35.043c-6.135 0-11.127-4.978-11.127-11.096V15.483h.002zm-19.52 95.195V32.792c0-4.928 4.018-8.934 8.957-8.934h6.167v65.188c0 8.536 6.963 15.482 15.52 15.482H78.08v6.15c0 4.927-4.017 8.935-8.955 8.935h-55.77c-4.94 0-8.957-4.008-8.957-8.935z"/><path d="M40.218 76h40.564C82.007 76 83 75.106 83 74c0-1.106-.993-2-2.218-2H40.218C38.995 72 38 72.894 38 74c0 1.106.995 2 2.218 2zM40.218 57h40.564C82.007 57 83 56.105 83 55c0-1.106-.993-2-2.218-2H40.218C38.995 53 38 53.894 38 55c0 1.105.995 2 2.218 2zM40.208 37h23.584c1.22 0 2.208-.896 2.208-2s-.987-2-2.208-2H40.208C38.99 33 38 33.896 38 35s.99 2 2.208 2z"/>
-    </g>
-  </svg>`
-}

src/experimental/ui/GoogleDrive/index.js

@@ -1,43 +0,0 @@
-// import Remote from '../../plugins/Remote'
-import AuthView from './AuthView'
-import Browser from './Browser'
-import ErrorView from './ErrorView'
-
-const GoogleDrive = (props) => {
-  // Methods
-  // const addFile = (file) => {
-  //   props.dispatch('add-file', file)
-  // }
-
-  // const getFolder = (directory) => {
-  //   props.dispatch(Remote.prototype.actions.list(directory))
-  // }
-
-  // const filterItems = () => {}
-
-  // Start Component
-  const {
-    authenticated,
-    error,
-    link
-  } = props
-
-  if (error) {
-    return ErrorView({ error: error })
-  }
-
-  if (!authenticated) {
-    // const authState = btoa(JSON.stringify({
-    //   redirect: location.href.split('#')[0]
-    // }))
-
-    return AuthView({
-      link: link,
-      handleDemoAuth: this.handleDemoAuth
-    })
-  }
-
-  return Browser({})
-}
-
-export default GoogleDrive

src/experimental/ui/example.js

@@ -1,24 +0,0 @@
-// import { Remote } from 'uppy'
-// const googleDrive = new Remote({ source: 'google' })
-
-// const Modal = (props) => {
-//   const listFiles = () => {
-//     googleDrive.actions.list()
-//     .then((action) => {
-//       props.dispatch(action)
-//     })
-//   }
-
-//   return html`
-//     <header>Modal Example</header>
-//     ${GoogleBrowser({
-//       listFiles
-//     })}
-//   `
-// }
-
-// const GoogleBrowser = (props) => {
-//   return html`
-//     <button onclick=${props.listFiles}>List Files!</button>
-//   `
-// }