[menu-bar] Add electron support for Checkbox component

CHANGELOG.md

@@ -8,7 +8,7 @@
 
 - Add support for launching Expo updates. ([#134](https://github.com/expo/orbit/pull/134), [#137](https://github.com/expo/orbit/pull/137), [#138](https://github.com/expo/orbit/pull/138), [#144](https://github.com/expo/orbit/pull/144), [#148](https://github.com/expo/orbit/pull/148) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 - Cache builds by default. ([#156](https://github.com/expo/orbit/pull/156) by [@gabrieldonadel](https://github.com/gabrieldonadel))
-- Add experimental support for Windows and Linux. ([#152](https://github.com/expo/orbit/pull/152), [#157](https://github.com/expo/orbit/pull/157), [#158](https://github.com/expo/orbit/pull/158), [#160](https://github.com/expo/orbit/pull/160) by [@gabrieldonadel](https://github.com/gabrieldonadel))
+- Add experimental support for Windows and Linux. ([#152](https://github.com/expo/orbit/pull/152), [#157](https://github.com/expo/orbit/pull/157), [#158](https://github.com/expo/orbit/pull/158), [#160](https://github.com/expo/orbit/pull/160), [#161](https://github.com/expo/orbit/pull/161) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 - Improve fatal CLI error handling. ([#163](https://github.com/expo/orbit/pull/163) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 
 ### 🐛 Bug fixes

apps/menu-bar/src/components/Checkbox/NativeCheckbox.tsx

@@ -0,0 +1,57 @@
+import React, { useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { requireNativeComponent } from 'react-native';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+
+import { CheckboxChangeEvent, NativeCheckboxProps } from './types';
+
+const NativeCheckbox = requireNativeComponent<NativeCheckboxProps>('Checkbox');
+
+interface NativeCommands {
+  setValue: (viewRef: React.ElementRef<typeof NativeCheckbox>, value: boolean) => void;
+}
+
+const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['setValue'],
+});
+
+const Checkbox = React.forwardRef(
+  (
+    {
+      onChange,
+      ...props
+    }: NativeCheckboxProps & {
+      onChange?: (event: CheckboxChangeEvent) => void;
+    },
+    ref: React.ForwardedRef<{ setNative: (native: { value?: boolean }) => void }>
+  ) => {
+    const nativeSwitchRef = useRef<React.ElementRef<typeof NativeCheckbox> | null>(null);
+    const [native, setNative] = useState<{ value?: boolean }>({ value: undefined });
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        setNative,
+      }),
+      []
+    );
+
+    useLayoutEffect(() => {
+      // This is necessary in case native updates the switch and JS decides
+      // that the update should be ignored and we should stick with the value
+      // that we have in JS.
+      const jsValue = props.value === true;
+      const shouldUpdateNativeSwitch = native.value != null && native.value !== jsValue;
+      if (shouldUpdateNativeSwitch && nativeSwitchRef.current?.setNativeProps != null) {
+        Commands.setValue(nativeSwitchRef.current, jsValue);
+      }
+    }, [props.value, native]);
+
+    const handleChange = (event: CheckboxChangeEvent) => {
+      onChange?.(event);
+      setNative({ value: event.nativeEvent.value });
+    };
+
+    return <NativeCheckbox {...props} onChange={handleChange} ref={nativeSwitchRef} />;
+  }
+);
+export default Checkbox;

apps/menu-bar/src/components/Checkbox/NativeCheckbox.web.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { CheckboxChangeEvent, NativeCheckboxProps } from './types';
+
+const Checkbox = React.forwardRef(({ value, onChange }: NativeCheckboxProps, ref) => {
+  return (
+    <input
+      type="checkbox"
+      checked={Boolean(value)}
+      onChange={(event) =>
+        onChange?.({
+          nativeEvent: { value: event.target.checked },
+        } as CheckboxChangeEvent)
+      }
+    />
+  );
+});
+
+export default Checkbox;

apps/menu-bar/src/components/Checkbox/index.tsx

@@ -1,64 +1,17 @@
-import { useLayoutEffect, useRef, useState } from 'react';
-import {
-  NativeSyntheticEvent,
-  Pressable,
-  requireNativeComponent,
-  StyleSheet,
-  TargetedEvent,
-  ViewProps,
-} from 'react-native';
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import { useRef } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
 
+import NativeCheckbox from './NativeCheckbox';
+import { CheckboxChangeEvent, CheckboxProps } from './types';
 import { Text } from '../Text';
 import { Row } from '../View';
 
-interface CheckboxChangeEventData extends TargetedEvent {
-  value: boolean;
-}
-
-interface CheckboxChangeEvent extends NativeSyntheticEvent<CheckboxChangeEventData> {}
-
-type NativeCheckboxProps = ViewProps & {
-  disabled?: boolean;
-  onChange?: (event: CheckboxChangeEvent) => void;
-  value?: boolean;
-};
-
-const NativeCheckbox = requireNativeComponent<NativeCheckboxProps>('Checkbox');
-
-type CheckboxProps = NativeCheckboxProps & {
-  onValueChange?: (value: boolean) => void;
-  label?: string;
-};
-
-interface NativeCommands {
-  setValue: (viewRef: React.ElementRef<typeof NativeCheckbox>, value: boolean) => void;
-}
-
-export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['setValue'],
-});
-
 const Checkbox = ({ onChange, onValueChange, label, ...props }: CheckboxProps) => {
-  const [native, setNative] = useState<{ value?: boolean }>({ value: undefined });
-
-  const nativeSwitchRef = useRef<React.ElementRef<typeof NativeCheckbox> | null>(null);
-
-  useLayoutEffect(() => {
-    // This is necessary in case native updates the switch and JS decides
-    // that the update should be ignored and we should stick with the value
-    // that we have in JS.
-    const jsValue = props.value === true;
-    const shouldUpdateNativeSwitch = native.value != null && native.value !== jsValue;
-    if (shouldUpdateNativeSwitch && nativeSwitchRef.current?.setNativeProps != null) {
-      Commands.setValue(nativeSwitchRef.current, jsValue);
-    }
-  }, [props.value, native]);
+  const nativeCheckboxRef = useRef<React.ElementRef<typeof NativeCheckbox>>(null);
 
   const handleChange = (event: CheckboxChangeEvent) => {
     onChange?.(event);
     onValueChange?.(event.nativeEvent.value);
-    setNative({ value: event.nativeEvent.value });
   };
 
   return (
@@ -67,13 +20,13 @@ const Checkbox = ({ onChange, onValueChange, label, ...props }: CheckboxProps) =
         {...props}
         style={[styles.checkbox, props.style]}
         onChange={handleChange}
-        ref={nativeSwitchRef}
+        ref={nativeCheckboxRef}
       />
       {label && (
         <Pressable
           onPress={() => {
             onValueChange?.(!props.value);
-            setNative({ value: !props.value });
+            nativeCheckboxRef.current?.setNative({ value: !props.value });
           }}>
           <Text size="small">{label}</Text>
         </Pressable>

apps/menu-bar/src/components/Checkbox/types.tsx

@@ -0,0 +1,18 @@
+import { TargetedEvent, NativeSyntheticEvent, ViewProps } from 'react-native';
+
+interface CheckboxChangeEventData extends TargetedEvent {
+  value: boolean;
+}
+
+export interface CheckboxChangeEvent extends NativeSyntheticEvent<CheckboxChangeEventData> {}
+
+export type NativeCheckboxProps = ViewProps & {
+  disabled?: boolean;
+  onChange?: (event: CheckboxChangeEvent) => void;
+  value?: boolean;
+};
+
+export type CheckboxProps = Omit<NativeCheckboxProps, ''> & {
+  onValueChange?: (value: boolean) => void;
+  label?: string;
+};