From b5029119352062067e65ab9538bae0c8c63aaf64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81rmin?= Date: Tue, 7 Nov 2023 11:50:25 +0100 Subject: [PATCH] Bump react and material UI to latest --- @xoutput/webapp/package.json | 10 +- @xoutput/webapp/pnpm-lock.yaml | 325 ++++++------------ @xoutput/webapp/src/index.html | 2 +- @xoutput/webapp/src/{index.ts => index.tsx} | 8 +- @xoutput/webapp/src/ui/MainMenu.tsx | 68 ++-- @xoutput/webapp/src/ui/RootElement.tsx | 5 +- @xoutput/webapp/src/ui/Router.tsx | 22 +- @xoutput/webapp/src/ui/components/Asnyc.tsx | 18 +- .../webapp/src/ui/components/Placeholder.tsx | 3 + @xoutput/webapp/src/ui/input/dpad.tsx | 123 ++++--- .../src/ui/notifications/Notifications.tsx | 46 +-- @xoutput/webapp/src/utils/PropsUtil.ts | 10 - @xoutput/webapp/vite.config.js | 1 + @xoutput/webapp/webpack.dev.js | 76 ---- @xoutput/webapp/webpack.prod.js | 65 ---- 15 files changed, 219 insertions(+), 563 deletions(-) rename @xoutput/webapp/src/{index.ts => index.tsx} (74%) create mode 100644 @xoutput/webapp/src/ui/components/Placeholder.tsx delete mode 100644 @xoutput/webapp/src/utils/PropsUtil.ts delete mode 100644 @xoutput/webapp/webpack.dev.js delete mode 100644 @xoutput/webapp/webpack.prod.js diff --git a/@xoutput/webapp/package.json b/@xoutput/webapp/package.json index 8eb9c9d8..7b9eeecc 100644 --- a/@xoutput/webapp/package.json +++ b/@xoutput/webapp/package.json @@ -20,13 +20,13 @@ "@mui/icons-material": "^5.14.16", "@mui/material": "^5.14.17", "@mui/styled-engine": "^5.14.17", - "@mui/styles": "^5.14.17", + "@mui/system": "^5.14.17", "@xoutput/api": "workspace:../api", "@xoutput/client": "workspace:../client", "moment": "^2.29.4", "qrcode": "^1.5.3", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-query": "^3.39.2", "react-router": "^6.18.0", "react-router-dom": "^6.18.0", @@ -34,8 +34,8 @@ }, "devDependencies": { "@types/qrcode": "^1.5.4", - "@types/react": "^17.0.44", - "@types/react-dom": "^17.0.14", + "@types/react": "^18.2.36", + "@types/react-dom": "^18.2.14", "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "^6.10.0", diff --git a/@xoutput/webapp/pnpm-lock.yaml b/@xoutput/webapp/pnpm-lock.yaml index 5be0c2f1..9e10fa25 100644 --- a/@xoutput/webapp/pnpm-lock.yaml +++ b/@xoutput/webapp/pnpm-lock.yaml @@ -7,22 +7,22 @@ settings: dependencies: '@emotion/react': specifier: ^11.11.1 - version: 11.11.1(@types/react@17.0.69)(react@17.0.2) + version: 11.11.1(@types/react@18.2.36)(react@18.2.0) '@emotion/styled': specifier: ^11.11.0 - version: 11.11.0(@emotion/react@11.11.1)(@types/react@17.0.69)(react@17.0.2) + version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.36)(react@18.2.0) '@mui/icons-material': specifier: ^5.14.16 - version: 5.14.16(@mui/material@5.14.17)(@types/react@17.0.69)(react@17.0.2) + version: 5.14.16(@mui/material@5.14.17)(@types/react@18.2.36)(react@18.2.0) '@mui/material': specifier: ^5.14.17 - version: 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@17.0.69)(react-dom@17.0.2)(react@17.0.2) + version: 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.36)(react-dom@18.2.0)(react@18.2.0) '@mui/styled-engine': specifier: ^5.14.17 - version: 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@17.0.2) - '@mui/styles': + version: 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0) + '@mui/system': specifier: ^5.14.17 - version: 5.14.17(@types/react@17.0.69)(react@17.0.2) + version: 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.36)(react@18.2.0) '@xoutput/api': specifier: workspace:../api version: link:../api @@ -36,20 +36,20 @@ dependencies: specifier: ^1.5.3 version: 1.5.3 react: - specifier: ^17.0.2 - version: 17.0.2 + specifier: ^18.2.0 + version: 18.2.0 react-dom: - specifier: ^17.0.2 - version: 17.0.2(react@17.0.2) + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) react-query: specifier: ^3.39.2 - version: 3.39.3(react-dom@17.0.2)(react@17.0.2) + version: 3.39.3(react-dom@18.2.0)(react@18.2.0) react-router: specifier: ^6.18.0 - version: 6.18.0(react@17.0.2) + version: 6.18.0(react@18.2.0) react-router-dom: specifier: ^6.18.0 - version: 6.18.0(react-dom@17.0.2)(react@17.0.2) + version: 6.18.0(react-dom@18.2.0)(react@18.2.0) typeface-roboto: specifier: 1.1.13 version: 1.1.13 @@ -59,11 +59,11 @@ devDependencies: specifier: ^1.5.4 version: 1.5.4 '@types/react': - specifier: ^17.0.44 - version: 17.0.69 + specifier: ^18.2.36 + version: 18.2.36 '@types/react-dom': - specifier: ^17.0.14 - version: 17.0.22 + specifier: ^18.2.14 + version: 18.2.14 '@types/react-router': specifier: ^5.1.20 version: 5.1.20 @@ -373,7 +373,7 @@ packages: resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} dev: false - /@emotion/react@11.11.1(@types/react@17.0.69)(react@17.0.2): + /@emotion/react@11.11.1(@types/react@18.2.36)(react@18.2.0): resolution: {integrity: sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==} peerDependencies: '@types/react': '*' @@ -386,12 +386,12 @@ packages: '@emotion/babel-plugin': 11.11.0 '@emotion/cache': 11.11.0 '@emotion/serialize': 1.1.2 - '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@17.0.2) + '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) '@emotion/utils': 1.2.1 '@emotion/weak-memoize': 0.3.1 - '@types/react': 17.0.69 + '@types/react': 18.2.36 hoist-non-react-statics: 3.3.2 - react: 17.0.2 + react: 18.2.0 dev: false /@emotion/serialize@1.1.2: @@ -408,7 +408,7 @@ packages: resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==} dev: false - /@emotion/styled@11.11.0(@emotion/react@11.11.1)(@types/react@17.0.69)(react@17.0.2): + /@emotion/styled@11.11.0(@emotion/react@11.11.1)(@types/react@18.2.36)(react@18.2.0): resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==} peerDependencies: '@emotion/react': ^11.0.0-rc.0 @@ -421,24 +421,24 @@ packages: '@babel/runtime': 7.23.2 '@emotion/babel-plugin': 11.11.0 '@emotion/is-prop-valid': 1.2.1 - '@emotion/react': 11.11.1(@types/react@17.0.69)(react@17.0.2) + '@emotion/react': 11.11.1(@types/react@18.2.36)(react@18.2.0) '@emotion/serialize': 1.1.2 - '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@17.0.2) + '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) '@emotion/utils': 1.2.1 - '@types/react': 17.0.69 - react: 17.0.2 + '@types/react': 18.2.36 + react: 18.2.0 dev: false /@emotion/unitless@0.8.1: resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} dev: false - /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@17.0.2): + /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0): resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==} peerDependencies: react: '>=16.8.0' dependencies: - react: 17.0.2 + react: 18.2.0 dev: false /@emotion/utils@1.2.1: @@ -697,15 +697,15 @@ packages: '@floating-ui/utils': 0.1.6 dev: false - /@floating-ui/react-dom@2.0.2(react-dom@17.0.2)(react@17.0.2): + /@floating-ui/react-dom@2.0.2(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' dependencies: '@floating-ui/dom': 1.5.3 - react: 17.0.2 - react-dom: 17.0.2(react@17.0.2) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) dev: false /@floating-ui/utils@0.1.6: @@ -762,7 +762,7 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true - /@mui/base@5.0.0-beta.23(@types/react@17.0.69)(react-dom@17.0.2)(react@17.0.2): + /@mui/base@5.0.0-beta.23(@types/react@18.2.36)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-9L8SQUGAWtd/Qi7Qem26+oSSgpY7f2iQTuvcz/rsGpyZjSomMMO6lwYeQSA0CpWM7+aN7eGoSY/WV6wxJiIxXw==} engines: {node: '>=12.0.0'} peerDependencies: @@ -774,22 +774,22 @@ packages: optional: true dependencies: '@babel/runtime': 7.23.2 - '@floating-ui/react-dom': 2.0.2(react-dom@17.0.2)(react@17.0.2) - '@mui/types': 7.2.8(@types/react@17.0.69) - '@mui/utils': 5.14.17(@types/react@17.0.69)(react@17.0.2) + '@floating-ui/react-dom': 2.0.2(react-dom@18.2.0)(react@18.2.0) + '@mui/types': 7.2.8(@types/react@18.2.36) + '@mui/utils': 5.14.17(@types/react@18.2.36)(react@18.2.0) '@popperjs/core': 2.11.8 - '@types/react': 17.0.69 + '@types/react': 18.2.36 clsx: 2.0.0 prop-types: 15.8.1 - react: 17.0.2 - react-dom: 17.0.2(react@17.0.2) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) dev: false /@mui/core-downloads-tracker@5.14.17: resolution: {integrity: sha512-eE0uxrpJAEL2ZXkeGLKg8HQDafsiXY+6eNpP4lcv3yIjFfGbU6Hj9/P7Adt8jpU+6JIhmxvILGj2r27pX+zdrQ==} dev: false - /@mui/icons-material@5.14.16(@mui/material@5.14.17)(@types/react@17.0.69)(react@17.0.2): + /@mui/icons-material@5.14.16(@mui/material@5.14.17)(@types/react@18.2.36)(react@18.2.0): resolution: {integrity: sha512-wmOgslMEGvbHZjFLru8uH5E+pif/ciXAvKNw16q6joK6EWVWU5rDYWFknDaZhCvz8ZE/K8ZnJQ+lMG6GgHzXbg==} engines: {node: '>=12.0.0'} peerDependencies: @@ -801,12 +801,12 @@ packages: optional: true dependencies: '@babel/runtime': 7.23.2 - '@mui/material': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@17.0.69)(react-dom@17.0.2)(react@17.0.2) - '@types/react': 17.0.69 - react: 17.0.2 + '@mui/material': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.36)(react-dom@18.2.0)(react@18.2.0) + '@types/react': 18.2.36 + react: 18.2.0 dev: false - /@mui/material@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@17.0.69)(react-dom@17.0.2)(react@17.0.2): + /@mui/material@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.36)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-+y0VeOLWfEA4Z98We/UH6KCo8+f2HLZDK45FY+sJf8kSojLy3VntadKtC/u0itqnXXb1Pr4wKB2tSIBW02zY4Q==} engines: {node: '>=12.0.0'} peerDependencies: @@ -824,25 +824,25 @@ packages: optional: true dependencies: '@babel/runtime': 7.23.2 - '@emotion/react': 11.11.1(@types/react@17.0.69)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@17.0.69)(react@17.0.2) - '@mui/base': 5.0.0-beta.23(@types/react@17.0.69)(react-dom@17.0.2)(react@17.0.2) + '@emotion/react': 11.11.1(@types/react@18.2.36)(react@18.2.0) + '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.36)(react@18.2.0) + '@mui/base': 5.0.0-beta.23(@types/react@18.2.36)(react-dom@18.2.0)(react@18.2.0) '@mui/core-downloads-tracker': 5.14.17 - '@mui/system': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@17.0.69)(react@17.0.2) - '@mui/types': 7.2.8(@types/react@17.0.69) - '@mui/utils': 5.14.17(@types/react@17.0.69)(react@17.0.2) - '@types/react': 17.0.69 + '@mui/system': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.36)(react@18.2.0) + '@mui/types': 7.2.8(@types/react@18.2.36) + '@mui/utils': 5.14.17(@types/react@18.2.36)(react@18.2.0) + '@types/react': 18.2.36 '@types/react-transition-group': 4.4.8 clsx: 2.0.0 csstype: 3.1.2 prop-types: 15.8.1 - react: 17.0.2 - react-dom: 17.0.2(react@17.0.2) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) react-is: 18.2.0 - react-transition-group: 4.4.5(react-dom@17.0.2)(react@17.0.2) + react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0) dev: false - /@mui/private-theming@5.14.17(@types/react@17.0.69)(react@17.0.2): + /@mui/private-theming@5.14.17(@types/react@18.2.36)(react@18.2.0): resolution: {integrity: sha512-u4zxsCm9xmQrlhVPug+Ccrtsjv7o2+rehvrgHoh0siSguvVgVQq5O3Hh10+tp/KWQo2JR4/nCEwquSXgITS1+g==} engines: {node: '>=12.0.0'} peerDependencies: @@ -853,13 +853,13 @@ packages: optional: true dependencies: '@babel/runtime': 7.23.2 - '@mui/utils': 5.14.17(@types/react@17.0.69)(react@17.0.2) - '@types/react': 17.0.69 + '@mui/utils': 5.14.17(@types/react@18.2.36)(react@18.2.0) + '@types/react': 18.2.36 prop-types: 15.8.1 - react: 17.0.2 + react: 18.2.0 dev: false - /@mui/styled-engine@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@17.0.2): + /@mui/styled-engine@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0): resolution: {integrity: sha512-AqpVjBEA7wnBvKPW168bNlqB6EN7HxTjLOY7oi275AzD/b1C7V0wqELy6NWoJb2yya5sRf7ENf4iNi3+T5cOgw==} engines: {node: '>=12.0.0'} peerDependencies: @@ -874,45 +874,14 @@ packages: dependencies: '@babel/runtime': 7.23.2 '@emotion/cache': 11.11.0 - '@emotion/react': 11.11.1(@types/react@17.0.69)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@17.0.69)(react@17.0.2) + '@emotion/react': 11.11.1(@types/react@18.2.36)(react@18.2.0) + '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.36)(react@18.2.0) csstype: 3.1.2 prop-types: 15.8.1 - react: 17.0.2 + react: 18.2.0 dev: false - /@mui/styles@5.14.17(@types/react@17.0.69)(react@17.0.2): - resolution: {integrity: sha512-CsftJtCxF3ABigNXikmBJEsI6XQDmeTQNmjaA6wbjYA+29xPMUEQD4Coe+VXGkcc2jrE6Vy8qZ3ytO8QaM9KAw==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^17.0.0 || ^18.0.0 - react: ^17.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.23.2 - '@emotion/hash': 0.9.1 - '@mui/private-theming': 5.14.17(@types/react@17.0.69)(react@17.0.2) - '@mui/types': 7.2.8(@types/react@17.0.69) - '@mui/utils': 5.14.17(@types/react@17.0.69)(react@17.0.2) - '@types/react': 17.0.69 - clsx: 2.0.0 - csstype: 3.1.2 - hoist-non-react-statics: 3.3.2 - jss: 10.10.0 - jss-plugin-camel-case: 10.10.0 - jss-plugin-default-unit: 10.10.0 - jss-plugin-global: 10.10.0 - jss-plugin-nested: 10.10.0 - jss-plugin-props-sort: 10.10.0 - jss-plugin-rule-value-function: 10.10.0 - jss-plugin-vendor-prefixer: 10.10.0 - prop-types: 15.8.1 - react: 17.0.2 - dev: false - - /@mui/system@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@17.0.69)(react@17.0.2): + /@mui/system@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.36)(react@18.2.0): resolution: {integrity: sha512-Ccz3XlbCqka6DnbHfpL3o3TfOeWQPR+ewvNAgm8gnS9M0yVMmzzmY6z0w/C1eebb+7ZP7IoLUj9vojg/GBaTPg==} engines: {node: '>=12.0.0'} peerDependencies: @@ -929,20 +898,20 @@ packages: optional: true dependencies: '@babel/runtime': 7.23.2 - '@emotion/react': 11.11.1(@types/react@17.0.69)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@17.0.69)(react@17.0.2) - '@mui/private-theming': 5.14.17(@types/react@17.0.69)(react@17.0.2) - '@mui/styled-engine': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@17.0.2) - '@mui/types': 7.2.8(@types/react@17.0.69) - '@mui/utils': 5.14.17(@types/react@17.0.69)(react@17.0.2) - '@types/react': 17.0.69 + '@emotion/react': 11.11.1(@types/react@18.2.36)(react@18.2.0) + '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.36)(react@18.2.0) + '@mui/private-theming': 5.14.17(@types/react@18.2.36)(react@18.2.0) + '@mui/styled-engine': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0) + '@mui/types': 7.2.8(@types/react@18.2.36) + '@mui/utils': 5.14.17(@types/react@18.2.36)(react@18.2.0) + '@types/react': 18.2.36 clsx: 2.0.0 csstype: 3.1.2 prop-types: 15.8.1 - react: 17.0.2 + react: 18.2.0 dev: false - /@mui/types@7.2.8(@types/react@17.0.69): + /@mui/types@7.2.8(@types/react@18.2.36): resolution: {integrity: sha512-9u0ji+xspl96WPqvrYJF/iO+1tQ1L5GTaDOeG3vCR893yy7VcWwRNiVMmPdPNpMDqx0WV1wtEW9OMwK9acWJzQ==} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -950,10 +919,10 @@ packages: '@types/react': optional: true dependencies: - '@types/react': 17.0.69 + '@types/react': 18.2.36 dev: false - /@mui/utils@5.14.17(@types/react@17.0.69)(react@17.0.2): + /@mui/utils@5.14.17(@types/react@18.2.36)(react@18.2.0): resolution: {integrity: sha512-yxnWgSS4J6DMFPw2Dof85yBkG02VTbEiqsikymMsnZnXDurtVGTIhlNuV24GTmFTuJMzEyTTU9UF+O7zaL8LEQ==} engines: {node: '>=12.0.0'} peerDependencies: @@ -965,9 +934,9 @@ packages: dependencies: '@babel/runtime': 7.23.2 '@types/prop-types': 15.7.9 - '@types/react': 17.0.69 + '@types/react': 18.2.36 prop-types: 15.8.1 - react: 17.0.2 + react: 18.2.0 react-is: 18.2.0 dev: false @@ -1057,17 +1026,17 @@ packages: '@types/node': 20.8.10 dev: true - /@types/react-dom@17.0.22: - resolution: {integrity: sha512-wHt4gkdSMb4jPp1vc30MLJxoWGsZs88URfmt3FRXoOEYrrqK3I8IuZLE/uFBb4UT6MRfI0wXFu4DS7LS0kUC7Q==} + /@types/react-dom@18.2.14: + resolution: {integrity: sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==} dependencies: - '@types/react': 17.0.69 + '@types/react': 18.2.36 dev: true /@types/react-router-dom@5.3.3: resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==} dependencies: '@types/history': 4.7.11 - '@types/react': 17.0.69 + '@types/react': 18.2.36 '@types/react-router': 5.1.20 dev: true @@ -1075,17 +1044,17 @@ packages: resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==} dependencies: '@types/history': 4.7.11 - '@types/react': 17.0.69 + '@types/react': 18.2.36 dev: true /@types/react-transition-group@4.4.8: resolution: {integrity: sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg==} dependencies: - '@types/react': 17.0.69 + '@types/react': 18.2.36 dev: false - /@types/react@17.0.69: - resolution: {integrity: sha512-klEeru//GhiQvXUBayz0Q4l3rKHWsBR/EUOhOeow6hK2jV7MlO44+8yEk6+OtPeOlRfnpUnrLXzGK+iGph5aeg==} + /@types/react@18.2.36: + resolution: {integrity: sha512-o9XFsHYLLZ4+sb9CWUYwHqFVoG61SesydF353vFMMsQziiyRu8np4n2OYMUSDZ8XuImxDr9c5tR7gidlH29Vnw==} dependencies: '@types/prop-types': 15.7.9 '@types/scheduler': 0.16.5 @@ -1549,13 +1518,6 @@ packages: which: 2.0.2 dev: true - /css-vendor@2.0.8: - resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==} - dependencies: - '@babel/runtime': 7.23.2 - is-in-browser: 1.1.3 - dev: false - /csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} @@ -2160,10 +2122,6 @@ packages: react-is: 16.13.1 dev: false - /hyphenate-style-name@1.0.4: - resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==} - dev: false - /ignore@5.2.4: resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==} engines: {node: '>= 4'} @@ -2290,10 +2248,6 @@ packages: is-extglob: 2.1.1 dev: true - /is-in-browser@1.1.3: - resolution: {integrity: sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==} - dev: false - /is-map@2.0.2: resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==} dev: true @@ -2436,68 +2390,6 @@ packages: hasBin: true dev: true - /jss-plugin-camel-case@10.10.0: - resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==} - dependencies: - '@babel/runtime': 7.23.2 - hyphenate-style-name: 1.0.4 - jss: 10.10.0 - dev: false - - /jss-plugin-default-unit@10.10.0: - resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==} - dependencies: - '@babel/runtime': 7.23.2 - jss: 10.10.0 - dev: false - - /jss-plugin-global@10.10.0: - resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==} - dependencies: - '@babel/runtime': 7.23.2 - jss: 10.10.0 - dev: false - - /jss-plugin-nested@10.10.0: - resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==} - dependencies: - '@babel/runtime': 7.23.2 - jss: 10.10.0 - tiny-warning: 1.0.3 - dev: false - - /jss-plugin-props-sort@10.10.0: - resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==} - dependencies: - '@babel/runtime': 7.23.2 - jss: 10.10.0 - dev: false - - /jss-plugin-rule-value-function@10.10.0: - resolution: {integrity: sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==} - dependencies: - '@babel/runtime': 7.23.2 - jss: 10.10.0 - tiny-warning: 1.0.3 - dev: false - - /jss-plugin-vendor-prefixer@10.10.0: - resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==} - dependencies: - '@babel/runtime': 7.23.2 - css-vendor: 2.0.8 - jss: 10.10.0 - dev: false - - /jss@10.10.0: - resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==} - dependencies: - '@babel/runtime': 7.23.2 - csstype: 3.1.2 - is-in-browser: 1.1.3 - tiny-warning: 1.0.3 - dev: false - /jsx-ast-utils@3.3.5: resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==} engines: {node: '>=4.0'} @@ -2833,15 +2725,14 @@ packages: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true - /react-dom@17.0.2(react@17.0.2): - resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==} + /react-dom@18.2.0(react@18.2.0): + resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: - react: 17.0.2 + react: ^18.2.0 dependencies: loose-envify: 1.4.0 - object-assign: 4.1.1 - react: 17.0.2 - scheduler: 0.20.2 + react: 18.2.0 + scheduler: 0.23.0 dev: false /react-is@16.13.1: @@ -2851,7 +2742,7 @@ packages: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} dev: false - /react-query@3.39.3(react-dom@17.0.2)(react@17.0.2): + /react-query@3.39.3(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -2866,8 +2757,8 @@ packages: '@babel/runtime': 7.23.2 broadcast-channel: 3.7.0 match-sorter: 6.3.1 - react: 17.0.2 - react-dom: 17.0.2(react@17.0.2) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) dev: false /react-refresh@0.14.0: @@ -2875,7 +2766,7 @@ packages: engines: {node: '>=0.10.0'} dev: true - /react-router-dom@6.18.0(react-dom@17.0.2)(react@17.0.2): + /react-router-dom@6.18.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==} engines: {node: '>=14.0.0'} peerDependencies: @@ -2883,22 +2774,22 @@ packages: react-dom: '>=16.8' dependencies: '@remix-run/router': 1.11.0 - react: 17.0.2 - react-dom: 17.0.2(react@17.0.2) - react-router: 6.18.0(react@17.0.2) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-router: 6.18.0(react@18.2.0) dev: false - /react-router@6.18.0(react@17.0.2): + /react-router@6.18.0(react@18.2.0): resolution: {integrity: sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' dependencies: '@remix-run/router': 1.11.0 - react: 17.0.2 + react: 18.2.0 dev: false - /react-transition-group@4.4.5(react-dom@17.0.2)(react@17.0.2): + /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} peerDependencies: react: '>=16.6.0' @@ -2908,16 +2799,15 @@ packages: dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 - react: 17.0.2 - react-dom: 17.0.2(react@17.0.2) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) dev: false - /react@17.0.2: - resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==} + /react@18.2.0: + resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} dependencies: loose-envify: 1.4.0 - object-assign: 4.1.1 dev: false /readdirp@3.6.0: @@ -3040,11 +2930,10 @@ packages: source-map-js: 1.0.2 dev: true - /scheduler@0.20.2: - resolution: {integrity: sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==} + /scheduler@0.23.0: + resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} dependencies: loose-envify: 1.4.0 - object-assign: 4.1.1 dev: false /semver@6.3.1: @@ -3202,10 +3091,6 @@ packages: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true - /tiny-warning@1.0.3: - resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==} - dev: false - /to-fast-properties@2.0.0: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} diff --git a/@xoutput/webapp/src/index.html b/@xoutput/webapp/src/index.html index 10e44fc9..653684e8 100644 --- a/@xoutput/webapp/src/index.html +++ b/@xoutput/webapp/src/index.html @@ -8,6 +8,6 @@
- + diff --git a/@xoutput/webapp/src/index.ts b/@xoutput/webapp/src/index.tsx similarity index 74% rename from @xoutput/webapp/src/index.ts rename to @xoutput/webapp/src/index.tsx index eaccd3d0..c3a852c6 100644 --- a/@xoutput/webapp/src/index.ts +++ b/@xoutput/webapp/src/index.tsx @@ -1,6 +1,6 @@ import './index.scss'; -import { render } from 'react-dom'; +import { createRoot } from 'react-dom/client'; import { RootElement } from './ui/RootElement'; import { gamepadService } from './gamepad/GamepadService'; import 'typeface-roboto'; @@ -15,6 +15,6 @@ function disableResize() { } disableResize(); -const element = document.createElement('div'); -document.body.appendChild(element); -render(RootElement, element); +const element = document.getElementById('root'); +const root = createRoot(element); +root.render(); diff --git a/@xoutput/webapp/src/ui/MainMenu.tsx b/@xoutput/webapp/src/ui/MainMenu.tsx index f4216dbc..087787fc 100644 --- a/@xoutput/webapp/src/ui/MainMenu.tsx +++ b/@xoutput/webapp/src/ui/MainMenu.tsx @@ -15,41 +15,15 @@ import NotificationsIcon from '@mui/icons-material/Notifications'; import InputIcon from '@mui/icons-material/Input'; import LanguageIcon from '@mui/icons-material/Language'; import Typography from '@mui/material/Typography'; -import withStyles from '@mui/styles/withStyles'; -import { Styled, StyleGenerator } from '../utils'; +import { styled } from '@mui/system'; import { MainMenuListItem } from './MainMenuListItem'; import { notificationClient } from '@xoutput/client'; import Translation from '../translation/Translation'; - -type ClassNames = 'menubarButton' | 'drawerRoot' | 'drawerHeader' | 'placeholder' | 'title'; - -const styles: StyleGenerator = (theme) => ({ - menubarButton: { - color: theme.palette.common.white, - }, - drawerRoot: { - width: '360px', - maxWidth: '360px', - }, - drawerHeader: { - backgroundColor: theme.palette.primary.main, - color: theme.palette.common.white, - padding: '10px', - }, - placeholder: { - flexGrow: 1, - }, - title: { - flexGrow: 1, - color: theme.palette.common.white, - }, -}); +import { PlaceHolder } from './components/Placeholder'; export type MainMenuProps = {}; -export type InternalMainMenuProps = Styled & MainMenuProps; - -const MainMenuComponent = ({ classes }: InternalMainMenuProps) => { +export const MainMenu = ({ }: MainMenuProps) => { const [open, setOpen] = useState(false); const [notificationCount, setNotificationCount] = useState(0); @@ -59,33 +33,47 @@ const MainMenuComponent = ({ classes }: InternalMainMenuProps) => { }); }, []); + const Title = styled(Typography)(({theme}) => ({ + color: theme.palette.common.white, + })); + + const MenubarButton = styled(IconButton)(({theme}) => ({ + color: theme.palette.common.white, + })); + + const DrawerHeader = styled('div')(({theme}) => ({ + backgroundColor: theme.palette.primary.main, + color: theme.palette.common.white, + padding: '10px', + })); + return ( <> - setOpen(true)}> + setOpen(true)}> - + - + XOutput - </Typography> + -
+ - + - + setOpen(false)}> -
-
+
+ XOutput -
+ setOpen(false)}> @@ -132,5 +120,3 @@ const MainMenuComponent = ({ classes }: InternalMainMenuProps) => { ); }; - -export const MainMenu = withStyles(styles)(MainMenuComponent); diff --git a/@xoutput/webapp/src/ui/RootElement.tsx b/@xoutput/webapp/src/ui/RootElement.tsx index a895c637..3c4b5f09 100644 --- a/@xoutput/webapp/src/ui/RootElement.tsx +++ b/@xoutput/webapp/src/ui/RootElement.tsx @@ -17,13 +17,12 @@ const theme = process.env.NODE_ENV !== 'production' ? developmentTheme : product const queryClient = new QueryClient(); -export const RootElement = ( +export const RootElement = () => - -); + ; export default RootElement; diff --git a/@xoutput/webapp/src/ui/Router.tsx b/@xoutput/webapp/src/ui/Router.tsx index 7cbfba7e..535bfce6 100644 --- a/@xoutput/webapp/src/ui/Router.tsx +++ b/@xoutput/webapp/src/ui/Router.tsx @@ -1,7 +1,5 @@ import React, { ReactElement } from 'react'; import { Route, Routes, useParams } from 'react-router'; -import withStyles from '@mui/styles/withStyles'; -import { Styled, StyleGenerator } from '../utils'; import { Notifications } from './notifications/Notifications'; import { MainMenu } from './MainMenu'; import { InputReader } from './input/InputReader'; @@ -10,22 +8,8 @@ import { MappedControllers } from './mapping/MappedControllers'; import { InputDevices } from './input/InputDevices'; import { InputDevice } from './input/InputDevice'; -type ClassNames = 'mainContent' | 'title'; - -const styles: StyleGenerator = (theme) => ({ - mainContent: { - margin: '8px', - }, - title: { - flexGrow: 1, - color: theme.palette.common.white, - }, -}); - export type RouterProps = {}; -type InternalRouterProps = Styled & RouterProps; - type ParamType = string | Record; type ReadParamsProps = { @@ -37,14 +21,14 @@ const ReadParams = ({ children }: ReadParamsProps) => { return children(params); }; -const RouterComponent = ({ classes }: InternalRouterProps) => { +export const Router = ({ }: RouterProps) => { return ( <> } /> -
+
asd} /> } /> @@ -58,5 +42,3 @@ const RouterComponent = ({ classes }: InternalRouterProps) => { ); }; - -export const Router = withStyles(styles)(RouterComponent); diff --git a/@xoutput/webapp/src/ui/components/Asnyc.tsx b/@xoutput/webapp/src/ui/components/Asnyc.tsx index 602e7d21..1c2933be 100644 --- a/@xoutput/webapp/src/ui/components/Asnyc.tsx +++ b/@xoutput/webapp/src/ui/components/Asnyc.tsx @@ -1,16 +1,6 @@ import React, { ReactElement } from 'react'; import Typography from '@mui/material/Typography'; import CircularProgress from '@mui/material/CircularProgress'; -import { StyleGenerator, Styled } from '../../utils'; -import { withStyles } from '@mui/styles'; - -type ClassNames = 'centered'; - -const styles: StyleGenerator = () => ({ - centered: { - textAlign: 'center', - }, -}); export type AsyncProps = { isLoading: boolean; @@ -20,12 +10,10 @@ export type AsyncProps = { size?: number | string; }; -type InternalAsyncProps = Styled & AsyncProps; - -const AsyncComponent = ({ classes, size, isLoading, isSuccess, error, children }: InternalAsyncProps) => { +export const Async = ({ size, isLoading, isSuccess, error, children }: AsyncProps) => { if (isLoading) { return ( -
+
); @@ -36,5 +24,3 @@ const AsyncComponent = ({ classes, size, isLoading, isSuccess, error, children } return {error}; }; - -export const Async = withStyles(styles)(AsyncComponent); diff --git a/@xoutput/webapp/src/ui/components/Placeholder.tsx b/@xoutput/webapp/src/ui/components/Placeholder.tsx new file mode 100644 index 00000000..dd07d434 --- /dev/null +++ b/@xoutput/webapp/src/ui/components/Placeholder.tsx @@ -0,0 +1,3 @@ +import React from 'react'; + +export const PlaceHolder = () => (
); \ No newline at end of file diff --git a/@xoutput/webapp/src/ui/input/dpad.tsx b/@xoutput/webapp/src/ui/input/dpad.tsx index 1e90f06d..12aaac23 100644 --- a/@xoutput/webapp/src/ui/input/dpad.tsx +++ b/@xoutput/webapp/src/ui/input/dpad.tsx @@ -2,56 +2,75 @@ import React, { Component } from 'react'; import Grid from '@mui/material/Grid'; import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; import StopIcon from '@mui/icons-material/Stop'; -import withStyles from '@mui/styles/withStyles'; import { grey } from '@mui/material/colors'; -import { StyleGenerator, Styled } from '../../utils'; +import { styled } from '@mui/system'; -type ClassNames = 'container' | 'iconWrapper' | 'active'; +export type ArrowProps = { + active: boolean; + rotate: number; +} -const styles: StyleGenerator = (theme) => ({ - container: { - width: '83.75px', - margin: 'auto', - }, - iconWrapper: { - textAlign: 'center', - }, - active: { +const Arrow = ({ active, rotate }: ArrowProps) => { + const ActiveIcon = styled(ArrowUpwardIcon)(({theme}) => ({ backgroundColor: theme.palette.primary.main, borderRadius: '30px', color: grey[50], - }, -}); + })); + + const Icon = active ? ActiveIcon : ArrowUpwardIcon; -export interface DpadProps extends Styled { + return + + ; +} + +export type IdleProps = { + active: boolean; +} + +const Idle = ({ active }: IdleProps) => { + const ActiveIcon = styled(StopIcon)(({theme}) => ({ + backgroundColor: theme.palette.primary.main, + borderRadius: '30px', + color: grey[50], + })); + + const Icon = active ? ActiveIcon : ArrowUpwardIcon; + + return + + ; +} + +export type DpadProps = { up: number; down: number; left: number; right: number; } -class DpadComponent extends Component { - private getActiveIndex(): number { - if (this.props.up) { - if (this.props.left) { +export const Dpad = (props: DpadProps) => { + const getActiveIndex = (): number => { + if (props.up) { + if (props.left) { return 1; - } else if (this.props.right) { + } else if (props.right) { return 3; } else { return 2; } - } else if (this.props.down) { - if (this.props.left) { + } else if (props.down) { + if (props.left) { return 7; - } else if (this.props.right) { + } else if (props.right) { return 9; } else { return 8; } } else { - if (this.props.left) { + if (props.left) { return 4; - } else if (this.props.right) { + } else if (props.right) { return 6; } else { return 5; @@ -59,45 +78,19 @@ class DpadComponent extends Component { } } - private getColor(themeClass: string, i: number): string { - return this.getActiveIndex() === i ? themeClass : ''; - } - - render() { - const { classes } = this.props; + const activeIndex = getActiveIndex(); - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); - } + return ( + + + + + + + + + + + + ); } - -export const Dpad = withStyles(styles)(DpadComponent); diff --git a/@xoutput/webapp/src/ui/notifications/Notifications.tsx b/@xoutput/webapp/src/ui/notifications/Notifications.tsx index f817cc76..9538bd5f 100644 --- a/@xoutput/webapp/src/ui/notifications/Notifications.tsx +++ b/@xoutput/webapp/src/ui/notifications/Notifications.tsx @@ -1,12 +1,10 @@ import React, { ReactElement } from 'react'; import Typography from '@mui/material/Typography'; -import withStyles from '@mui/styles/withStyles'; import red from '@mui/material/colors/red'; import yellow from '@mui/material/colors/yellow'; import CancelIcon from '@mui/icons-material/Cancel'; import WarningIcon from '@mui/icons-material/Warning'; import InfoIcon from '@mui/icons-material/Info'; -import { Styled, StyleGenerator, Classes } from '../../utils'; import Translation from '../../translation/Translation'; import { Async } from '../components/Asnyc'; import Card from '@mui/material/Card'; @@ -14,35 +12,11 @@ import Button from '@mui/material/Button'; import moment from 'moment'; import { notificationClient } from '@xoutput/client'; import { useNotificationsQuery } from '../../queries/useNotificationsQuery'; - -type ClassNames = 'card' | 'placeholder' | 'cancelIcon' | 'warningIcon' | 'infoIcon'; - -const styles: StyleGenerator = () => ({ - card: { - padding: '10px', - alignItems: 'center', - }, - placeholder: { - flexGrow: 1, - }, - cancelIcon: { - padding: '0 10px 0 0', - color: red[500], - }, - warningIcon: { - padding: '0 10px 0 0', - color: yellow[500], - }, - infoIcon: { - padding: '0 10px 0 0', - }, -}); +import { PlaceHolder } from '../components/Placeholder'; export type NotificationsProps = {}; -type InternalNotificationsProps = Styled & NotificationsProps; - -const NotificationsComponent = ({ classes }: InternalNotificationsProps) => { +export const Notifications = ({ }: NotificationsProps) => { const { data: notifications, isLoading, isSuccess, error, refetch } = useNotificationsQuery(); function acknowledge(id: string): Promise { @@ -51,14 +25,14 @@ const NotificationsComponent = ({ classes }: InternalNotificationsProps) => { }); } - function createIcon(level: string, classes: Classes): ReactElement { + function createIcon(level: string): ReactElement { switch (level) { case 'Error': - return ; + return ; case 'Warning': - return ; + return ; case 'Information': - return ; + return ; } } @@ -74,13 +48,13 @@ const NotificationsComponent = ({ classes }: InternalNotificationsProps) => { {() => ( <> {notifications.map((n) => ( - -
{createIcon(n.level, classes)}
+ +
{createIcon(n.level)}
{Translation.translate(n.key, n.parameters)} {getTime(n.createdAt)}
-
+ {n.acknowledged ? null : (