Prettier

Author: RoyEJohnson

src/app/components/validation-message/validation-message.tsx

@@ -5,27 +5,32 @@ export type ElementWithValidationMessage = HTMLElement & {
 };
 
 function matchesOrContainsValidationMessage(el: ElementWithValidationMessage) {
-    return el?.validationMessage
-    || el?.querySelector<ElementWithValidationMessage>(':invalid')?.validationMessage
-    || 'invalid input';
+    return (
+        el?.validationMessage ||
+        el?.querySelector<ElementWithValidationMessage>(':invalid')
+            ?.validationMessage ||
+        'invalid input'
+    );
 }
 
 // watchValue changes trigger updates
 // elementRef will be queryied for invalid elements
-export default function ValidationMessage({watchValue, elementRef}: {
+export default function ValidationMessage({
+    watchValue,
+    elementRef
+}: {
     watchValue?: object;
-    elementRef: React.MutableRefObject<ElementWithValidationMessage>
+    elementRef: React.MutableRefObject<ElementWithValidationMessage>;
 }) {
     const [validationMessage, setValidationMessage] = React.useState('');
 
     React.useEffect(
-        () => setValidationMessage(
-            matchesOrContainsValidationMessage(elementRef.current)
-        ),
+        () =>
+            setValidationMessage(
+                matchesOrContainsValidationMessage(elementRef.current)
+            ),
         [watchValue, elementRef, setValidationMessage]
     );
 
-    return (
-        <div className="invalid-message">{validationMessage}</div>
-    );
+    return <div className="invalid-message">{validationMessage}</div>;
 }

src/app/components/vertical-list/vertical-list.tsx

@@ -3,78 +3,87 @@ import useVListContext, {VListContextProvider} from './vlist-context';
 
 type LabeledItem = {
     label: string;
-}
+};
 
 export type RenderItemProps<Item> = {
     item: Item;
     current: boolean;
     onMouseEnter: React.MouseEventHandler;
     onClick: React.MouseEventHandler;
-}
+};
 
 type VerticalListProps<Item> = {
     items: Item[];
     RenderItem: (props: RenderItemProps<Item>) => React.JSX.Element;
     vListRef: React.RefObject<HTMLDivElement>;
     onSelect: (i: Item) => void;
     onCancel: () => void;
-}
+};
 
-function RenderInContext<T extends LabeledItem>(
-    {items, RenderItem, vListRef, onSelect, onCancel}: VerticalListProps<T>
-) {
+function RenderInContext<T extends LabeledItem>({
+    items,
+    RenderItem,
+    vListRef,
+    onSelect,
+    onCancel
+}: VerticalListProps<T>) {
     const {count, setCount, index, setIndex} = useVListContext();
 
     React.useEffect(() => setCount(items.length), [items, setCount]);
 
     const onKeyDown = (event: React.KeyboardEvent) => {
         switch (event.key) {
-        case 'ArrowDown':
-            setIndex(Math.min(index+1, count-1));
-            event.preventDefault();
-            event.stopPropagation();
-            break;
-        case 'ArrowUp':
-            setIndex(Math.max(index-1, -1));
-            event.preventDefault();
-            event.stopPropagation();
-            break;
-        case ' ':
-        case 'Enter':
-            onSelect(items[index]);
-            event.preventDefault();
-            event.stopPropagation();
-            break;
-        case 'Escape':
-            onCancel();
-            event.preventDefault();
-            event.stopPropagation();
-            break;
-        default: break;
+            case 'ArrowDown':
+                setIndex(Math.min(index + 1, count - 1));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'ArrowUp':
+                setIndex(Math.max(index - 1, -1));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case ' ':
+            case 'Enter':
+                onSelect(items[index]);
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'Escape':
+                onCancel();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            default:
+                break;
         }
     };
 
     return (
         <div
-            className="vertical-list" tabIndex={0} ref={vListRef}
-            onBlur={onCancel} onKeyDown={onKeyDown}
+            className="vertical-list"
+            tabIndex={0}
+            ref={vListRef}
+            onBlur={onCancel}
+            onKeyDown={onKeyDown}
             role="listbox"
         >
-            {
-                items.map((item, i) =>
-                    <RenderItem
-                        key={item.label}
-                        item={item}
-                        current={index === i}
-                        onMouseEnter={() => setIndex(i)}
-                        onClick={() => onSelect(item)}
-                    />)
-            }
+            {items.map((item, i) => (
+                <RenderItem
+                    key={item.label}
+                    item={item}
+                    current={index === i}
+                    onMouseEnter={() => setIndex(i)}
+                    onClick={() => onSelect(item)}
+                />
+            ))}
         </div>
     );
 }
 
-export default function VerticalList<T extends LabeledItem>(props: VerticalListProps<T>) {
+export default function VerticalList<T extends LabeledItem>(
+    props: VerticalListProps<T>
+) {
     return (
         <VListContextProvider>
             <RenderInContext {...props} />