diff --git a/packages/@uppy/informer/.npmignore b/packages/@uppy/informer/.npmignore new file mode 100644 index 000000000..6c816673f --- /dev/null +++ b/packages/@uppy/informer/.npmignore @@ -0,0 +1 @@ +tsconfig.* diff --git a/packages/@uppy/informer/src/FadeIn.jsx b/packages/@uppy/informer/src/FadeIn.tsx similarity index 72% rename from packages/@uppy/informer/src/FadeIn.jsx rename to packages/@uppy/informer/src/FadeIn.tsx index 950a7ed0a..4b9f106da 100644 --- a/packages/@uppy/informer/src/FadeIn.jsx +++ b/packages/@uppy/informer/src/FadeIn.tsx @@ -1,23 +1,23 @@ -import { h, Component, createRef } from 'preact' +import { h, Component, createRef, type ComponentChild } from 'preact' const TRANSITION_MS = 300 export default class FadeIn extends Component { ref = createRef() - componentWillEnter (callback) { + componentWillEnter(callback: () => void): void { this.ref.current.style.opacity = '1' this.ref.current.style.transform = 'none' setTimeout(callback, TRANSITION_MS) } - componentWillLeave (callback) { + componentWillLeave(callback: () => void): void { this.ref.current.style.opacity = '0' this.ref.current.style.transform = 'translateY(350%)' setTimeout(callback, TRANSITION_MS) } - render () { + render(): ComponentChild { const { children } = this.props return ( diff --git a/packages/@uppy/informer/src/Informer.jsx b/packages/@uppy/informer/src/Informer.tsx similarity index 58% rename from packages/@uppy/informer/src/Informer.jsx rename to packages/@uppy/informer/src/Informer.tsx index b8d0ac204..f198a97cf 100644 --- a/packages/@uppy/informer/src/Informer.jsx +++ b/packages/@uppy/informer/src/Informer.tsx @@ -1,12 +1,18 @@ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ -import { h } from 'preact' +import { h, type ComponentChild } from 'preact' import { UIPlugin } from '@uppy/core' -import FadeIn from './FadeIn.jsx' -import TransitionGroup from './TransitionGroup.js' +import type { State, UIPluginOptions, Uppy } from '@uppy/core' +import type { Body, Meta } from '@uppy/utils/lib/UppyFile' +import FadeIn from './FadeIn.tsx' +import TransitionGroup from './TransitionGroup.ts' +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore We don't want TS to generate types for the package.json import packageJson from '../package.json' +export type InformerOptions = UIPluginOptions + /** * Informer * Shows rad message bubbles @@ -14,38 +20,38 @@ import packageJson from '../package.json' * or for errors: `uppy.info('Error uploading img.jpg', 'error', 5000)` * */ -export default class Informer extends UIPlugin { +export default class Informer extends UIPlugin< + UIPluginOptions, + M, + B +> { static VERSION = packageJson.version - constructor (uppy, opts) { + constructor(uppy: Uppy, opts?: UIPluginOptions) { super(uppy, opts) this.type = 'progressindicator' this.id = this.opts.id || 'Informer' this.title = 'Informer' - - // set default options - const defaultOptions = {} - // merge default options with the ones set by user - this.opts = { ...defaultOptions, ...opts } } - render = (state) => { + render = (state: State): ComponentChild => { return (
{state.info.map((info) => (

- {info.message} - {' '} + {info.message}{' '} {info.details && ( alert(`${info.message} \n\n ${info.details}`)} + onClick={() => + // eslint-disable-next-line no-alert + alert(`${info.message} \n\n ${info.details}`) + } > ? @@ -58,7 +64,7 @@ export default class Informer extends UIPlugin { ) } - install () { + install(): void { const { target } = this.opts if (target) { this.mount(target, this) diff --git a/packages/@uppy/informer/src/TransitionGroup.js b/packages/@uppy/informer/src/TransitionGroup.ts similarity index 71% rename from packages/@uppy/informer/src/TransitionGroup.js rename to packages/@uppy/informer/src/TransitionGroup.ts index 2cd270397..47a5ef047 100644 --- a/packages/@uppy/informer/src/TransitionGroup.js +++ b/packages/@uppy/informer/src/TransitionGroup.ts @@ -1,3 +1,6 @@ +// INFO: not typing copy pasted libarary code +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-nocheck /* eslint-disable */ /** * @source https://github.com/developit/preact-transition-group @@ -5,20 +8,23 @@ import { Component, cloneElement, h, toChildArray } from 'preact' -function assign (obj, props) { +function assign(obj, props) { return Object.assign(obj, props) } -function getKey (vnode, fallback) { +function getKey(vnode, fallback) { return vnode?.key ?? fallback } -function linkRef (component, name) { +function linkRef(component, name) { const cache = component._ptgLinkedRefs || (component._ptgLinkedRefs = {}) - return cache[name] || (cache[name] = c => { - component.refs[name] = c - }) + return ( + cache[name] || + (cache[name] = (c) => { + component.refs[name] = c + }) + ) } -function getChildMapping (children) { +function getChildMapping(children) { const out = {} for (let i = 0; i < children.length; i++) { if (children[i] != null) { @@ -29,11 +35,12 @@ function getChildMapping (children) { return out } -function mergeChildMappings (prev, next) { +function mergeChildMappings(prev, next) { prev = prev || {} next = next || {} - const getValueForKey = key => (next.hasOwnProperty(key) ? next[key] : prev[key]) + const getValueForKey = (key) => + next.hasOwnProperty(key) ? next[key] : prev[key] // For each key of `next`, the list of keys to insert before that key in // the combined list @@ -56,7 +63,8 @@ function mergeChildMappings (prev, next) { if (nextKeysPending.hasOwnProperty(nextKey)) { for (let i = 0; i < nextKeysPending[nextKey].length; i++) { const pendingNextKey = nextKeysPending[nextKey][i] - childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey) + childMapping[nextKeysPending[nextKey][i]] = + getValueForKey(pendingNextKey) } } childMapping[nextKey] = getValueForKey(nextKey) @@ -70,16 +78,18 @@ function mergeChildMappings (prev, next) { return childMapping } -const identity = i => i +const identity = (i) => i class TransitionGroup extends Component { - constructor (props, context) { + constructor(props, context) { super(props, context) this.refs = {} this.state = { - children: getChildMapping(toChildArray(toChildArray(this.props.children)) || []), + children: getChildMapping( + toChildArray(toChildArray(this.props.children)) || [], + ), } this.performAppear = this.performAppear.bind(this) @@ -87,14 +97,14 @@ class TransitionGroup extends Component { this.performLeave = this.performLeave.bind(this) } - componentWillMount () { + componentWillMount() { this.currentlyTransitioningKeys = {} this.keysToAbortLeave = [] this.keysToEnter = [] this.keysToLeave = [] } - componentDidMount () { + componentDidMount() { const initialChildMapping = this.state.children for (const key in initialChildMapping) { if (initialChildMapping[key]) { @@ -104,11 +114,13 @@ class TransitionGroup extends Component { } } - componentWillReceiveProps (nextProps) { - const nextChildMapping = getChildMapping(toChildArray(nextProps.children) || []) + componentWillReceiveProps(nextProps) { + const nextChildMapping = getChildMapping( + toChildArray(nextProps.children) || [], + ) const prevChildMapping = this.state.children - this.setState(prevState => ({ + this.setState((prevState) => ({ children: mergeChildMappings(prevState.children, nextChildMapping), })) @@ -118,10 +130,18 @@ class TransitionGroup extends Component { if (nextChildMapping.hasOwnProperty(key)) { const hasPrev = prevChildMapping && prevChildMapping.hasOwnProperty(key) // We should re-enter the component and abort its leave function - if (nextChildMapping[key] && hasPrev && this.currentlyTransitioningKeys[key]) { + if ( + nextChildMapping[key] && + hasPrev && + this.currentlyTransitioningKeys[key] + ) { this.keysToEnter.push(key) this.keysToAbortLeave.push(key) - } else if (nextChildMapping[key] && !hasPrev && !this.currentlyTransitioningKeys[key]) { + } else if ( + nextChildMapping[key] && + !hasPrev && + !this.currentlyTransitioningKeys[key] + ) { this.keysToEnter.push(key) } } @@ -130,14 +150,18 @@ class TransitionGroup extends Component { for (key in prevChildMapping) { if (prevChildMapping.hasOwnProperty(key)) { const hasNext = nextChildMapping && nextChildMapping.hasOwnProperty(key) - if (prevChildMapping[key] && !hasNext && !this.currentlyTransitioningKeys[key]) { + if ( + prevChildMapping[key] && + !hasNext && + !this.currentlyTransitioningKeys[key] + ) { this.keysToLeave.push(key) } } } } - componentDidUpdate () { + componentDidUpdate() { const { keysToEnter } = this this.keysToEnter = [] keysToEnter.forEach(this.performEnter) @@ -147,14 +171,14 @@ class TransitionGroup extends Component { keysToLeave.forEach(this.performLeave) } - _finishAbort (key) { + _finishAbort(key) { const idx = this.keysToAbortLeave.indexOf(key) if (idx !== -1) { this.keysToAbortLeave.splice(idx, 1) } } - performAppear (key) { + performAppear(key) { this.currentlyTransitioningKeys[key] = true const component = this.refs[key] @@ -166,7 +190,7 @@ class TransitionGroup extends Component { } } - _handleDoneAppearing (key) { + _handleDoneAppearing(key) { const component = this.refs[key] if (component?.componentDidAppear) { component.componentDidAppear() @@ -175,7 +199,9 @@ class TransitionGroup extends Component { delete this.currentlyTransitioningKeys[key] this._finishAbort(key) - const currentChildMapping = getChildMapping(toChildArray(this.props.children) || []) + const currentChildMapping = getChildMapping( + toChildArray(this.props.children) || [], + ) if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) { // This was removed before it had fully appeared. Remove it. @@ -183,7 +209,7 @@ class TransitionGroup extends Component { } } - performEnter (key) { + performEnter(key) { this.currentlyTransitioningKeys[key] = true const component = this.refs[key] @@ -195,7 +221,7 @@ class TransitionGroup extends Component { } } - _handleDoneEntering (key) { + _handleDoneEntering(key) { const component = this.refs[key] if (component?.componentDidEnter) { component.componentDidEnter() @@ -204,7 +230,9 @@ class TransitionGroup extends Component { delete this.currentlyTransitioningKeys[key] this._finishAbort(key) - const currentChildMapping = getChildMapping(toChildArray(this.props.children) || []) + const currentChildMapping = getChildMapping( + toChildArray(this.props.children) || [], + ) if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) { // This was removed before it had fully entered. Remove it. @@ -212,7 +240,7 @@ class TransitionGroup extends Component { } } - performLeave (key) { + performLeave(key) { // If we should immediately abort this leave function, // don't run the leave transition at all. const idx = this.keysToAbortLeave.indexOf(key) @@ -233,7 +261,7 @@ class TransitionGroup extends Component { } } - _handleDoneLeaving (key) { + _handleDoneLeaving(key) { // If we should immediately abort the leave, // then skip this altogether const idx = this.keysToAbortLeave.indexOf(key) @@ -249,7 +277,9 @@ class TransitionGroup extends Component { delete this.currentlyTransitioningKeys[key] - const currentChildMapping = getChildMapping(toChildArray(this.props.children) || []) + const currentChildMapping = getChildMapping( + toChildArray(this.props.children) || [], + ) if (currentChildMapping && currentChildMapping.hasOwnProperty(key)) { // This entered again before it fully left. Add it again. @@ -261,15 +291,31 @@ class TransitionGroup extends Component { } } - render ({ childFactory, transitionLeave, transitionName, transitionAppear, transitionEnter, transitionLeaveTimeout, transitionEnterTimeout, transitionAppearTimeout, component, ...props }, { children }) { + render( + { + childFactory, + transitionLeave, + transitionName, + transitionAppear, + transitionEnter, + transitionLeaveTimeout, + transitionEnterTimeout, + transitionAppearTimeout, + component, + ...props + }, + { children }, + ) { // TODO: we could get rid of the need for the wrapper node // by cloning a single child - const childrenToRender = Object.entries(children).map(([key, child]) => { - if (!child) return undefined + const childrenToRender = Object.entries(children) + .map(([key, child]) => { + if (!child) return undefined - const ref = linkRef(this, key); - return cloneElement(childFactory(child), { ref, key }) - }).filter(Boolean) + const ref = linkRef(this, key) + return cloneElement(childFactory(child), { ref, key }) + }) + .filter(Boolean) return h(component, props, childrenToRender) } diff --git a/packages/@uppy/informer/src/index.js b/packages/@uppy/informer/src/index.js deleted file mode 100644 index 9c62b89ff..000000000 --- a/packages/@uppy/informer/src/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Informer.jsx' diff --git a/packages/@uppy/informer/src/index.ts b/packages/@uppy/informer/src/index.ts new file mode 100644 index 000000000..4fdd12b2f --- /dev/null +++ b/packages/@uppy/informer/src/index.ts @@ -0,0 +1 @@ +export { default } from './Informer.tsx' diff --git a/packages/@uppy/informer/tsconfig.build.json b/packages/@uppy/informer/tsconfig.build.json new file mode 100644 index 000000000..1b0ca4109 --- /dev/null +++ b/packages/@uppy/informer/tsconfig.build.json @@ -0,0 +1,25 @@ +{ + "extends": "../../../tsconfig.shared", + "compilerOptions": { + "noImplicitAny": false, + "outDir": "./lib", + "paths": { + "@uppy/utils/lib/*": ["../utils/src/*"], + "@uppy/core": ["../core/src/index.js"], + "@uppy/core/lib/*": ["../core/src/*"] + }, + "resolveJsonModule": false, + "rootDir": "./src", + "skipLibCheck": true + }, + "include": ["./src/**/*.*"], + "exclude": ["./src/**/*.test.ts"], + "references": [ + { + "path": "../utils/tsconfig.build.json" + }, + { + "path": "../core/tsconfig.build.json" + } + ] +} diff --git a/packages/@uppy/informer/tsconfig.json b/packages/@uppy/informer/tsconfig.json new file mode 100644 index 000000000..a76c3b714 --- /dev/null +++ b/packages/@uppy/informer/tsconfig.json @@ -0,0 +1,21 @@ +{ + "extends": "../../../tsconfig.shared", + "compilerOptions": { + "emitDeclarationOnly": false, + "noEmit": true, + "paths": { + "@uppy/utils/lib/*": ["../utils/src/*"], + "@uppy/core": ["../core/src/index.js"], + "@uppy/core/lib/*": ["../core/src/*"], + }, + }, + "include": ["./package.json", "./src/**/*.*"], + "references": [ + { + "path": "../utils/tsconfig.build.json", + }, + { + "path": "../core/tsconfig.build.json", + }, + ], +}