Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 17 commits into from
May 13, 2022
Merged

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

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
ac1f5df
Add @uppy/remote-sources preset/plugin
arturi Apr 29, 2022
04dd8c7
yarn.lock
arturi Apr 29, 2022
3fd0002
Update packages/@uppy/remote-sources/README.md
arturi May 3, 2022
25806cd
Use div.uppy-Root for all plugins mounted in DOM; set dir in UIPlugin
arturi May 4, 2022
8a3b0a7
remote uppy-Root from all UI plugins, as it will be set in UIPlugin a…
arturi May 4, 2022
9ad152f
Merge branch main into uiplugin-root-el-and-rtl
arturi May 4, 2022
10171f2
Remove uppy-Root from file-input
arturi May 4, 2022
d11627f
Revert "Update packages/@uppy/remote-sources/README.md"
arturi May 4, 2022
5d76630
Revert "yarn.lock"
arturi May 4, 2022
8b3dc69
Revert "Add @uppy/remote-sources preset/plugin"
arturi May 4, 2022
1d7379b
Update packages/@uppy/core/src/UIPlugin.js
arturi May 5, 2022
b9719be
Update packages/@uppy/drag-drop/src/DragDrop.jsx
arturi May 5, 2022
f91af00
Update packages/@uppy/core/src/UIPlugin.js
arturi May 9, 2022
f4b5220
Revert "Update packages/@uppy/core/src/UIPlugin.js"
arturi May 10, 2022
e2ed9bb
@uppy/react: add .uppy-Contrainer class name to wrapper div
arturi May 12, 2022
5f03fe2
@uppy/svelte: add .uppy-Contrainer class name to wrapper div
arturi May 12, 2022
2daa5fd
Merge branch 'main' into uiplugin-root-el-and-rtl
arturi May 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions packages/@uppy/core/src/UIPlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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')

Expand Down Expand Up @@ -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) => {
Expand All @@ -74,9 +76,13 @@ 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.
const direction = this.opts.direction || getTextDirection(uppyRootElement) || 'ltr'
uppyRootElement.dir = direction
arturi marked this conversation as resolved.
Show resolved Hide resolved

this.onMount()

return this.el
Expand Down
11 changes: 1 addition & 10 deletions packages/@uppy/dashboard/src/components/Dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
}
10 changes: 0 additions & 10 deletions packages/@uppy/dashboard/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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({
Expand Down
3 changes: 1 addition & 2 deletions packages/@uppy/drag-drop/src/DragDrop.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,8 +191,7 @@ export default class DragDrop extends UIPlugin {
}

render () {
const dragDropClass = `uppy-Root
uppy-u-reset
const dragDropClass = `uuppy-u-reset
arturi marked this conversation as resolved.
Show resolved Hide resolved
uppy-DragDrop-container
${this.isDragDropSupported ? 'uppy-DragDrop--isDragDropSupported' : ''}
${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''}
Expand Down
2 changes: 1 addition & 1 deletion packages/@uppy/file-input/src/FileInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 0 additions & 2 deletions packages/@uppy/status-bar/src/StatusBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ function StatusBar (props) {
supportsUploadProgress,
hideAfterFinish,
isSomeGhost,
isTargetDOMEl,
doneButtonHandler,
isUploadStarted,
i18n,
Expand Down Expand Up @@ -148,7 +147,6 @@ function StatusBar (props) {
})

const statusBarClassNames = classNames(
{ 'uppy-Root': isTargetDOMEl },
'uppy-StatusBar',
`is-${uploadState}`,
{ 'has-ghosts': isSomeGhost },
Expand Down