diff --git a/README.md b/README.md index 2db73bba..a767c120 100644 --- a/README.md +++ b/README.md @@ -22,9 +22,10 @@ This readme file is used mostly to document project dependencies - react-tabs - react-intl - react-data-table-component - - react-select + - react-dropdown-select - react-error-boundary - reagraph + - react-tooltip
diff --git a/rsconcept/frontend/package-lock.json b/rsconcept/frontend/package-lock.json index ee9571da..2ee5976c 100644 --- a/rsconcept/frontend/package-lock.json +++ b/rsconcept/frontend/package-lock.json @@ -13,13 +13,14 @@ "react": "^18.2.0", "react-data-table-component": "^7.5.3", "react-dom": "^18.2.0", + "react-dropdown-select": "^4.10.0", "react-error-boundary": "^4.0.10", "react-intl": "^6.4.4", "react-loader-spinner": "^5.3.4", "react-router-dom": "^6.14.2", - "react-select": "^5.7.4", "react-tabs": "^6.0.2", "react-toastify": "^9.1.3", + "react-tooltip": "^5.19.0", "reagraph": "^4.11.1" }, "devDependencies": { @@ -2147,6 +2148,28 @@ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" }, + "node_modules/@emotion/styled": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz", + "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", @@ -3105,14 +3128,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-transition-group": { - "version": "4.4.6", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", - "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", @@ -4156,15 +4171,6 @@ "node": ">=6.0.0" } }, - "node_modules/dom-helpers": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", - "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "dependencies": { - "@babel/runtime": "^7.8.7", - "csstype": "^3.0.2" - } - }, "node_modules/draco3d": { "version": "1.5.6", "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.6.tgz", @@ -5287,11 +5293,6 @@ "semver": "bin/semver" } }, - "node_modules/memoize-one": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", - "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" - }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -5887,6 +5888,20 @@ "react": "^18.2.0" } }, + "node_modules/react-dropdown-select": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/react-dropdown-select/-/react-dropdown-select-4.10.0.tgz", + "integrity": "sha512-GiUeZZqN8Z/PQFWyihFeuLwlUQ2IJxiu4ep8Y6bonF8ynUk8dAdLgjg3O4YIa3gtS8/Paeli8AtH46AcaPzWVg==", + "dependencies": { + "@emotion/react": "11.11.1", + "@emotion/styled": "11.11.0" + }, + "peerDependencies": { + "prop-types": ">=15.7.2", + "react": ">=16.x", + "react-dom": ">=16.x" + } + }, "node_modules/react-error-boundary": { "version": "4.0.10", "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.10.tgz", @@ -6053,26 +6068,6 @@ "react-dom": ">=16.8" } }, - "node_modules/react-select": { - "version": "5.7.4", - "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.4.tgz", - "integrity": "sha512-NhuE56X+p9QDFh4BgeygHFIvJJszO1i1KSkg/JPcIJrbovyRtI+GuOEa4XzFCEpZRAEoEI8u/cAHK+jG/PgUzQ==", - "dependencies": { - "@babel/runtime": "^7.12.0", - "@emotion/cache": "^11.4.0", - "@emotion/react": "^11.8.1", - "@floating-ui/dom": "^1.0.1", - "@types/react-transition-group": "^4.4.0", - "memoize-one": "^6.0.0", - "prop-types": "^15.6.0", - "react-transition-group": "^4.3.0", - "use-isomorphic-layout-effect": "^1.1.2" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/react-tabs": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz", @@ -6105,19 +6100,17 @@ "node": ">=6" } }, - "node_modules/react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "node_modules/react-tooltip": { + "version": "5.19.0", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.19.0.tgz", + "integrity": "sha512-NSUk77GMpxYKHFKJVNHL++QQXRuH2QW1qDrXPtJnp2s/MJvUnU73N5TTADwDyrO2+xGlr0xHhjvQphkF60cMEA==", "dependencies": { - "@babel/runtime": "^7.5.5", - "dom-helpers": "^5.0.1", - "loose-envify": "^1.4.0", - "prop-types": "^15.6.2" + "@floating-ui/dom": "^1.0.0", + "classnames": "^2.3.0" }, "peerDependencies": { - "react": ">=16.6.0", - "react-dom": ">=16.6.0" + "react": ">=16.14.0", + "react-dom": ">=16.14.0" } }, "node_modules/react-use-gesture": { @@ -6939,19 +6932,6 @@ "punycode": "^2.1.0" } }, - "node_modules/use-isomorphic-layout-effect": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", - "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", diff --git a/rsconcept/frontend/package.json b/rsconcept/frontend/package.json index 959a10d4..825ec69c 100644 --- a/rsconcept/frontend/package.json +++ b/rsconcept/frontend/package.json @@ -15,13 +15,14 @@ "react": "^18.2.0", "react-data-table-component": "^7.5.3", "react-dom": "^18.2.0", + "react-dropdown-select": "^4.10.0", "react-error-boundary": "^4.0.10", "react-intl": "^6.4.4", "react-loader-spinner": "^5.3.4", "react-router-dom": "^6.14.2", - "react-select": "^5.7.4", "react-tabs": "^6.0.2", "react-toastify": "^9.1.3", + "react-tooltip": "^5.19.0", "reagraph": "^4.11.1" }, "devDependencies": { diff --git a/rsconcept/frontend/src/components/Common/DataTableThemed.tsx b/rsconcept/frontend/src/components/Common/ConceptDataTable.tsx similarity index 90% rename from rsconcept/frontend/src/components/Common/DataTableThemed.tsx rename to rsconcept/frontend/src/components/Common/ConceptDataTable.tsx index a6e43c85..9da2e38e 100644 --- a/rsconcept/frontend/src/components/Common/DataTableThemed.tsx +++ b/rsconcept/frontend/src/components/Common/ConceptDataTable.tsx @@ -38,7 +38,7 @@ createTheme('customDark', { } }, 'dark'); -function DataTableThemed({ theme, ...props }: TableProps) { +function ConceptDataTable({ theme, ...props }: TableProps) { const { darkMode } = useConceptTheme(); return ( @@ -49,4 +49,4 @@ function DataTableThemed({ theme, ...props }: TableProps) { ); } -export default DataTableThemed; +export default ConceptDataTable; diff --git a/rsconcept/frontend/src/components/Common/GraphThemed.tsx b/rsconcept/frontend/src/components/Common/ConceptGraph.tsx similarity index 84% rename from rsconcept/frontend/src/components/Common/GraphThemed.tsx rename to rsconcept/frontend/src/components/Common/ConceptGraph.tsx index c2487ac1..73272754 100644 --- a/rsconcept/frontend/src/components/Common/GraphThemed.tsx +++ b/rsconcept/frontend/src/components/Common/ConceptGraph.tsx @@ -4,13 +4,13 @@ import { darkTheme, GraphCanvas, GraphCanvasProps, GraphCanvasRef, lightTheme } import { useConceptTheme } from '../../context/ThemeContext'; import { resources } from '../../utils/constants'; -interface GraphThemedProps +interface ConceptGraphProps extends Omit { ref?: Ref sizeClass: string } -function GraphThemed({ sizeClass, ...props }: GraphThemedProps) { +function ConceptGraph({ sizeClass, ...props }: ConceptGraphProps) { const { darkMode } = useConceptTheme(); return ( @@ -26,4 +26,4 @@ function GraphThemed({ sizeClass, ...props }: GraphThemedProps) { ); } -export default GraphThemed; +export default ConceptGraph; diff --git a/rsconcept/frontend/src/components/Common/ConceptSelect.tsx b/rsconcept/frontend/src/components/Common/ConceptSelect.tsx new file mode 100644 index 00000000..fb52240a --- /dev/null +++ b/rsconcept/frontend/src/components/Common/ConceptSelect.tsx @@ -0,0 +1,18 @@ +import { PropsWithRef } from 'react'; +import Select, { SelectProps } from 'react-dropdown-select'; + +interface ConceptSelectProps +extends Omit>, 'noDataLabel'> { + +} + +function ConceptSelect({ ...props }: ConceptSelectProps) { + return ( + { setSelectedType(data?.value); }} + values={selectedType ? [{ value: selectedType, label: getCstTypeLabel(selectedType) }] : []} + onChange={data => { setSelectedType(data[0].value); }} /> ); diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx index 40723b9e..88c568a5 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx @@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react'; import { toast } from 'react-toastify'; import Button from '../../components/Common/Button'; -import DataTableThemed from '../../components/Common/DataTableThemed'; +import ConceptDataTable from '../../components/Common/ConceptDataTable'; import Divider from '../../components/Common/Divider'; import { ArrowDownIcon, ArrowsRotateIcon, ArrowUpIcon, DumpBinIcon, SmallPlusIcon } from '../../components/Icons'; import { useRSForm } from '../../context/RSFormContext'; @@ -54,6 +54,7 @@ function EditorItems({ onOpenEdit, onShowCreateCst }: EditorItemsProps) { cstDelete(data, () => { toast.success(`Конституенты удалены: ${deletedNames}`); setToggledClearRows(prev => !prev); + setSelected([]); }); }, [selected, schema?.items, cstDelete]); @@ -339,7 +340,7 @@ function EditorItems({ onOpenEdit, onShowCreateCst }: EditorItemsProps) { tabIndex={0} title='Горячие клавиши: Двойной клик / Alt + клик - редактирование конституенты Alt + вверх/вниз - движение конституент Delete - удаление выбранных Alt + 1-6, Q,W - добавление конституент' > -
-