Home Explore Help
Sign In
biheng
/
uppy
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

core: wrap plugins in div.uppy-Root and set dir attrubute in UIPlugin (#3692)

* Add @uppy/remote-sources preset/plugin

* yarn.lock

* Update packages/@uppy/remote-sources/README.md

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

* Use div.uppy-Root for all plugins mounted in DOM; set dir in UIPlugin

* remote uppy-Root from all UI plugins, as it will be set in UIPlugin automatically

* Remove uppy-Root from file-input

* Revert "Update packages/@uppy/remote-sources/README.md"

This reverts commit 3fd00028f796af19f17297dd91be6d6129b2df4a.

* Revert "yarn.lock"

This reverts commit 04dd8c73deb9b73097ec2b8c0e27abfa9be121d5.

* Revert "Add @uppy/remote-sources preset/plugin"

This reverts commit ac1f5df6b3c38afc4aa72b8f27ad179225842974.

* Update packages/@uppy/core/src/UIPlugin.js

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

* Update packages/@uppy/drag-drop/src/DragDrop.jsx

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

* Update packages/@uppy/core/src/UIPlugin.js

Co-authored-by: Renée Kooi <renee@kooi.me>

* Revert "Update packages/@uppy/core/src/UIPlugin.js"

This reverts commit f91af00d6b1b9223b3aafca3aa4f7be969a39e6d.

* @uppy/react: add .uppy-Contrainer class name to wrapper div

* @uppy/svelte: add .uppy-Contrainer class name to wrapper div

Co-authored-by: Merlijn Vos <merlijn@soverin.net>
Co-authored-by: Renée Kooi <renee@kooi.me>
Artur Paikin 3 years ago
parent
6498109e53
commit
934ba79f00
18 changed files with 22 additions and 33 deletions
Split View Show Diff Stats
  1. 7 2
      packages/@uppy/core/src/UIPlugin.js
  2. 1 10
      packages/@uppy/dashboard/src/components/Dashboard.js
  3. 0 10
      packages/@uppy/dashboard/src/index.js
  4. 1 2
      packages/@uppy/drag-drop/src/DragDrop.jsx
  5. 1 1
      packages/@uppy/file-input/src/FileInput.jsx
  6. 1 0
      packages/@uppy/react/src/Dashboard.js
  7. 1 0
      packages/@uppy/react/src/DashboardModal.js
  8. 1 0
      packages/@uppy/react/src/DragDrop.js
  9. 1 0
      packages/@uppy/react/src/FileInput.js
  10. 1 0
      packages/@uppy/react/src/ProgressBar.js
  11. 1 0
      packages/@uppy/react/src/StatusBar.js
  12. 1 1
      packages/@uppy/react/src/Wrapper.js
  13. 0 2
      packages/@uppy/status-bar/src/StatusBar.jsx
  14. 1 1
      packages/@uppy/svelte/src/components/Dashboard.svelte
  15. 1 1
      packages/@uppy/svelte/src/components/DashboardModal.svelte
  16. 1 1
      packages/@uppy/svelte/src/components/DragDrop.svelte
  17. 1 1
      packages/@uppy/svelte/src/components/ProgressBar.svelte
  18. 1 1
      packages/@uppy/svelte/src/components/StatusBar.svelte

+ 7 - 2
packages/@uppy/core/src/UIPlugin.js
View File 

@@ -1,5 +1,6 @@
 
 const { render } = require('preact')
 
 const findDOMElement = require('@uppy/utils/lib/findDOMElement')
 
+const getTextDirection = require('@uppy/utils/lib/getTextDirection')
 
 
 const BasePlugin = require('./BasePlugin')
 
 
@@ -52,7 +53,8 @@ class UIPlugin extends BasePlugin {
 
       // When target is <body> with a single <div> element,
 
       // Preact thinks it’s the Uppy root element in there when doing a diff,
 
       // and destroys it. So we are creating a fragment (could be empty div)
 
-      const uppyRootElement = document.createDocumentFragment()
 
+      const uppyRootElement = document.createElement('div')
 
+      uppyRootElement.classList.add('uppy-Root')
 
 
       // API for plugins that require a synchronous rerender.
 
       this.#updateUI = debounce((state) => {
 
@@ -74,9 +76,12 @@ class UIPlugin extends BasePlugin {
 
       }
 
 
       render(this.render(this.uppy.getState()), uppyRootElement)
 
-      this.el = uppyRootElement.firstElementChild
 
+      this.el = uppyRootElement
 
       targetElement.appendChild(uppyRootElement)
 
 
+      // Set the text direction if the page has not defined one.
 
+      uppyRootElement.dir = this.opts.direction || getTextDirection(uppyRootElement) || 'ltr'
 
+
 
       this.onMount()
 
 
       return this.el

+ 1 - 10
packages/@uppy/dashboard/src/components/Dashboard.js
View File 

@@ -22,10 +22,6 @@ module.exports = function Dashboard (props) {
 
   const noFiles = props.totalFileCount === 0
 
   const isSizeMD = props.containerWidth > WIDTH_MD
 
 
-  const wrapperClassName = classNames({
 
-    'uppy-Root': props.isTargetDOMEl,
 
-  })
 
-
 
   const dashboardClassName = classNames({
 
     'uppy-Dashboard': true,
 
     'uppy-Dashboard--isDisabled': props.disabled,
 
@@ -169,10 +165,5 @@ module.exports = function Dashboard (props) {
 
     </div>
 
   )
 
 
-  return (
 
-    // Wrap it for RTL language support
 
-    <div className={wrapperClassName} dir={props.direction}>
 
-      {dashboard}
 
-    </div>
 
-  )
 
+  return dashboard
 
 }

+ 0 - 10
packages/@uppy/dashboard/src/index.js
View File 

@@ -6,7 +6,6 @@ const ThumbnailGenerator = require('@uppy/thumbnail-generator')
 
 const findAllDOMElements = require('@uppy/utils/lib/findAllDOMElements')
 
 const toArray = require('@uppy/utils/lib/toArray')
 
 const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles')
 
-const getTextDirection = require('@uppy/utils/lib/getTextDirection')
 
 const { nanoid } = require('nanoid/non-secure')
 
 const trapFocus = require('./utils/trapFocus')
 
 const createSuperFocus = require('./utils/createSuperFocus')
 
@@ -984,15 +983,6 @@ module.exports = class Dashboard extends UIPlugin {
 
     })
 
   }
 
 
-  onMount () {
 
-    // Set the text direction if the page has not defined one.
 
-    const element = this.el
 
-    const direction = getTextDirection(element)
 
-    if (!direction) {
 
-      element.dir = 'ltr'
 
-    }
 
-  }
 
-
 
   install = () => {
 
     // Set default state for Dashboard
 
     this.setPluginState({

+ 1 - 2
packages/@uppy/drag-drop/src/DragDrop.jsx
View File 

@@ -191,8 +191,7 @@ export default class DragDrop extends UIPlugin {
 
   }
 
 
   render () {
 
-    const dragDropClass = `uppy-Root
 
-      uppy-u-reset
 
+    const dragDropClass = `uppy-u-reset
 
       uppy-DragDrop-container
 
       ${this.isDragDropSupported ? 'uppy-DragDrop--isDragDropSupported' : ''}
 
       ${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''}

+ 1 - 1
packages/@uppy/file-input/src/FileInput.jsx
View File 

@@ -81,7 +81,7 @@ export default  class FileInput extends UIPlugin {
 
     const accept = restrictions.allowedFileTypes ? restrictions.allowedFileTypes.join(',') : null
 
 
     return (
 
-      <div className="uppy-Root uppy-FileInput-container">
 
+      <div className="uppy-FileInput-container">
 
         <input
 
           className="uppy-FileInput-input"
 
           style={this.opts.pretty && hiddenInputStyle}

+ 1 - 0
packages/@uppy/react/src/Dashboard.js
View File 

@@ -54,6 +54,7 @@ class Dashboard extends React.Component {
 
     // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
 
     this.validProps = getHTMLProps(this.props)
 
     return h('div', {
 
+      className: 'uppy-Container',
 
       ref: (container) => {
 
         this.container = container
 
       },

+ 1 - 0
packages/@uppy/react/src/DashboardModal.js
View File 

@@ -68,6 +68,7 @@ class DashboardModal extends React.Component {
 
     // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
 
     this.validProps = getHTMLProps(this.props)
 
     return h('div', {
 
+      className: 'uppy-Container',
 
       ref: (container) => {
 
         this.container = container
 
       },

+ 1 - 0
packages/@uppy/react/src/DragDrop.js
View File 

@@ -55,6 +55,7 @@ class DragDrop extends React.Component {
 
     // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
 
     this.validProps = getHTMLProps(this.props)
 
     return h('div', {
 
+      className: 'uppy-Container',
 
       ref: (container) => {
 
         this.container = container
 
       },

+ 1 - 0
packages/@uppy/react/src/FileInput.js
View File 

@@ -48,6 +48,7 @@ class FileInput extends React.Component {
 
 
   render () {
 
     return h('div', {
 
+      className: 'uppy-Container',
 
       ref: (container) => {
 
         this.container = container
 
       },

+ 1 - 0
packages/@uppy/react/src/ProgressBar.js
View File 

@@ -55,6 +55,7 @@ class ProgressBar extends React.Component {
 
     // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
 
     this.validProps = getHTMLProps(this.props)
 
     return h('div', {
 
+      className: 'uppy-Container',
 
       ref: (container) => {
 
         this.container = container
 
       },

+ 1 - 0
packages/@uppy/react/src/StatusBar.js
View File 

@@ -56,6 +56,7 @@ class StatusBar extends React.Component {
 
     // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
 
     this.validProps = getHTMLProps(this.props)
 
     return h('div', {
 
+      className: 'uppy-Container',
 
       ref: (container) => {
 
         this.container = container
 
       },

+ 1 - 1
packages/@uppy/react/src/Wrapper.js
View File 

@@ -45,7 +45,7 @@ class UppyWrapper extends React.Component {
 
   }
 
 
   render () {
 
-    return h('div', { ref: this.refContainer })
 
+    return h('div', { className: 'uppy-Container', ref: this.refContainer })
 
   }
 
 }

+ 0 - 2
packages/@uppy/status-bar/src/StatusBar.jsx
View File 

@@ -45,7 +45,6 @@ export default function StatusBar (props) {
 
     supportsUploadProgress,
 
     hideAfterFinish,
 
     isSomeGhost,
 
-    isTargetDOMEl,
 
     doneButtonHandler,
 
     isUploadStarted,
 
     i18n,
 
@@ -148,7 +147,6 @@ export default function StatusBar (props) {
 
   })
 
 
   const statusBarClassNames = classNames(
 
-    { 'uppy-Root': isTargetDOMEl },
 
     'uppy-StatusBar',
 
     `is-${uploadState}`,
 
     { 'has-ghosts': isSomeGhost },

+ 1 - 1
packages/@uppy/svelte/src/components/Dashboard.svelte
View File 

@@ -40,4 +40,4 @@
 
     uppy.setOptions(options)
 
   }
 
 </script>
 
-<div bind:this={container} />
 
+<div class="uppy-Container" bind:this={container} />

+ 1 - 1
packages/@uppy/svelte/src/components/DashboardModal.svelte
View File 

@@ -51,4 +51,4 @@
 
     lastOpen = open;
 
   }
 
 </script>
 
-<div bind:this={container} />
 
+<div class="uppy-Container" bind:this={container} />

+ 1 - 1
packages/@uppy/svelte/src/components/DragDrop.svelte
View File 

@@ -36,4 +36,4 @@
 
     uppy.setOptions(options)
 
   }
 
 </script>
 
-<div bind:this={container} />
 
+<div class="uppy-Container" bind:this={container} />

+ 1 - 1
packages/@uppy/svelte/src/components/ProgressBar.svelte
View File 

@@ -36,4 +36,4 @@
 
     uppy.setOptions(options)
 
   }
 
 </script>
 
-<div bind:this={container} />
 
+<div class="uppy-Container" bind:this={container} />

+ 1 - 1
packages/@uppy/svelte/src/components/StatusBar.svelte
View File 

@@ -36,4 +36,4 @@
 
     uppy.setOptions(options)
 
   }
 
 </script>
 
-<div bind:this={container} />
 
+<div class="uppy-Container" bind:this={container} />