uppy/lib/plugins/Dashboard/Dashboard.js

Extensible JavaScript file upload widget with support for drag&drop, resumable uploads, previews, restrictions, file processing/encoding, remote providers like Instagram, Dropbox, Google Drive, S3 and more :dog:

'use strict';

var FileList = require('./FileList');
var Tabs = require('./Tabs');
var FileCard = require('./FileCard');
var classNames = require('classnames');

var _require = require('../../core/Utils'),
    isTouchDevice = _require.isTouchDevice;

var _require2 = require('./icons'),
    closeIcon = _require2.closeIcon;

var _require3 = require('preact'),
    h = _require3.h;

// http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
// https://github.com/ghosh/micromodal

var renderInnerPanel = function renderInnerPanel(props) {
  return h(
    'div',
    { style: { width: '100%', height: '100%' } },
    h(
      'div',
      { 'class': 'uppy-DashboardContent-bar' },
      h(
        'div',
        { 'class': 'uppy-DashboardContent-title' },
        props.i18n('importFrom'),
        ' ',
        props.activePanel ? props.activePanel.name : null
      ),
      h(
        'button',
        { 'class': 'uppy-DashboardContent-back',
          type: 'button',
          onclick: props.hideAllPanels },
        props.i18n('done')
      )
    ),
    props.getPlugin(props.activePanel.id).render(props.state)
  );
};

module.exports = function Dashboard(props) {
  var dashboardClassName = classNames('uppy', 'uppy-Dashboard', { 'Uppy--isTouchDevice': isTouchDevice() }, { 'uppy-Dashboard--modal': !props.inline }, { 'uppy-Dashboard--wide': props.isWide });

  return h(
    'div',
    { 'class': dashboardClassName,
      'aria-hidden': props.inline ? 'false' : props.modal.isHidden,
      'aria-label': !props.inline ? props.i18n('dashboardWindowTitle') : props.i18n('dashboardTitle'),
      onpaste: props.handlePaste },
    h('div', { 'class': 'uppy-Dashboard-overlay', tabindex: '-1', onclick: props.handleClickOutside }),
    h(
      'div',
      { 'class': 'uppy-Dashboard-inner',
        'aria-modal': !props.inline && 'true',
        role: !props.inline && 'dialog',
        style: {
          maxWidth: props.inline && props.maxWidth ? props.maxWidth : '',
          maxHeight: props.inline && props.maxHeight ? props.maxHeight : ''
        } },
      h(
        'button',
        { 'class': 'uppy-Dashboard-close',
          type: 'button',
          'aria-label': props.i18n('closeModal'),
          title: props.i18n('closeModal'),
          onclick: props.closeModal },
        closeIcon()
      ),
      h(
        'div',
        { 'class': 'uppy-Dashboard-innerWrap' },
        h(Tabs, props),
        h(FileCard, props),
        h(
          'div',
          { 'class': 'uppy-Dashboard-filesContainer' },
          h(FileList, props)
        ),
        h(
          'div',
          { 'class': 'uppy-DashboardContent-panel',
            role: 'tabpanel',
            id: props.activePanel && 'uppy-DashboardContent-panel--' + props.activePanel.id,
            'aria-hidden': props.activePanel ? 'false' : 'true' },
          props.activePanel && renderInnerPanel(props)
        ),
        h(
          'div',
          { 'class': 'uppy-Dashboard-progressindicators' },
          props.progressindicators.map(function (target) {
            return props.getPlugin(target.id).render(props.state);
          })
        )
      )
    )
  );
};
//# sourceMappingURL=Dashboard.js.map