Refactor: Change expand icon when node are minimized
This commit is contained in:
parent
d44365578d
commit
f612f47455
4 changed files with 9 additions and 4 deletions
|
|
@ -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",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -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 = {
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue