Merge branch 'mobx'

src/components/ui/ColourSwatches.tsx

@@ -5,6 +5,8 @@ import styled, { css } from "styled-components";
 import { RefObject } from "preact";
 import { useRef } from "preact/hooks";
 
+import { useDebounceCallback } from "../../lib/debounce";
+
 interface Props {
     value: string;
     onChange: (value: string) => void;
@@ -115,6 +117,11 @@ const Rows = styled.div`
 
 export default function ColourSwatches({ value, onChange }: Props) {
     const ref = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
+    const setValue = useDebounceCallback(
+        (value) => onChange(value as string),
+        [onChange],
+        100,
+    );
 
     return (
         <SwatchesBase>
@@ -122,7 +129,7 @@ export default function ColourSwatches({ value, onChange }: Props) {
                 type="color"
                 value={value}
                 ref={ref}
-                onChange={(ev) => onChange(ev.currentTarget.value)}
+                onChange={(ev) => setValue(ev.currentTarget.value)}
             />
             <Swatch
                 colour={value}

src/components/ui/Modal.tsx

@@ -167,7 +167,7 @@ export default function Modal(props: Props) {
     isModalClosing = animateClose;
     const onClose = useCallback(() => {
         setAnimateClose(true);
-        setTimeout(() => props.onClose?.(), 2e2);
+        setTimeout(() => props.onClose!(), 2e2);
     }, [setAnimateClose, props]);
 
     useEffect(() => internalSubscribe("Modal", "close", onClose), [onClose]);

src/components/ui/Radio.tsx

@@ -7,9 +7,9 @@ interface Props {
     children: Children;
     description?: Children;
 
-    checked: boolean;
+    checked?: boolean;
     disabled?: boolean;
-    onSelect: () => void;
+    onSelect?: () => void;
 }
 
 interface BaseProps {
@@ -87,9 +87,10 @@ const RadioDescription = styled.span<BaseProps>`
 `;
 
 export default function Radio(props: Props) {
+    const selected = props.checked ?? false;
     return (
         <RadioBase
-            selected={props.checked}
+            selected={selected}
             disabled={props.disabled}
             onClick={() =>
                 !props.disabled && props.onSelect && props.onSelect()
@@ -101,7 +102,7 @@ export default function Radio(props: Props) {
             <span>
                 <span>{props.children}</span>
                 {props.description && (
-                    <RadioDescription selected={props.checked}>
+                    <RadioDescription selected={selected}>
                         {props.description}
                     </RadioDescription>
                 )}