feat: Allow dynamic value change for toggle #1154 (#2092)

h2oai · Aug 2, 2023 · 57e2b21 · 57e2b21
1 parent b70a2fa
commit 57e2b21
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/ui/src/toggle.test.tsx b/ui/src/toggle.test.tsx
@@ -31,6 +31,13 @@ describe('Toggle.tsx', () => {
     expect(queryByTestId(name)).toBeInTheDocument()
   })
 
+  it('Sets args on click', () => {
+    const { getByTestId } = render(<XToggle model={toggleProps} />)
+    fireEvent.click(getByTestId(name))
+
+    expect(wave.args[name]).toBe(true)
+  })
+
   it('Calls sync when trigger is on', () => {
     const pushMock = jest.fn()
     const { getByTestId } = render(<XToggle model={{ ...toggleProps, trigger: true }} />)
@@ -51,11 +58,19 @@ describe('Toggle.tsx', () => {
     expect(pushMock).toHaveBeenCalledTimes(0)
   })
 
-  it('Sets args on click', () => {
-    const { getByTestId } = render(<XToggle model={toggleProps} />)
-    fireEvent.click(getByTestId(name))
-
+  it('Set args when value is updated to different value', () => {
+    const { rerender } = render(<XToggle model={toggleProps} />)
+    expect(wave.args[name]).toBe(false)
+    rerender(<XToggle model={{ name, value: true }} />)
     expect(wave.args[name]).toBe(true)
   })
 
+  it('Set args when value is updated to initial value', () => {
+    const { getByTestId, rerender } = render(<XToggle model={toggleProps} />)
+    expect(wave.args[name]).toBe(false)
+    fireEvent.click(getByTestId(name))
+    expect(wave.args[name]).toBe(true)
+    rerender(<XToggle model={{ name, value: false }} />)
+    expect(wave.args[name]).toBe(false)
+  })
 })
diff --git a/ui/src/toggle.tsx b/ui/src/toggle.tsx
@@ -48,25 +48,34 @@ export interface Toggle {
 
 export const
   XToggle = ({ model: m }: { model: Toggle }) => {
-    const onChange = React.useCallback((_e?: React.FormEvent<HTMLElement>, checked?: B) => {
-      wave.args[m.name] = !!checked
-      if (m.trigger) wave.push()
-    }, [m.name, m.trigger])
+    const
+      { name, value = false, label, disabled, trigger } = m,
+      [checked, setChecked] = React.useState(value),
+      onChange = React.useCallback((_e?: React.FormEvent<HTMLElement>, checked?: B) => {
+        wave.args[name] = !!checked
+        setChecked(!!checked)
+        m.value = !!checked
+        if (trigger) wave.push()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [name, trigger])
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useEffect(() => { wave.args[m.name] = !!m.value }, [])
+    React.useEffect(() => {
+      wave.args[name] = value
+      setChecked(value)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value])
 
     return (
       <Fluent.Toggle
-        data-test={m.name}
+        data-test={name}
         styles={{
           root: { marginBottom: 0 },
           text: { width: 21 }  // Prevent jumping when the label changes from 'On' to 'Off'.
         }}
-        label={m.label}
-        defaultChecked={m.value}
+        label={label}
+        checked={checked}
         onChange={onChange}
-        disabled={m.disabled}
+        disabled={disabled}
         onText="On"
         offText="Off"
         inlineLabel