From 5f0c9d5312b9ac748476be84117a76267174abef Mon Sep 17 00:00:00 2001 From: Murderlon Date: Wed, 29 May 2024 14:34:14 +0200 Subject: [PATCH] examples: make React example up-to-date --- examples/react-example/App.jsx | 114 --------------------------- examples/react-example/App.tsx | 49 ++++++++++++ examples/react-example/index.html | 2 +- examples/react-example/main.jsx | 8 -- examples/react-example/main.tsx | 6 ++ examples/react-example/package.json | 5 +- examples/react-example/tsconfig.json | 21 +++++ yarn.lock | 7 +- 8 files changed, 80 insertions(+), 132 deletions(-) delete mode 100644 examples/react-example/App.jsx create mode 100644 examples/react-example/App.tsx delete mode 100644 examples/react-example/main.jsx create mode 100644 examples/react-example/main.tsx create mode 100644 examples/react-example/tsconfig.json diff --git a/examples/react-example/App.jsx b/examples/react-example/App.jsx deleted file mode 100644 index 8f1460fcb1..0000000000 --- a/examples/react-example/App.jsx +++ /dev/null @@ -1,114 +0,0 @@ -/* eslint-disable */ -import React from'react' -import Uppy from'@uppy/core' -import Tus from'@uppy/tus' -import GoogleDrive from '@uppy/google-drive' -import Webcam from '@uppy/webcam' -import RemoteSources from '@uppy/remote-sources' -import { Dashboard, DashboardModal, DragDrop, ProgressBar, FileInput } from'@uppy/react' - -import '@uppy/core/dist/style.css' -import '@uppy/dashboard/dist/style.css' -import '@uppy/drag-drop/dist/style.css' -import '@uppy/file-input/dist/style.css' -import '@uppy/progress-bar/dist/style.css' - -export default class App extends React.Component { - constructor (props) { - super(props) - - this.state = { - showInlineDashboard: false, - open: false - } - - this.uppy = new Uppy({ id: 'uppy1', autoProceed: true, debug: true }) - .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }) - .use(Webcam) - .use(RemoteSources, { companionUrl: 'https://companion.uppy.io', sources: ['GoogleDrive', 'Box', 'Dropbox', 'Facebook', 'Instagram', 'OneDrive', 'Unsplash', 'Zoom', 'Url'], - }) - - this.uppy2 = new Uppy({ id: 'uppy2', autoProceed: false, debug: true }) - .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }) - - this.handleModalClick = this.handleModalClick.bind(this) - } - - componentWillUnmount () { - this.uppy.close({ reason: 'unmount' }) - this.uppy2.close({ reason: 'unmount' }) - } - - handleModalClick () { - this.setState({ - open: !this.state.open - }) - } - - render () { - const { showInlineDashboard } = this.state - return ( -
-

React Examples

- -

Inline Dashboard

- - {showInlineDashboard && ( - - )} - -

Modal Dashboard

-
- - this.setState({ open: false })} - /> -
- -

Drag Drop Area

- - -

Progress Bar

- - -

File Input

- -
- ) - } -} diff --git a/examples/react-example/App.tsx b/examples/react-example/App.tsx new file mode 100644 index 0000000000..e7636f1dbe --- /dev/null +++ b/examples/react-example/App.tsx @@ -0,0 +1,49 @@ +/* eslint-disable */ +import React from 'react' +import Uppy from '@uppy/core' +import Tus from '@uppy/tus' +import Webcam from '@uppy/webcam' +import RemoteSources from '@uppy/remote-sources' +import { Dashboard, useUppyState } from '@uppy/react' + +import '@uppy/core/dist/style.css' +import '@uppy/dashboard/dist/style.css' +import '@uppy/drag-drop/dist/style.css' +import '@uppy/file-input/dist/style.css' +import '@uppy/progress-bar/dist/style.css' + +const metaFields = [ + { id: 'license', name: 'License', placeholder: 'specify license' }, +] + +function createUppy() { + return new Uppy({ restrictions: { requiredMetaFields: ['license'] } }) + .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }) + .use(Webcam) + .use(RemoteSources, { + companionUrl: 'https://companion.uppy.io', + }) +} + +export default function App() { + // IMPORTANT: passing an initaliser function to useState + // to prevent creating a new Uppy instance on every render. + // useMemo is a performance hint, not a guarantee. + const [uppy] = React.useState(createUppy) + // You can access state reactively with useUppyState + const fileCount = useUppyState( + uppy, + (state) => Object.keys(state.files).length, + ) + const totalProgress = useUppyState(uppy, (state) => state.totalProgress) + // Also possible to get the state of all plugins. + const plugins = useUppyState(uppy, (state) => state.plugins) + + return ( + <> +

File count: {fileCount}

+

Total progress: {totalProgress}

+ + + ) +} diff --git a/examples/react-example/index.html b/examples/react-example/index.html index 7a885b5b25..c1ea87c947 100644 --- a/examples/react-example/index.html +++ b/examples/react-example/index.html @@ -8,6 +8,6 @@
- + diff --git a/examples/react-example/main.jsx b/examples/react-example/main.jsx deleted file mode 100644 index c9d320072f..0000000000 --- a/examples/react-example/main.jsx +++ /dev/null @@ -1,8 +0,0 @@ -/* eslint-disable */ -import React from 'react' -import { createRoot } from 'react-dom/client'; -import App from './App.jsx' - -createRoot(document.querySelector('#app')).render( - -) diff --git a/examples/react-example/main.tsx b/examples/react-example/main.tsx new file mode 100644 index 0000000000..bf7e150561 --- /dev/null +++ b/examples/react-example/main.tsx @@ -0,0 +1,6 @@ +/* eslint-disable */ +import React from 'react' +import { createRoot } from 'react-dom/client' +import App from './App.tsx' + +createRoot(document.querySelector('#app')).render() diff --git a/examples/react-example/package.json b/examples/react-example/package.json index 6a39a80aa2..d0f96ca09c 100644 --- a/examples/react-example/package.json +++ b/examples/react-example/package.json @@ -5,11 +5,8 @@ "dependencies": { "@uppy/core": "workspace:*", "@uppy/dashboard": "workspace:*", - "@uppy/drag-drop": "workspace:*", - "@uppy/file-input": "workspace:*", - "@uppy/google-drive": "workspace:*", - "@uppy/progress-bar": "workspace:*", "@uppy/react": "workspace:*", + "@uppy/remote-sources": "workspace:*", "@uppy/tus": "workspace:*", "react": "^18.0.0", "react-dom": "^18.0.0" diff --git a/examples/react-example/tsconfig.json b/examples/react-example/tsconfig.json new file mode 100644 index 0000000000..ca9e45c59b --- /dev/null +++ b/examples/react-example/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "jsxImportSource": "react", + "jsx": "react-jsx", + "esModuleInterop": true, + "skipLibCheck": true, + "target": "es2022", + "allowJs": true, + "resolveJsonModule": true, + "moduleDetection": "force", + "isolatedModules": true, + "verbatimModuleSyntax": true, + "strict": true, + "noUncheckedIndexedAccess": true, + "noImplicitOverride": true, + "module": "NodeNext", + "outDir": "dist", + "sourceMap": true, + "lib": ["es2022", "dom", "dom.iterable"], + }, +} diff --git a/yarn.lock b/yarn.lock index ba1075adff..35a4f541b9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8659,11 +8659,8 @@ __metadata: dependencies: "@uppy/core": "workspace:*" "@uppy/dashboard": "workspace:*" - "@uppy/drag-drop": "workspace:*" - "@uppy/file-input": "workspace:*" - "@uppy/google-drive": "workspace:*" - "@uppy/progress-bar": "workspace:*" "@uppy/react": "workspace:*" + "@uppy/remote-sources": "workspace:*" "@uppy/tus": "workspace:*" "@vitejs/plugin-react": "npm:^4.0.0" react: "npm:^18.0.0" @@ -9040,7 +9037,7 @@ __metadata: languageName: unknown linkType: soft -"@uppy/file-input@workspace:*, @uppy/file-input@workspace:^, @uppy/file-input@workspace:packages/@uppy/file-input": +"@uppy/file-input@workspace:^, @uppy/file-input@workspace:packages/@uppy/file-input": version: 0.0.0-use.local resolution: "@uppy/file-input@workspace:packages/@uppy/file-input" dependencies: