fix: made radio-button-group a controlled component (#2499)

Co-authored-by: Opender Singh <opender94@gmail.com>
Kong · Aug 12, 2020 · 48783e5 · 48783e5
1 parent b26ce1c
commit 48783e5
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 25 deletions.
diff --git a/packages/insomnia-app/app/ui/components/activity-toggle.js b/packages/insomnia-app/app/ui/components/activity-toggle.js
@@ -25,6 +25,7 @@ export default function ActivityToggle({ activity, handleActivityChange, workspa
       name="activity-toggle"
       onChange={a => handleActivityChange(workspace._id, a)}
       choices={choices}
+      selectedValue={activity}
     />
   );
 }
diff --git a/packages/insomnia-components/components/multi-switch.stories.js b/packages/insomnia-components/components/multi-switch.stories.js
@@ -3,15 +3,24 @@ import MultiSwitch from './multi-switch';
 
 export default { title: 'Navigation | Sliding Switch' };
 
-export const _default = () => (
-  <MultiSwitch
-    name="activity"
-    defaultValue="debug"
-    onChange={v => console.log(v)}
-    choices={[
-      { label: 'Design', value: 'design' },
-      { label: 'Debug', value: 'debug' },
-      { label: 'Test', value: 'test' },
-    ]}
-  />
-);
+export const _default = () => {
+  const defaultValue = 'debug';
+  const [selectedValue, setSelectedValue] = React.useState(defaultValue);
+  const onChangeHandler = v => {
+    console.log(v);
+    setSelectedValue(v);
+  };
+  return (
+    <MultiSwitch
+      name="activity"
+      defaultValue={defaultValue}
+      onChange={onChangeHandler}
+      choices={[
+        { label: 'Design', value: 'design' },
+        { label: 'Debug', value: 'debug' },
+        { label: 'Test', value: 'test' },
+      ]}
+      selectedValue={selectedValue}
+    />
+  );
+};
diff --git a/packages/insomnia-components/components/radio-button-group.js b/packages/insomnia-components/components/radio-button-group.js
@@ -11,6 +11,7 @@ export type Props = {
     value: string,
   }>,
   className?: string,
+  selectedValue: string,
 };
 
 const StyledRadioButtonGroup: React.ComponentType<{}> = styled.div`
@@ -53,6 +54,7 @@ export default function RadioButtonGroup({
   defaultValue,
   onChange,
   className,
+  selectedValue,
 }: Props) {
   const handleChange = e => {
     if (typeof onChange !== 'function') {
@@ -71,6 +73,7 @@ export default function RadioButtonGroup({
             name={name}
             value={value}
             defaultChecked={defaultValue === value}
+            checked={selectedValue === value}
             onChange={handleChange}
           />
           <span>{label}</span>

diff --git a/packages/insomnia-components/components/radio-button-group.stories.js b/packages/insomnia-components/components/radio-button-group.stories.js
@@ -5,16 +5,26 @@ import RadioButtonGroup from './radio-button-group';
 
 export default { title: 'Navigation | Radio Button Group' };
 
-export const _default = () => (
-  <RadioButtonGroup
-    name="dummy"
-    defaultValue="scratch"
-    onChange={v => console.log(v)}
-    choices={[
-      { label: 'From Scratch', value: 'scratch' },
-      { label: 'From Repository', value: 'repo' },
-      { label: 'From Clipboard', value: 'clip' },
-      { label: 'From Spec', value: 'spec' },
-    ]}
-  />
-);
+export const _default = () => {
+  const defaultValue = 'scratch';
+  const [selectedValue, setSelectedValue] = React.useState(defaultValue);
+  const onChangeHandler = v => {
+    console.log(v);
+    setSelectedValue(v);
+  };
+
+  return (
+    <RadioButtonGroup
+      name="dummy"
+      defaultValue={defaultValue}
+      onChange={onChangeHandler}
+      choices={[
+        { label: 'From Scratch', value: 'scratch' },
+        { label: 'From Repository', value: 'repo' },
+        { label: 'From Clipboard', value: 'clip' },
+        { label: 'From Spec', value: 'spec' },
+      ]}
+      selectedValue={selectedValue}
+    />
+  );
+};