feat(ui): makeConnectionErrorSelector now creates a parameterized selector

This commit is contained in:
psychedelicious 2024-05-18 17:28:56 +10:00
parent 6658897210
commit 9d127fee6b
2 changed files with 93 additions and 97 deletions

View File

@ -34,16 +34,8 @@ export const useConnectionState = ({ nodeId, fieldName, kind }: UseConnectionSta
); );
const selectConnectionError = useMemo( const selectConnectionError = useMemo(
() => () => makeConnectionErrorSelector(templates, nodeId, fieldName, kind === 'inputs' ? 'target' : 'source', fieldType),
makeConnectionErrorSelector( [templates, nodeId, fieldName, kind, fieldType]
templates,
pendingConnection,
nodeId,
fieldName,
kind === 'inputs' ? 'target' : 'source',
fieldType
),
[templates, pendingConnection, nodeId, fieldName, kind, fieldType]
); );
const isConnected = useAppSelector(selectIsConnected); const isConnected = useAppSelector(selectIsConnected);
@ -58,7 +50,7 @@ export const useConnectionState = ({ nodeId, fieldName, kind }: UseConnectionSta
pendingConnection.fieldTemplate.fieldKind === { inputs: 'input', outputs: 'output' }[kind] pendingConnection.fieldTemplate.fieldKind === { inputs: 'input', outputs: 'output' }[kind]
); );
}, [fieldName, kind, nodeId, pendingConnection]); }, [fieldName, kind, nodeId, pendingConnection]);
const connectionError = useAppSelector(selectConnectionError); const connectionError = useAppSelector((s) => selectConnectionError(s, pendingConnection));
const shouldDim = useMemo( const shouldDim = useMemo(
() => Boolean(isConnectionInProgress && connectionError && !isConnectionStartField), () => Boolean(isConnectionInProgress && connectionError && !isConnectionStartField),

View File

@ -1,7 +1,8 @@
import graphlib from '@dagrejs/graphlib'; import graphlib from '@dagrejs/graphlib';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import type { RootState } from 'app/store/store';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice'; import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import type { PendingConnection, Templates } from 'features/nodes/store/types'; import type { NodesState, PendingConnection, Templates } from 'features/nodes/store/types';
import { type FieldType, isStatefulFieldType } from 'features/nodes/types/field'; import { type FieldType, isStatefulFieldType } from 'features/nodes/types/field';
import type { AnyNode, InvocationNode, InvocationNodeEdge, InvocationTemplate } from 'features/nodes/types/invocation'; import type { AnyNode, InvocationNode, InvocationNodeEdge, InvocationTemplate } from 'features/nodes/types/invocation';
import i18n from 'i18next'; import i18n from 'i18next';
@ -190,13 +191,15 @@ export const getCollectItemType = (
*/ */
export const makeConnectionErrorSelector = ( export const makeConnectionErrorSelector = (
templates: Templates, templates: Templates,
pendingConnection: PendingConnection | null,
nodeId: string, nodeId: string,
fieldName: string, fieldName: string,
handleType: HandleType, handleType: HandleType,
fieldType: FieldType fieldType: FieldType
) => { ) => {
return createMemoizedSelector(selectNodesSlice, (nodesSlice) => { return createMemoizedSelector(
selectNodesSlice,
(state: RootState, pendingConnection: PendingConnection | null) => pendingConnection,
(nodesSlice: NodesState, pendingConnection: PendingConnection | null) => {
const { nodes, edges } = nodesSlice; const { nodes, edges } = nodesSlice;
if (!pendingConnection) { if (!pendingConnection) {
@ -288,7 +291,8 @@ export const makeConnectionErrorSelector = (
} }
return; return;
}); }
);
}; };
/** /**