|
7 | 7 | import './activityPrompt.css'; |
8 | 8 |
|
9 | 9 | // React. |
10 | | -import { KeyboardEvent, useCallback, useEffect, useRef } from 'react'; |
| 10 | +import { KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react'; |
11 | 11 |
|
12 | 12 | // Other dependencies. |
13 | 13 | import { Emitter } from '../../../../../base/common/event.js'; |
@@ -61,9 +61,31 @@ export const ActivityPrompt = (props: ActivityPromptProps) => { |
61 | 61 | const editorContainerRef = useRef<HTMLDivElement>(null); |
62 | 62 | const editorRef = useRef<CodeEditorWidget | null>(null); |
63 | 63 |
|
64 | | - // Whether to use the password input (HTML input) or the editor (CodeEditorWidget). |
| 64 | + // State hooks. |
| 65 | + const [state, setState] = useState(props.activityItemPrompt.state); |
| 66 | + |
| 67 | + // State change useEffect. Subscribes to prompt state changes and updates local state to trigger re-render. |
| 68 | + useEffect(() => { |
| 69 | + // Create a disposable store for the prompt state change subscription, and clean it up on unmount or when the prompt changes. |
| 70 | + const disposableStore = new DisposableStore(); |
| 71 | + |
| 72 | + // Subscribe to prompt state changes and update local state to trigger re-render. |
| 73 | + disposableStore.add(props.activityItemPrompt.onStateChanged(() => { |
| 74 | + setState(props.activityItemPrompt.state); |
| 75 | + })); |
| 76 | + |
| 77 | + // Re-sync in case the state changed between render and this effect running. |
| 78 | + setState(props.activityItemPrompt.state); |
| 79 | + |
| 80 | + // Clean up subscription on unmount or when prompt changes. |
| 81 | + return () => disposableStore.dispose(); |
| 82 | + }, [props.activityItemPrompt]); |
| 83 | + |
| 84 | + // A value that indicates whether to use the password input (HTML input) or the editor (CodeEditorWidget). |
65 | 85 | const isPassword = props.activityItemPrompt.password; |
66 | | - const isUnanswered = props.activityItemPrompt.state === ActivityItemPromptState.Unanswered; |
| 86 | + |
| 87 | + // A value that indicates whether the prompt is currently unanswered. |
| 88 | + const isUnanswered = state === ActivityItemPromptState.Unanswered; |
67 | 89 |
|
68 | 90 | /** |
69 | 91 | * Focuses the appropriate input element. |
@@ -312,7 +334,7 @@ export const ActivityPrompt = (props: ActivityPromptProps) => { |
312 | 334 |
|
313 | 335 | // Determine what to render based on prompt state. |
314 | 336 | let prompt; |
315 | | - switch (props.activityItemPrompt.state) { |
| 337 | + switch (state) { |
316 | 338 | // When the prompt is unanswered, render the appropriate input. |
317 | 339 | case ActivityItemPromptState.Unanswered: |
318 | 340 | if (isPassword) { |
|
0 commit comments