mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-21 01:15:35 +00:00
79e6460a6c
fixes #6024. ### Problem - `getPlugin()` defaults to `UnknownPlugin`, so methods like `openModal` are not visible , since core is not aware of that plugin type ### Proposed change - Introduce a types-only registry in core: - `export interface PluginTypeRegistry<M extends Meta, B extends Body> {}` - Overload `getPlugin` to return a precise type when the id is a known key of the registry. - add `Dashboard` to PluginTypeRegistry through module augmentation: - `'Dashboard': Dashboard<M, B>`. - When a project imports from `@uppy/dashboard`, its module augmentation extends PluginTypeRegistry, adding the correct type into it - I've added Tests , kept them in a separate file so it's easier to review , once this approach gets approved I'll add them to `Uppy.test.ts` Once this PR gets a positive review I'll add this for other plugins , currently only added for `@uppy/dashboard` **Build with Local tarball can be checked here** https://stackblitz.com/~/github.com/qxprakash/uppy-type-test?file=type_test.ts
108 lines
2.6 KiB
TypeScript
108 lines
2.6 KiB
TypeScript
import type { Body, Meta, Uppy } from '@uppy/core'
|
|
import DashboardPlugin, { type DashboardOptions } from '@uppy/dashboard'
|
|
import type React from 'react'
|
|
import { Component, createElement as h } from 'react'
|
|
import getHTMLProps from './getHTMLProps.js'
|
|
import nonHtmlPropsHaveChanged from './nonHtmlPropsHaveChanged.js'
|
|
|
|
type DashboardInlineOptions<M extends Meta, B extends Body> = Omit<
|
|
DashboardOptions<M, B> & { inline: false },
|
|
'inline' | 'onRequestCloseModal'
|
|
> &
|
|
React.BaseHTMLAttributes<HTMLDivElement>
|
|
|
|
export interface DashboardModalProps<M extends Meta, B extends Body>
|
|
extends DashboardInlineOptions<M, B> {
|
|
uppy: Uppy<M, B>
|
|
onRequestClose?: () => void
|
|
open?: boolean
|
|
}
|
|
|
|
/**
|
|
* React Component that renders a Dashboard for an Uppy instance in a Modal
|
|
* dialog. Visibility of the Modal is toggled using the `open` prop.
|
|
*/
|
|
|
|
class DashboardModal<M extends Meta, B extends Body> extends Component<
|
|
DashboardModalProps<M, B>
|
|
> {
|
|
static defaultProps = {
|
|
open: undefined,
|
|
onRequestClose: undefined,
|
|
}
|
|
|
|
private container!: HTMLElement
|
|
|
|
private plugin!: DashboardPlugin<M, B>
|
|
|
|
componentDidMount(): void {
|
|
this.installPlugin()
|
|
}
|
|
|
|
componentDidUpdate(prevProps: DashboardModal<M, B>['props']): void {
|
|
const { uppy, open, onRequestClose } = this.props
|
|
if (prevProps.uppy !== uppy) {
|
|
this.uninstallPlugin(prevProps)
|
|
this.installPlugin()
|
|
} else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
|
|
const { uppy, ...options } = {
|
|
...this.props,
|
|
inline: false,
|
|
onRequestCloseModal: onRequestClose,
|
|
}
|
|
this.plugin.setOptions(options)
|
|
}
|
|
if (prevProps.open && !open) {
|
|
this.plugin.closeModal()
|
|
} else if (!prevProps.open && open) {
|
|
this.plugin.openModal()
|
|
}
|
|
}
|
|
|
|
componentWillUnmount(): void {
|
|
this.uninstallPlugin()
|
|
}
|
|
|
|
installPlugin(): void {
|
|
const {
|
|
target = this.container,
|
|
open,
|
|
onRequestClose,
|
|
uppy,
|
|
...rest
|
|
} = this.props
|
|
const options = {
|
|
id: 'DashboardModal',
|
|
...rest,
|
|
inline: false,
|
|
target,
|
|
open,
|
|
onRequestCloseModal: onRequestClose,
|
|
}
|
|
|
|
uppy.use(DashboardPlugin<M, B>, options)
|
|
|
|
this.plugin = uppy.getPlugin(options.id)!
|
|
if (open) {
|
|
this.plugin.openModal()
|
|
}
|
|
}
|
|
|
|
uninstallPlugin(props = this.props): void {
|
|
const { uppy } = props
|
|
|
|
uppy.removePlugin(this.plugin)
|
|
}
|
|
|
|
render() {
|
|
return h('div', {
|
|
className: 'uppy-Container',
|
|
ref: (container: HTMLElement) => {
|
|
this.container = container
|
|
},
|
|
...getHTMLProps(this.props),
|
|
})
|
|
}
|
|
}
|
|
|
|
export default DashboardModal
|