F: Animation rework pt1
This commit is contained in:
Ivan
parent
02fee878d1
commit
725b21091c
|
|
@ -43,13 +43,13 @@ This readme file is used mostly to document project dependencies and conventions
|
|||
- reactflow
|
||||
- js-file-download
|
||||
- use-debounce
|
||||
- framer-motion
|
||||
- html-to-image
|
||||
- @tanstack/react-table
|
||||
- @uiw/react-codemirror
|
||||
- @uiw/codemirror-themes
|
||||
- @lezer/lr
|
||||
- @dagrejs/dagre
|
||||
- @react-spring/web
|
||||
</pre>
|
||||
</details>
|
||||
<details>
|
||||
|
|
|
|||
154
rsconcept/frontend/package-lock.json
generated
154
rsconcept/frontend/package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
|||
"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",
|
||||
|
|
@ -588,9 +589,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@babel/traverse": {
|
||||
"version": "7.26.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.3.tgz",
|
||||
"integrity": "sha512-yTmc8J+Sj8yLzwr4PD5Xb/WF3bOYu2C2OoSZPzbuqRm4n98XirsbzaX+GloeO376UnSYIYJ4NCanwV5/ugZkwA==",
|
||||
"version": "7.26.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz",
|
||||
"integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.26.2",
|
||||
|
|
@ -2282,6 +2283,78 @@
|
|||
"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",
|
||||
|
|
@ -3024,9 +3097,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@types/hoist-non-react-statics": {
|
||||
"version": "3.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
|
||||
"integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
|
||||
"version": "3.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
|
||||
"integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/react": "*",
|
||||
|
|
@ -3095,15 +3168,15 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
|
||||
"integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
|
||||
"version": "15.7.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
|
||||
"integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.3.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.13.tgz",
|
||||
"integrity": "sha512-ii/gswMmOievxAJed4PAHT949bpYjPKXvXo1v6cRB/kqc2ZR4n+SgyCyvyc5Fec5ez8VnUumI1Vk7j6fRyRogg==",
|
||||
"version": "18.3.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.14.tgz",
|
||||
"integrity": "sha512-NzahNKvjNhVjuPBQ+2G7WlxstQ+47kXZNHlUvFakDViuIEfGY926GqhMueQFZ7woG+sPiQKlF36XfrIUVSUfFg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
|
|
@ -3111,13 +3184,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
|
||||
"integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
|
||||
"version": "18.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.2.tgz",
|
||||
"integrity": "sha512-Fqp+rcvem9wEnGr3RY8dYNvSQ8PoLqjZ9HLgaPUOjJJD120uDyOxOjc/39M4Kddp9JQCxpGQbnhVQF0C0ncYVg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
"@types/react": "^18"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-transition-group": {
|
||||
|
|
@ -4059,17 +4132,16 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
|
||||
"integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
|
||||
"integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.0",
|
||||
"es-define-property": "^1.0.0",
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"set-function-length": "^1.2.1"
|
||||
"set-function-length": "^1.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
|
|
@ -4078,6 +4150,20 @@
|
|||
"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": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
|
||||
|
|
@ -4117,9 +4203,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001686",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
|
||||
"integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
|
||||
"version": "1.0.30001687",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz",
|
||||
"integrity": "sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -4800,9 +4886,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.70",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.70.tgz",
|
||||
"integrity": "sha512-P6FPqAWIZrC3sHDAwBitJBs7N7IF58m39XVny7DFseQXK2eiMn7nNQizFf63mWDDUnFvaqsM8FI0+ZZfLkdUGA==",
|
||||
"version": "1.5.71",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz",
|
||||
"integrity": "sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
|
|
@ -5158,9 +5244,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-react-hooks": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0.tgz",
|
||||
"integrity": "sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==",
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0.tgz",
|
||||
"integrity": "sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
|
|
@ -10062,9 +10148,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.0.2.tgz",
|
||||
"integrity": "sha512-XdQ+VsY2tJpBsKGs0wf3U/+azx8BBpYRHFAyKm5VeEZNOJZRB63q7Sc8Iup3k0TrN3KO6QgyzFf+opSbfY1y0g==",
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.0.3.tgz",
|
||||
"integrity": "sha512-Cmuo5P0ENTN6HxLSo6IHsjCLn/81Vgrp81oaiFFMRa8gGDj5xEjIcEpf2ZymZtZR8oU0P2JX5WuUp/rlXcHkAw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"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",
|
||||
|
|
@ -44,12 +45,12 @@
|
|||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@typescript-eslint/eslint-plugin": "^8.0.1",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"@typescript-eslint/parser": "^8.0.1",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.16.0",
|
||||
"eslint-plugin-react": "^7.37.2",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"eslint-plugin-simple-import-sort": "^12.1.1",
|
||||
"globals": "^15.13.0",
|
||||
"jest": "^29.7.0",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { AnimatePresence } from 'framer-motion';
|
||||
|
||||
import { IconLogin, IconUser2 } from '@/components/Icons';
|
||||
import Loader from '@/components/ui/Loader';
|
||||
import AnimateFade from '@/components/wrap/AnimateFade';
|
||||
|
|
@ -21,7 +19,6 @@ function UserMenu() {
|
|||
const navigateLogin = () => router.push(urls.login);
|
||||
return (
|
||||
<div ref={menu.ref} className='h-full w-[4rem] flex items-center justify-center'>
|
||||
<AnimatePresence mode='wait'>
|
||||
{loading ? (
|
||||
<AnimateFade key='nav_user_badge_loader'>
|
||||
<Loader circular scale={1.5} />
|
||||
|
|
@ -44,7 +41,6 @@ function UserMenu() {
|
|||
/>
|
||||
</AnimateFade>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
<UserDropdown isOpen={!!user && menu.isOpen} hideDropdown={() => menu.hide()} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { createTheme } from '@uiw/codemirror-themes';
|
|||
import CodeMirror, { BasicSetupOptions, ReactCodeMirrorProps, ReactCodeMirrorRef } from '@uiw/react-codemirror';
|
||||
import clsx from 'clsx';
|
||||
import { EditorView } from 'codemirror';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import Label from '@/components/ui/Label';
|
||||
|
|
@ -207,7 +206,6 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
|
|||
|
||||
return (
|
||||
<div className={clsx('flex flex-col gap-2', cursor)}>
|
||||
<AnimatePresence>
|
||||
{showEditor && schema ? (
|
||||
<DlgEditReference
|
||||
hideWindow={hideEditReference}
|
||||
|
|
@ -222,7 +220,6 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
|
|||
onSave={handleInputReference}
|
||||
/>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
<Label text={label} />
|
||||
<CodeMirror
|
||||
id={id}
|
||||
|
|
|
|||
4
rsconcept/frontend/src/components/props.d.ts
vendored
4
rsconcept/frontend/src/components/props.d.ts
vendored
|
|
@ -1,5 +1,7 @@
|
|||
// =========== Module contains interfaces for common UI elements. ==========
|
||||
import { animated } from '@react-spring/web';
|
||||
import { HTMLMotionProps } from 'framer-motion';
|
||||
import React from 'react';
|
||||
|
||||
export namespace CProps {
|
||||
/**
|
||||
|
|
@ -96,7 +98,7 @@ export namespace CProps {
|
|||
/**
|
||||
* Represents `div` component with animation properties.
|
||||
*/
|
||||
export type AnimatedDiv = HTMLMotionProps<'div'>;
|
||||
export type AnimatedDiv = React.ComponentPropsWithoutRef<typeof animated.div>;
|
||||
|
||||
/**
|
||||
* Represents `mouse event` in React.
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ import { ThreeCircles, ThreeDots } from 'react-loader-spinner';
|
|||
|
||||
import { useConceptOptions } from '@/context/ConceptOptionsContext';
|
||||
|
||||
import AnimateFade from '../wrap/AnimateFade';
|
||||
|
||||
interface LoaderProps {
|
||||
/** Scale of the loader from 1 to 10. */
|
||||
scale?: number;
|
||||
|
|
@ -19,15 +17,26 @@ interface LoaderProps {
|
|||
*/
|
||||
function Loader({ scale = 5, circular }: LoaderProps) {
|
||||
const { colors } = useConceptOptions();
|
||||
if (circular) {
|
||||
return (
|
||||
<AnimateFade noFadeIn className='flex justify-center'>
|
||||
{circular ? (
|
||||
<ThreeCircles color={colors.bgPrimary} height={scale * 20} width={scale * 20} />
|
||||
) : (
|
||||
<ThreeDots color={colors.bgPrimary} height={scale * 20} width={scale * 20} radius={scale * 2} />
|
||||
)}
|
||||
</AnimateFade>
|
||||
<ThreeCircles
|
||||
color={colors.bgPrimary}
|
||||
height={scale * 20}
|
||||
width={scale * 20}
|
||||
wrapperClass='flex justify-center'
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<ThreeDots
|
||||
color={colors.bgPrimary}
|
||||
height={scale * 20}
|
||||
width={scale * 20}
|
||||
radius={scale * 2}
|
||||
wrapperClass='flex justify-center'
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Loader;
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ function Modal({
|
|||
|
||||
<div
|
||||
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-visible': overflowVisible
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
noFadeIn?: boolean;
|
||||
|
|
@ -10,19 +12,30 @@ interface AnimateFadeProps extends CProps.AnimatedDiv {
|
|||
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 (
|
||||
<motion.div
|
||||
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}
|
||||
>
|
||||
<animated.div tabIndex={-1} style={{ ...springs, ...style }} {...restProps}>
|
||||
{children}
|
||||
</motion.div>
|
||||
</animated.div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { AnimatePresence } from 'framer-motion';
|
||||
|
||||
import InfoError, { ErrorData } from '../info/InfoError';
|
||||
import { CProps } from '../props';
|
||||
import Loader from '../ui/Loader';
|
||||
|
|
@ -23,7 +21,7 @@ function DataLoader({
|
|||
...restProps
|
||||
}: React.PropsWithChildren<DataLoaderProps>) {
|
||||
return (
|
||||
<AnimatePresence mode='wait'>
|
||||
<>
|
||||
{!isLoading && !error && !hasNoData ? (
|
||||
<AnimateFade id={id} key={`${id}-data`} className={className} {...restProps}>
|
||||
{children}
|
||||
|
|
@ -36,7 +34,7 @@ function DataLoader({
|
|||
) : null}
|
||||
{isLoading ? <Loader key={`${id}-loader`} /> : null}
|
||||
{error ? <InfoError key={`${id}-error`} error={error} /> : null}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
'use client';
|
||||
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
|
||||
import Loader from '../ui/Loader';
|
||||
|
|
@ -12,7 +10,7 @@ function RequireAuth({ children }: React.PropsWithChildren) {
|
|||
const { user, loading } = useAuth();
|
||||
|
||||
return (
|
||||
<AnimatePresence mode='wait'>
|
||||
<>
|
||||
{loading ? <Loader key='auth-loader' /> : null}
|
||||
{!loading && user ? <AnimateFade key='auth-data'>{children}</AnimateFade> : null}
|
||||
{!loading && !user ? (
|
||||
|
|
@ -23,7 +21,7 @@ function RequireAuth({ children }: React.PropsWithChildren) {
|
|||
<TextURL text='Начальная страница' href='/' />
|
||||
</AnimateFade>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
|
||||
|
||||
import BadgeHelp from '@/components/info/BadgeHelp';
|
||||
|
|
@ -9,7 +8,6 @@ import RSInput from '@/components/RSInput';
|
|||
import SelectSingle from '@/components/ui/SelectSingle';
|
||||
import TextArea from '@/components/ui/TextArea';
|
||||
import TextInput from '@/components/ui/TextInput';
|
||||
import AnimateFade from '@/components/wrap/AnimateFade';
|
||||
import { HelpTopic } from '@/models/miscellaneous';
|
||||
import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
|
||||
import { generateAlias, isBaseSet, isBasicConcept, isFunctional, validateNewAlias } from '@/models/rsformAPI';
|
||||
|
|
@ -48,8 +46,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
|
|||
);
|
||||
|
||||
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
|
||||
id='dlg_cst_type'
|
||||
placeholder='Выберите тип'
|
||||
|
|
@ -72,8 +70,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
|
|||
className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextArea
|
||||
key='dlg_cst_term'
|
||||
id='dlg_cst_term'
|
||||
fitContent
|
||||
spellCheck
|
||||
|
|
@ -83,7 +81,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
|
|||
value={state.term_raw}
|
||||
onChange={event => partialUpdate({ term_raw: event.target.value })}
|
||||
/>
|
||||
<AnimateFade key='dlg_cst_expression' hideContent={!state.definition_formal && isElementary}>
|
||||
|
||||
{!!state.definition_formal || !isElementary ? (
|
||||
<RSInput
|
||||
id='dlg_cst_expression'
|
||||
noTooltip
|
||||
|
|
@ -101,8 +100,9 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
|
|||
onChange={value => partialUpdate({ definition_formal: value })}
|
||||
schema={schema}
|
||||
/>
|
||||
</AnimateFade>
|
||||
<AnimateFade key='dlg_cst_definition' hideContent={!state.definition_raw && isElementary}>
|
||||
) : null}
|
||||
|
||||
{!!state.definition_raw || !isElementary ? (
|
||||
<TextArea
|
||||
id='dlg_cst_definition'
|
||||
spellCheck
|
||||
|
|
@ -113,10 +113,10 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
|
|||
value={state.definition_raw}
|
||||
onChange={event => partialUpdate({ definition_raw: event.target.value })}
|
||||
/>
|
||||
</AnimateFade>
|
||||
) : null}
|
||||
|
||||
{!showConvention ? (
|
||||
<button
|
||||
key='dlg_cst_show_comment'
|
||||
id='dlg_cst_show_comment'
|
||||
tabIndex={-1}
|
||||
type='button'
|
||||
|
|
@ -125,10 +125,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
|
|||
>
|
||||
Добавить комментарий
|
||||
</button>
|
||||
) : null}
|
||||
<AnimateFade hideContent={!showConvention}>
|
||||
) : (
|
||||
<TextArea
|
||||
key='dlg_cst_convention'
|
||||
id='dlg_cst_convention'
|
||||
spellCheck
|
||||
fitContent
|
||||
|
|
@ -138,8 +136,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
|
|||
value={state.convention}
|
||||
onChange={event => partialUpdate({ convention: event.target.value })}
|
||||
/>
|
||||
</AnimateFade>
|
||||
</AnimatePresence>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -52,12 +52,12 @@ function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownProps) {
|
|||
title='Список тем'
|
||||
hideTitle={menu.isOpen}
|
||||
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}
|
||||
/>
|
||||
<motion.div
|
||||
className={clsx(
|
||||
'border divide-y rounded-none', // prettier: split-lines
|
||||
'border border-l-0 divide-y rounded-none', // prettier: split-lines
|
||||
'cc-scroll-y',
|
||||
'clr-controls'
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
'use client';
|
||||
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
|
|
@ -418,7 +417,7 @@ export const OssEditState = ({ selected, setSelected, children }: React.PropsWit
|
|||
}}
|
||||
>
|
||||
{model.schema ? (
|
||||
<AnimatePresence>
|
||||
<>
|
||||
{showEditEditors ? (
|
||||
<DlgEditEditors
|
||||
hideWindow={() => setShowEditEditors(false)}
|
||||
|
|
@ -472,8 +471,7 @@ export const OssEditState = ({ selected, setSelected, children }: React.PropsWit
|
|||
onSubmit={handleRelocateConstituents}
|
||||
/>
|
||||
) : null}
|
||||
)
|
||||
</AnimatePresence>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import { useConceptOptions } from '@/context/ConceptOptionsContext';
|
||||
|
|
@ -109,17 +108,14 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
|
|||
onRename={controller.renameCst}
|
||||
onOpenEdit={onOpenEdit}
|
||||
/>
|
||||
<AnimatePresence initial={false}>
|
||||
{showList ? (
|
||||
<ViewConstituents
|
||||
isMounted={showList}
|
||||
schema={controller.schema}
|
||||
expression={activeCst?.definition_formal ?? ''}
|
||||
isBottom={isNarrow}
|
||||
activeCst={activeCst}
|
||||
onOpenEdit={onOpenEdit}
|
||||
/>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
|
|
@ -156,11 +155,9 @@ function FormConstituenta({
|
|||
|
||||
return (
|
||||
<AnimateFade className='mx-0 md:mx-auto pt-[2rem] xs:pt-0'>
|
||||
<AnimatePresence>
|
||||
{showTypification && state ? (
|
||||
<DlgShowTypeGraph items={typeInfo ? [typeInfo] : []} hideWindow={() => setShowTypification(false)} />
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
{state ? (
|
||||
<ControlsOverlay
|
||||
disabled={disabled}
|
||||
|
|
@ -201,12 +198,8 @@ function FormConstituenta({
|
|||
/>
|
||||
) : null}
|
||||
{state ? (
|
||||
<AnimatePresence>
|
||||
<AnimateFade
|
||||
key='cst_expression_fade'
|
||||
hideContent={!state.definition_formal && isElementary}
|
||||
style={{ willChange: 'auto' }}
|
||||
>
|
||||
<>
|
||||
<AnimateFade hideContent={!state.definition_formal && isElementary}>
|
||||
<EditorRSExpression
|
||||
id='cst_expression'
|
||||
label={
|
||||
|
|
@ -230,7 +223,7 @@ function FormConstituenta({
|
|||
onShowTypeGraph={handleTypeGraph}
|
||||
/>
|
||||
</AnimateFade>
|
||||
<AnimateFade key='cst_definition_fade' hideContent={!state.definition_raw && isElementary}>
|
||||
<AnimateFade hideContent={!state.definition_raw && isElementary}>
|
||||
<RefsInput
|
||||
id='cst_definition'
|
||||
label='Текстовое определение'
|
||||
|
|
@ -246,7 +239,7 @@ function FormConstituenta({
|
|||
onChange={newValue => setTextDefinition(newValue)}
|
||||
/>
|
||||
</AnimateFade>
|
||||
<AnimateFade key='cst_convention_fade' hideContent={!showConvention}>
|
||||
<AnimateFade hideContent={!showConvention}>
|
||||
<TextArea
|
||||
id='cst_convention'
|
||||
fitContent
|
||||
|
|
@ -259,7 +252,7 @@ function FormConstituenta({
|
|||
onChange={event => setConvention(event.target.value)}
|
||||
/>
|
||||
</AnimateFade>
|
||||
<AnimateFade key='cst_convention_button' hideContent={showConvention || (disabled && !processing)}>
|
||||
<AnimateFade noFadeOut hideContent={showConvention || (disabled && !processing)}>
|
||||
<button
|
||||
key='cst_disable_comment'
|
||||
id='cst_disable_comment'
|
||||
|
|
@ -297,7 +290,7 @@ function FormConstituenta({
|
|||
</Overlay>
|
||||
</div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
) : null}
|
||||
</form>
|
||||
</AnimateFade>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
|
|
@ -162,11 +161,9 @@ function EditorRSExpression({
|
|||
|
||||
return (
|
||||
<div>
|
||||
<AnimatePresence>
|
||||
{showAST ? (
|
||||
<DlgShowAST expression={expression} syntaxTree={syntaxTree} hideWindow={() => setShowAST(false)} />
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
|
||||
<ToolbarRSExpression
|
||||
disabled={disabled}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
'use client';
|
||||
|
||||
import { animated, useTransition } from '@react-spring/web';
|
||||
import clsx from 'clsx';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { useMemo } from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import { StatusIcon } from '@/components/DomainIcons';
|
||||
import Loader from '@/components/ui/Loader';
|
||||
|
|
@ -12,7 +12,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 } from '@/utils/constants';
|
||||
import { globals, PARAMETER } from '@/utils/constants';
|
||||
import { labelExpressionStatus, prepareTooltip } from '@/utils/labels';
|
||||
|
||||
interface StatusBarProps {
|
||||
|
|
@ -36,6 +36,16 @@ 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}
|
||||
|
|
@ -53,17 +63,19 @@ function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }:
|
|||
data-tooltip-html={prepareTooltip('Проверить определение', 'Ctrl + Q')}
|
||||
onClick={onAnalyze}
|
||||
>
|
||||
<AnimatePresence mode='wait'>
|
||||
{processing ? <Loader key='status-loader' scale={3} /> : null}
|
||||
{!processing ? (
|
||||
{transitions((style, flag) =>
|
||||
flag ? (
|
||||
<animated.div style={style}>
|
||||
<Loader scale={3} />
|
||||
</animated.div>
|
||||
) : null
|
||||
)}
|
||||
{!processing && !isAnimating ? (
|
||||
<>
|
||||
<StatusIcon key='status-icon' size='1rem' value={status} />
|
||||
<span key='status-text' className='pb-[0.125rem] font-controls pr-2'>
|
||||
{labelExpressionStatus(status)}
|
||||
</span>
|
||||
<StatusIcon size='1rem' value={status} />
|
||||
<span className='pb-[0.125rem] font-controls pr-2'>{labelExpressionStatus(status)}</span>
|
||||
</>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { toPng } from 'html-to-image';
|
||||
import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
|
|
@ -376,7 +375,6 @@ function TGFlow({ onOpenEdit }: TGFlowProps) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<AnimatePresence>
|
||||
{showParamsDialog ? (
|
||||
<DlgGraphParams
|
||||
hideWindow={() => setShowParamsDialog(false)}
|
||||
|
|
@ -384,7 +382,6 @@ function TGFlow({ onOpenEdit }: TGFlowProps) {
|
|||
onConfirm={handleChangeParams}
|
||||
/>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
|
||||
<AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
|
||||
<Overlay position='cc-tab-tools' className='flex flex-col items-center rounded-b-2xl cc-blur'>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
'use client';
|
||||
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import fileDownload from 'js-file-download';
|
||||
import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
|
|
@ -684,7 +683,7 @@ export const RSEditState = ({
|
|||
}}
|
||||
>
|
||||
{model.schema ? (
|
||||
<AnimatePresence>
|
||||
<>
|
||||
{showUpload ? <DlgUploadRSForm hideWindow={() => setShowUpload(false)} /> : null}
|
||||
{showClone ? (
|
||||
<DlgCloneLibraryItem
|
||||
|
|
@ -782,7 +781,7 @@ export const RSEditState = ({
|
|||
) : null}
|
||||
|
||||
{showTypeGraph ? <DlgShowTypeGraph items={typeInfo} hideWindow={() => setShowTypeGraph(false)} /> : null}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
'use client';
|
||||
|
||||
import { animated, useSpring } from '@react-spring/web';
|
||||
import clsx from 'clsx';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { useAccessMode } from '@/context/AccessModeContext';
|
||||
import { useConceptOptions } from '@/context/ConceptOptionsContext';
|
||||
import useWindowSize from '@/hooks/useWindowSize';
|
||||
import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform';
|
||||
import { UserLevel } from '@/models/user';
|
||||
import { animateSideView } from '@/styling/animations';
|
||||
import { PARAMETER } from '@/utils/constants';
|
||||
|
||||
import ConstituentsSearch from './ConstituentsSearch';
|
||||
import TableSideConstituents from './TableSideConstituents';
|
||||
|
|
@ -23,15 +23,47 @@ interface ViewConstituentsProps {
|
|||
activeCst?: IConstituenta;
|
||||
schema?: IRSForm;
|
||||
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 windowSize = useWindowSize();
|
||||
const { accessLevel } = useAccessMode();
|
||||
|
||||
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
|
||||
|
|
@ -49,8 +81,12 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit
|
|||
[isBottom, filteredData, activeCst, onOpenEdit, calculateHeight, accessLevel]
|
||||
);
|
||||
|
||||
if (!isVisible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
<animated.div
|
||||
className={clsx(
|
||||
'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
|
||||
}
|
||||
)}
|
||||
initial={{ ...animateSideView.initial }}
|
||||
animate={{ ...animateSideView.animate }}
|
||||
exit={{ ...animateSideView.exit }}
|
||||
style={springs}
|
||||
>
|
||||
<ConstituentsSearch
|
||||
dense={windowSize.width && windowSize.width < COLUMN_DENSE_SEARCH_THRESHOLD ? true : undefined}
|
||||
|
|
@ -70,7 +104,7 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit
|
|||
setFiltered={setFilteredData}
|
||||
/>
|
||||
{table}
|
||||
</motion.div>
|
||||
</animated.div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { AnimatePresence } from 'framer-motion';
|
||||
|
||||
import Loader from '@/components/ui/Loader';
|
||||
import AnimateFade from '@/components/wrap/AnimateFade';
|
||||
import ExpectedAnonymous from '@/components/wrap/ExpectedAnonymous';
|
||||
|
|
@ -13,7 +11,7 @@ function RegisterPage() {
|
|||
if (loading) {
|
||||
return <Loader />;
|
||||
}
|
||||
if (user && !loading) {
|
||||
if (user) {
|
||||
return (
|
||||
<AnimateFade>
|
||||
<ExpectedAnonymous />
|
||||
|
|
@ -21,19 +19,9 @@ function RegisterPage() {
|
|||
);
|
||||
}
|
||||
return (
|
||||
<AnimatePresence mode='wait'>
|
||||
{loading ? <Loader key='signup-loader' /> : null}
|
||||
{!loading && user ? (
|
||||
<AnimateFade key='signup-has-user'>
|
||||
<ExpectedAnonymous />
|
||||
</AnimateFade>
|
||||
) : null}
|
||||
{!loading && !user ? (
|
||||
<AnimateFade key='signup-no-user'>
|
||||
<FormSignup />
|
||||
</AnimateFade>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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) => ({
|
||||
initial: {
|
||||
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
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@ export const PARAMETER = {
|
|||
ossDistanceX: 180, // pixels - insert x-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
|
||||
graphNodeRadius: 20, // pixels - radius of graph node
|
||||
graphNodePadding: 5, // pixels - padding of graph node
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user