From 0ee583c6629b04164361aa17393a619004323954 Mon Sep 17 00:00:00 2001 From: Peter Hoppe Date: Tue, 28 Feb 2023 16:04:54 +0100 Subject: [PATCH] deleteModal --- package-lock.json | 103 +++++++++++++++++++---------------- package.json | 11 ++-- src/App.tsx | 3 +- src/components/DogNavbar.css | 4 ++ src/components/DogNavbar.tsx | 34 +++++++----- 5 files changed, 88 insertions(+), 67 deletions(-) create mode 100644 src/components/DogNavbar.css diff --git a/package-lock.json b/package-lock.json index 8368a48..706e0c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,14 +10,15 @@ "dependencies": { "@craco/craco": "^7.0.0", "@dnd-kit/core": "^6.0.7", - "@emotion/react": "^11.10.5", + "@emotion/react": "^11.10.6", "@ionic/cli": "^6.20.8", "@ionic/react": "^6.5.4", - "@mantine/core": "^5.10.3", - "@mantine/dropzone": "^5.10.3", + "@mantine/core": "^5.10.5", + "@mantine/dropzone": "^5.10.5", "@mantine/form": "^5.10.3", - "@mantine/hooks": "^5.10.3", - "@mantine/notifications": "^5.10.3", + "@mantine/hooks": "^5.10.5", + "@mantine/modals": "^5.10.5", + "@mantine/notifications": "^5.10.5", "@radix-ui/react-icons": "^1.1.1", "@tabler/icons": "^2.4.0", "@testing-library/jest-dom": "^5.16.5", @@ -2228,12 +2229,11 @@ } }, "node_modules/@emotion/babel-plugin": { - "version": "11.10.5", - "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz", - "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==", + "version": "11.10.6", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz", + "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==", "dependencies": { "@babel/helper-module-imports": "^7.16.7", - "@babel/plugin-syntax-jsx": "^7.17.12", "@babel/runtime": "^7.18.3", "@emotion/hash": "^0.9.0", "@emotion/memoize": "^0.8.0", @@ -2244,9 +2244,6 @@ "find-root": "^1.1.0", "source-map": "^0.5.7", "stylis": "4.1.3" - }, - "peerDependencies": { - "@babel/core": "^7.0.0" } }, "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { @@ -2291,12 +2288,12 @@ "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" }, "node_modules/@emotion/react": { - "version": "11.10.5", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz", - "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==", + "version": "11.10.6", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz", + "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==", "dependencies": { "@babel/runtime": "^7.18.3", - "@emotion/babel-plugin": "^11.10.5", + "@emotion/babel-plugin": "^11.10.6", "@emotion/cache": "^11.10.5", "@emotion/serialize": "^1.1.1", "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", @@ -2305,13 +2302,9 @@ "hoist-non-react-statics": "^3.3.1" }, "peerDependencies": { - "@babel/core": "^7.0.0", "react": ">=16.8.0" }, "peerDependenciesMeta": { - "@babel/core": { - "optional": true - }, "@types/react": { "optional": true } @@ -3639,33 +3632,33 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, "node_modules/@mantine/core": { - "version": "5.10.3", - "resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.10.3.tgz", - "integrity": "sha512-kBb8l085vg+MjAVxEDyI/koT/l2hXTBVdg6pkSJlFlMtUlhBGkp8fzqaaUiJ7C1oU//NnHAogPymHw0tjpPBgA==", + "version": "5.10.5", + "resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.10.5.tgz", + "integrity": "sha512-F4tqHSEVM9D6/iSqHfPda+Xl5XgSEPHAAkT01Zwzj4Jnbd10qGrlqr/SFUop2CIcuKYnmra9XltUahUPXBC2BQ==", "dependencies": { "@floating-ui/react": "^0.19.1", - "@mantine/styles": "5.10.3", - "@mantine/utils": "5.10.3", + "@mantine/styles": "5.10.5", + "@mantine/utils": "5.10.5", "@radix-ui/react-scroll-area": "1.0.2", "react-textarea-autosize": "8.3.4" }, "peerDependencies": { - "@mantine/hooks": "5.10.3", + "@mantine/hooks": "5.10.5", "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "node_modules/@mantine/dropzone": { - "version": "5.10.3", - "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.10.3.tgz", - "integrity": "sha512-XQKV6K/vkBqdMk9RYeyRu9UwdGmxSs0otxB+dpt8nAiWy0Ja4ORdXTPc38Xi7sq2gIJrIkwbS0XAvBiJflbrLQ==", + "version": "5.10.5", + "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.10.5.tgz", + "integrity": "sha512-tBPBuQvlvesEApECTfmYFQXbS26sAQo8VaYIebTqBy9VIUoVAM9VCKHBLqa3KMKtq+/HjKCJpaa8+Cjn9riqqQ==", "dependencies": { - "@mantine/utils": "5.10.3", + "@mantine/utils": "5.10.5", "react-dropzone": "14.2.3" }, "peerDependencies": { - "@mantine/core": "5.10.3", - "@mantine/hooks": "5.10.3", + "@mantine/core": "5.10.5", + "@mantine/hooks": "5.10.5", "react": ">=16.8.0", "react-dom": ">=16.8.0" } @@ -3683,32 +3676,46 @@ } }, "node_modules/@mantine/hooks": { - "version": "5.10.3", - "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.10.3.tgz", - "integrity": "sha512-fFDXF0A596z10QKeWAGtTZJ4QotsMxhhbjfWWRHMogY/hXHQ2S+7+GFotpF2JbzefYztpawHEJevy3eYF8cQmQ==", + "version": "5.10.5", + "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.10.5.tgz", + "integrity": "sha512-hFQp71QZDfivPzfIUOQZfMKLiOL/Cn2EnzacRlbUr55myteTfzYN8YMt+nzniE/6c4IRopFHEAdbKEtfyQc6kg==", "peerDependencies": { "react": ">=16.8.0" } }, - "node_modules/@mantine/notifications": { - "version": "5.10.3", - "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.10.3.tgz", - "integrity": "sha512-Gi/7LVonBkaz7VW8HboFBSrvliuQOopMyocrucXwVEYTSyTpws/fderdw04hyGczrReb6IhJX5eOr6qHFaNlWA==", + "node_modules/@mantine/modals": { + "version": "5.10.5", + "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-5.10.5.tgz", + "integrity": "sha512-q3BCqAxulcIZCL48vUrwSaXDhxDng/2daVky8K1mTPYNlcm9iN1mqVTUC4uFWhn4b2UmPu4UdbNePEgLuhK4Mw==", "dependencies": { - "@mantine/utils": "5.10.3", + "@mantine/utils": "5.10.5" + }, + "peerDependencies": { + "@mantine/core": "5.10.5", + "@mantine/hooks": "5.10.5", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@mantine/notifications": { + "version": "5.10.5", + "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.10.5.tgz", + "integrity": "sha512-IzTAXA7Zb9DcI94Mv5O2OinhLmI7fvs/VutDw9uCpp6OHtLuF/XN1d262jrsGhMZT0c4nuUsotSLFZF3GWZwXg==", + "dependencies": { + "@mantine/utils": "5.10.5", "react-transition-group": "4.4.2" }, "peerDependencies": { - "@mantine/core": "5.10.3", - "@mantine/hooks": "5.10.3", + "@mantine/core": "5.10.5", + "@mantine/hooks": "5.10.5", "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "node_modules/@mantine/styles": { - "version": "5.10.3", - "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.10.3.tgz", - "integrity": "sha512-OpKY207BgkJd59wSNuNaZILAUbNh1b87iY5bZOVm9u49X5cOo/n4nrkaUMw2FCZIKi6psyobtW7XYCuoldrI4w==", + "version": "5.10.5", + "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.10.5.tgz", + "integrity": "sha512-0NXk8c/XGzuTUkZc6KceF2NaTCMEu5mHR4ru0x+ttb9DGnLpHuGWduTHjSfr4hl6eAJgedD0zauO+VAhDzO9zA==", "dependencies": { "clsx": "1.1.1", "csstype": "3.0.9" @@ -3725,9 +3732,9 @@ "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" }, "node_modules/@mantine/utils": { - "version": "5.10.3", - "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.10.3.tgz", - "integrity": "sha512-ZfR1wouA/rz3xTOb2wBnrQpIiyjLcCLLvbUo7rzaG3LhFy7UoGjZ6uqIW9qDrzs7SR4tETRfMxedYagjcoCiEg==", + "version": "5.10.5", + "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.10.5.tgz", + "integrity": "sha512-FGMq4dGs5HhDAtI0z46uzxzKKPmZ3h5uKUyKg1ZHoFR1mBtcUMbB6FylFmHqKFRWlJ5IXqX9dwmiVrLYUOfTmA==", "peerDependencies": { "react": ">=16.8.0" } diff --git a/package.json b/package.json index db0f26d..815e2c6 100644 --- a/package.json +++ b/package.json @@ -5,14 +5,15 @@ "dependencies": { "@craco/craco": "^7.0.0", "@dnd-kit/core": "^6.0.7", - "@emotion/react": "^11.10.5", + "@emotion/react": "^11.10.6", "@ionic/cli": "^6.20.8", "@ionic/react": "^6.5.4", - "@mantine/core": "^5.10.3", - "@mantine/dropzone": "^5.10.3", + "@mantine/core": "^5.10.5", + "@mantine/dropzone": "^5.10.5", "@mantine/form": "^5.10.3", - "@mantine/hooks": "^5.10.3", - "@mantine/notifications": "^5.10.3", + "@mantine/hooks": "^5.10.5", + "@mantine/modals": "^5.10.5", + "@mantine/notifications": "^5.10.5", "@radix-ui/react-icons": "^1.1.1", "@tabler/icons": "^2.4.0", "@testing-library/jest-dom": "^5.16.5", diff --git a/src/App.tsx b/src/App.tsx index 66725f2..16cf7a6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,6 +27,7 @@ import Burger, Stack } from '@mantine/core'; +import { ModalsProvider } from '@mantine/modals'; import { NotificationsProvider } from '@mantine/notifications'; import { notificationAlert, notificationError, notificationSuccess } from './services/Notifications'; import DogNavbar from './components/DogNavbar'; @@ -76,7 +77,7 @@ const App: React.FC = () => return ( - +
{/* dummy header */} diff --git a/src/components/DogNavbar.css b/src/components/DogNavbar.css new file mode 100644 index 0000000..6e03e23 --- /dev/null +++ b/src/components/DogNavbar.css @@ -0,0 +1,4 @@ +button.mantine-8nr514 +{ + background-color: red; +} \ No newline at end of file diff --git a/src/components/DogNavbar.tsx b/src/components/DogNavbar.tsx index 6ba0f37..5dbb176 100644 --- a/src/components/DogNavbar.tsx +++ b/src/components/DogNavbar.tsx @@ -1,8 +1,9 @@ -import { Navbar, Text, Modal } from '@mantine/core' +import { Navbar, Text } from '@mantine/core' import * as Icons from 'react-feather'; import React, { useState } from 'react' import { Link } from 'react-router-dom' - +import { ModalsProvider, openConfirmModal } from '@mantine/modals'; +import './DogNavbar.css'; const NaveBarIcon = ({ icon, href, text = 'tooltip đź’ˇ'}: {icon: JSX.Element, href: string, text: string}) => ( @@ -19,20 +20,26 @@ const NaveBarIcon = ({ icon, href, text = 'tooltip đź’ˇ'}: {icon: JSX.Element, h const Divider = () =>
; +const openDeleteModal = () => + openConfirmModal({ + title: 'Account löschen!', + centered: true, + children: ( + + Are you sure you want to delete your profile? This action is destructive and you will have + to contact support to restore your data. + + ), + labels: { confirm: 'Account löschen', cancel: "Behalten, nicht löschen" }, + onCancel: () => console.log('Cancel'), + onConfirm: () => console.log('Confirmed') + }); function DogNavbar({hasUser, hidden, onLogout}:{hasUser: boolean, hidden: boolean, onLogout: () => void}) { - const [opened, setOpened] = useState(false); return ( <> - setOpened(false)} - title="Account löschen!" - > -

wirklich löschen?

- {/* Modal content */} - + {hasUser && -
setOpened(true)}> +
} href={''} text={'Account löschen'}/>
} @@ -75,7 +82,8 @@ function DogNavbar({hasUser, hidden, onLogout}:{hasUser: boolean, hidden: boolea Impressum - ) + + ) } export default DogNavbar