diff --git a/src/components/wired-tools/WiredCreatorToolsView.tsx b/src/components/wired-tools/WiredCreatorToolsView.tsx index 798d3ad..64ff67c 100644 --- a/src/components/wired-tools/WiredCreatorToolsView.tsx +++ b/src/components/wired-tools/WiredCreatorToolsView.tsx @@ -10,6 +10,7 @@ import { DIRECTION_NAMES, EDITABLE_FURNI_VARIABLES, EDITABLE_USER_VARIABLES, INS import { createEmptyMonitorSnapshot, formatMonitorHistoryOccurrence, formatMonitorLatestOccurrence, formatMonitorSource, formatVariableTimestamp, getHotelDateTimeParts, getHotelTimeFormatter, normalizeMonitorReason } from './WiredCreatorTools.helpers'; import { HotelDateTimeParts, InspectionElementButton, InspectionElementType, InspectionFurniLiveState, InspectionFurniSelection, InspectionUserLiveState, InspectionUserSelection, InspectionUserTeamData, InspectionVariable, ManagedHolderVariableEntry, MonitorLog, MonitorLogDetails, MonitorSnapshot, MonitorStat, ParsedWallLocation, TeamEffectData, VariableDefinition, VariableHighlightOverlay, VariableHighlightTarget, VariableManageEntry, VariableTextValue, VariablesElementButton, VariablesElementType, WiredToolsTab } from './WiredCreatorTools.types'; import { WiredToolsSettingsTabView } from './WiredToolsSettingsTabView'; +import { WiredVariablesTabView } from './WiredVariablesTabView'; export const WiredCreatorToolsView: FC<{}> = () => { @@ -3387,118 +3388,26 @@ export const WiredCreatorToolsView: FC<{}> = () => } { (activeTab === 'variables') && -
-
-
- Variable type: -
- { VARIABLES_ELEMENTS.map(element => ( - - )) } -
-
-
- Variable picker: -
-
- - - { variablePickerDefinitions.map((variable, index) => ( - setSelectedVariableKeys(prev => ({ ...prev, [variablesType]: variable.key })) }> - - - )) } - -
{ variable.key }
-
-
-
-
- - -
-
-
- { (variablesType === 'context') && -
- Context variables live only during the current wired execution. This tab shows their definitions, text mappings and execution-scoped capabilities, but not live values from a running stack. -
} -
- Properties: -
-
- Property - Value -
-
- - - { selectedVariableProperties.map((property, index) => ( - - - - - )) } - -
{ property.key }{ property.value }
-
-
-
-
- Text values: -
-
- Value - Text -
- { !selectedVariableTextValues.length && -
- Nothing to display -
} - { !!selectedVariableTextValues.length && -
- - - { selectedVariableTextValues.map((entry, index) => ( - - - - - )) } - -
{ entry.value }{ entry.text }
-
} -
-
-
-
} + setSelectedVariableKeys(prev => ({ ...prev, [variablesType]: key })) } + canVariableHighlight={ canVariableHighlight } + isVariableHighlightActive={ isVariableHighlightActive } + onToggleVariableHighlight={ () => setIsVariableHighlightActive(value => !value) } + variableManageCanOpen={ variableManageCanOpen } + onOpenManagePanel={ () => + { + requestUserVariables(); + setVariableManagePage(1); + setSelectedManagedVariableEntry(null); + setIsVariableManageOpen(true); + } } + selectedVariableProperties={ selectedVariableProperties } + selectedVariableTextValues={ selectedVariableTextValues } + /> } { (activeTab === 'settings') && } { (activeTab !== 'monitor') && (activeTab !== 'inspection') && diff --git a/src/components/wired-tools/WiredVariablesTabView.tsx b/src/components/wired-tools/WiredVariablesTabView.tsx new file mode 100644 index 0000000..44fcd1b --- /dev/null +++ b/src/components/wired-tools/WiredVariablesTabView.tsx @@ -0,0 +1,150 @@ +import { FC } from 'react'; +import { Button, Text } from '../../common'; +import { VARIABLES_ELEMENTS } from './WiredCreatorTools.constants'; +import { VariableDefinition, VariablesElementType, VariableTextValue } from './WiredCreatorTools.types'; + +export interface WiredVariablesTabViewProps +{ + variablesType: VariablesElementType; + onVariablesTypeChange: (next: VariablesElementType) => void; + variablePickerDefinitions: VariableDefinition[]; + selectedVariableDefinition: VariableDefinition | null; + onPickVariable: (key: string) => void; + canVariableHighlight: boolean; + isVariableHighlightActive: boolean; + onToggleVariableHighlight: () => void; + variableManageCanOpen: boolean; + onOpenManagePanel: () => void; + selectedVariableProperties: { key: string; value: string; }[]; + selectedVariableTextValues: VariableTextValue[]; +} + +/** + * The "Variables" tab body of WiredCreatorToolsView. Extracted so the + * parent module no longer carries 110 lines of inline JSX. Pure + * presentation: every piece of state and every callback is supplied as + * a prop, so this component is trivially memoizable and (eventually) + * testable in isolation. + */ +export const WiredVariablesTabView: FC = ({ + variablesType, + onVariablesTypeChange, + variablePickerDefinitions, + selectedVariableDefinition, + onPickVariable, + canVariableHighlight, + isVariableHighlightActive, + onToggleVariableHighlight, + variableManageCanOpen, + onOpenManagePanel, + selectedVariableProperties, + selectedVariableTextValues +}) => + ( +
+
+
+ Variable type: +
+ { VARIABLES_ELEMENTS.map(element => ( + + )) } +
+
+
+ Variable picker: +
+
+ + + { variablePickerDefinitions.map((variable, index) => ( + onPickVariable(variable.key) }> + + + )) } + +
{ variable.key }
+
+
+
+
+ + +
+
+
+ { (variablesType === 'context') && +
+ Context variables live only during the current wired execution. This tab shows their definitions, text mappings and execution-scoped capabilities, but not live values from a running stack. +
} +
+ Properties: +
+
+ Property + Value +
+
+ + + { selectedVariableProperties.map((property, index) => ( + + + + + )) } + +
{ property.key }{ property.value }
+
+
+
+
+ Text values: +
+
+ Value + Text +
+ { !selectedVariableTextValues.length && +
+ Nothing to display +
} + { !!selectedVariableTextValues.length && +
+ + + { selectedVariableTextValues.map((entry, index) => ( + + + + + )) } + +
{ entry.value }{ entry.text }
+
} +
+
+
+
+ );