Refactor: Change expand icon when node are minimized

This commit is contained in:
igorrCarvalho 2023-09-18 15:12:31 -03:00
commit f612f47455
4 changed files with 9 additions and 4 deletions

View file

@ -109,6 +109,7 @@ export default function GenericNode({
deleteNode={deleteNode} deleteNode={deleteNode}
setShowNode={setShowNode} setShowNode={setShowNode}
numberOfHandles={handles} numberOfHandles={handles}
showNode={showNode}
></NodeToolbarComponent> ></NodeToolbarComponent>
</NodeToolbar> </NodeToolbar>
@ -116,7 +117,7 @@ export default function GenericNode({
className={classNames( className={classNames(
selected ? "border border-ring" : "border", selected ? "border border-ring" : "border",
" transition-all ", " transition-all ",
showNode ? " w-96 duration-500 ease-in-out scale-100" : "transform-width w-26 h-26 rounded-full scale-50", showNode ? " w-96 duration-500 ease-in-out scale-100" : "transform-width w-26 h-26 rounded-full scale-75",
"generic-node-div", "generic-node-div",
)} )}
> >

View file

@ -13,6 +13,7 @@ export default function NodeToolbarComponent({
deleteNode, deleteNode,
setShowNode, setShowNode,
numberOfHandles, numberOfHandles,
showNode,
}: nodeToolbarPropsType): JSX.Element { }: nodeToolbarPropsType): JSX.Element {
const [nodeLength, setNodeLength] = useState( const [nodeLength, setNodeLength] = useState(
Object.keys(data.node!.template).filter( Object.keys(data.node!.template).filter(
@ -130,14 +131,14 @@ export default function NodeToolbarComponent({
</ShadTooltip> </ShadTooltip>
{canMinimize() && ( {canMinimize() && (
<ShadTooltip content={"Minimize"} side="top"> <ShadTooltip content={showNode ? "Minimize" : "Expand"} side="top">
<button <button
className="relative inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" className="relative inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
onClick={(event) => { onClick={(event) => {
setShowNode(prev => !prev); setShowNode(prev => !prev);
}} }}
> >
<IconComponent name="Minus" className="h-4 w-4" /> <IconComponent name={showNode ? "Minus" : "Square"} className="h-4 w-4" />
</button> </button>
</ShadTooltip> </ShadTooltip>
)} )}

View file

@ -401,6 +401,7 @@ export type nodeToolbarPropsType = {
setData: (newState: NodeDataType) => void; setData: (newState: NodeDataType) => void;
setShowNode: (boolean: any) => void; setShowNode: (boolean: any) => void;
numberOfHandles: boolean[] | []; numberOfHandles: boolean[] | [];
showNode: boolean;
}; };
export type parsedDataType = { export type parsedDataType = {

View file

@ -78,7 +78,8 @@ import {
X, X,
XCircle, XCircle,
Zap, Zap,
Minus Minus,
Square,
} from "lucide-react"; } from "lucide-react";
import { FaApple, FaGithub } from "react-icons/fa"; import { FaApple, FaGithub } from "react-icons/fa";
import { AirbyteIcon } from "../icons/Airbyte"; import { AirbyteIcon } from "../icons/Airbyte";
@ -310,4 +311,5 @@ export const nodeIconsLucide: iconsType = {
Unplug, Unplug,
ChevronUp, ChevronUp,
Minus, Minus,
Square,
}; };