refactor: menu items (#2057)

2022-11-27 22:53:30 +05:30
parent 8145cdb8ac
commit 3c91b0cb17
24 changed files with 291 additions and 352 deletions
--- a/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
@@ -1,79 +1,34 @@
-import { forwardRef, MouseEventHandler, ReactNode, Ref } from 'react'
+import { ComponentPropsWithoutRef, 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/Constants'
-import { MenuItemType } from './MenuItemType'
-import RadioIndicator from '../Radio/RadioIndicator'
 import { classNames } from '@standardnotes/utils'
 import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
+import MenuListItem from './MenuListItem'

 type MenuItemProps = {
  children: ReactNode
-  type?: MenuItemType
  onClick?: MouseEventHandler<HTMLButtonElement>
-  onChange?: SwitchProps['onChange']
  onBlur?: (event: { relatedTarget: EventTarget | null }) => void
  className?: string
-  checked?: boolean
  icon?: IconType
  iconClassName?: string
  tabIndex?: number
  disabled?: boolean
  shortcut?: PlatformedKeyboardShortcut
-}
+} & ComponentPropsWithoutRef<'button'>

 const MenuItem = forwardRef(
  (
-    {
-      children,
-      onClick,
-      onChange,
-      onBlur,
-      className = '',
-      type = MenuItemType.IconButton,
-      checked,
-      icon,
-      iconClassName,
-      tabIndex,
-      disabled,
-      shortcut,
-    }: MenuItemProps,
+    { children, className = '', icon, iconClassName, tabIndex, shortcut, ...props }: MenuItemProps,
    ref: Ref<HTMLButtonElement>,
  ) => {
-    return type === MenuItemType.SwitchButton && typeof onChange === 'function' ? (
-      <li className="list-none" role="none">
+    return (
+      <MenuListItem>
        <button
-          disabled={disabled}
          ref={ref}
-          className={classNames(
-            'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-2 md:py-1.5',
-            'text-left text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none',
-            'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
-          )}
-          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>
-          <div className="flex">
-            {shortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={shortcut} />}
-            <Switch disabled={disabled} className="px-0" checked={checked} />
-          </div>
-        </button>
-      </li>
-    ) : (
-      <li className="list-none" role="none">
-        <button
-          disabled={disabled}
-          ref={ref}
-          role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
+          role="menuitem"
          tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
          className={classNames(
            'flex w-full cursor-pointer border-0 bg-transparent px-3 py-2 text-left md:py-1.5',
@@ -82,20 +37,13 @@ const MenuItem = forwardRef(
            className,
            className.includes('items-') ? '' : 'items-center',
          )}
-          onClick={onClick}
-          onBlur={onBlur}
-          {...(type === MenuItemType.RadioButton ? { 'aria-checked': checked } : {})}
+          {...props}
        >
          {shortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={shortcut} />}
-          {type === MenuItemType.IconButton && icon ? (
-            <Icon type={icon} className={`${iconClassName} flex-shrink-0`} />
-          ) : null}
-          {type === MenuItemType.RadioButton && typeof checked === 'boolean' ? (
-            <RadioIndicator disabled={disabled} checked={checked} className="flex-shrink-0" />
-          ) : null}
+          {icon ? <Icon type={icon} className={classNames('flex-shrink-0', iconClassName)} /> : null}
          {children}
        </button>
-      </li>
+      </MenuListItem>
    )
  },
 )
--- a/packages/web/src/javascripts/Components/Menu/MenuListItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuListItem.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from 'react'
+
+const MenuListItem = ({ children }: { children: ReactNode }) => {
+  return (
+    <li className="list-none" role="none">
+      {children}
+    </li>
+  )
+}
+
+export default MenuListItem
--- a/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
@@ -0,0 +1,46 @@
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import { classNames } from '@standardnotes/snjs'
+import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
+import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, ReactNode } from 'react'
+import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
+import RadioIndicator from '../Radio/RadioIndicator'
+import MenuListItem from './MenuListItem'
+
+type Props = {
+  checked: boolean
+  children: ReactNode
+  shortcut?: PlatformedKeyboardShortcut
+} & ComponentPropsWithoutRef<'button'>
+
+const MenuRadioButtonItem = forwardRef(
+  (
+    { checked, disabled, tabIndex, children, shortcut, className, ...props }: Props,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
+    return (
+      <MenuListItem>
+        <button
+          ref={ref}
+          role="menuitemradio"
+          tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
+          className={classNames(
+            'flex w-full cursor-pointer border-0 bg-transparent px-3 py-2 text-left md:py-1.5',
+            'text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground',
+            'focus:bg-info-backdrop focus:shadow-none md:text-tablet-menu-item lg:text-menu-item',
+            className,
+            className?.includes('items-') ? '' : 'items-center',
+          )}
+          aria-checked={checked}
+          disabled={disabled}
+          {...props}
+        >
+          {shortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={shortcut} />}
+          <RadioIndicator disabled={disabled} checked={checked} className="flex-shrink-0" />
+          {children}
+        </button>
+      </MenuListItem>
+    )
+  },
+)
+
+export default MenuRadioButtonItem
--- a/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
@@ -0,0 +1,53 @@
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import { classNames } from '@standardnotes/snjs'
+import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
+import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, ReactNode } from 'react'
+import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
+import Switch from '../Switch/Switch'
+import { SwitchProps } from '../Switch/SwitchProps'
+import MenuListItem from './MenuListItem'
+
+type Props = {
+  checked: boolean
+  children: ReactNode
+  onChange: NonNullable<SwitchProps['onChange']>
+  shortcut?: PlatformedKeyboardShortcut
+} & Omit<ComponentPropsWithoutRef<'button'>, 'onChange'>
+
+const MenuSwitchButtonItem = forwardRef(
+  (
+    { checked, onChange, disabled, onBlur, tabIndex, children, shortcut, className, ...props }: Props,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
+    return (
+      <MenuListItem>
+        <button
+          disabled={disabled}
+          ref={ref}
+          className={classNames(
+            'flex w-full cursor-pointer border-0 bg-transparent px-3 py-2 md:py-1.5',
+            'text-left text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none',
+            'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
+            className,
+          )}
+          onClick={() => {
+            onChange(!checked)
+          }}
+          onBlur={onBlur}
+          tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
+          role="menuitemcheckbox"
+          aria-checked={checked}
+          {...props}
+        >
+          <span className="flex flex-grow items-center">{children}</span>
+          <div className="flex">
+            {shortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={shortcut} />}
+            <Switch disabled={disabled} className="px-0" checked={checked} />
+          </div>
+        </button>
+      </MenuListItem>
+    )
+  },
+)
+
+export default MenuSwitchButtonItem