ConceptProd/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

F: Animation rework pt1

Browse Source
This commit is contained in:
Ivan 2024-12-11 14:59:04 +03:00
parent 02fee878d1
commit 725b21091c
24 changed files with 336 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -43,13 +43,13 @@ This readme file is used mostly to document project dependencies and conventions
- reactflow - reactflow
- js-file-download - js-file-download
- use-debounce - use-debounce
- framer-motion
- html-to-image - html-to-image
- @tanstack/react-table - @tanstack/react-table
- @uiw/react-codemirror - @uiw/react-codemirror
- @uiw/codemirror-themes - @uiw/codemirror-themes
- @lezer/lr - @lezer/lr
- @dagrejs/dagre - @dagrejs/dagre
- @react-spring/web
</pre> </pre>
</details> </details>
<details> <details>

154
rsconcept/frontend/package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@dagrejs/dagre": "^1.1.4", "@dagrejs/dagre": "^1.1.4",
"@lezer/lr": "^1.4.2", "@lezer/lr": "^1.4.2",
"@react-spring/web": "^9.7.5",
"@tanstack/react-table": "^8.20.5", "@tanstack/react-table": "^8.20.5",
"@uiw/codemirror-themes": "^4.23.6", "@uiw/codemirror-themes": "^4.23.6",
"@uiw/react-codemirror": "^4.23.6", "@uiw/react-codemirror": "^4.23.6",
@ -588,9 +589,9 @@
} }
}, },
"node_modules/@babel/traverse": { "node_modules/@babel/traverse": {
"version": "7.26.3", "version": "7.26.4",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.3.tgz", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz",
"integrity": "sha512-yTmc8J+Sj8yLzwr4PD5Xb/WF3bOYu2C2OoSZPzbuqRm4n98XirsbzaX+GloeO376UnSYIYJ4NCanwV5/ugZkwA==", "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/code-frame": "^7.26.2", "@babel/code-frame": "^7.26.2",
@ -2282,6 +2283,78 @@
"node": ">=14" "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": { "node_modules/@reactflow/background": {
"version": "11.3.14", "version": "11.3.14",
"resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz", "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
@ -3024,9 +3097,9 @@
} }
}, },
"node_modules/@types/hoist-non-react-statics": { "node_modules/@types/hoist-non-react-statics": {
"version": "3.3.5", "version": "3.3.6",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
"integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@types/react": "*", "@types/react": "*",
@ -3095,15 +3168,15 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/prop-types": { "node_modules/@types/prop-types": {
"version": "15.7.13", "version": "15.7.14",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
"integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/react": { "node_modules/@types/react": {
"version": "18.3.13", "version": "18.3.14",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.13.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.14.tgz",
"integrity": "sha512-ii/gswMmOievxAJed4PAHT949bpYjPKXvXo1v6cRB/kqc2ZR4n+SgyCyvyc5Fec5ez8VnUumI1Vk7j6fRyRogg==", "integrity": "sha512-NzahNKvjNhVjuPBQ+2G7WlxstQ+47kXZNHlUvFakDViuIEfGY926GqhMueQFZ7woG+sPiQKlF36XfrIUVSUfFg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@types/prop-types": "*", "@types/prop-types": "*",
@ -3111,13 +3184,13 @@
} }
}, },
"node_modules/@types/react-dom": { "node_modules/@types/react-dom": {
"version": "18.3.1", "version": "18.3.2",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.2.tgz",
"integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", "integrity": "sha512-Fqp+rcvem9wEnGr3RY8dYNvSQ8PoLqjZ9HLgaPUOjJJD120uDyOxOjc/39M4Kddp9JQCxpGQbnhVQF0C0ncYVg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@types/react": "*" "@types/react": "^18"
} }
}, },
"node_modules/@types/react-transition-group": { "node_modules/@types/react-transition-group": {
@ -4059,17 +4132,16 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/call-bind": { "node_modules/call-bind": {
"version": "1.0.7", "version": "1.0.8",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
"integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"call-bind-apply-helpers": "^1.0.0",
"es-define-property": "^1.0.0", "es-define-property": "^1.0.0",
"es-errors": "^1.3.0",
"function-bind": "^1.1.2",
"get-intrinsic": "^1.2.4", "get-intrinsic": "^1.2.4",
"set-function-length": "^1.2.1" "set-function-length": "^1.2.2"
}, },
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
@ -4078,6 +4150,20 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/call-bind-apply-helpers": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.0.tgz",
"integrity": "sha512-CCKAP2tkPau7D3GE8+V8R6sQubA9R5foIzGp+85EXCVSCivuxBNAWqcpn72PKYiIcqoViv/kcUDpaEIMBVi1lQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/callsites": { "node_modules/callsites": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@ -4117,9 +4203,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001686", "version": "1.0.30001687",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz",
"integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==", "integrity": "sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -4800,9 +4886,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.70", "version": "1.5.71",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.70.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz",
"integrity": "sha512-P6FPqAWIZrC3sHDAwBitJBs7N7IF58m39XVny7DFseQXK2eiMn7nNQizFf63mWDDUnFvaqsM8FI0+ZZfLkdUGA==", "integrity": "sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==",
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
@ -5158,9 +5244,9 @@
} }
}, },
"node_modules/eslint-plugin-react-hooks": { "node_modules/eslint-plugin-react-hooks": {
"version": "5.0.0", "version": "5.1.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0.tgz",
"integrity": "sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==", "integrity": "sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
@ -10062,9 +10148,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "6.0.2", "version": "6.0.3",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.0.2.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.3.tgz",
"integrity": "sha512-XdQ+VsY2tJpBsKGs0wf3U/+azx8BBpYRHFAyKm5VeEZNOJZRB63q7Sc8Iup3k0TrN3KO6QgyzFf+opSbfY1y0g==", "integrity": "sha512-Cmuo5P0ENTN6HxLSo6IHsjCLn/81Vgrp81oaiFFMRa8gGDj5xEjIcEpf2ZymZtZR8oU0P2JX5WuUp/rlXcHkAw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

3
rsconcept/frontend/package.json
View File

@ -14,6 +14,7 @@
"dependencies": { "dependencies": {
"@dagrejs/dagre": "^1.1.4", "@dagrejs/dagre": "^1.1.4",
"@lezer/lr": "^1.4.2", "@lezer/lr": "^1.4.2",
"@react-spring/web": "^9.7.5",
"@tanstack/react-table": "^8.20.5", "@tanstack/react-table": "^8.20.5",
"@uiw/codemirror-themes": "^4.23.6", "@uiw/codemirror-themes": "^4.23.6",
"@uiw/react-codemirror": "^4.23.6", "@uiw/react-codemirror": "^4.23.6",
@ -44,12 +45,12 @@
"@types/react": "^18.3.12", "@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1", "@types/react-dom": "^18.3.1",
"@typescript-eslint/eslint-plugin": "^8.0.1", "@typescript-eslint/eslint-plugin": "^8.0.1",
"eslint-plugin-react-hooks": "^5.0.0",
"@typescript-eslint/parser": "^8.0.1", "@typescript-eslint/parser": "^8.0.1",
"@vitejs/plugin-react": "^4.3.4", "@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"eslint": "^9.16.0", "eslint": "^9.16.0",
"eslint-plugin-react": "^7.37.2", "eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-simple-import-sort": "^12.1.1", "eslint-plugin-simple-import-sort": "^12.1.1",
"globals": "^15.13.0", "globals": "^15.13.0",
"jest": "^29.7.0", "jest": "^29.7.0",

48
rsconcept/frontend/src/app/Navigation/UserMenu.tsx
View File

@ -1,5 +1,3 @@
import { AnimatePresence } from 'framer-motion';
import { IconLogin, IconUser2 } from '@/components/Icons'; import { IconLogin, IconUser2 } from '@/components/Icons';
import Loader from '@/components/ui/Loader'; import Loader from '@/components/ui/Loader';
import AnimateFade from '@/components/wrap/AnimateFade'; import AnimateFade from '@/components/wrap/AnimateFade';
@ -21,30 +19,28 @@ function UserMenu() {
const navigateLogin = () => router.push(urls.login); const navigateLogin = () => router.push(urls.login);
return ( return (
<div ref={menu.ref} className='h-full w-[4rem] flex items-center justify-center'> <div ref={menu.ref} className='h-full w-[4rem] flex items-center justify-center'>
<AnimatePresence mode='wait'> {loading ? (
{loading ? ( <AnimateFade key='nav_user_badge_loader'>
<AnimateFade key='nav_user_badge_loader'> <Loader circular scale={1.5} />
<Loader circular scale={1.5} /> </AnimateFade>
</AnimateFade> ) : null}
) : null} {!user && !loading ? (
{!user && !loading ? ( <AnimateFade key='nav_user_badge_login' className='h-full'>
<AnimateFade key='nav_user_badge_login' className='h-full'> <NavigationButton
<NavigationButton title='Перейти на страницу логина'
title='Перейти на страницу логина' icon={<IconLogin size='1.5rem' className='icon-primary' />}
icon={<IconLogin size='1.5rem' className='icon-primary' />} onClick={navigateLogin}
onClick={navigateLogin} />
/> </AnimateFade>
</AnimateFade> ) : null}
) : null} {user ? (
{user ? ( <AnimateFade key='nav_user_badge_profile' className='h-full'>
<AnimateFade key='nav_user_badge_profile' className='h-full'> <NavigationButton
<NavigationButton icon={<IconUser2 size='1.5rem' className={adminMode && user.is_staff ? 'icon-primary' : ''} />}
icon={<IconUser2 size='1.5rem' className={adminMode && user.is_staff ? 'icon-primary' : ''} />} onClick={menu.toggle}
onClick={menu.toggle} />
/> </AnimateFade>
</AnimateFade> ) : null}
) : null}
</AnimatePresence>
<UserDropdown isOpen={!!user && menu.isOpen} hideDropdown={() => menu.hide()} /> <UserDropdown isOpen={!!user && menu.isOpen} hideDropdown={() => menu.hide()} />
</div> </div>
); );

31
rsconcept/frontend/src/components/RefsInput/RefsInput.tsx
View File

@ -6,7 +6,6 @@ import { createTheme } from '@uiw/codemirror-themes';
import CodeMirror, { BasicSetupOptions, ReactCodeMirrorProps, ReactCodeMirrorRef } from '@uiw/react-codemirror'; import CodeMirror, { BasicSetupOptions, ReactCodeMirrorProps, ReactCodeMirrorRef } from '@uiw/react-codemirror';
import clsx from 'clsx'; import clsx from 'clsx';
import { EditorView } from 'codemirror'; import { EditorView } from 'codemirror';
import { AnimatePresence } from 'framer-motion';
import { forwardRef, useCallback, useMemo, useRef, useState } from 'react'; import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
import Label from '@/components/ui/Label'; import Label from '@/components/ui/Label';
@ -207,22 +206,20 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
return ( return (
<div className={clsx('flex flex-col gap-2', cursor)}> <div className={clsx('flex flex-col gap-2', cursor)}>
<AnimatePresence> {showEditor && schema ? (
{showEditor && schema ? ( <DlgEditReference
<DlgEditReference hideWindow={hideEditReference}
hideWindow={hideEditReference} schema={schema}
schema={schema} initial={{
initial={{ type: currentType,
type: currentType, refRaw: refText,
refRaw: refText, text: hintText,
text: hintText, basePosition: basePosition,
basePosition: basePosition, mainRefs: mainRefs
mainRefs: mainRefs }}
}} onSave={handleInputReference}
onSave={handleInputReference} />
/> ) : null}
) : null}
</AnimatePresence>
<Label text={label} /> <Label text={label} />
<CodeMirror <CodeMirror
id={id} id={id}

4
rsconcept/frontend/src/components/props.d.ts vendored
View File

@ -1,5 +1,7 @@
// =========== Module contains interfaces for common UI elements. ========== // =========== Module contains interfaces for common UI elements. ==========
import { animated } from '@react-spring/web';
import { HTMLMotionProps } from 'framer-motion'; import { HTMLMotionProps } from 'framer-motion';
import React from 'react';
export namespace CProps { export namespace CProps {
/** /**
@ -96,7 +98,7 @@ export namespace CProps {
/** /**
* Represents `div` component with animation properties. * Represents `div` component with animation properties.
*/ */
export type AnimatedDiv = HTMLMotionProps<'div'>; export type AnimatedDiv = React.ComponentPropsWithoutRef<typeof animated.div>;
/** /**
* Represents `mouse event` in React. * Represents `mouse event` in React.

31
rsconcept/frontend/src/components/ui/Loader.tsx
View File

@ -4,8 +4,6 @@ import { ThreeCircles, ThreeDots } from 'react-loader-spinner';
import { useConceptOptions } from '@/context/ConceptOptionsContext'; import { useConceptOptions } from '@/context/ConceptOptionsContext';
import AnimateFade from '../wrap/AnimateFade';
interface LoaderProps { interface LoaderProps {
/** Scale of the loader from 1 to 10. */ /** Scale of the loader from 1 to 10. */
scale?: number; scale?: number;
@ -19,15 +17,26 @@ interface LoaderProps {
*/ */
function Loader({ scale = 5, circular }: LoaderProps) { function Loader({ scale = 5, circular }: LoaderProps) {
const { colors } = useConceptOptions(); const { colors } = useConceptOptions();
return ( if (circular) {
<AnimateFade noFadeIn className='flex justify-center'> return (
{circular ? ( <ThreeCircles
<ThreeCircles color={colors.bgPrimary} height={scale * 20} width={scale * 20} /> color={colors.bgPrimary}
) : ( height={scale * 20}
<ThreeDots color={colors.bgPrimary} height={scale * 20} width={scale * 20} radius={scale * 2} /> width={scale * 20}
)} wrapperClass='flex justify-center'
</AnimateFade> />
); );
} else {
return (
<ThreeDots
color={colors.bgPrimary}
height={scale * 20}
width={scale * 20}
radius={scale * 2}
wrapperClass='flex justify-center'
/>
);
}
} }
export default Loader; export default Loader;

2
rsconcept/frontend/src/components/ui/Modal.tsx
View File

@ -130,7 +130,7 @@ function Modal({
<div <div
className={clsx( className={clsx(
'overscroll-contain max-h-[calc(100svh-8rem)] max-w-[100svw] xs:max-w-[calc(100svw-2rem)]', 'overscroll-contain max-h-[calc(100svh-8rem)] max-w-[100svw] xs:max-w-[calc(100svw-2rem)] outline-none',
{ {
'overflow-auto': !overflowVisible, 'overflow-auto': !overflowVisible,
'overflow-visible': overflowVisible 'overflow-visible': overflowVisible

41
rsconcept/frontend/src/components/wrap/AnimateFade.tsx
View File

@ -1,8 +1,10 @@
import { motion } from 'framer-motion'; 'use client';
import { animateFade } from '@/styling/animations'; import { animated, useSpring } from '@react-spring/web';
import { useState } from 'react';
import { CProps } from '../props'; import { CProps } from '@/components/props';
import { PARAMETER } from '@/utils/constants';
interface AnimateFadeProps extends CProps.AnimatedDiv { interface AnimateFadeProps extends CProps.AnimatedDiv {
noFadeIn?: boolean; noFadeIn?: boolean;
@ -10,19 +12,30 @@ interface AnimateFadeProps extends CProps.AnimatedDiv {
hideContent?: boolean; hideContent?: boolean;
} }
function AnimateFade({ style, noFadeIn, noFadeOut, children, hideContent, ...restProps }: AnimateFadeProps) { 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 ( return (
<motion.div <animated.div tabIndex={-1} style={{ ...springs, ...style }} {...restProps}>
tabIndex={-1}
initial={{ ...(!noFadeIn ? animateFade.initial : {}) }}
animate={hideContent ? 'hidden' : 'active'}
variants={animateFade.variants}
exit={{ ...(!noFadeOut ? animateFade.exit : {}) }}
style={{ display: hideContent ? 'none' : '', willChange: 'auto', ...style }}
{...restProps}
>
{children} {children}
</motion.div> </animated.div>
); );
} }

6
rsconcept/frontend/src/components/wrap/DataLoader.tsx
View File

@ -1,5 +1,3 @@
import { AnimatePresence } from 'framer-motion';
import InfoError, { ErrorData } from '../info/InfoError'; import InfoError, { ErrorData } from '../info/InfoError';
import { CProps } from '../props'; import { CProps } from '../props';
import Loader from '../ui/Loader'; import Loader from '../ui/Loader';
@ -23,7 +21,7 @@ function DataLoader({
...restProps ...restProps
}: React.PropsWithChildren<DataLoaderProps>) { }: React.PropsWithChildren<DataLoaderProps>) {
return ( return (
<AnimatePresence mode='wait'> <>
{!isLoading && !error && !hasNoData ? ( {!isLoading && !error && !hasNoData ? (
<AnimateFade id={id} key={`${id}-data`} className={className} {...restProps}> <AnimateFade id={id} key={`${id}-data`} className={className} {...restProps}>
{children} {children}
@ -36,7 +34,7 @@ function DataLoader({
) : null} ) : null}
{isLoading ? <Loader key={`${id}-loader`} /> : null} {isLoading ? <Loader key={`${id}-loader`} /> : null}
{error ? <InfoError key={`${id}-error`} error={error} /> : null} {error ? <InfoError key={`${id}-error`} error={error} /> : null}
</AnimatePresence> </>
); );
} }

6
rsconcept/frontend/src/components/wrap/RequireAuth.tsx
View File

@ -1,7 +1,5 @@
'use client'; 'use client';
import { AnimatePresence } from 'framer-motion';
import { useAuth } from '@/context/AuthContext'; import { useAuth } from '@/context/AuthContext';
import Loader from '../ui/Loader'; import Loader from '../ui/Loader';
@ -12,7 +10,7 @@ function RequireAuth({ children }: React.PropsWithChildren) {
const { user, loading } = useAuth(); const { user, loading } = useAuth();
return ( return (
<AnimatePresence mode='wait'> <>
{loading ? <Loader key='auth-loader' /> : null} {loading ? <Loader key='auth-loader' /> : null}
{!loading && user ? <AnimateFade key='auth-data'>{children}</AnimateFade> : null} {!loading && user ? <AnimateFade key='auth-data'>{children}</AnimateFade> : null}
{!loading && !user ? ( {!loading && !user ? (
@ -23,7 +21,7 @@ function RequireAuth({ children }: React.PropsWithChildren) {
<TextURL text='Начальная страница' href='/' /> <TextURL text='Начальная страница' href='/' />
</AnimateFade> </AnimateFade>
) : null} ) : null}
</AnimatePresence> </>
); );
} }

28
rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
View File

@ -1,7 +1,6 @@
'use client'; 'use client';
import clsx from 'clsx'; import clsx from 'clsx';
import { AnimatePresence } from 'framer-motion';
import { useCallback, useLayoutEffect, useMemo, useState } from 'react'; import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
import BadgeHelp from '@/components/info/BadgeHelp'; import BadgeHelp from '@/components/info/BadgeHelp';
@ -9,7 +8,6 @@ import RSInput from '@/components/RSInput';
import SelectSingle from '@/components/ui/SelectSingle'; import SelectSingle from '@/components/ui/SelectSingle';
import TextArea from '@/components/ui/TextArea'; import TextArea from '@/components/ui/TextArea';
import TextInput from '@/components/ui/TextInput'; import TextInput from '@/components/ui/TextInput';
import AnimateFade from '@/components/wrap/AnimateFade';
import { HelpTopic } from '@/models/miscellaneous'; import { HelpTopic } from '@/models/miscellaneous';
import { CstType, ICstCreateData, IRSForm } from '@/models/rsform'; import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
import { generateAlias, isBaseSet, isBasicConcept, isFunctional, validateNewAlias } from '@/models/rsformAPI'; import { generateAlias, isBaseSet, isBasicConcept, isFunctional, validateNewAlias } from '@/models/rsformAPI';
@ -48,8 +46,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
); );
return ( return (
<AnimatePresence> <>
<div key='dlg_cst_alias_picker' className='flex items-center self-center gap-3'> <div className='flex items-center self-center gap-3'>
<SelectSingle <SelectSingle
id='dlg_cst_type' id='dlg_cst_type'
placeholder='Выберите тип' placeholder='Выберите тип'
@ -72,8 +70,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
/> />
</div> </div>
<TextArea <TextArea
key='dlg_cst_term'
id='dlg_cst_term' id='dlg_cst_term'
fitContent fitContent
spellCheck spellCheck
@ -83,7 +81,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
value={state.term_raw} value={state.term_raw}
onChange={event => partialUpdate({ term_raw: event.target.value })} onChange={event => partialUpdate({ term_raw: event.target.value })}
/> />
<AnimateFade key='dlg_cst_expression' hideContent={!state.definition_formal && isElementary}>
{!!state.definition_formal || !isElementary ? (
<RSInput <RSInput
id='dlg_cst_expression' id='dlg_cst_expression'
noTooltip noTooltip
@ -101,8 +100,9 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
onChange={value => partialUpdate({ definition_formal: value })} onChange={value => partialUpdate({ definition_formal: value })}
schema={schema} schema={schema}
/> />
</AnimateFade> ) : null}
<AnimateFade key='dlg_cst_definition' hideContent={!state.definition_raw && isElementary}>
{!!state.definition_raw || !isElementary ? (
<TextArea <TextArea
id='dlg_cst_definition' id='dlg_cst_definition'
spellCheck spellCheck
@ -113,10 +113,10 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
value={state.definition_raw} value={state.definition_raw}
onChange={event => partialUpdate({ definition_raw: event.target.value })} onChange={event => partialUpdate({ definition_raw: event.target.value })}
/> />
</AnimateFade> ) : null}
{!showConvention ? ( {!showConvention ? (
<button <button
key='dlg_cst_show_comment'
id='dlg_cst_show_comment' id='dlg_cst_show_comment'
tabIndex={-1} tabIndex={-1}
type='button' type='button'
@ -125,10 +125,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
> >
Добавить комментарий Добавить комментарий
</button> </button>
) : null} ) : (
<AnimateFade hideContent={!showConvention}>
<TextArea <TextArea
key='dlg_cst_convention'
id='dlg_cst_convention' id='dlg_cst_convention'
spellCheck spellCheck
fitContent fitContent
@ -138,8 +136,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
value={state.convention} value={state.convention}
onChange={event => partialUpdate({ convention: event.target.value })} onChange={event => partialUpdate({ convention: event.target.value })}
/> />
</AnimateFade> )}
</AnimatePresence> </>
); );
} }

4
rsconcept/frontend/src/pages/ManualsPage/TopicsDropdown.tsx
View File

@ -52,12 +52,12 @@ function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownProps) {
title='Список тем' title='Список тем'
hideTitle={menu.isOpen} hideTitle={menu.isOpen}
icon={!menu.isOpen ? <IconMenuUnfold size='1.25rem' /> : <IconMenuFold size='1.25rem' />} icon={!menu.isOpen ? <IconMenuUnfold size='1.25rem' /> : <IconMenuFold size='1.25rem' />}
className='w-[3rem] h-7 rounded-none' className={clsx('w-[3rem] h-7 rounded-none border-l-0', menu.isOpen && 'border-b-0')}
onClick={menu.toggle} onClick={menu.toggle}
/> />
<motion.div <motion.div
className={clsx( className={clsx(
'border divide-y rounded-none', // prettier: split-lines 'border border-l-0 divide-y rounded-none', // prettier: split-lines
'cc-scroll-y', 'cc-scroll-y',
'clr-controls' 'clr-controls'
)} )}

6
rsconcept/frontend/src/pages/OssPage/OssEditContext.tsx
View File

@ -1,6 +1,5 @@
'use client'; 'use client';
import { AnimatePresence } from 'framer-motion';
import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react'; import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
@ -418,7 +417,7 @@ export const OssEditState = ({ selected, setSelected, children }: React.PropsWit
}} }}
> >
{model.schema ? ( {model.schema ? (
<AnimatePresence> <>
{showEditEditors ? ( {showEditEditors ? (
<DlgEditEditors <DlgEditEditors
hideWindow={() => setShowEditEditors(false)} hideWindow={() => setShowEditEditors(false)}
@ -472,8 +471,7 @@ export const OssEditState = ({ selected, setSelected, children }: React.PropsWit
onSubmit={handleRelocateConstituents} onSubmit={handleRelocateConstituents}
/> />
) : null} ) : null}
) </>
</AnimatePresence>
) : null} ) : null}
{children} {children}

20
rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx
View File

@ -1,7 +1,6 @@
'use client'; 'use client';
import clsx from 'clsx'; import clsx from 'clsx';
import { AnimatePresence } from 'framer-motion';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { useConceptOptions } from '@/context/ConceptOptionsContext'; import { useConceptOptions } from '@/context/ConceptOptionsContext';
@ -109,17 +108,14 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
onRename={controller.renameCst} onRename={controller.renameCst}
onOpenEdit={onOpenEdit} onOpenEdit={onOpenEdit}
/> />
<AnimatePresence initial={false}> <ViewConstituents
{showList ? ( isMounted={showList}
<ViewConstituents schema={controller.schema}
schema={controller.schema} expression={activeCst?.definition_formal ?? ''}
expression={activeCst?.definition_formal ?? ''} isBottom={isNarrow}
isBottom={isNarrow} activeCst={activeCst}
activeCst={activeCst} onOpenEdit={onOpenEdit}
onOpenEdit={onOpenEdit} />
/>
) : null}
</AnimatePresence>
</div> </div>
</div> </div>
</> </>

25
rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
View File

@ -1,7 +1,6 @@
'use client'; 'use client';
import clsx from 'clsx'; import clsx from 'clsx';
import { AnimatePresence } from 'framer-motion';
import { useEffect, useLayoutEffect, useMemo, useState } from 'react'; import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
@ -156,11 +155,9 @@ function FormConstituenta({
return ( return (
<AnimateFade className='mx-0 md:mx-auto pt-[2rem] xs:pt-0'> <AnimateFade className='mx-0 md:mx-auto pt-[2rem] xs:pt-0'>
<AnimatePresence> {showTypification && state ? (
{showTypification && state ? ( <DlgShowTypeGraph items={typeInfo ? [typeInfo] : []} hideWindow={() => setShowTypification(false)} />
<DlgShowTypeGraph items={typeInfo ? [typeInfo] : []} hideWindow={() => setShowTypification(false)} /> ) : null}
) : null}
</AnimatePresence>
{state ? ( {state ? (
<ControlsOverlay <ControlsOverlay
disabled={disabled} disabled={disabled}
@ -201,12 +198,8 @@ function FormConstituenta({
/> />
) : null} ) : null}
{state ? ( {state ? (
<AnimatePresence> <>
<AnimateFade <AnimateFade hideContent={!state.definition_formal && isElementary}>
key='cst_expression_fade'
hideContent={!state.definition_formal && isElementary}
style={{ willChange: 'auto' }}
>
<EditorRSExpression <EditorRSExpression
id='cst_expression' id='cst_expression'
label={ label={
@ -230,7 +223,7 @@ function FormConstituenta({
onShowTypeGraph={handleTypeGraph} onShowTypeGraph={handleTypeGraph}
/> />
</AnimateFade> </AnimateFade>
<AnimateFade key='cst_definition_fade' hideContent={!state.definition_raw && isElementary}> <AnimateFade hideContent={!state.definition_raw && isElementary}>
<RefsInput <RefsInput
id='cst_definition' id='cst_definition'
label='Текстовое определение' label='Текстовое определение'
@ -246,7 +239,7 @@ function FormConstituenta({
onChange={newValue => setTextDefinition(newValue)} onChange={newValue => setTextDefinition(newValue)}
/> />
</AnimateFade> </AnimateFade>
<AnimateFade key='cst_convention_fade' hideContent={!showConvention}> <AnimateFade hideContent={!showConvention}>
<TextArea <TextArea
id='cst_convention' id='cst_convention'
fitContent fitContent
@ -259,7 +252,7 @@ function FormConstituenta({
onChange={event => setConvention(event.target.value)} onChange={event => setConvention(event.target.value)}
/> />
</AnimateFade> </AnimateFade>
<AnimateFade key='cst_convention_button' hideContent={showConvention || (disabled && !processing)}> <AnimateFade noFadeOut hideContent={showConvention || (disabled && !processing)}>
<button <button
key='cst_disable_comment' key='cst_disable_comment'
id='cst_disable_comment' id='cst_disable_comment'
@ -297,7 +290,7 @@ function FormConstituenta({
</Overlay> </Overlay>
</div> </div>
) : null} ) : null}
</AnimatePresence> </>
) : null} ) : null}
</form> </form>
</AnimateFade> </AnimateFade>

9
rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
View File

@ -1,7 +1,6 @@
'use client'; 'use client';
import { ReactCodeMirrorRef } from '@uiw/react-codemirror'; import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
import { AnimatePresence } from 'framer-motion';
import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'; import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
@ -162,11 +161,9 @@ function EditorRSExpression({
return ( return (
<div> <div>
<AnimatePresence> {showAST ? (
{showAST ? ( <DlgShowAST expression={expression} syntaxTree={syntaxTree} hideWindow={() => setShowAST(false)} />
<DlgShowAST expression={expression} syntaxTree={syntaxTree} hideWindow={() => setShowAST(false)} /> ) : null}
) : null}
</AnimatePresence>
<ToolbarRSExpression <ToolbarRSExpression
disabled={disabled} disabled={disabled}

40
rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
View File

@ -1,8 +1,8 @@
'use client'; 'use client';
import { animated, useTransition } from '@react-spring/web';
import clsx from 'clsx'; import clsx from 'clsx';
import { AnimatePresence } from 'framer-motion'; import { useMemo, useState } from 'react';
import { useMemo } from 'react';
import { StatusIcon } from '@/components/DomainIcons'; import { StatusIcon } from '@/components/DomainIcons';
import Loader from '@/components/ui/Loader'; import Loader from '@/components/ui/Loader';
@ -12,7 +12,7 @@ import { type IConstituenta } from '@/models/rsform';
import { inferStatus } from '@/models/rsformAPI'; import { inferStatus } from '@/models/rsformAPI';
import { IExpressionParse, ParsingStatus } from '@/models/rslang'; import { IExpressionParse, ParsingStatus } from '@/models/rslang';
import { colorStatusBar } from '@/styling/color'; import { colorStatusBar } from '@/styling/color';
import { globals } from '@/utils/constants'; import { globals, PARAMETER } from '@/utils/constants';
import { labelExpressionStatus, prepareTooltip } from '@/utils/labels'; import { labelExpressionStatus, prepareTooltip } from '@/utils/labels';
interface StatusBarProps { interface StatusBarProps {
@ -36,6 +36,16 @@ function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }:
return inferStatus(activeCst.parse.status, activeCst.parse.valueClass); return inferStatus(activeCst.parse.status, activeCst.parse.valueClass);
}, [isModified, activeCst, parseData]); }, [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 ( return (
<div <div
tabIndex={0} tabIndex={0}
@ -53,17 +63,19 @@ function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }:
data-tooltip-html={prepareTooltip('Проверить определение', 'Ctrl + Q')} data-tooltip-html={prepareTooltip('Проверить определение', 'Ctrl + Q')}
onClick={onAnalyze} onClick={onAnalyze}
> >
<AnimatePresence mode='wait'> {transitions((style, flag) =>
{processing ? <Loader key='status-loader' scale={3} /> : null} flag ? (
{!processing ? ( <animated.div style={style}>
<> <Loader scale={3} />
<StatusIcon key='status-icon' size='1rem' value={status} /> </animated.div>
<span key='status-text' className='pb-[0.125rem] font-controls pr-2'> ) : null
{labelExpressionStatus(status)} )}
</span> {!processing && !isAnimating ? (
</> <>
) : null} <StatusIcon size='1rem' value={status} />
</AnimatePresence> <span className='pb-[0.125rem] font-controls pr-2'>{labelExpressionStatus(status)}</span>
</>
) : null}
</div> </div>
); );
} }

17
rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
View File

@ -1,7 +1,6 @@
'use client'; 'use client';
import clsx from 'clsx'; import clsx from 'clsx';
import { AnimatePresence } from 'framer-motion';
import { toPng } from 'html-to-image'; import { toPng } from 'html-to-image';
import { useCallback, useLayoutEffect, useMemo, useState } from 'react'; import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
@ -376,15 +375,13 @@ function TGFlow({ onOpenEdit }: TGFlowProps) {
return ( return (
<> <>
<AnimatePresence> {showParamsDialog ? (
{showParamsDialog ? ( <DlgGraphParams
<DlgGraphParams hideWindow={() => setShowParamsDialog(false)}
hideWindow={() => setShowParamsDialog(false)} initial={filterParams}
initial={filterParams} onConfirm={handleChangeParams}
onConfirm={handleChangeParams} />
/> ) : null}
) : null}
</AnimatePresence>
<AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}> <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
<Overlay position='cc-tab-tools' className='flex flex-col items-center rounded-b-2xl cc-blur'> <Overlay position='cc-tab-tools' className='flex flex-col items-center rounded-b-2xl cc-blur'>

5
rsconcept/frontend/src/pages/RSFormPage/RSEditContext.tsx
View File

@ -1,6 +1,5 @@
'use client'; 'use client';
import { AnimatePresence } from 'framer-motion';
import fileDownload from 'js-file-download'; import fileDownload from 'js-file-download';
import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react'; import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
@ -684,7 +683,7 @@ export const RSEditState = ({
}} }}
> >
{model.schema ? ( {model.schema ? (
<AnimatePresence> <>
{showUpload ? <DlgUploadRSForm hideWindow={() => setShowUpload(false)} /> : null} {showUpload ? <DlgUploadRSForm hideWindow={() => setShowUpload(false)} /> : null}
{showClone ? ( {showClone ? (
<DlgCloneLibraryItem <DlgCloneLibraryItem
@ -782,7 +781,7 @@ export const RSEditState = ({
) : null} ) : null}
{showTypeGraph ? <DlgShowTypeGraph items={typeInfo} hideWindow={() => setShowTypeGraph(false)} /> : null} {showTypeGraph ? <DlgShowTypeGraph items={typeInfo} hideWindow={() => setShowTypeGraph(false)} /> : null}
</AnimatePresence> </>
) : null} ) : null}
{children} {children}

52
rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
View File

@ -1,15 +1,15 @@
'use client'; 'use client';
import { animated, useSpring } from '@react-spring/web';
import clsx from 'clsx'; import clsx from 'clsx';
import { motion } from 'framer-motion'; import { useEffect, useMemo, useRef, useState } from 'react';
import { useMemo, useState } from 'react';
import { useAccessMode } from '@/context/AccessModeContext'; import { useAccessMode } from '@/context/AccessModeContext';
import { useConceptOptions } from '@/context/ConceptOptionsContext'; import { useConceptOptions } from '@/context/ConceptOptionsContext';
import useWindowSize from '@/hooks/useWindowSize'; import useWindowSize from '@/hooks/useWindowSize';
import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform'; import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform';
import { UserLevel } from '@/models/user'; import { UserLevel } from '@/models/user';
import { animateSideView } from '@/styling/animations'; import { PARAMETER } from '@/utils/constants';
import ConstituentsSearch from './ConstituentsSearch'; import ConstituentsSearch from './ConstituentsSearch';
import TableSideConstituents from './TableSideConstituents'; import TableSideConstituents from './TableSideConstituents';
@ -23,15 +23,47 @@ interface ViewConstituentsProps {
activeCst?: IConstituenta; activeCst?: IConstituenta;
schema?: IRSForm; schema?: IRSForm;
onOpenEdit: (cstID: ConstituentaID) => void; onOpenEdit: (cstID: ConstituentaID) => void;
isMounted: boolean;
} }
function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit }: ViewConstituentsProps) { function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit, isMounted }: ViewConstituentsProps) {
const { calculateHeight } = useConceptOptions(); const { calculateHeight } = useConceptOptions();
const windowSize = useWindowSize(); const windowSize = useWindowSize();
const { accessLevel } = useAccessMode(); const { accessLevel } = useAccessMode();
const [filteredData, setFilteredData] = useState<IConstituenta[]>(schema?.items ?? []); 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( const table = useMemo(
() => ( () => (
<TableSideConstituents <TableSideConstituents
@ -49,8 +81,12 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit
[isBottom, filteredData, activeCst, onOpenEdit, calculateHeight, accessLevel] [isBottom, filteredData, activeCst, onOpenEdit, calculateHeight, accessLevel]
); );
if (!isVisible) {
return null;
}
return ( return (
<motion.div <animated.div
className={clsx( className={clsx(
'border', // prettier: split-lines 'border', // prettier: split-lines
{ {
@ -58,9 +94,7 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit
'mt-3 mx-6 rounded-md md:max-w-[45.8rem] overflow-hidden': isBottom 'mt-3 mx-6 rounded-md md:max-w-[45.8rem] overflow-hidden': isBottom
} }
)} )}
initial={{ ...animateSideView.initial }} style={springs}
animate={{ ...animateSideView.animate }}
exit={{ ...animateSideView.exit }}
> >
<ConstituentsSearch <ConstituentsSearch
dense={windowSize.width && windowSize.width < COLUMN_DENSE_SEARCH_THRESHOLD ? true : undefined} dense={windowSize.width && windowSize.width < COLUMN_DENSE_SEARCH_THRESHOLD ? true : undefined}
@ -70,7 +104,7 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit
setFiltered={setFilteredData} setFiltered={setFilteredData}
/> />
{table} {table}
</motion.div> </animated.div>
); );
} }

20
rsconcept/frontend/src/pages/RegisterPage/RegisterPage.tsx
View File

@ -1,5 +1,3 @@
import { AnimatePresence } from 'framer-motion';
import Loader from '@/components/ui/Loader'; import Loader from '@/components/ui/Loader';
import AnimateFade from '@/components/wrap/AnimateFade'; import AnimateFade from '@/components/wrap/AnimateFade';
import ExpectedAnonymous from '@/components/wrap/ExpectedAnonymous'; import ExpectedAnonymous from '@/components/wrap/ExpectedAnonymous';
@ -13,7 +11,7 @@ function RegisterPage() {
if (loading) { if (loading) {
return <Loader />; return <Loader />;
} }
if (user && !loading) { if (user) {
return ( return (
<AnimateFade> <AnimateFade>
<ExpectedAnonymous /> <ExpectedAnonymous />
@ -21,19 +19,9 @@ function RegisterPage() {
); );
} }
return ( return (
<AnimatePresence mode='wait'> <AnimateFade key='signup-no-user'>
{loading ? <Loader key='signup-loader' /> : null} <FormSignup />
{!loading && user ? ( </AnimateFade>
<AnimateFade key='signup-has-user'>
<ExpectedAnonymous />
</AnimateFade>
) : null}
{!loading && !user ? (
<AnimateFade key='signup-no-user'>
<FormSignup />
</AnimateFade>
) : null}
</AnimatePresence>
); );
} }

64
rsconcept/frontend/src/styling/animations.ts
View File

@ -186,38 +186,6 @@ export const animateParseResults: Variants = {
} }
}; };
export const animateSideView = {
initial: {
width: 0,
opacity: 0
},
animate: {
width: 'auto',
opacity: 1,
transition: {
width: {
duration: 0.4
},
opacity: {
delay: 0.4,
duration: 0
}
}
},
exit: {
width: 0,
opacity: 0,
transition: {
width: {
duration: 0.4
},
opacity: {
duration: 0
}
}
}
};
export const animateSideMinWidth = (width: string) => ({ export const animateSideMinWidth = (width: string) => ({
initial: { initial: {
minWidth: 0, minWidth: 0,
@ -306,35 +274,3 @@ export const animateModal = {
} }
} }
}; };
export const animateFade = {
initial: {
opacity: 0
},
variants: {
active: {
opacity: 1,
transition: {
type: 'tween',
ease: 'linear',
duration: 0.4
}
},
hidden: {
opacity: 0,
transition: {
type: 'tween',
ease: 'linear',
duration: 0.4
}
}
},
exit: {
opacity: 0,
transition: {
type: 'tween',
ease: 'linear',
duration: 0.4
}
}
};

3
rsconcept/frontend/src/utils/constants.ts
View File

@ -21,6 +21,9 @@ export const PARAMETER = {
ossDistanceX: 180, // pixels - insert x-distance between node centers ossDistanceX: 180, // pixels - insert x-distance between node centers
ossDistanceY: 100, // pixels - insert y-distance between node centers ossDistanceY: 100, // pixels - insert y-distance between node centers
fadeDuration: 300, // milliseconds - duration of fade animation
moveDuration: 700, // milliseconds - duration of move animation
graphHandleSize: 3, // pixels - size of graph connection handle graphHandleSize: 3, // pixels - size of graph connection handle
graphNodeRadius: 20, // pixels - radius of graph node graphNodeRadius: 20, // pixels - radius of graph node
graphNodePadding: 5, // pixels - padding of graph node graphNodePadding: 5, // pixels - padding of graph node