Fixed types of tabsState
This commit is contained in:
parent
f6bd5a4e4a
commit
3241c795ad
7 changed files with 35 additions and 38 deletions
|
|
@ -98,7 +98,6 @@ export default function BuildTrigger({
|
||||||
// If the event is a log, log it
|
// If the event is a log, log it
|
||||||
setSuccessData({ title: parsedData.log });
|
setSuccessData({ title: parsedData.log });
|
||||||
} else if (parsedData.input_keys !== undefined) {
|
} else if (parsedData.input_keys !== undefined) {
|
||||||
//@ts-ignore
|
|
||||||
setTabsState((old: FlowsState) => {
|
setTabsState((old: FlowsState) => {
|
||||||
return {
|
return {
|
||||||
...old,
|
...old,
|
||||||
|
|
|
||||||
|
|
@ -91,7 +91,7 @@ const FlowsContextInitialValue: FlowsContextType = {
|
||||||
isPending: false,
|
isPending: false,
|
||||||
setPending: (pending: boolean) => {},
|
setPending: (pending: boolean) => {},
|
||||||
tabsState: {},
|
tabsState: {},
|
||||||
setTabsState: (state: FlowsState) => {},
|
setTabsState: () => {},
|
||||||
getNodeId: (nodeType: string) => "",
|
getNodeId: (nodeType: string) => "",
|
||||||
setTweak: (tweak: any) => {},
|
setTweak: (tweak: any) => {},
|
||||||
getTweak: [],
|
getTweak: [],
|
||||||
|
|
@ -136,19 +136,17 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
|
||||||
|
|
||||||
const [edges, setEdgesInternal, onEdgesChangeInternal] = useEdgesState([]);
|
const [edges, setEdgesInternal, onEdgesChangeInternal] = useEdgesState([]);
|
||||||
|
|
||||||
const setPending =
|
const setPending = (pending: boolean) => {
|
||||||
(pending: boolean) => {
|
setTabsState((prev: FlowsState) => {
|
||||||
//@ts-ignore
|
return {
|
||||||
setTabsState((prev: FlowsState) => {
|
...prev,
|
||||||
return {
|
[tabId]: {
|
||||||
...prev,
|
...prev[tabId],
|
||||||
[tabId]: {
|
isPending: pending,
|
||||||
...prev[tabId],
|
},
|
||||||
isPending: pending,
|
};
|
||||||
},
|
});
|
||||||
};
|
};
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const isPending = tabsState[tabId]?.isPending ?? false;
|
const isPending = tabsState[tabId]?.isPending ?? false;
|
||||||
|
|
||||||
|
|
@ -172,7 +170,11 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
|
||||||
let newChange = typeof change === "function" ? change(nodes) : change;
|
let newChange = typeof change === "function" ? change(nodes) : change;
|
||||||
let newEdges = cleanEdges(newChange, edges);
|
let newEdges = cleanEdges(newChange, edges);
|
||||||
|
|
||||||
saveCurrentFlow(newChange, newEdges, reactFlowInstance?.getViewport() ?? { zoom: 1, x: 0, y: 0 });
|
saveCurrentFlow(
|
||||||
|
newChange,
|
||||||
|
newEdges,
|
||||||
|
reactFlowInstance?.getViewport() ?? { zoom: 1, x: 0, y: 0 }
|
||||||
|
);
|
||||||
setEdgesInternal(newEdges);
|
setEdgesInternal(newEdges);
|
||||||
setNodesInternal(newChange);
|
setNodesInternal(newChange);
|
||||||
};
|
};
|
||||||
|
|
@ -200,7 +202,11 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
|
||||||
const setEdges = (change: Edge[] | ((oldState: Edge[]) => Edge[])) => {
|
const setEdges = (change: Edge[] | ((oldState: Edge[]) => Edge[])) => {
|
||||||
let newChange = typeof change === "function" ? change(edges) : change;
|
let newChange = typeof change === "function" ? change(edges) : change;
|
||||||
|
|
||||||
saveCurrentFlow(nodes, newChange, reactFlowInstance?.getViewport() ?? { zoom: 1, x: 0, y: 0 });
|
saveCurrentFlow(
|
||||||
|
nodes,
|
||||||
|
newChange,
|
||||||
|
reactFlowInstance?.getViewport() ?? { zoom: 1, x: 0, y: 0 }
|
||||||
|
);
|
||||||
setEdgesInternal(newChange);
|
setEdgesInternal(newChange);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -738,7 +744,14 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
|
||||||
let newFlow;
|
let newFlow;
|
||||||
if (!flow) {
|
if (!flow) {
|
||||||
const currentFlow = flows.find((flow) => flow.id === tabId)!;
|
const currentFlow = flows.find((flow) => flow.id === tabId)!;
|
||||||
newFlow = { ...currentFlow, data: { nodes, edges, viewport: reactFlowInstance?.getViewport() ?? { zoom: 1, x: 0, y: 0 } } }
|
newFlow = {
|
||||||
|
...currentFlow,
|
||||||
|
data: {
|
||||||
|
nodes,
|
||||||
|
edges,
|
||||||
|
viewport: reactFlowInstance?.getViewport() ?? { zoom: 1, x: 0, y: 0 },
|
||||||
|
},
|
||||||
|
};
|
||||||
} else {
|
} else {
|
||||||
newFlow = flow;
|
newFlow = flow;
|
||||||
}
|
}
|
||||||
|
|
@ -789,22 +802,13 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
function deleteNode(idx: string | Array<string>) {
|
function deleteNode(idx: string | Array<string>) {
|
||||||
|
|
||||||
setEdges((oldEdges) =>
|
|
||||||
oldEdges.filter((edge) =>
|
|
||||||
typeof idx === "string"
|
|
||||||
? edge.source !== idx && edge.target !== idx
|
|
||||||
: !idx.includes(edge.source) && !idx.includes(edge.target)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
setNodes((oldNodes) =>
|
setNodes((oldNodes) =>
|
||||||
oldNodes.filter((node) =>
|
oldNodes.filter((node) =>
|
||||||
typeof idx === "string" ? node.id !== idx : !idx.includes(node.id)
|
typeof idx === "string" ? node.id !== idx : !idx.includes(node.id)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteEdge(idx: string | Array<string>) {
|
function deleteEdge(idx: string | Array<string>) {
|
||||||
setEdges((oldEdges) =>
|
setEdges((oldEdges) =>
|
||||||
oldEdges.filter((edge) =>
|
oldEdges.filter((edge) =>
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@ const EditNodeModal = forwardRef(
|
||||||
|
|
||||||
const [myData, setMyData] = useState(data);
|
const [myData, setMyData] = useState(data);
|
||||||
|
|
||||||
const { setTabsState, tabId, edges } = useContext(FlowsContext);
|
const { setPending, tabId, edges } = useContext(FlowsContext);
|
||||||
const { setModalContextOpen } = useContext(alertContext);
|
const { setModalContextOpen } = useContext(alertContext);
|
||||||
|
|
||||||
function changeAdvanced(n) {
|
function changeAdvanced(n) {
|
||||||
|
|
@ -535,7 +535,6 @@ const EditNodeModal = forwardRef(
|
||||||
className="mt-3"
|
className="mt-3"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
data.node = myData.node;
|
data.node = myData.node;
|
||||||
//@ts-ignore
|
|
||||||
setPending(true);
|
setPending(true);
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -401,7 +401,6 @@ export default function FormModal({
|
||||||
description: flow.description,
|
description: flow.description,
|
||||||
chatKey: chatKey!,
|
chatKey: chatKey!,
|
||||||
});
|
});
|
||||||
//@ts-ignore
|
|
||||||
setTabsState((old: FlowsState) => {
|
setTabsState((old: FlowsState) => {
|
||||||
if (!chatKey) return old;
|
if (!chatKey) return old;
|
||||||
let newTabsState = _.cloneDeep(old);
|
let newTabsState = _.cloneDeep(old);
|
||||||
|
|
@ -522,7 +521,6 @@ export default function FormModal({
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
//@ts-ignore
|
|
||||||
setTabsState((old: FlowsState) => {
|
setTabsState((old: FlowsState) => {
|
||||||
let newTabsState = _.cloneDeep(old);
|
let newTabsState = _.cloneDeep(old);
|
||||||
newTabsState[
|
newTabsState[
|
||||||
|
|
@ -634,7 +632,6 @@ export default function FormModal({
|
||||||
sendMessage={sendMessage}
|
sendMessage={sendMessage}
|
||||||
setChatValue={(value) => {
|
setChatValue={(value) => {
|
||||||
setChatValue(value);
|
setChatValue(value);
|
||||||
//@ts-ignore
|
|
||||||
setTabsState((old: FlowsState) => {
|
setTabsState((old: FlowsState) => {
|
||||||
let newTabsState = _.cloneDeep(old);
|
let newTabsState = _.cloneDeep(old);
|
||||||
newTabsState[id.current].formKeysData.input_keys![
|
newTabsState[id.current].formKeysData.input_keys![
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@ export default function GenericModal({
|
||||||
const [wordsHighlight, setWordsHighlight] = useState<string[]>([]);
|
const [wordsHighlight, setWordsHighlight] = useState<string[]>([]);
|
||||||
const { setErrorData, setSuccessData, setNoticeData, setModalContextOpen } =
|
const { setErrorData, setSuccessData, setNoticeData, setModalContextOpen } =
|
||||||
useContext(alertContext);
|
useContext(alertContext);
|
||||||
const ref = useRef();
|
const textRef = useRef<HTMLTextAreaElement>(null);
|
||||||
const divRef = useRef(null);
|
const divRef = useRef(null);
|
||||||
const divRefPrompt = useRef(null);
|
const divRefPrompt = useRef(null);
|
||||||
|
|
||||||
|
|
@ -228,8 +228,7 @@ export default function GenericModal({
|
||||||
/>
|
/>
|
||||||
) : type !== TypeModal.PROMPT ? (
|
) : type !== TypeModal.PROMPT ? (
|
||||||
<Textarea
|
<Textarea
|
||||||
//@ts-ignore
|
ref={textRef}
|
||||||
ref={ref}
|
|
||||||
className="form-input h-full w-full rounded-lg focus-visible:ring-1"
|
className="form-input h-full w-full rounded-lg focus-visible:ring-1"
|
||||||
value={inputValue}
|
value={inputValue}
|
||||||
onChange={(event) => {
|
onChange={(event) => {
|
||||||
|
|
|
||||||
|
|
@ -370,7 +370,6 @@ export default function Page({
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const onMove = useCallback(() => {
|
const onMove = useCallback(() => {
|
||||||
//@ts-ignore
|
|
||||||
setPending(true);
|
setPending(true);
|
||||||
}, [setPending]);
|
}, [setPending]);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ export type FlowsContextType = {
|
||||||
isPending: boolean;
|
isPending: boolean;
|
||||||
setPending: (pending: boolean) => void;
|
setPending: (pending: boolean) => void;
|
||||||
tabsState: FlowsState;
|
tabsState: FlowsState;
|
||||||
setTabsState: (state: FlowsState) => void;
|
setTabsState: (update: FlowsState | ((oldState: FlowsState) => FlowsState)) => void;
|
||||||
paste: (
|
paste: (
|
||||||
selection: { nodes: any; edges: any },
|
selection: { nodes: any; edges: any },
|
||||||
position: { x: number; y: number; paneX?: number; paneY?: number }
|
position: { x: number; y: number; paneX?: number; paneY?: number }
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue