diff --git a/docs/framework-integrations/react.mdx b/docs/framework-integrations/react.mdx index 5d2267ea33..d596366b3f 100644 --- a/docs/framework-integrations/react.mdx +++ b/docs/framework-integrations/react.mdx @@ -74,7 +74,7 @@ times, this is needed if you are building a custom UI for Uppy in React. const [uppy] = useState(() => new Uppy()); const files = useUppyState(uppy, (state) => state.files); -const totalProgress = useUppyState(uppy, (state) => state.totalProgress); +const totalProgress = useUppyState(uppy, (state) => state.progress); // We can also get specific plugin state. // Note that the value on `plugins` depends on the `id` of the plugin. const metaFields = useUppyState( diff --git a/docs/uppy-core.mdx b/docs/uppy-core.mdx index d00a7160bd..4685d18d29 100644 --- a/docs/uppy-core.mdx +++ b/docs/uppy-core.mdx @@ -794,7 +794,7 @@ const state = { capabilities: { resumableUploads: false, }, - totalProgress: 0, + progress: null, meta: { ...this.opts.meta }, info: { isHidden: true, diff --git a/examples/react-example/App.tsx b/examples/react-example/App.tsx index 3387e8045c..014687a14a 100644 --- a/examples/react-example/App.tsx +++ b/examples/react-example/App.tsx @@ -77,7 +77,7 @@ export default function App() { uppy, (state) => Object.keys(state.files).length, ) - const totalProgress = useUppyState(uppy, (state) => state.totalProgress) + const totalProgress = useUppyState(uppy, (state) => state.progress) // Also possible to get the state of all plugins. const plugins = useUppyState(uppy, (state) => state.plugins) diff --git a/examples/react-native-expo/App.js b/examples/react-native-expo/App.js index f380b4251a..3454bb9a2a 100644 --- a/examples/react-native-expo/App.js +++ b/examples/react-native-expo/App.js @@ -39,7 +39,7 @@ export default function App () { setState({ progress: progress.bytesUploaded, total: progress.bytesTotal, - totalProgress: uppy.state.totalProgress, + totalProgress: uppy.state.progress, uploadStarted: true, }) }) diff --git a/packages/@uppy/core/src/Uppy.test.ts b/packages/@uppy/core/src/Uppy.test.ts index 88bcb12184..653c8230cd 100644 --- a/packages/@uppy/core/src/Uppy.test.ts +++ b/packages/@uppy/core/src/Uppy.test.ts @@ -361,7 +361,7 @@ describe('src/Core', () => { const coreStateUpdateEventMock = vi.fn() core.on('cancel-all', coreCancelEventMock) core.on('state-update', coreStateUpdateEventMock) - core.setState({ foo: 'bar', totalProgress: 30 }) + core.setState({ foo: 'bar', totalProgress: 30, progress: 30 }) core.cancelAll() @@ -1382,6 +1382,7 @@ describe('src/Core', () => { expect(core.getFiles().length).toEqual(1) core.setState({ totalProgress: 50, + progress: 30, }) const file = core.getFile(fileId) @@ -1390,6 +1391,7 @@ describe('src/Core', () => { expect(core.getFiles().length).toEqual(0) expect(fileRemovedEventMock.mock.calls[0][0]).toEqual(file) expect(core.getState().totalProgress).toEqual(0) + expect(core.getState().progress).toEqual(0) }) }) @@ -1796,6 +1798,7 @@ describe('src/Core', () => { }) expect(core.getState().totalProgress).toBe(36) + expect(core.getState().progress).toBe(36) // @ts-ignore finishUpload() @@ -1855,6 +1858,7 @@ describe('src/Core', () => { // foo.jpg at 35%, bar.jpg has unknown size and will not be counted expect(core.getState().totalProgress).toBe(36) + expect(core.getState().progress).toBe(36) core.destroy() }) @@ -1904,6 +1908,7 @@ describe('src/Core', () => { core[Symbol.for('uppy test: updateTotalProgress')]() expect(core.getState().totalProgress).toEqual(66) + expect(core.getState().progress).toBe(66) }) it('should emit the progress', () => { @@ -1948,6 +1953,7 @@ describe('src/Core', () => { core[Symbol.for('uppy test: updateTotalProgress')]() expect(core.getState().totalProgress).toEqual(66) + expect(core.getState().progress).toEqual(66) expect(core.getState().allowNewUpload).toEqual(true) expect(core.getState().error).toEqual(null) expect(core.getState().recoveredState).toEqual(null) @@ -1972,6 +1978,7 @@ describe('src/Core', () => { core.clear() expect(core.getState()).toMatchObject({ totalProgress: 0, + progress: null, allowNewUpload: true, error: null, recoveredState: null, diff --git a/packages/@uppy/react/src/useUppyState.test.tsx b/packages/@uppy/react/src/useUppyState.test.tsx index 7a8d376319..dd46815cdd 100644 --- a/packages/@uppy/react/src/useUppyState.test.tsx +++ b/packages/@uppy/react/src/useUppyState.test.tsx @@ -13,13 +13,23 @@ describe('useUppyState', () => { const { result, rerender } = renderHook(() => useUppyState(uppy, (state) => state.totalProgress), ) + const { result: result2, rerender: rerender2 } = renderHook(() => + useUppyState(uppy, (state) => state.progress), + ) expectTypeOf(result.current).toEqualTypeOf() + expectTypeOf(result2.current).toEqualTypeOf() expect(result.current).toBe(0) + expect(result2.current).toBe(null) + act(() => uppy.setState({ progress: 50 })) act(() => uppy.setState({ totalProgress: 50 })) rerender() + rerender2() expect(result.current).toBe(50) + expect(result2.current).toBe(50) rerender() + rerender2() expect(result.current).toBe(50) + expect(result2.current).toBe(50) }) it('does not re-render unnecessarily', () => {