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); onChange(event.target.value);
}} }}
onKeyDown={(e) => { onKeyDown={(e) => {
handleKeyDown(e, value, "0"); handleKeyDown(e, value, "");
}} }}
/> />
</div> </div>

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

@ -25,11 +25,11 @@ export default function IntComponent({
id={id} id={id}
onKeyDown={(event) => { onKeyDown={(event) => {
handleOnlyIntegerInput(event); handleOnlyIntegerInput(event);
handleKeyDown(event, value, "0"); handleKeyDown(event, value, "");
}} }}
type="number" type="number"
step="1" step="1"
min={min} min={0}
onInput={(event: React.ChangeEvent<HTMLInputElement>) => { onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
if (Number(event.target.value) < min) { if (Number(event.target.value) < min) {
event.target.value = min.toString(); 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 React, { useEffect, useState } from "react";
import ShadTooltip from "../../components/ShadTooltipComponent"; import ShadTooltip from "../../components/ShadTooltipComponent";
import { Button } from "../../components/ui/button"; 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 { nodeIconsLucide } from "../../utils/styleUtils";
import BaseModal from "../baseModal"; import BaseModal from "../baseModal";
const Content: React.FC<ContentProps> = ({ children }) => { const Content: React.FC<ContentProps> = ({ children }) => {
return <div className="h-full w-full">{children}</div>; return <div className="h-full w-full">{children}</div>;
}; };
const Trigger: React.FC<ContentProps> = ({ const Trigger: React.FC<TriggerProps> = ({
children, children,
tolltipContent, tooltipContent,
side, side,
asChild,
}) => { }) => {
return tolltipContent ? ( return asChild ? children : (tooltipContent ? (
<ShadTooltip side={side} content={tolltipContent}> <ShadTooltip side={side} content={tooltipContent}>
<div className="h-full w-full">{children}</div> <div className="h-full w-full">{children}</div>
</ShadTooltip> </ShadTooltip>
) : ( ) : (
<div className="h-full w-full">{children}</div> <div className="h-full w-full">{children}</div>
); ));
}; };
function ConfirmationModal({ function ConfirmationModal({
title, title,
asChild,
titleHeader, titleHeader,
modalContentTitle, modalContentTitle,
cancelText, cancelText,
@ -49,6 +49,7 @@ function ConfirmationModal({
useEffect(() => { useEffect(() => {
if (onClose) onClose!(modalOpen); if (onClose) onClose!(modalOpen);
}, [modalOpen]); }, [modalOpen]);
const triggerChild = React.Children.toArray(children).find( const triggerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Trigger (child) => (child as React.ReactElement).type === Trigger
); );
@ -58,7 +59,13 @@ function ConfirmationModal({
return ( return (
<BaseModal size={size} open={modalOpen} setOpen={setModalOpen}> <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}> <BaseModal.Header description={titleHeader ?? null}>
<span className="pr-2">{title}</span> <span className="pr-2">{title}</span>
<Icon <Icon

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

@ -28,6 +28,7 @@ const Trigger: React.FC<TriggerProps> = ({ children, asChild, disable }) => {
<DialogTrigger <DialogTrigger
className={asChild ? "" : "w-full"} className={asChild ? "" : "w-full"}
hidden={children ? false : true} hidden={children ? false : true}
disabled={disable}
asChild={asChild} asChild={asChild}
> >
{children} {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. Warning: This action cannot be undone.
</span> </span>
</ConfirmationModal.Content> </ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<></>
</ConfirmationModal.Trigger>
</ConfirmationModal> </ConfirmationModal>
</> </>
); );

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

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

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

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

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

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