refactor: replace 'preact' with 'react' (#1048)

app/assets/javascripts/Components/Menu/MenuItem.tsx

@@ -1,21 +1,15 @@
-import { ComponentChildren, FunctionComponent, VNode } from 'preact'
-import { forwardRef, Ref } from 'preact/compat'
-import { JSXInternal } from 'preact/src/jsx'
-import { Icon } from '@/Components/Icon/Icon'
-import { Switch, SwitchProps } from '@/Components/Switch/Switch'
+import { forwardRef, MouseEventHandler, ReactNode, Ref } from 'react'
+import Icon from '@/Components/Icon/Icon'
+import Switch from '@/Components/Switch/Switch'
+import { SwitchProps } from '@/Components/Switch/SwitchProps'
 import { IconType } from '@standardnotes/snjs'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
-
-export enum MenuItemType {
-  IconButton,
-  RadioButton,
-  SwitchButton,
-}
+import { MenuItemType } from './MenuItemType'
 
 type MenuItemProps = {
   type: MenuItemType
-  children: ComponentChildren
-  onClick?: JSXInternal.MouseEventHandler<HTMLButtonElement>
+  children: ReactNode
+  onClick?: MouseEventHandler<HTMLButtonElement>
   onChange?: SwitchProps['onChange']
   onBlur?: (event: { relatedTarget: EventTarget | null }) => void
   className?: string
@@ -25,7 +19,7 @@ type MenuItemProps = {
   tabIndex?: number
 }
 
-export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
+const MenuItem = forwardRef(
   (
     {
       children,
@@ -42,63 +36,42 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
     ref: Ref<HTMLButtonElement>,
   ) => {
     return type === MenuItemType.SwitchButton && typeof onChange === 'function' ? (
-      <button
-        className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between"
-        onClick={() => {
-          onChange(!checked)
-        }}
-        onBlur={onBlur}
-        tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
-        role="menuitemcheckbox"
-        aria-checked={checked}
-      >
-        <span className="flex flex-grow items-center">{children}</span>
-        <Switch className="px-0" checked={checked} />
-      </button>
+      <li className="list-style-none" role="none">
+        <button
+          ref={ref}
+          className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between"
+          onClick={() => {
+            onChange(!checked)
+          }}
+          onBlur={onBlur}
+          tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
+          role="menuitemcheckbox"
+          aria-checked={checked}
+        >
+          <span className="flex flex-grow items-center">{children}</span>
+          <Switch className="px-0" checked={checked} />
+        </button>
+      </li>
     ) : (
-      <button
-        ref={ref}
-        role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
-        tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
-        className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${className}`}
-        onClick={onClick}
-        onBlur={onBlur}
-        {...(type === MenuItemType.RadioButton ? { 'aria-checked': checked } : {})}
-      >
-        {type === MenuItemType.IconButton && icon ? <Icon type={icon} className={iconClassName} /> : null}
-        {type === MenuItemType.RadioButton && typeof checked === 'boolean' ? (
-          <div className={`pseudo-radio-btn ${checked ? 'pseudo-radio-btn--checked' : ''} flex-shrink-0`}></div>
-        ) : null}
-        {children}
-      </button>
-    )
-  },
-)
-
-export const MenuItemSeparator: FunctionComponent = () => <div role="separator" className="h-1px my-2 bg-border"></div>
-
-type ListElementProps = {
-  isFirstMenuItem: boolean
-  children: ComponentChildren
-}
-
-export const MenuItemListElement: FunctionComponent<ListElementProps> = forwardRef(
-  ({ children, isFirstMenuItem }: ListElementProps, ref: Ref<HTMLLIElement>) => {
-    const child = children as VNode<unknown>
-    return (
-      <li className="list-style-none" role="none" ref={ref}>
-        {{
-          ...child,
-          props: {
-            ...(child.props ? { ...child.props } : {}),
-            ...(child.type === MenuItem
-              ? {
-                  tabIndex: isFirstMenuItem ? 0 : -1,
-                }
-              : {}),
-          },
-        }}
+      <li className="list-style-none" role="none">
+        <button
+          ref={ref}
+          role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
+          tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
+          className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${className}`}
+          onClick={onClick}
+          onBlur={onBlur}
+          {...(type === MenuItemType.RadioButton ? { 'aria-checked': checked } : {})}
+        >
+          {type === MenuItemType.IconButton && icon ? <Icon type={icon} className={iconClassName} /> : null}
+          {type === MenuItemType.RadioButton && typeof checked === 'boolean' ? (
+            <div className={`pseudo-radio-btn ${checked ? 'pseudo-radio-btn--checked' : ''} flex-shrink-0`}></div>
+          ) : null}
+          {children}
+        </button>
       </li>
     )
   },
 )
+
+export default MenuItem