From efd4f80dcda831235d5a5731c3fad6b1ae373621 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 26 Feb 2024 20:16:56 +0100 Subject: [PATCH] Made animations with X and Check --- src/frontend/package-lock.json | 39 ++++++ src/frontend/package.json | 1 + .../src/CustomNodes/GenericNode/index.tsx | 123 ++++++++---------- src/frontend/src/components/ui/checkmark.tsx | 31 +++++ src/frontend/src/components/ui/xmark.tsx | 46 +++++++ 5 files changed, 169 insertions(+), 71 deletions(-) create mode 100644 src/frontend/src/components/ui/checkmark.tsx create mode 100644 src/frontend/src/components/ui/xmark.tsx diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index f18616611..c0bccd17b 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -44,6 +44,7 @@ "clsx": "^1.2.1", "dompurify": "^3.0.5", "esbuild": "^0.17.19", + "framer-motion": "^11.0.6", "lodash": "^4.17.21", "lucide-react": "^0.331.0", "moment": "^2.29.4", @@ -5918,6 +5919,44 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "11.0.6", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.6.tgz", + "integrity": "sha512-BpO3mWF8UwxzO3Ca5AmSkrg14QYTeJa9vKgoLOoBdBdTPj0e81i1dMwnX6EQJXRieUx20uiDBXq8bA6y7N6b8Q==", + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/framer-motion/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/fs-extra": { "version": "11.2.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz", diff --git a/src/frontend/package.json b/src/frontend/package.json index 8eaf5080b..a206cbed1 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -39,6 +39,7 @@ "clsx": "^1.2.1", "dompurify": "^3.0.5", "esbuild": "^0.17.19", + "framer-motion": "^11.0.6", "lodash": "^4.17.21", "lucide-react": "^0.331.0", "moment": "^2.29.4", diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 22f2a9b28..6deebc44e 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -4,6 +4,7 @@ import ShadTooltip from "../../components/ShadTooltipComponent"; import IconComponent from "../../components/genericIconComponent"; import InputComponent from "../../components/inputComponent"; import { Button } from "../../components/ui/button"; +import Checkmark from "../../components/ui/checkmark"; import Loading from "../../components/ui/loading"; import { Textarea } from "../../components/ui/textarea"; import { priorityFields } from "../../constants/constants"; @@ -19,6 +20,7 @@ import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils"; import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils"; import { classNames, cn, getFieldTitle } from "../../utils/utils"; import ParameterComponent from "./components/parameterComponent"; +import Xmark from "../../components/ui/xmark"; export default function GenericNode({ data, @@ -118,7 +120,7 @@ export default function GenericNode({ } else { setValidationStatus(null); } - }, [flowPool, data.id]); + }, [flowPool[data.id], data.id]); const showNode = data.showNode ?? true; @@ -156,52 +158,44 @@ export default function GenericNode({ ); }; - const getIconPlayOrPauseComponent = (name, className) => ( - - ); - - const getStatusClassName = ( - buildStatus: BuildStatus | undefined, - validationStatus: validationStatusType | null - ) => { - console.log(buildStatus); - const isValid = validationStatus && validationStatus.valid; - if (isValid) { - return "green-status"; - } else if (!isValid && buildStatus === BuildStatus.INACTIVE) { - return "gray-status"; - } else if (!validationStatus && buildStatus === BuildStatus.BUILT) { - return "green-status"; - } else if (!isValid && buildStatus === BuildStatus.BUILT) { - return "red-status"; - } else if (!validationStatus && buildStatus === BuildStatus.TO_BUILD) { - return "green-status"; - } else { - return "yellow-status"; - } - }; const isDark = useDarkStore((state) => state.dark); - const renderIconStatusComponents = ( + const renderIconStatus = ( buildStatus: BuildStatus | undefined, validationStatus: validationStatusType | null - ) => { - const className = getStatusClassName(buildStatus, validationStatus); - return <>{getIconPlayOrPauseComponent("CircleDot", className)}; - }; - const renderIconPlayOrPauseComponents = ( - buildStatus: BuildStatus | undefined, ) => { if (buildStatus === BuildStatus.BUILDING) { - return ; + return ; } else { return ( - + <> + + {validationStatus && validationStatus.valid ? ( + + ) : validationStatus && + !validationStatus.valid && + buildStatus === BuildStatus.INACTIVE ? ( + + ) : validationStatus && !validationStatus.valid ? ( + + ) : ( + + )} + ); } }; @@ -467,53 +461,40 @@ export default function GenericNode({ variant="secondary" className={"group h-9 px-1.5"} onClick={() => { - if (data?.buildStatus === BuildStatus.BUILDING || isBuilding) + if (buildStatus === BuildStatus.BUILDING || isBuilding) return; + setValidationStatus(null); buildFlow(data.id); }} >
Building... + ) : !validationStatus ? ( + Build to validate status. + ) : ( +
+ {typeof validationStatus.params === "string" + ? `${durationString}\n${validationStatus.params}` + .split("\n") + .map((line, index) => ( +
{line}
+ )) + : durationString} +
+ ) } side="bottom" >
- {renderIconPlayOrPauseComponents( - buildStatus, - )} + {renderIconStatus(buildStatus, validationStatus)}
)} -
- Building... - ) : !validationStatus ? ( - Build to validate status. - ) : ( -
- {typeof validationStatus.params === "string" - ? `${durationString}\n${validationStatus.params}` - .split("\n") - .map((line, index) =>
{line}
) - : durationString} -
- ) - } - > -
- {renderIconStatusComponents( - data?.buildStatus, - validationStatus - )} -
- -
diff --git a/src/frontend/src/components/ui/checkmark.tsx b/src/frontend/src/components/ui/checkmark.tsx new file mode 100644 index 000000000..3a6ba7208 --- /dev/null +++ b/src/frontend/src/components/ui/checkmark.tsx @@ -0,0 +1,31 @@ +import { AnimatePresence, motion } from "framer-motion"; +export default function Checkmark({ initial = true, isVisible, className }) { + return ( + + {isVisible && ( + + + + )} + + ); +} diff --git a/src/frontend/src/components/ui/xmark.tsx b/src/frontend/src/components/ui/xmark.tsx new file mode 100644 index 000000000..b5598842a --- /dev/null +++ b/src/frontend/src/components/ui/xmark.tsx @@ -0,0 +1,46 @@ +import { AnimatePresence, motion } from "framer-motion"; +export default function Xmark({ initial = true, isVisible, className }) { + return ( + + {isVisible && ( + + + + + )} + + ); +}