Extract PickerInput component

Author: davidje13

src/frontend/src/components/common/PickerInput.less

@@ -0,0 +1,47 @@
+@import (reference) '../colours.less';
+
+.picker-input {
+  background: #FFFFFF;
+  overflow-y: auto;
+
+  > label {
+    display: block;
+    position: relative;
+    border-bottom: 1px solid @beige-shadow;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    > span {
+      display: block;
+      cursor: pointer;
+
+      &:hover {
+        background: @beige-back;
+      }
+    }
+
+    /* class name and type included to ensure high specificity */
+    > input.picker-hidden[type='radio'] {
+      margin: 0;
+      position: absolute;
+      left: -10px;
+      width: 1px;
+      height: 100%;
+      box-sizing: border-box;
+
+      &:focus-visible {
+        outline: none;
+
+        + span {
+          box-shadow: inset 0 0 0 2px #005FCC;
+        }
+      }
+
+      &:checked + span {
+        background: hsl(200, 30%, 84%);
+      }
+    }
+  }
+}

src/frontend/src/components/common/PickerInput.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback, memo } from 'react';
+import classNames from 'classnames';
+import './PickerInput.less';
+
+interface OptionT {
+  value: string;
+  label: React.ReactNode;
+}
+
+interface PropsT {
+  className?: string;
+  name: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: OptionT[];
+}
+
+export default memo(({
+  className,
+  name,
+  value,
+  onChange,
+  options,
+}: PropsT) => {
+  const changeHandler = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.checked) {
+      onChange?.(e.target.value);
+    }
+  }, [onChange]);
+
+  return (
+    <div className={classNames('picker-input', className)}>
+      { options.map((o) => (
+        <label key={o.value}>
+          <input
+            className="picker-hidden"
+            name={name}
+            type="radio"
+            value={o.value}
+            checked={value === o.value}
+            onChange={changeHandler}
+            autoComplete="off"
+          />
+          <span>
+            { o.label }
+          </span>
+        </label>
+      )) }
+    </div>
+  );
+});

src/frontend/src/components/form.less

@@ -10,7 +10,7 @@
     display: block;
   }
 
-  input, .prefixed-input {
+  input, .prefixed-input, .picker-input {
     display: block;
     margin: 4px 0 16px;
     padding: 8px;
@@ -67,69 +67,8 @@
     }
   }
 
-  .picker {
-    margin: 4px 0 16px;
-    background: #FFFFFF;
-    border: 1px solid @beige-shadow;
-    overflow-y: auto;
-    width: 100%;
-    max-height: 18rem;
-    box-sizing: border-box;
-
-    label {
-      display: block;
-      position: relative;
-      border-bottom: 1px solid @beige-shadow;
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-
-    input {
-      margin: 0;
-      padding: 0;
-      position: absolute;
-      left: -100px;
-      height: 100%;
-      box-sizing: border-box;
-    }
-
-    .row {
-      display: block;
-      cursor: pointer;
-    }
-
-    .row:hover {
-      background: @beige-back;
-    }
-
-    input:focus-visible {
-      outline: none;
-    }
-
-    input:focus-visible + .row {
-      outline: solid blue;
-      outline: auto 5px -webkit-focus-ring-color;
-    }
-
-    input:checked + .row {
-      background: hsl(200, 30%, 84%);
-    }
-  }
-
-  .theme-row {
-    padding: 4px 8px 4px 24px;
-    display: grid;
-    grid-template-columns: auto 3.5rem 3.5rem 3.5rem;
-    align-items: center;
-
-    .preview {
-      font-size: 2.5rem;
-      vertical-align: middle;
-      display: inline-block;
-      text-align: center;
-    }
+  .picker-input {
+    padding: 0;
   }
 
   .prefixed-input {

src/frontend/src/components/retro-settings/SettingsForm.less

@@ -2,4 +2,27 @@
 
 form.retro-settings {
   .mixin-form-styling;
+
+  .theme {
+    max-height: 18rem;
+  }
+
+  .theme-row {
+    padding: 4px 8px;
+    display: grid;
+    grid-template-columns: auto 3.5rem 3.5rem 3.5rem;
+    align-items: center;
+
+    .name {
+      padding-left: 16px;
+      font-size: 1rem;
+    }
+
+    .preview {
+      font-size: 2.5rem;
+      vertical-align: middle;
+      display: inline-block;
+      text-align: center;
+    }
+  }
 }

src/frontend/src/components/retro-settings/SettingsForm.tsx

@@ -3,6 +3,7 @@ import type { Retro } from 'refacto-entities';
 import { actionsSyncedCallback } from 'shared-reducer-frontend';
 import type { RetroDispatch } from '../../api/RetroTracker';
 import Input from '../common/Input';
+import PickerInput from '../common/PickerInput';
 import SlugEntry from '../retro-create/SlugEntry';
 import Alert from '../common/Alert';
 import useSubmissionCallback from '../../hooks/useSubmissionCallback';
@@ -49,25 +50,17 @@ export default memo(({
     ]);
   }, [name, slug, alwaysShowAddAction, theme, dispatch, onSave]);
 
-  const themeChoices = getThemes().map(([value, detail]) => (
-    <label key={value}>
-      <Input
-        name="theme"
-        type="radio"
-        value={value}
-        selected={theme}
-        onChange={setTheme}
-      />
-      <span className="row">
-        <span className="theme-row">
-          <span className="name">{ detail.name }</span>
-          <span className="preview">{ detail.icons.happy }</span>
-          <span className="preview">{ detail.icons.meh }</span>
-          <span className="preview">{ detail.icons.sad }</span>
-        </span>
+  const themeChoices = getThemes().map(([value, detail]) => ({
+    value,
+    label: (
+      <span className="theme-row">
+        <span className="name">{ detail.name }</span>
+        <span className="preview">{ detail.icons.happy }</span>
+        <span className="preview">{ detail.icons.meh }</span>
+        <span className="preview">{ detail.icons.sad }</span>
       </span>
-    </label>
-  ));
+    ),
+  }));
 
   return (
     <form onSubmit={handleSubmit} className="retro-settings">
@@ -104,9 +97,13 @@ export default memo(({
       </label>
       <fieldset>
         <legend>Theme</legend>
-        <div className="picker">
-          { themeChoices }
-        </div>
+        <PickerInput
+          className="theme"
+          name="theme"
+          value={theme}
+          onChange={setTheme}
+          options={themeChoices}
+        />
       </fieldset>
       { sending ? (<div className="sending">&hellip;</div>) : (
         <button type="submit" title="Save Changes">