jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fixed Confirmation Modal ref

Browse source
This commit is contained in:
Lucas Oliveira 2024-01-06 12:22:30 -03:00
commit c34810b161
8 changed files with 31 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/components/floatComponent/index.tsx
View file

@ -48,7 +48,7 @@ export default function FloatComponent({
onChange(event.target.value);
}}
onKeyDown={(e) => {
handleKeyDown(e, value, "0");
handleKeyDown(e, value, "");
}}
/>
</div>

4
src/frontend/src/components/intComponent/index.tsx
View file

@ -25,11 +25,11 @@ export default function IntComponent({
id={id}
onKeyDown={(event) => {
handleOnlyIntegerInput(event);
handleKeyDown(event, value, "0");
handleKeyDown(event, value, "");
}}
type="number"
step="1"
min={min}
min={0}
onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
if (Number(event.target.value) < min) {
event.target.value = min.toString();

23
src/frontend/src/modals/ConfirmationModal/index.tsx
View file

@ -1,29 +1,29 @@
import React, { useEffect, useState } from "react";
import ShadTooltip from "../../components/ShadTooltipComponent";
import { Button } from "../../components/ui/button";
import { ConfirmationModalType, ContentProps } from "../../types/components";
import { ConfirmationModalType, ContentProps, TriggerProps } from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils";
import BaseModal from "../baseModal";
const Content: React.FC<ContentProps> = ({ children }) => {
return <div className="h-full w-full">{children}</div>;
};
const Trigger: React.FC<ContentProps> = ({
const Trigger: React.FC<TriggerProps> = ({
children,
tolltipContent,
tooltipContent,
side,
asChild,
}) => {
return tolltipContent ? (
<ShadTooltip side={side} content={tolltipContent}>
return asChild ? children : (tooltipContent ? (
<ShadTooltip side={side} content={tooltipContent}>
<div className="h-full w-full">{children}</div>
</ShadTooltip>
) : (
<div className="h-full w-full">{children}</div>
);
));
};
function ConfirmationModal({
title,
asChild,
titleHeader,
modalContentTitle,
cancelText,
@ -49,6 +49,7 @@ function ConfirmationModal({
useEffect(() => {
if (onClose) onClose!(modalOpen);
}, [modalOpen]);
const triggerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Trigger
);
@ -58,7 +59,13 @@ function ConfirmationModal({
return (
<BaseModal size={size} open={modalOpen} setOpen={setModalOpen}>
<BaseModal.Trigger asChild={asChild}>{triggerChild}</BaseModal.Trigger>
<>
{triggerChild && (
<BaseModal.Trigger>
{triggerChild}
</BaseModal.Trigger>
)}
</>
<BaseModal.Header description={titleHeader ?? null}>
<span className="pr-2">{title}</span>
<Icon

1
src/frontend/src/modals/baseModal/index.tsx
View file

@ -28,6 +28,7 @@ const Trigger: React.FC<TriggerProps> = ({ children, asChild, disable }) => {
<DialogTrigger
className={asChild ? "" : "w-full"}
hidden={children ? false : true}
disabled={disable}
asChild={asChild}
>
{children}

3
src/frontend/src/modals/shareModal/index.tsx
View file

@ -182,9 +182,6 @@ export default function ShareModal({
Warning: This action cannot be undone.
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<></>
</ConfirmationModal.Trigger>
</ConfirmationModal>
</>
);

18
src/frontend/src/pages/AdminPage/index.tsx
View file

@ -308,7 +308,6 @@ export default function AdminPage() {
</TableCell>
<TableCell className="relative left-1 truncate py-2 text-align-last-left">
<ConfirmationModal
asChild
title="Edit"
titleHeader={`${user.username}`}
modalContentTitle="Attention!"
@ -331,7 +330,7 @@ export default function AdminPage() {
you are making to this user?
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<ConfirmationModal.Trigger asChild>
<div className="flex w-fit">
<Checkbox
id="is_active"
@ -343,7 +342,6 @@ export default function AdminPage() {
</TableCell>
<TableCell className="relative left-1 truncate py-2 text-align-last-left">
<ConfirmationModal
asChild
title="Edit"
titleHeader={`${user.username}`}
modalContentTitle="Attention!"
@ -366,7 +364,7 @@ export default function AdminPage() {
you are making to this user?
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<ConfirmationModal.Trigger asChild>
<div className="flex w-fit">
<Checkbox
id="is_superuser"
@ -431,13 +429,11 @@ export default function AdminPage() {
This action cannot be undone.
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<ShadTooltip content="Delete" side="top">
<IconComponent
name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
<ConfirmationModal.Trigger tooltipContent="Delete">
<IconComponent
name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer"
/>
</ConfirmationModal.Trigger>
</ConfirmationModal>
</div>

4
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -295,7 +295,6 @@ export default function NodeToolbarComponent({
</Select>
<ConfirmationModal
asChild
open={showOverrideModal}
title={`Replace`}
cancelText="Create New"
@ -315,9 +314,6 @@ export default function NodeToolbarComponent({
to replace it with the current or create a new one?
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<></>
</ConfirmationModal.Trigger>
</ConfirmationModal>
<EditNodeModal
data={data}

9
src/frontend/src/types/components/index.ts
View file

@ -263,12 +263,14 @@ export type LoadingComponentProps = {
export type ContentProps = {
children: ReactNode;
tolltipContent?: ReactNode;
side?: "top" | "right" | "bottom" | "left";
};
export type HeaderProps = { children: ReactNode; description: string };
export type TriggerProps = {
children: ReactNode;
tooltipContent?: ReactNode;
side?: "top" | "right" | "bottom" | "left";
asChild?: boolean;
};
export interface languageMap {
@ -300,7 +302,6 @@ export type ConfirmationModalType = {
onCancel?: () => void;
title: string;
titleHeader?: string;
asChild?: boolean;
destructive?: boolean;
modalContentTitle?: string;
cancelText: string;
@ -308,7 +309,7 @@ export type ConfirmationModalType = {
children: [
React.ReactElement<ContentProps>,
React.ReactElement<TriggerProps>
];
] | React.ReactElement<ContentProps>;
icon: string;
data?: any;
index?: number;