From dd703ef993b3fe062bb96108129bce4964f2cf51 Mon Sep 17 00:00:00 2001 From: Pierre Leroux Date: Thu, 28 Sep 2023 22:10:39 +0200 Subject: [PATCH 1/5] Menu componenet with radix popover lib --- package-lock.json | 554 +++++++++++++++++- package.json | 1 + .../assets/styles/components/dropdown.css | 25 +- src/renderer/common/components/menu/Menu.tsx | 161 +---- .../common/components/menu/MenuButton.tsx | 62 -- .../common/components/menu/MenuContent.tsx | 83 --- .../library/components/catalog/TagLayout.tsx | 12 +- .../publication/PublicationCard.tsx | 24 +- .../publication/PublicationListElement.tsx | 18 +- .../components/settings/KeyboardSettings.tsx | 29 +- 10 files changed, 605 insertions(+), 364 deletions(-) delete mode 100644 src/renderer/common/components/menu/MenuButton.tsx delete mode 100644 src/renderer/common/components/menu/MenuContent.tsx diff --git a/package-lock.json b/package-lock.json index a531daab1..03ab0886f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "hasInstallScript": true, "license": "BSD-3-Clause", "dependencies": { + "@radix-ui/react-popover": "^1.0.7", "@xmldom/xmldom": "^0.8.10", "classnames": "^2.3.2", "commonmark": "^0.30.0", @@ -1687,6 +1688,40 @@ "heap": ">= 0.2.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", + "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==", + "dependencies": { + "@floating-ui/utils": "^0.1.3" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", + "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "dependencies": { + "@floating-ui/core": "^1.4.2", + "@floating-ui/utils": "^0.1.3" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", + "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", + "dependencies": { + "@floating-ui/dom": "^1.5.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz", + "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz", @@ -3663,6 +3698,429 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "node_modules/@radix-ui/primitive": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", + "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, + "node_modules/@radix-ui/react-arrow": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz", + "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", + "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-context": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz", + "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", + "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-escape-keydown": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-guards": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz", + "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-scope": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz", + "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-id": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", + "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-popover": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.7.tgz", + "integrity": "sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-popper": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz", + "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@floating-ui/react-dom": "^2.0.0", + "@radix-ui/react-arrow": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-rect": "1.0.1", + "@radix-ui/react-use-size": "1.0.1", + "@radix-ui/rect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-portal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz", + "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-presence": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz", + "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", + "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", + "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", + "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz", + "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-escape-keydown": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz", + "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", + "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-rect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz", + "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/rect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-size": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz", + "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/rect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz", + "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, "node_modules/@redux-devtools/extension": { "version": "3.2.5", "resolved": "https://registry.npmjs.org/@redux-devtools/extension/-/extension-3.2.5.tgz", @@ -4311,7 +4769,7 @@ "version": "17.0.20", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz", "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==", - "dev": true, + "devOptional": true, "dependencies": { "@types/react": "^17" } @@ -5790,6 +6248,17 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, + "node_modules/aria-hidden": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz", + "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/arr-diff": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", @@ -12116,6 +12585,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-nonce": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/get-package-type": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", @@ -13859,6 +14336,14 @@ "node": ">= 0.10" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/inversify": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/inversify/-/inversify-6.0.1.tgz", @@ -20980,6 +21465,51 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-remove-scroll": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz", + "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==", + "dependencies": { + "react-remove-scroll-bar": "^2.3.3", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-remove-scroll-bar": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz", + "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==", + "dependencies": { + "react-style-singleton": "^2.2.1", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-router": { "version": "6.14.2", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz", @@ -21010,6 +21540,28 @@ "react-dom": ">=16.8" } }, + "node_modules/react-style-singleton": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", + "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==", + "dependencies": { + "get-nonce": "^1.0.0", + "invariant": "^2.2.4", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-svg-core": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/react-svg-core/-/react-svg-core-3.0.3.tgz", diff --git a/package.json b/package.json index ad8497dfb..5c15fac7b 100644 --- a/package.json +++ b/package.json @@ -251,6 +251,7 @@ } }, "dependencies": { + "@radix-ui/react-popover": "^1.0.7", "@xmldom/xmldom": "^0.8.10", "classnames": "^2.3.2", "commonmark": "^0.30.0", diff --git a/src/renderer/assets/styles/components/dropdown.css b/src/renderer/assets/styles/components/dropdown.css index e26a6c11c..4621c580b 100644 --- a/src/renderer/assets/styles/components/dropdown.css +++ b/src/renderer/assets/styles/components/dropdown.css @@ -27,32 +27,9 @@ border-color: var(--color-primary); border-style: solid; border-radius: 5px; - margin-top: 20px; position: relative; - &::after { - content: " "; - position: absolute; - top: -10px; - left: 16px; - width: 0; - height: 0; - border-style: solid; - border-width: 0 7.5px 10px 7.5px; - border-color: transparent transparent var(--color-primary) transparent; - } - - &.dropdown_right::after { - left: auto; - right: 34px; - } - - &.dropdown_publication::after { - left: auto; - right: 25px; - } - - & > * { + & > * { text-decoration: none; color: black; padding: 0.7rem; diff --git a/src/renderer/common/components/menu/Menu.tsx b/src/renderer/common/components/menu/Menu.tsx index 6b71d4b06..137944e39 100644 --- a/src/renderer/common/components/menu/Menu.tsx +++ b/src/renderer/common/components/menu/Menu.tsx @@ -6,21 +6,13 @@ // ==LICENSE-END== import * as React from "react"; -import * as ReactDOM from "react-dom"; -import { v4 as uuidv4 } from "uuid"; -import MenuButton from "./MenuButton"; -import MenuContent from "./MenuContent"; -import { connect } from "react-redux"; -import { ILibraryRootState } from "readium-desktop/renderer/library/redux/states"; -import { DialogTypeName } from "readium-desktop/common/models/dialog"; +import * as stylesDropDown from "readium-desktop/renderer/assets/styles/components/dropdown.css"; +import * as Popover from "@radix-ui/react-popover"; // eslint-disable-next-line @typescript-eslint/no-empty-interface interface IBaseProps { button: React.ReactElement; - content: React.ReactElement; - dir: string; // Direction of menu: right or left - focusMenuButton?: (ref: React.RefObject, currentMenuId: string) => void; } // IProps may typically extend: @@ -28,144 +20,37 @@ interface IBaseProps { // ReturnType // ReturnType // eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IProps extends IBaseProps, ReturnType { +interface IProps extends React.PropsWithChildren { } +// eslint-disable-next-line @typescript-eslint/no-empty-interface interface IState { - contentStyle: React.CSSProperties; - menuOpen: boolean; } -class Menu extends React.Component { - - private backFocusMenuButtonRef: React.RefObject; - private contentRef: HTMLDivElement; - private menuId: string; - - constructor(props: IProps) { - super(props); - - this.backFocusMenuButtonRef = React.createRef(); - - this.state = { - contentStyle: {}, - menuOpen: false, - }; - this.menuId = "menu-" + uuidv4(); - this.doBackFocusMenuButton = this.doBackFocusMenuButton.bind(this); - this.setBackFocusMenuButton = this.setBackFocusMenuButton.bind(this); - this.toggleOpenMenu = this.toggleOpenMenu.bind(this); - } +// FIXME / TODO +// do back focus not implemented with Radix popover menu - public componentDidUpdate(oldProps: IProps, oldState: IState) { - if (this.state.menuOpen && !oldState.menuOpen) { - this.refreshStyle(); - } - if (oldProps.infoDialogIsOpen === true && - oldProps.infoDialogIsOpen !== this.props.infoDialogIsOpen) { - this.doBackFocusMenuButton(); - } - } +class Menu extends React.Component { public render(): React.ReactElement<{}> { - const { button, dir, content } = this.props; - const contentStyle = this.state.contentStyle; return ( - <> - - {button} - - { this.state.menuOpen ? - { this.contentRef = ref; }} - doBackFocusMenuButton={this.doBackFocusMenuButton} - > - setTimeout(this.toggleOpenMenu, 1)}> - {content} - - - : <> - } - + + + + + + +
+ {this.props.children} +
+ + + + ); } - - private toggleOpenMenu() { - this.setState({ menuOpen: !this.state.menuOpen }); - } - - private offset(el: HTMLElement) { - const rect = el.getBoundingClientRect(); - const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; - const scrollTop = window.pageYOffset || document.documentElement.scrollTop; - const right = window.innerWidth - (rect.right + 19) - scrollLeft; - return { - top: rect.top + scrollTop, - left: rect.left + scrollLeft, - right, - }; - } - - private refreshStyle() { - if (!this.backFocusMenuButtonRef?.current || !this.contentRef) { - return; - } - const contentStyle: React.CSSProperties = { - position: "absolute", - }; - - // calculate vertical position of the menu - const button = this.backFocusMenuButtonRef.current; - const buttonRect = button.getBoundingClientRect(); - const bottomPos = window.innerHeight - buttonRect.bottom; - const contentElement = ReactDOM.findDOMNode(this.contentRef) as HTMLElement; - const contentHeight = contentElement.getBoundingClientRect().height; - - if (bottomPos < contentHeight) { - contentStyle.top = Math.round(this.offset(button).top - contentHeight) + "px"; - } else { - contentStyle.top = Math.round(this.offset(button).top + buttonRect.height) + "px"; - } - - if (this.props.dir === "right") { - contentStyle.right = Math.round(this.offset(button).right) + "px"; - } else { - contentStyle.left = Math.round(this.offset(button).left) + "px"; - } - - this.setState({ contentStyle }); - } - - private setBackFocusMenuButton(currentRef: React.RefObject, currentMenuId: string) { - if (currentRef?.current && this.menuId === currentMenuId) { - this.backFocusMenuButtonRef = currentRef; - } - } - - private doBackFocusMenuButton() { - if (this.backFocusMenuButtonRef?.current) { - this.backFocusMenuButtonRef.current.focus(); - } - } } -const mapStateToProps = (state: ILibraryRootState, _props: IBaseProps) => { - return { - infoDialogIsOpen: state.dialog.open - && (state.dialog.type === DialogTypeName.PublicationInfoOpds - || state.dialog.type === DialogTypeName.PublicationInfoLib - || state.dialog.type === DialogTypeName.DeletePublicationConfirm), - }; -}; - -export default connect(mapStateToProps)(Menu); +export default (Menu); diff --git a/src/renderer/common/components/menu/MenuButton.tsx b/src/renderer/common/components/menu/MenuButton.tsx deleted file mode 100644 index 58077b764..000000000 --- a/src/renderer/common/components/menu/MenuButton.tsx +++ /dev/null @@ -1,62 +0,0 @@ -// ==LICENSE-BEGIN== -// Copyright 2017 European Digital Reading Lab. All rights reserved. -// Licensed to the Readium Foundation under one or more contributor license agreements. -// Use of this source code is governed by a BSD-style license -// that can be found in the LICENSE file exposed on Github (readium) in the project repository. -// ==LICENSE-END== - -import * as React from "react"; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IBaseProps { - menuId: string; - open: boolean; - toggle: () => void; - setBackFocusMenuButton?: (ref: React.RefObject, menuID: string) => void; -} - -// IProps may typically extend: -// RouteComponentProps -// ReturnType -// ReturnType -// eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IProps extends IBaseProps { -} - -export default class MenuButton extends React.Component { - private backFocusMenuButtonRef: React.RefObject; - - constructor(props: IProps) { - super(props); - this.backFocusMenuButtonRef = React.createRef(); - - this.setBackFocusMenuButton = this.setBackFocusMenuButton.bind(this); - } - - public componentDidMount() { - this.setBackFocusMenuButton(); - } - public componentDidUpdate(_oldProps: IProps) { - this.setBackFocusMenuButton(); - } - - public render(): React.ReactElement<{}> { - const { toggle, open, menuId, children } = this.props; - return ( - - ); - } - - public setBackFocusMenuButton() { - if (this.backFocusMenuButtonRef?.current && this.props.open) { - this.props.setBackFocusMenuButton(this.backFocusMenuButtonRef, this.props.menuId); - } - } -} diff --git a/src/renderer/common/components/menu/MenuContent.tsx b/src/renderer/common/components/menu/MenuContent.tsx deleted file mode 100644 index a45bcff71..000000000 --- a/src/renderer/common/components/menu/MenuContent.tsx +++ /dev/null @@ -1,83 +0,0 @@ -// ==LICENSE-BEGIN== -// Copyright 2017 European Digital Reading Lab. All rights reserved. -// Licensed to the Readium Foundation under one or more contributor license agreements. -// Use of this source code is governed by a BSD-style license -// that can be found in the LICENSE file exposed on Github (readium) in the project repository. -// ==LICENSE-END== - -import * as React from "react"; -import * as ReactDOM from "react-dom"; - -import AccessibleMenu from "./AccessibleMenu"; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IBaseProps { - id: string; - open: boolean; - dir: string; - menuStyle: React.CSSProperties; // {[key: string]: string}; - toggle: () => void; - doBackFocusMenuButton?: () => void; - setContentRef?: (ref: HTMLDivElement) => void; -} - -// IProps may typically extend: -// RouteComponentProps -// ReturnType -// ReturnType -// eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IProps extends IBaseProps { -} - -export default class MenuContent extends React.Component { - private appElement: HTMLElement; - private appOverlayElement: HTMLElement; - private rootElement: HTMLElement; - - constructor(props: IProps) { - super(props); - - this.appElement = document.getElementById("app"); - this.appOverlayElement = document.getElementById("app-overlay"); - this.rootElement = document.createElement("div"); - } - - public componentDidMount() { - this.appElement.setAttribute("aria-hidden", "true"); - this.appOverlayElement.appendChild(this.rootElement); - } - - public componentWillUnmount() { - this.appElement.setAttribute("aria-hidden", "false"); - this.appOverlayElement.removeChild(this.rootElement); - } - - public render() { - const { open, toggle, setContentRef } = this.props; - return ReactDOM.createPortal( - ( - - - - ), - this.rootElement, - ); - } -} diff --git a/src/renderer/library/components/catalog/TagLayout.tsx b/src/renderer/library/components/catalog/TagLayout.tsx index f93c8593c..196c0b5e9 100644 --- a/src/renderer/library/components/catalog/TagLayout.tsx +++ b/src/renderer/library/components/catalog/TagLayout.tsx @@ -5,10 +5,8 @@ // that can be found in the LICENSE file exposed on Github (readium) in the project repository. // ==LICENSE-END== -import classNames from "classnames"; import * as React from "react"; import * as ArrowIcon from "readium-desktop/renderer/assets/icons/chevron-down.svg"; -import * as stylesDropDown from "readium-desktop/renderer/assets/styles/components/dropdown.css"; import * as stylesGlobal from "readium-desktop/renderer/assets/styles/global.css"; import * as stylesTags from "readium-desktop/renderer/assets/styles/components/tags.css"; import { @@ -49,13 +47,9 @@ class GridTagLayout extends React.Component { } - content={ -
- {this.props.content} -
- } - dir="right" - /> + > + {this.props.content} + } {this.props.tags.length === 0 ? diff --git a/src/renderer/library/components/publication/PublicationCard.tsx b/src/renderer/library/components/publication/PublicationCard.tsx index cf8dc9b4d..8b10f674a 100644 --- a/src/renderer/library/components/publication/PublicationCard.tsx +++ b/src/renderer/library/components/publication/PublicationCard.tsx @@ -5,7 +5,6 @@ // that can be found in the LICENSE file exposed on Github (readium) in the project repository. // ==LICENSE-END== -import classNames from "classnames"; import * as React from "react"; import { connect } from "react-redux"; import { DialogTypeName } from "readium-desktop/common/models/dialog"; @@ -14,7 +13,6 @@ import * as dialogActions from "readium-desktop/common/redux/actions/dialog"; import { IOpdsPublicationView } from "readium-desktop/common/views/opds"; import { PublicationView } from "readium-desktop/common/views/publication"; import * as MenuIcon from "readium-desktop/renderer/assets/icons/menu.svg"; -import * as stylesDropDown from "readium-desktop/renderer/assets/styles/components/dropdown.css"; import * as stylesPublications from "readium-desktop/renderer/assets/styles/components/publications.css"; import Cover from "readium-desktop/renderer/common/components/Cover"; import { @@ -95,19 +93,15 @@ class PublicationCard extends React.Component { button={( )} - content={( -
- {isOpds ? - : - } -
- )} - dir="right" - /> + > + {isOpds ? + : + } + ); diff --git a/src/renderer/library/components/publication/PublicationListElement.tsx b/src/renderer/library/components/publication/PublicationListElement.tsx index bc6f7ccbf..7736d24a8 100644 --- a/src/renderer/library/components/publication/PublicationListElement.tsx +++ b/src/renderer/library/components/publication/PublicationListElement.tsx @@ -16,7 +16,6 @@ import { IOpdsPublicationView } from "readium-desktop/common/views/opds"; import { PublicationView } from "readium-desktop/common/views/publication"; import * as MenuIcon from "readium-desktop/renderer/assets/icons/menu.svg"; import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css"; -import * as stylesDropDown from "readium-desktop/renderer/assets/styles/components/dropdown.css"; import * as stylesPublications from "readium-desktop/renderer/assets/styles/components/publications.css"; import { TranslatorProps, withTranslator, @@ -28,7 +27,6 @@ import { formatContributorToString, } from "readium-desktop/renderer/common/logics/formatContributor"; import { TDispatch } from "readium-desktop/typings/redux"; -import { v4 as uuidv4 } from "uuid"; import { convertMultiLangStringToString, langStringIsRTL } from "readium-desktop/renderer/common/language-string"; // eslint-disable-next-line @typescript-eslint/no-empty-interface @@ -46,7 +44,6 @@ interface IProps extends IBaseProps, ReturnType, Retu } export class PublicationListElement extends React.Component { - private menuId: string; private buttonRef: React.RefObject; constructor(props: IProps) { @@ -56,8 +53,6 @@ export class PublicationListElement extends React.Component { // this.deletePublication = this.deletePublication.bind(this); this.focusButton = this.focusButton.bind(this); - - this.menuId = "menu-" + uuidv4(); } public render(): React.ReactElement<{}> { @@ -110,16 +105,9 @@ export class PublicationListElement extends React.Component { svg={MenuIcon} />) } - content={( -
- {this.props.menuContent} -
- )} - dir="left" - /> + > + {this.props.menuContent} + {/* @@ -122,21 +121,17 @@ class KeyboardSettings extends React.Component { svg={MenuIcon} />) } - content={( -
- - - -
- )} - dir="left" - /> + > + + + + ) } From d6d0c05dd352ca6088b33f6ab89267f67c3af7cf Mon Sep 17 00:00:00 2001 From: Pierre Leroux Date: Thu, 28 Sep 2023 22:18:55 +0200 Subject: [PATCH 2/5] lint --- src/renderer/common/components/menu/Menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/common/components/menu/Menu.tsx b/src/renderer/common/components/menu/Menu.tsx index 137944e39..c60f3321c 100644 --- a/src/renderer/common/components/menu/Menu.tsx +++ b/src/renderer/common/components/menu/Menu.tsx @@ -28,7 +28,7 @@ interface IState { } // FIXME / TODO -// do back focus not implemented with Radix popover menu +// do back focus not implemented with Radix popover menu class Menu extends React.Component { From 9046a1009e36ed21a20b8f43acc532fe8670b021 Mon Sep 17 00:00:00 2001 From: Pierre Leroux Date: Fri, 29 Sep 2023 00:38:27 +0200 Subject: [PATCH 3/5] deletePub alert dialog --- package-lock.json | 71 +++++++++++++++++++ package.json | 2 + .../assets/styles/components/blocks.css.d.ts | 2 +- .../styles/components/dropdown.css.d.ts | 2 - .../assets/styles/components/modals.css.d.ts | 1 - src/renderer/common/components/menu/Menu.tsx | 4 +- .../publication/menu/CatalogMenu.tsx | 50 +++++++++++-- 7 files changed, 121 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 03ab0886f..c056bf749 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "hasInstallScript": true, "license": "BSD-3-Clause", "dependencies": { + "@radix-ui/colors": "^3.0.0-rc.5", + "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-popover": "^1.0.7", "@xmldom/xmldom": "^0.8.10", "classnames": "^2.3.2", @@ -3698,6 +3700,11 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "node_modules/@radix-ui/colors": { + "version": "3.0.0-rc.5", + "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0-rc.5.tgz", + "integrity": "sha512-SHAmQwvoRFuX1Kqo0ZwOwp/24GQqNMUaS3tWcR5RgDaC1ZpUKQfT+IbdzGm63OVzQhpyA4PRcjimM2UMa9SYTw==" + }, "node_modules/@radix-ui/primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", @@ -3706,6 +3713,34 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-alert-dialog": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz", + "integrity": "sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dialog": "1.0.5", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-arrow": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz", @@ -3763,6 +3798,42 @@ } } }, + "node_modules/@radix-ui/react-dialog": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz", + "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-dismissable-layer": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", diff --git a/package.json b/package.json index 5c15fac7b..fd621b08c 100644 --- a/package.json +++ b/package.json @@ -251,6 +251,8 @@ } }, "dependencies": { + "@radix-ui/colors": "^3.0.0-rc.5", + "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-popover": "^1.0.7", "@xmldom/xmldom": "^0.8.10", "classnames": "^2.3.2", diff --git a/src/renderer/assets/styles/components/blocks.css.d.ts b/src/renderer/assets/styles/components/blocks.css.d.ts index 4f3ba5e7e..cfad7c25e 100644 --- a/src/renderer/assets/styles/components/blocks.css.d.ts +++ b/src/renderer/assets/styles/components/blocks.css.d.ts @@ -1,8 +1,8 @@ declare const styles: { readonly "block_line": string; - readonly "block_line_inactive": string; readonly "description_see_more": string; readonly "block_line_edit": string; + readonly "block_line_inactive": string; readonly "block_full": string; readonly "block_full_wrapper": string; readonly "block_full_close": string; diff --git a/src/renderer/assets/styles/components/dropdown.css.d.ts b/src/renderer/assets/styles/components/dropdown.css.d.ts index bfe6bb87e..c5435d8e8 100644 --- a/src/renderer/assets/styles/components/dropdown.css.d.ts +++ b/src/renderer/assets/styles/components/dropdown.css.d.ts @@ -1,7 +1,5 @@ declare const styles: { readonly "dropdown_menu": string; - readonly "dropdown_right": string; - readonly "dropdown_publication": string; readonly "menu": string; readonly "___DEBUG___COMPONENTS_DROPDOWN_CSS": string; }; diff --git a/src/renderer/assets/styles/components/modals.css.d.ts b/src/renderer/assets/styles/components/modals.css.d.ts index 45cf29f76..8b13817e3 100644 --- a/src/renderer/assets/styles/components/modals.css.d.ts +++ b/src/renderer/assets/styles/components/modals.css.d.ts @@ -3,7 +3,6 @@ declare const styles: { readonly "modal_dialog_overlay_hidden": string; readonly "modal_dialog": string; readonly "modal_dialog_full": string; - readonly "modal_dialog_form_wrapper": string; readonly "modal_dialog_body": string; readonly "modal_dialog_body_centered": string; readonly "modal_dialog_header": string; diff --git a/src/renderer/common/components/menu/Menu.tsx b/src/renderer/common/components/menu/Menu.tsx index c60f3321c..8727ff41e 100644 --- a/src/renderer/common/components/menu/Menu.tsx +++ b/src/renderer/common/components/menu/Menu.tsx @@ -33,6 +33,8 @@ interface IState { class Menu extends React.Component { public render(): React.ReactElement<{}> { + + const appOverlayElement = document.getElementById("app-overlay"); return ( @@ -40,7 +42,7 @@ class Menu extends React.Component { {this.props.button} - +
{this.props.children} diff --git a/src/renderer/library/components/publication/menu/CatalogMenu.tsx b/src/renderer/library/components/publication/menu/CatalogMenu.tsx index 6a971f5e4..b5adf4f19 100644 --- a/src/renderer/library/components/publication/menu/CatalogMenu.tsx +++ b/src/renderer/library/components/publication/menu/CatalogMenu.tsx @@ -10,12 +10,15 @@ import { connect } from "react-redux"; import { DialogTypeName } from "readium-desktop/common/models/dialog"; import * as dialogActions from "readium-desktop/common/redux/actions/dialog"; import { PublicationView } from "readium-desktop/common/views/publication"; +import * as AlertDialog from "@radix-ui/react-alert-dialog"; +import * as stylesAlertModals from "readium-desktop/renderer/assets/styles/components/alert.modals.css"; import { TranslatorProps, withTranslator, } from "readium-desktop/renderer/common/components/hoc/translator"; import { TDispatch } from "readium-desktop/typings/redux"; import PublicationExportButton from "./PublicationExportButton"; +import { apiAction } from "readium-desktop/renderer/library/apiAction"; // eslint-disable-next-line @typescript-eslint/no-empty-interface interface IBaseProps extends TranslatorProps { @@ -42,12 +45,13 @@ export class CatalogMenu extends React.Component { menuOpen: false, }; - this.deletePublication = this.deletePublication.bind(this); + // this.deletePublication = this.deletePublication.bind(this); this.displayPublicationInfo = this.displayPublicationInfo.bind(this); } public render(): React.ReactElement<{}> { const { __ } = this.props; + const appOverlayElement = document.getElementById("app-overlay"); return ( <> - + */} + + + + + + + {/** Overlay Component doesn't work in thorium ! very stange !! */} + {/* */} +
+ + {__("dialog.deletePublication")} + + {this.props.publicationView.documentTitle} + +
+ + + + + + +
+ + + @@ -67,9 +99,15 @@ export class CatalogMenu extends React.Component { ); } - private deletePublication() { - this.props.openDeleteDialog(); - } + private remove = () => { + apiAction("publication/delete", this.props.publicationView.identifier).catch((error) => { + console.error("Error to fetch publication/delete", error); + }); + }; + + // private deletePublication() { + // this.props.openDeleteDialog(); + // } private displayPublicationInfo() { this.props.displayPublicationInfo(); From 67dde71dab7743bf6013bd8bd762ad1e2dd7d23a Mon Sep 17 00:00:00 2001 From: Pierre Leroux Date: Fri, 29 Sep 2023 00:45:56 +0200 Subject: [PATCH 4/5] style --- .../assets/styles/components/alert.modals.css | 139 ++++++++++++++++++ .../styles/components/alert.modals.css.d.ts | 16 ++ .../assets/styles/components/blocks.css.d.ts | 2 +- .../styles/components/dropdown.css.d.ts | 2 + .../assets/styles/components/modals.css.d.ts | 1 + 5 files changed, 159 insertions(+), 1 deletion(-) create mode 100644 src/renderer/assets/styles/components/alert.modals.css create mode 100644 src/renderer/assets/styles/components/alert.modals.css.d.ts diff --git a/src/renderer/assets/styles/components/alert.modals.css b/src/renderer/assets/styles/components/alert.modals.css new file mode 100644 index 000000000..5ea05e22b --- /dev/null +++ b/src/renderer/assets/styles/components/alert.modals.css @@ -0,0 +1,139 @@ +@import url('@radix-ui/colors/black-alpha.css'); +@import url('@radix-ui/colors/mauve.css'); +@import url('@radix-ui/colors/red.css'); +@import url('@radix-ui/colors/violet.css'); + +/* reset */ +button { + all: unset; +} + +.AlertDialogOverlay { + background-color: var(--black-a9); + position: fixed; + inset: 0; + animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1); + z-index: 110; + + /* position: fixed; + z-index: 102; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + padding: 0; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + background-color: rgba(0, 0, 0, 0.5); + transition: 0.2s; + min-width: 700px; + align-items: center; + justify-content: center; */ +} + +.AlertDialogContent { + background-color: white; + border-radius: 6px; + box-shadow: hsl(206deg 22% 7% / 35%) 0 10px 38px -10px, hsl(206deg 22% 7% / 20%) 0 10px 20px -15px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90vw; + max-width: 500px; + max-height: 85vh; + padding: 25px; + animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1); + z-index: 110; +} + +.AlertDialogContent:focus { + outline: none; +} + +.AlertDialogTitle { + margin: 0; + color: var(--mauve-12); + font-size: 17px; + font-weight: 500; +} + +.AlertDialogDescription { + margin-bottom: 20px; + color: var(--mauve-11); + font-size: 15px; + line-height: 1.5; +} + +.Button { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 0 15px; + font-size: 15px; + line-height: 1; + font-weight: 500; + height: 35px; +} + +.Button.violet { + background-color: white; + color: var(--violet-11); + box-shadow: 0 2px 10px var(--black-a7); +} + +.Button.violet:hover { + background-color: var(--mauve-3); +} + +.Button.violet:focus { + box-shadow: 0 0 0 2px black; +} + +.Button.red { + background-color: var(--red-4); + color: var(--red-11); +} + +.Button.red:hover { + background-color: var(--red-5); +} + +.Button.red:focus { + box-shadow: 0 0 0 2px var(--red-7); +} + +.Button.mauve { + background-color: var(--mauve-4); + color: var(--mauve-11); +} + +.Button.mauve:hover { + background-color: var(--mauve-5); +} + +.Button.mauve:focus { + box-shadow: 0 0 0 2px var(--mauve-7); +} + +/* @keyframes overlayShow { + from { + opacity: 0; + } + to { + opacity: 1; + } +} */ + +/* @keyframes contentShow { + from { + opacity: 0; + transform: translate(-50%, -48%) scale(0.96); + } + to { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } +} */ \ No newline at end of file diff --git a/src/renderer/assets/styles/components/alert.modals.css.d.ts b/src/renderer/assets/styles/components/alert.modals.css.d.ts new file mode 100644 index 000000000..b4f1f0600 --- /dev/null +++ b/src/renderer/assets/styles/components/alert.modals.css.d.ts @@ -0,0 +1,16 @@ +declare const styles: { + readonly "AlertDialogOverlay": string; + readonly "overlayShow": string; + readonly "AlertDialogContent": string; + readonly "contentShow": string; + readonly "AlertDialogTitle": string; + readonly "AlertDialogDescription": string; + readonly "Button": string; + readonly "violet": string; + readonly "red": string; + readonly "mauve": string; + readonly "light": string; + readonly "light-theme": string; +}; +export = styles; + diff --git a/src/renderer/assets/styles/components/blocks.css.d.ts b/src/renderer/assets/styles/components/blocks.css.d.ts index cfad7c25e..4f3ba5e7e 100644 --- a/src/renderer/assets/styles/components/blocks.css.d.ts +++ b/src/renderer/assets/styles/components/blocks.css.d.ts @@ -1,8 +1,8 @@ declare const styles: { readonly "block_line": string; + readonly "block_line_inactive": string; readonly "description_see_more": string; readonly "block_line_edit": string; - readonly "block_line_inactive": string; readonly "block_full": string; readonly "block_full_wrapper": string; readonly "block_full_close": string; diff --git a/src/renderer/assets/styles/components/dropdown.css.d.ts b/src/renderer/assets/styles/components/dropdown.css.d.ts index c5435d8e8..bfe6bb87e 100644 --- a/src/renderer/assets/styles/components/dropdown.css.d.ts +++ b/src/renderer/assets/styles/components/dropdown.css.d.ts @@ -1,5 +1,7 @@ declare const styles: { readonly "dropdown_menu": string; + readonly "dropdown_right": string; + readonly "dropdown_publication": string; readonly "menu": string; readonly "___DEBUG___COMPONENTS_DROPDOWN_CSS": string; }; diff --git a/src/renderer/assets/styles/components/modals.css.d.ts b/src/renderer/assets/styles/components/modals.css.d.ts index 8b13817e3..45cf29f76 100644 --- a/src/renderer/assets/styles/components/modals.css.d.ts +++ b/src/renderer/assets/styles/components/modals.css.d.ts @@ -3,6 +3,7 @@ declare const styles: { readonly "modal_dialog_overlay_hidden": string; readonly "modal_dialog": string; readonly "modal_dialog_full": string; + readonly "modal_dialog_form_wrapper": string; readonly "modal_dialog_body": string; readonly "modal_dialog_body_centered": string; readonly "modal_dialog_header": string; From 93edb52fed2baf90f80da12ff9a82ed1a79881bb Mon Sep 17 00:00:00 2001 From: Pierre Leroux Date: Fri, 29 Sep 2023 13:41:32 +0200 Subject: [PATCH 5/5] deletePublicationConfirm alert modal --- src/common/models/dialog.ts | 4 - .../assets/styles/components/alert.modals.css | 46 +++----- .../styles/components/alert.modals.css.d.ts | 4 +- src/renderer/common/hooks/useApi.ts | 8 +- .../dialog/DeletePublicationConfirm.tsx | 100 +++++++----------- .../components/dialog/DialogManager.tsx | 2 - .../publicationInfos/catalogControls.tsx | 27 ++--- .../publicationInfos/catalogLcpControls.tsx | 57 +++++----- .../publication/menu/CatalogMenu.tsx | 56 ++-------- 9 files changed, 101 insertions(+), 203 deletions(-) diff --git a/src/common/models/dialog.ts b/src/common/models/dialog.ts index 0f8d40416..6705672cc 100644 --- a/src/common/models/dialog.ts +++ b/src/common/models/dialog.ts @@ -37,7 +37,6 @@ export enum DialogTypeName { OpdsFeedAddForm = "opds-feed-add-form", OpdsFeedUpdateForm = "opds-feed-update-form", ApiappAddForm = "apiapp-add-form", - DeletePublicationConfirm = "delete-publication-confirm", DeleteOpdsFeedConfirm = "delete-opds-feed-confirm", LcpAuthentication = "lcp-authentication", LsdReturnConfirm = "lsd-return-confirm", @@ -57,9 +56,6 @@ export interface DialogType { feed: IOpdsFeedView; }; [DialogTypeName.ApiappAddForm]: {}; - [DialogTypeName.DeletePublicationConfirm]: { - publicationView: PublicationView; - }; [DialogTypeName.DeleteOpdsFeedConfirm]: { feed: IOpdsFeedView; }; diff --git a/src/renderer/assets/styles/components/alert.modals.css b/src/renderer/assets/styles/components/alert.modals.css index 5ea05e22b..e12b982a8 100644 --- a/src/renderer/assets/styles/components/alert.modals.css +++ b/src/renderer/assets/styles/components/alert.modals.css @@ -3,33 +3,12 @@ @import url('@radix-ui/colors/red.css'); @import url('@radix-ui/colors/violet.css'); -/* reset */ -button { - all: unset; -} - .AlertDialogOverlay { - background-color: var(--black-a9); + background-color: rgba(0, 0, 0, 0.5); position: fixed; inset: 0; animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 110; - - /* position: fixed; - z-index: 102; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - padding: 0; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - background-color: rgba(0, 0, 0, 0.5); - transition: 0.2s; - min-width: 700px; - align-items: center; - justify-content: center; */ } .AlertDialogContent { @@ -66,7 +45,7 @@ button { line-height: 1.5; } -.Button { +.AlertDialogButton { display: inline-flex; align-items: center; justify-content: center; @@ -78,43 +57,43 @@ button { height: 35px; } -.Button.violet { +.AlertDialogButton.violet { background-color: white; color: var(--violet-11); box-shadow: 0 2px 10px var(--black-a7); } -.Button.violet:hover { +.AlertDialogButton.violet:hover { background-color: var(--mauve-3); } -.Button.violet:focus { +.AlertDialogButton.violet:focus { box-shadow: 0 0 0 2px black; } -.Button.red { +.AlertDialogButton.red { background-color: var(--red-4); color: var(--red-11); } -.Button.red:hover { +.AlertDialogButton.red:hover { background-color: var(--red-5); } -.Button.red:focus { +.AlertDialogButton.red:focus { box-shadow: 0 0 0 2px var(--red-7); } -.Button.mauve { +.AlertDialogButton.mauve { background-color: var(--mauve-4); color: var(--mauve-11); } -.Button.mauve:hover { +.AlertDialogButton.mauve:hover { background-color: var(--mauve-5); } -.Button.mauve:focus { +.AlertDialogButton.mauve:focus { box-shadow: 0 0 0 2px var(--mauve-7); } @@ -136,4 +115,5 @@ button { opacity: 1; transform: translate(-50%, -50%) scale(1); } -} */ \ No newline at end of file +} +*/ \ No newline at end of file diff --git a/src/renderer/assets/styles/components/alert.modals.css.d.ts b/src/renderer/assets/styles/components/alert.modals.css.d.ts index b4f1f0600..c60640827 100644 --- a/src/renderer/assets/styles/components/alert.modals.css.d.ts +++ b/src/renderer/assets/styles/components/alert.modals.css.d.ts @@ -5,12 +5,10 @@ declare const styles: { readonly "contentShow": string; readonly "AlertDialogTitle": string; readonly "AlertDialogDescription": string; - readonly "Button": string; + readonly "AlertDialogButton": string; readonly "violet": string; readonly "red": string; readonly "mauve": string; - readonly "light": string; - readonly "light-theme": string; }; export = styles; diff --git a/src/renderer/common/hooks/useApi.ts b/src/renderer/common/hooks/useApi.ts index 6b8d9cd32..3ae68d5eb 100644 --- a/src/renderer/common/hooks/useApi.ts +++ b/src/renderer/common/hooks/useApi.ts @@ -16,11 +16,13 @@ import { ApiResponse } from "readium-desktop/common/redux/states/api"; import { TReturnPromiseOrGeneratorType } from "readium-desktop/typings/api"; import { useSyncExternalStore } from "./useSyncExternalStore"; -export function useApi(_requestId: string, apiPath: T, ...requestData: Parameters): ApiResponse> { +export function useApi(_requestId: string | undefined, apiPath: T, ...requestData: Parameters): + [ApiResponse>, () => void] +{ const requestId = _requestId || React.useMemo(() => uuidv4(), []); const { store } = React.useContext(ReactReduxContext); - React.useEffect(() => { + const apiAction = React.useCallback(() => { const splitPath = apiPath.split("/"); const moduleId = splitPath[0] as TModuleApi; const methodId = splitPath[1] as TMethodApi; @@ -32,5 +34,5 @@ export function useApi(_requestId: string, apiPath: T, }, []); // componentDidMount const apiResult = useSyncExternalStore(store.subscribe, () => store.getState().api[requestId]); - return apiResult; + return [apiResult, apiAction]; }; diff --git a/src/renderer/library/components/dialog/DeletePublicationConfirm.tsx b/src/renderer/library/components/dialog/DeletePublicationConfirm.tsx index c1595c067..5ae063347 100644 --- a/src/renderer/library/components/dialog/DeletePublicationConfirm.tsx +++ b/src/renderer/library/components/dialog/DeletePublicationConfirm.tsx @@ -6,65 +6,47 @@ // ==LICENSE-END== import * as React from "react"; -import { connect } from "react-redux"; -import { DialogType, DialogTypeName } from "readium-desktop/common/models/dialog"; -import Dialog from "readium-desktop/renderer/common/components/dialog/Dialog"; -import { - TranslatorProps, withTranslator, -} from "readium-desktop/renderer/common/components/hoc/translator"; -import { apiAction } from "readium-desktop/renderer/library/apiAction"; -import { ILibraryRootState } from "readium-desktop/renderer/library/redux/states"; +import { PublicationView } from "readium-desktop/common/views/publication"; +import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator"; +import { useApi } from "readium-desktop/renderer/common/hooks/useApi"; +import * as AlertDialog from "@radix-ui/react-alert-dialog"; +import * as stylesAlertModals from "readium-desktop/renderer/assets/styles/components/alert.modals.css"; +import classNames from "classnames"; + +const DeletePublicationConfirm = (props: { publicationView: PublicationView, button: React.ReactNode } & AlertDialog.AlertDialogProps) => { + const [__] = useTranslator(); + const [, remove] = useApi(undefined, "publication/delete", props.publicationView.identifier); + + const appOverlayElement = document.getElementById("app-overlay"); + + return ( + + + {props.button} + + + + {/** Overlay Component doesn't work */} + {/* */} +
+ + {__("dialog.deletePublication")} + + {props.publicationView.documentTitle} + +
+ + + + + + +
+ + + + ) -// eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IBaseProps extends TranslatorProps { } -// IProps may typically extend: -// RouteComponentProps -// ReturnType -// ReturnType -// eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IProps extends IBaseProps, ReturnType { -} - -class DeletePublicationConfirm extends React.Component { - - constructor(props: IProps) { - super(props); - - } - - public render(): React.ReactElement<{}> { - if (!this.props.open || !this.props.publicationView) { - return <>; - } - - const { __ } = this.props; - return ( - -

- {this.props.publicationView.documentTitle} -

- - ); - } - - private remove = () => { - apiAction("publication/delete", this.props.publicationView.identifier).catch((error) => { - console.error("Error to fetch publication/delete", error); - }); - }; -} - -const mapStateToProps = (state: ILibraryRootState, _props: IBaseProps) => ({ - open: state.dialog.type === DialogTypeName.DeletePublicationConfirm, - publicationView: (state.dialog.data as DialogType[DialogTypeName.DeletePublicationConfirm]).publicationView, -}); -export default connect(mapStateToProps)(withTranslator(DeletePublicationConfirm)); +export default DeletePublicationConfirm; diff --git a/src/renderer/library/components/dialog/DialogManager.tsx b/src/renderer/library/components/dialog/DialogManager.tsx index 45bd12d27..d21aa0349 100644 --- a/src/renderer/library/components/dialog/DialogManager.tsx +++ b/src/renderer/library/components/dialog/DialogManager.tsx @@ -12,7 +12,6 @@ import { ILibraryRootState } from "readium-desktop/renderer/library/redux/states import ApiappAddForm from "./ApiappAddForm"; import DeleteOpdsFeedConfirm from "./DeleteOpdsFeedConfirm"; -import DeletePublicationConfirm from "./DeletePublicationConfirm"; import FileImport from "./FileImport"; import LcpAuthentication from "./LcpAuthentication"; import OpdsFeedAddForm from "./OpdsFeedAddForm"; @@ -50,7 +49,6 @@ class DialogManager extends React.Component { - diff --git a/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx b/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx index 52b1270d8..0356da1b5 100644 --- a/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx +++ b/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx @@ -7,7 +7,6 @@ import * as React from "react"; import { connect } from "react-redux"; -import { DialogTypeName } from "readium-desktop/common/models/dialog"; import { readerActions } from "readium-desktop/common/redux/actions"; import * as dialogActions from "readium-desktop/common/redux/actions/dialog"; import { PublicationView } from "readium-desktop/common/views/publication"; @@ -21,6 +20,7 @@ import SVG from "readium-desktop/renderer/common/components/SVG"; import { TMouseEventOnButton } from "readium-desktop/typings/react"; import { TDispatch } from "readium-desktop/typings/redux"; import { apiAction } from "readium-desktop/renderer/library/apiAction"; +import DeletePublicationConfirm from "../DeletePublicationConfirm"; // eslint-disable-next-line @typescript-eslint/no-empty-interface interface IBaseProps extends TranslatorProps { @@ -40,7 +40,6 @@ export class CatalogControls extends React.Component { super(props); this.handleRead = this.handleRead.bind(this); - this.deletePublication = this.deletePublication.bind(this); this.exportPublication = this.exportPublication.bind(this); } @@ -56,11 +55,16 @@ export class CatalogControls extends React.Component { - + + + {__("catalog.deleteBook")} + + )} + publicationView={this.props.publicationView} + /> - : <> + (lsdStatus === StatusEnum.Active || lsdStatus === StatusEnum.Ready)) ? + + : <> } { // lsdStatus === StatusEnum.Expired && lsdRenewLink && } { lsdReturnLink && } - + + + {__("catalog.deleteBook")} + + + )} + publicationView={this.props.publicationView} + /> - {/* */} - - + {__("catalog.delete")} - - - - {/** Overlay Component doesn't work in thorium ! very stange !! */} - {/* */} -
- - {__("dialog.deletePublication")} - - {this.props.publicationView.documentTitle} - -
- - - - - - -
- - - + )} + publicationView={this.props.publicationView} + /> @@ -99,16 +72,6 @@ export class CatalogMenu extends React.Component { ); } - private remove = () => { - apiAction("publication/delete", this.props.publicationView.identifier).catch((error) => { - console.error("Error to fetch publication/delete", error); - }); - }; - - // private deletePublication() { - // this.props.openDeleteDialog(); - // } - private displayPublicationInfo() { this.props.displayPublicationInfo(); } @@ -123,13 +86,6 @@ const mapDispatchToProps = (dispatch: TDispatch, props: IBaseProps) => { }, )); }, - openDeleteDialog: () => { - dispatch(dialogActions.openRequest.build(DialogTypeName.DeletePublicationConfirm, - { - publicationView: props.publicationView, - }, - )); - }, }; };