F: Remove unused dependencies
This commit is contained in:
Ivan
parent
4098e4f795
commit
7798ca9b0b
|
|
@ -33,7 +33,6 @@ This readme file is used mostly to document project dependencies and conventions
|
|||
- react-icons
|
||||
- react-router
|
||||
- react-toastify
|
||||
- react-loader-spinner
|
||||
- react-tabs
|
||||
- react-intl
|
||||
- react-select
|
||||
|
|
@ -49,7 +48,6 @@ This readme file is used mostly to document project dependencies and conventions
|
|||
- @uiw/codemirror-themes
|
||||
- @lezer/lr
|
||||
- @dagrejs/dagre
|
||||
- @react-spring/web
|
||||
</pre>
|
||||
</details>
|
||||
<details>
|
||||
|
|
|
|||
225
rsconcept/frontend/package-lock.json
generated
225
rsconcept/frontend/package-lock.json
generated
|
|
@ -10,7 +10,6 @@
|
|||
"dependencies": {
|
||||
"@dagrejs/dagre": "^1.1.4",
|
||||
"@lezer/lr": "^1.4.2",
|
||||
"@react-spring/web": "^9.7.5",
|
||||
"@tanstack/react-table": "^8.20.5",
|
||||
"@uiw/codemirror-themes": "^4.23.6",
|
||||
"@uiw/react-codemirror": "^4.23.6",
|
||||
|
|
@ -23,7 +22,6 @@
|
|||
"react-error-boundary": "^4.1.2",
|
||||
"react-icons": "^5.4.0",
|
||||
"react-intl": "^7.0.4",
|
||||
"react-loader-spinner": "^6.1.6",
|
||||
"react-router": "^7.0.2",
|
||||
"react-select": "^5.9.0",
|
||||
"react-tabs": "^6.0.2",
|
||||
|
|
@ -803,21 +801,6 @@
|
|||
"integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/is-prop-valid": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
|
||||
"integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@emotion/memoize": "^0.8.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
|
||||
"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/memoize": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
|
||||
|
|
@ -2293,78 +2276,6 @@
|
|||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-spring/animated": {
|
||||
"version": "9.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
|
||||
"integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@react-spring/shared": "~9.7.5",
|
||||
"@react-spring/types": "~9.7.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-spring/core": {
|
||||
"version": "9.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
|
||||
"integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@react-spring/animated": "~9.7.5",
|
||||
"@react-spring/shared": "~9.7.5",
|
||||
"@react-spring/types": "~9.7.5"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/react-spring/donate"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-spring/rafz": {
|
||||
"version": "9.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
|
||||
"integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@react-spring/shared": {
|
||||
"version": "9.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
|
||||
"integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@react-spring/rafz": "~9.7.5",
|
||||
"@react-spring/types": "~9.7.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-spring/types": {
|
||||
"version": "9.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
|
||||
"integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@react-spring/web": {
|
||||
"version": "9.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz",
|
||||
"integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@react-spring/animated": "~9.7.5",
|
||||
"@react-spring/core": "~9.7.5",
|
||||
"@react-spring/shared": "~9.7.5",
|
||||
"@react-spring/types": "~9.7.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@reactflow/background": {
|
||||
"version": "11.3.14",
|
||||
"resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
|
||||
|
|
@ -3233,12 +3144,6 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/stylis": {
|
||||
"version": "4.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
|
||||
"integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/yargs": {
|
||||
"version": "17.0.33",
|
||||
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
|
||||
|
|
@ -4216,15 +4121,6 @@
|
|||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/camelize": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
|
||||
"integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001688",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001688.tgz",
|
||||
|
|
@ -4536,26 +4432,6 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/css-color-keywords": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
|
||||
"integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/css-to-react-native": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
|
||||
"integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"camelize": "^1.0.0",
|
||||
"css-color-keywords": "^1.0.0",
|
||||
"postcss-value-parser": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
|
|
@ -7863,6 +7739,7 @@
|
|||
"version": "3.3.8",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
|
||||
"integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
|
|
@ -8519,6 +8396,7 @@
|
|||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
|
||||
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/prelude-ls": {
|
||||
|
|
@ -8719,25 +8597,9 @@
|
|||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
||||
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-loader-spinner": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz",
|
||||
"integrity": "sha512-x5h1Jcit7Qn03MuKlrWcMG9o12cp9SNDVHVJTNRi9TgtGPKcjKiXkou4NRfLAtXaFB3+Z8yZsVzONmPzhv2ErA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-is": "^18.2.0",
|
||||
"styled-components": "^6.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.14.2",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
|
||||
|
|
@ -9196,12 +9058,6 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/shallowequal": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
|
||||
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
|
|
@ -9339,6 +9195,7 @@
|
|||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -9593,80 +9450,6 @@
|
|||
"integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/styled-components": {
|
||||
"version": "6.1.13",
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
|
||||
"integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@emotion/is-prop-valid": "1.2.2",
|
||||
"@emotion/unitless": "0.8.1",
|
||||
"@types/stylis": "4.2.5",
|
||||
"css-to-react-native": "3.2.0",
|
||||
"csstype": "3.1.3",
|
||||
"postcss": "8.4.38",
|
||||
"shallowequal": "1.1.0",
|
||||
"stylis": "4.3.2",
|
||||
"tslib": "2.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/styled-components"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8.0",
|
||||
"react-dom": ">= 16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-components/node_modules/@emotion/unitless": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
|
||||
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/styled-components/node_modules/postcss": {
|
||||
"version": "8.4.38",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
|
||||
"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.7",
|
||||
"picocolors": "^1.0.0",
|
||||
"source-map-js": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-components/node_modules/stylis": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
|
||||
"integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/styled-components/node_modules/tslib": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/stylis": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
"dependencies": {
|
||||
"@dagrejs/dagre": "^1.1.4",
|
||||
"@lezer/lr": "^1.4.2",
|
||||
"@react-spring/web": "^9.7.5",
|
||||
"@tanstack/react-table": "^8.20.5",
|
||||
"@uiw/codemirror-themes": "^4.23.6",
|
||||
"@uiw/react-codemirror": "^4.23.6",
|
||||
|
|
@ -27,7 +26,6 @@
|
|||
"react-error-boundary": "^4.1.2",
|
||||
"react-icons": "^5.4.0",
|
||||
"react-intl": "^7.0.4",
|
||||
"react-loader-spinner": "^6.1.6",
|
||||
"react-router": "^7.0.2",
|
||||
"react-select": "^5.9.0",
|
||||
"react-tabs": "^6.0.2",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ function UserMenu() {
|
|||
const menu = useDropdown();
|
||||
|
||||
const navigateLogin = () => router.push(urls.login);
|
||||
|
||||
return (
|
||||
<div ref={menu.ref} className='h-full w-[4rem] flex items-center justify-center'>
|
||||
{loading ? <Loader circular scale={1.5} /> : null}
|
||||
|
|
@ -27,7 +28,7 @@ function UserMenu() {
|
|||
onClick={navigateLogin}
|
||||
/>
|
||||
) : null}
|
||||
{user ? (
|
||||
{user && !loading ? (
|
||||
<NavigationButton
|
||||
className='cc-fade-in'
|
||||
icon={<IconUser2 size='1.5rem' className={adminMode && user.is_staff ? 'icon-primary' : ''} />}
|
||||
|
|
|
|||
6
rsconcept/frontend/src/components/props.d.ts
vendored
6
rsconcept/frontend/src/components/props.d.ts
vendored
|
|
@ -1,5 +1,4 @@
|
|||
// =========== Module contains interfaces for common UI elements. ==========
|
||||
import { animated } from '@react-spring/web';
|
||||
import React from 'react';
|
||||
|
||||
export namespace CProps {
|
||||
|
|
@ -89,11 +88,6 @@ export namespace CProps {
|
|||
*/
|
||||
export type Input = Titled & React.ComponentProps<'input'>;
|
||||
|
||||
/**
|
||||
* Represents `div` component with animation properties.
|
||||
*/
|
||||
export type AnimatedDiv = React.ComponentPropsWithoutRef<typeof animated.div>;
|
||||
|
||||
/**
|
||||
* Represents `mouse event` in React.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
'use client';
|
||||
|
||||
import { ThreeCircles, ThreeDots } from 'react-loader-spinner';
|
||||
|
||||
import { useConceptOptions } from '@/context/ConceptOptionsContext';
|
||||
|
||||
interface LoaderProps {
|
||||
|
|
@ -12,6 +10,47 @@ interface LoaderProps {
|
|||
circular?: boolean;
|
||||
}
|
||||
|
||||
const animateRotation = (duration: string) => {
|
||||
return (
|
||||
<animateTransform
|
||||
attributeName='transform'
|
||||
attributeType='XML'
|
||||
type='rotate'
|
||||
dur={duration}
|
||||
from='0 50 50'
|
||||
to='360 50 50'
|
||||
repeatCount='indefinite'
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const animatePulse = (startBig: boolean, duration: string) => {
|
||||
return (
|
||||
<>
|
||||
<animate
|
||||
attributeName='r'
|
||||
from={startBig ? '15' : '9'}
|
||||
to={startBig ? '15' : '9'}
|
||||
begin='0s'
|
||||
dur={duration}
|
||||
values={startBig ? '15;9;15' : '9;15;9'}
|
||||
calcMode='linear'
|
||||
repeatCount='indefinite'
|
||||
/>
|
||||
<animate
|
||||
attributeName='fill-opacity'
|
||||
from={startBig ? '1' : '.5'}
|
||||
to={startBig ? '.5' : '1'}
|
||||
begin='0s'
|
||||
dur={duration}
|
||||
values={startBig ? '1;.5;1' : '.5;1;.5'}
|
||||
calcMode='linear'
|
||||
repeatCount='indefinite'
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Displays animated loader.
|
||||
*/
|
||||
|
|
@ -19,22 +58,35 @@ function Loader({ scale = 5, circular }: LoaderProps) {
|
|||
const { colors } = useConceptOptions();
|
||||
if (circular) {
|
||||
return (
|
||||
<ThreeCircles
|
||||
color={colors.bgPrimary}
|
||||
height={scale * 20}
|
||||
width={scale * 20}
|
||||
wrapperClass='flex justify-center'
|
||||
/>
|
||||
<div className='flex justify-center' aria-label='three-circles-loading' aria-busy='true' role='progressbar'>
|
||||
<svg height={`${scale * 20}`} width={`${scale * 20}`} viewBox='0 0 100 100' fill={colors.bgPrimary}>
|
||||
<path d='M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z'>
|
||||
{animateRotation('2.25s')}
|
||||
</path>
|
||||
<path d='M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5 L82,35.7z'>
|
||||
{animateRotation('1.75s')}
|
||||
</path>
|
||||
<path d='M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7 c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z'>
|
||||
{animateRotation('0.75s')}
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<ThreeDots
|
||||
color={colors.bgPrimary}
|
||||
height={scale * 20}
|
||||
width={scale * 20}
|
||||
radius={scale * 2}
|
||||
wrapperClass='flex justify-center'
|
||||
/>
|
||||
<div className='flex justify-center' aria-busy='true' role='progressbar'>
|
||||
<svg height={`${scale * 20}`} width={`${scale * 20}`} viewBox='0 0 120 30' fill={colors.bgPrimary}>
|
||||
<circle cx='15' cy='15' r='16'>
|
||||
{animatePulse(true, '0.8s')}
|
||||
</circle>
|
||||
<circle cx='60' cy='15' r='10' attributeName='fill-opacity' from='1' to='0.3'>
|
||||
{animatePulse(false, '0.8s')}
|
||||
</circle>
|
||||
<circle cx='105' cy='15' r='16'>
|
||||
{animatePulse(true, '0.8s')}
|
||||
</circle>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
'use client';
|
||||
|
||||
import { animated, useSpring } from '@react-spring/web';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { CProps } from '@/components/props';
|
||||
import { PARAMETER } from '@/utils/constants';
|
||||
|
||||
interface AnimateFadeProps extends CProps.AnimatedDiv {
|
||||
noFadeIn?: boolean;
|
||||
noFadeOut?: boolean;
|
||||
hideContent?: boolean;
|
||||
}
|
||||
|
||||
function AnimateFade({ style, noFadeIn, noFadeOut, hideContent, children, ...restProps }: AnimateFadeProps) {
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
|
||||
const springs = useSpring({
|
||||
config: { duration: PARAMETER.fadeDuration, clamp: true },
|
||||
from: { opacity: noFadeIn ? 1 : 0 },
|
||||
to: {
|
||||
opacity: hideContent ? 0 : 1,
|
||||
display: hideContent === undefined ? undefined : !isAnimating || (noFadeOut && hideContent) ? 'none' : 'block'
|
||||
},
|
||||
enter: { opacity: 0 },
|
||||
leave: { opacity: noFadeOut ? 1 : 0 },
|
||||
onStart: () => {
|
||||
if (!hideContent) setIsAnimating(true);
|
||||
},
|
||||
onRest: () => {
|
||||
if (hideContent) setIsAnimating(false);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<animated.div tabIndex={-1} style={{ ...springs, ...style }} {...restProps}>
|
||||
{children}
|
||||
</animated.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnimateFade;
|
||||
|
|
@ -11,7 +11,6 @@ import Indicator from '@/components/ui/Indicator';
|
|||
import Overlay from '@/components/ui/Overlay';
|
||||
import SubmitButton from '@/components/ui/SubmitButton';
|
||||
import TextArea from '@/components/ui/TextArea';
|
||||
import AnimateFade from '@/components/wrap/AnimateFade';
|
||||
import { useRSForm } from '@/context/RSFormContext';
|
||||
import DlgShowTypeGraph from '@/dialogs/DlgShowTypeGraph';
|
||||
import { ConstituentaID, CstType, IConstituenta, ICstUpdateData } from '@/models/rsform';
|
||||
|
|
@ -199,7 +198,7 @@ function FormConstituenta({
|
|||
) : null}
|
||||
{state ? (
|
||||
<>
|
||||
<AnimateFade hideContent={!state.definition_formal && isElementary}>
|
||||
{!!state.definition_formal || !isElementary ? (
|
||||
<EditorRSExpression
|
||||
id='cst_expression'
|
||||
label={
|
||||
|
|
@ -222,8 +221,8 @@ function FormConstituenta({
|
|||
onOpenEdit={onOpenEdit}
|
||||
onShowTypeGraph={handleTypeGraph}
|
||||
/>
|
||||
</AnimateFade>
|
||||
<AnimateFade hideContent={!state.definition_raw && isElementary}>
|
||||
) : null}
|
||||
{!!state.definition_raw || !isElementary ? (
|
||||
<RefsInput
|
||||
id='cst_definition'
|
||||
label='Текстовое определение'
|
||||
|
|
@ -238,8 +237,9 @@ function FormConstituenta({
|
|||
disabled={disabled}
|
||||
onChange={newValue => setTextDefinition(newValue)}
|
||||
/>
|
||||
</AnimateFade>
|
||||
<AnimateFade hideContent={!showConvention}>
|
||||
) : null}
|
||||
|
||||
{showConvention ? (
|
||||
<TextArea
|
||||
id='cst_convention'
|
||||
fitContent
|
||||
|
|
@ -251,8 +251,9 @@ function FormConstituenta({
|
|||
disabled={disabled || (isBasic && state.is_inherited)}
|
||||
onChange={event => setConvention(event.target.value)}
|
||||
/>
|
||||
</AnimateFade>
|
||||
<AnimateFade noFadeOut hideContent={showConvention || (disabled && !processing)}>
|
||||
) : null}
|
||||
|
||||
{!showConvention && (!disabled || processing) ? (
|
||||
<button
|
||||
key='cst_disable_comment'
|
||||
id='cst_disable_comment'
|
||||
|
|
@ -263,7 +264,7 @@ function FormConstituenta({
|
|||
>
|
||||
Добавить комментарий
|
||||
</button>
|
||||
</AnimateFade>
|
||||
) : null}
|
||||
|
||||
{!disabled || processing ? (
|
||||
<div className='mx-auto flex'>
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ function EditorRSExpression({
|
|||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='cc-fade-in'>
|
||||
{showAST ? (
|
||||
<DlgShowAST expression={expression} syntaxTree={syntaxTree} hideWindow={() => setShowAST(false)} />
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
'use client';
|
||||
|
||||
import { animated, useTransition } from '@react-spring/web';
|
||||
import clsx from 'clsx';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { StatusIcon } from '@/components/DomainIcons';
|
||||
import Loader from '@/components/ui/Loader';
|
||||
|
|
@ -12,7 +11,7 @@ import { type IConstituenta } from '@/models/rsform';
|
|||
import { inferStatus } from '@/models/rsformAPI';
|
||||
import { IExpressionParse, ParsingStatus } from '@/models/rslang';
|
||||
import { colorStatusBar } from '@/styling/color';
|
||||
import { globals, PARAMETER } from '@/utils/constants';
|
||||
import { globals } from '@/utils/constants';
|
||||
import { labelExpressionStatus, prepareTooltip } from '@/utils/labels';
|
||||
|
||||
interface StatusBarProps {
|
||||
|
|
@ -36,22 +35,12 @@ function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }:
|
|||
return inferStatus(activeCst.parse.status, activeCst.parse.valueClass);
|
||||
}, [isModified, activeCst, parseData]);
|
||||
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
const transitions = useTransition(processing, {
|
||||
from: { opacity: 1 },
|
||||
enter: { opacity: 1 },
|
||||
leave: { opacity: 0 },
|
||||
onStart: () => setIsAnimating(true),
|
||||
onRest: () => setIsAnimating(false),
|
||||
config: { duration: PARAMETER.fadeDuration }
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
tabIndex={0}
|
||||
className={clsx(
|
||||
'w-[10rem] h-[1.75rem]',
|
||||
'px-2 flex items-center justify-center gap-2',
|
||||
'px-2 flex items-center justify-center',
|
||||
'border',
|
||||
'select-none',
|
||||
'cursor-pointer',
|
||||
|
|
@ -63,18 +52,17 @@ function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }:
|
|||
data-tooltip-html={prepareTooltip('Проверить определение', 'Ctrl + Q')}
|
||||
onClick={onAnalyze}
|
||||
>
|
||||
{transitions((style, flag) =>
|
||||
flag ? (
|
||||
<animated.div style={style}>
|
||||
{processing ? (
|
||||
<div className='cc-fade-in'>
|
||||
{' '}
|
||||
<Loader scale={3} />
|
||||
</animated.div>
|
||||
) : null
|
||||
)}
|
||||
{!processing && !isAnimating ? (
|
||||
<>
|
||||
</div>
|
||||
) : null}
|
||||
{!processing ? (
|
||||
<div className='cc-fade-in flex items-center gap-2'>
|
||||
<StatusIcon size='1rem' value={status} />
|
||||
<span className='pb-[0.125rem] font-controls pr-2'>{labelExpressionStatus(status)}</span>
|
||||
</>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
'use client';
|
||||
|
||||
import { animated, useSpring } from '@react-spring/web';
|
||||
import clsx from 'clsx';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import { useAccessMode } from '@/context/AccessModeContext';
|
||||
import { useConceptOptions } from '@/context/ConceptOptionsContext';
|
||||
|
|
@ -33,37 +32,6 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit,
|
|||
|
||||
const [filteredData, setFilteredData] = useState<IConstituenta[]>(schema?.items ?? []);
|
||||
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
const isFirstRender = useRef(true);
|
||||
const springs = useSpring({
|
||||
from: { opacity: 0, width: '0' },
|
||||
to: async next => {
|
||||
if (isFirstRender.current) {
|
||||
await next({ opacity: isMounted ? 1 : 0, width: isMounted ? '100%' : '0', config: { duration: 0 } });
|
||||
isFirstRender.current = false;
|
||||
} else {
|
||||
if (isMounted) {
|
||||
await next({ width: '100%', config: { duration: PARAMETER.moveDuration } });
|
||||
await next({ opacity: 1, config: { duration: PARAMETER.fadeDuration } });
|
||||
} else {
|
||||
await next({ opacity: 0, config: { duration: PARAMETER.fadeDuration } });
|
||||
await next({ width: '0', config: { duration: PARAMETER.moveDuration } });
|
||||
}
|
||||
}
|
||||
},
|
||||
onRest: props => {
|
||||
if (props.finished && !isMounted) {
|
||||
setIsVisible(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isMounted) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
}, [isMounted]);
|
||||
|
||||
const table = useMemo(
|
||||
() => (
|
||||
<TableSideConstituents
|
||||
|
|
@ -81,12 +49,8 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit,
|
|||
[isBottom, filteredData, activeCst, onOpenEdit, calculateHeight, accessLevel]
|
||||
);
|
||||
|
||||
if (!isVisible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<animated.div
|
||||
<div
|
||||
className={clsx(
|
||||
'border', // prettier: split-lines
|
||||
{
|
||||
|
|
@ -94,7 +58,13 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit,
|
|||
'mt-3 mx-6 rounded-md md:max-w-[45.8rem] overflow-hidden': isBottom
|
||||
}
|
||||
)}
|
||||
style={springs}
|
||||
style={{
|
||||
transitionProperty: 'opacity, width',
|
||||
transitionDuration: `${2 * PARAMETER.moveDuration}ms`,
|
||||
transitionTimingFunction: 'ease-in-out',
|
||||
opacity: isMounted ? 1 : 0,
|
||||
width: isMounted ? '100%' : '0'
|
||||
}}
|
||||
>
|
||||
<ConstituentsSearch
|
||||
dense={windowSize.width && windowSize.width < COLUMN_DENSE_SEARCH_THRESHOLD ? true : undefined}
|
||||
|
|
@ -104,7 +74,7 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit,
|
|||
setFiltered={setFilteredData}
|
||||
/>
|
||||
{table}
|
||||
</animated.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user