@os-design-mobile/menu 1.0.75 → 1.0.76

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@os-design-mobile/menu",
-  "version": "1.0.75",
+  "version": "1.0.76",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design-mobile.git",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "react-native": "src/index.tsx",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx",
+    "!**/*.emotion.d.ts"
   ],
   "scripts": {
     "clean": "rimraf dist",
@@ -19,15 +28,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design-mobile/button": "^1.0.49",
-    "@os-design-mobile/icons": "^1.0.47",
-    "@os-design-mobile/modal": "^1.0.79",
-    "@os-design-mobile/theming": "^1.0.33",
+    "@os-design-mobile/button": "^1.0.50",
+    "@os-design-mobile/icons": "^1.0.48",
+    "@os-design-mobile/modal": "^1.0.80",
+    "@os-design-mobile/theming": "^1.0.34",
     "@os-design/menu-utils": "^1.0.14",
     "@os-design/use-forwarded-state": "^1.0.13"
   },
   "devDependencies": {
-    "@os-design-mobile/text": "^1.0.45"
+    "@os-design-mobile/text": "^1.0.46"
   },
   "peerDependencies": {
     "@emotion/native": ">=11",
@@ -39,5 +48,5 @@
     "react-native-safe-area-context": ">=3",
     "react-native-svg": ">=12"
   },
-  "gitHead": "4cac95fe2f5cd6dc74885a83b43a730008e20721"
+  "gitHead": "b5e7688a2d775c461838b1044ecaf29ddd52b3cd"
 }

package/src/@types/emotion.d.ts

@@ -0,0 +1,7 @@
+import '@emotion/react';
+import { Theme as BaseTheme } from '@os-design-mobile/theming';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends BaseTheme {}
+}

package/src/Menu.tsx

@@ -0,0 +1,69 @@
+import React, { forwardRef, PropsWithChildren, useMemo } from 'react';
+import { View } from 'react-native';
+import Modal, { ModalProps } from '@os-design-mobile/modal';
+import { MenuContext } from '@os-design/menu-utils';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import styled from '@emotion/native';
+import { clr, useTheme } from '@os-design-mobile/theming';
+import MenuGroup from './MenuGroup';
+
+export interface MenuProps extends PropsWithChildren<ModalProps> {
+  /**
+   * Whether the menu closes when the user selects a menu item.
+   * @default true
+   */
+  closeOnSelect?: boolean;
+}
+
+const StyledModal = styled(Modal)({
+  paddingLeft: 0,
+  paddingRight: 0,
+});
+
+/**
+ * The dropdown menu.
+ */
+const Menu = forwardRef<View, MenuProps>(
+  ({ closeOnSelect = true, onClose = () => {}, children, ...rest }, ref) => {
+    const { theme } = useTheme();
+    const childrenCount = useMemo(
+      () => React.Children.count(children),
+      [children]
+    );
+    const menuContext = useMemo(
+      () => ({ closeOnSelect, onClose }),
+      [closeOnSelect, onClose]
+    );
+
+    return (
+      <MenuContext.Provider value={menuContext}>
+        <StyledModal footer={null} onClose={onClose} {...rest} ref={ref}>
+          <SafeAreaProvider>
+            {React.Children.map(children, (child, index) => {
+              if (!React.isValidElement(child) || child.type !== MenuGroup)
+                return child;
+              let style = {};
+              if (index < childrenCount - 1) {
+                style = {
+                  paddingBottom: 0.4 * theme.fontSize,
+                  borderBottomWidth: 1,
+                  borderBottomColor: clr(theme.menuGroupColorDivider),
+                };
+              }
+              if (index > 0) {
+                style = {
+                  marginTop: theme.modalBodyPaddingVertical * theme.fontSize,
+                };
+              }
+              return React.cloneElement<any>(child, { style });
+            })}
+          </SafeAreaProvider>
+        </StyledModal>
+      </MenuContext.Provider>
+    );
+  }
+);
+
+Menu.displayName = 'Menu';
+
+export default Menu;

package/src/MenuDivider.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react';
+import { View, ViewProps } from 'react-native';
+import styled from '@emotion/native';
+import { clr } from '@os-design-mobile/theming';
+
+export type MenuDividerProps = ViewProps;
+
+const StyledView = styled.View((p) => ({
+  paddingTop: p.theme.menuDividerIndent * p.theme.fontSize,
+  borderBottomWidth: 1,
+  borderBottomColor: clr(p.theme.menuDividerColor),
+  marginBottom: p.theme.menuDividerIndent * p.theme.fontSize,
+}));
+
+/**
+ * The divider of menu items.
+ */
+const MenuDivider = forwardRef<View, MenuDividerProps>((props, ref) => (
+  <StyledView {...props} ref={ref} />
+));
+
+MenuDivider.displayName = 'MenuDivider';
+
+export default MenuDivider;

package/src/MenuGroup.tsx

@@ -0,0 +1,164 @@
+import styled from '@emotion/native';
+import { clr } from '@os-design-mobile/theming';
+import useForwardedState from '@os-design/use-forwarded-state';
+import React, {
+  forwardRef,
+  PropsWithChildren,
+  useCallback,
+  useMemo,
+} from 'react';
+import { View, ViewProps } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import MenuItem from './MenuItem';
+
+interface BaseMenuGroupProps<T> extends PropsWithChildren<ViewProps> {
+  /**
+   * The title of the menu group.
+   * @default undefined
+   */
+  title?: string;
+  /**
+   * The max number of options that the user can select. Zero means unlimited.
+   * Works only when multiple is true.
+   * @default 0
+   */
+  maxSelectedItems?: number;
+  /**
+   * Selected menu items.
+   * @default undefined
+   */
+  value?: T;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: T;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: T) => void;
+}
+interface MenuGroupNotMultipleProps extends BaseMenuGroupProps<string | null> {
+  /**
+   * Is it possible to select multiple values.
+   * @default false
+   */
+  multiple?: false;
+}
+interface MenuGroupMultipleProps extends BaseMenuGroupProps<string[]> {
+  /**
+   * Is it possible to select multiple values.
+   * @default false
+   */
+  multiple: true;
+}
+export type MenuGroupProps = MenuGroupNotMultipleProps | MenuGroupMultipleProps;
+
+const Title = styled.Text((p) => ({
+  fontWeight: '500',
+  fontSize: p.theme.sizes.small * p.theme.fontSize,
+  color: clr(p.theme.menuGroupColorTitle),
+  marginBottom: 0.4 * p.theme.fontSize,
+  paddingHorizontal: p.theme.modalBodyPaddingHorizontal * p.theme.fontSize,
+}));
+
+/**
+ * The group of menu items.
+ */
+const MenuGroup = forwardRef<View, MenuGroupProps>(
+  (
+    {
+      title,
+      multiple = false,
+      maxSelectedItems = 0,
+      value,
+      defaultValue,
+      onChange = () => {},
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [forwardedValue, setForwardedValue] = useForwardedState<any>({
+      value,
+      defaultValue,
+      onChange,
+    });
+    const safeAreaInsets = useSafeAreaInsets();
+
+    const onSelect = useCallback(
+      (v: string) => {
+        if (multiple) {
+          // Delete the value because it was already selected
+          if ((forwardedValue || []).includes(v)) {
+            setForwardedValue(
+              (forwardedValue || []).filter((item) => item !== v)
+            );
+            return;
+          }
+
+          // Add a new value if the number of selected items is less than max
+          if (
+            maxSelectedItems === 0 ||
+            (forwardedValue || []).length < maxSelectedItems
+          ) {
+            setForwardedValue([...(forwardedValue || []), v]);
+            return;
+          }
+          return;
+        }
+        setForwardedValue(v);
+      },
+      [forwardedValue, maxSelectedItems, multiple, setForwardedValue]
+    );
+
+    const menuItems = useMemo(
+      () =>
+        React.Children.map(children, (child) => {
+          if (!React.isValidElement(child) || child.type !== MenuItem)
+            return child;
+          const { value: childValue, onPress: childOnPress } = child.props;
+          const selected =
+            (multiple && (forwardedValue || []).includes(childValue)) ||
+            (!multiple && forwardedValue === childValue);
+          return React.cloneElement<any>(child, {
+            key: childValue,
+            selected,
+            onPress: (e) => {
+              if (!childValue) return;
+              onSelect(childValue);
+              if (childOnPress) childOnPress(e);
+            },
+          });
+        }),
+      [children, forwardedValue, multiple, onSelect]
+    );
+
+    return (
+      <View {...rest} ref={ref}>
+        {title && (
+          <Title
+            numberOfLines={1}
+            style={{
+              ...(safeAreaInsets.left > 0
+                ? { paddingLeft: safeAreaInsets.left }
+                : {}),
+              ...(safeAreaInsets.right > 0
+                ? { paddingRight: safeAreaInsets.right }
+                : {}),
+            }}
+          >
+            {title}
+          </Title>
+        )}
+        {menuItems}
+      </View>
+    );
+  }
+);
+
+MenuGroup.displayName = 'MenuGroup';
+
+export default MenuGroup;

package/src/MenuItem.tsx

@@ -0,0 +1,129 @@
+import React, {
+  forwardRef,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+import { clr, ThemeOverrider, useTheme } from '@os-design-mobile/theming';
+import { Check } from '@os-design-mobile/icons';
+import Button, { ButtonProps } from '@os-design-mobile/button';
+import { RectButton } from 'react-native-gesture-handler';
+import styled from '@emotion/native';
+import { MenuContext } from '@os-design/menu-utils';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export interface MenuItemProps
+  extends PropsWithChildren<Omit<ButtonProps, 'type' | 'size'>> {
+  /**
+   * Whether the menu item is selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The value of the menu item.
+   * @default undefined
+   */
+  value?: string;
+}
+
+const selectedStyles = (p) =>
+  p.selected
+    ? {
+        backgroundColor: clr(p.theme.menuItemSelectedColorBg),
+      }
+    : {};
+
+type StyledButtonProps = Required<Pick<MenuItemProps, 'selected'>>;
+const StyledButton = styled(Button)<StyledButtonProps>(selectedStyles);
+
+/**
+ * The base menu item.
+ */
+const MenuItem = forwardRef<RectButton, MenuItemProps>(
+  (
+    {
+      selected = false,
+      value,
+      right,
+      viewProps = {},
+      textProps = {},
+      onPress = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const { closeOnSelect, onClose } = useContext(MenuContext);
+    const onPressRef = useRef<MenuItemProps['onPress']>();
+    const { theme } = useTheme();
+    const safeAreaInsets = useSafeAreaInsets();
+
+    useEffect(() => {
+      onPressRef.current = onPress;
+    }, [onPress]);
+
+    const clickHandler = useCallback(
+      (e) => {
+        if (onPressRef.current) onPressRef.current(e);
+        if (closeOnSelect) onClose();
+      },
+      [closeOnSelect, onClose]
+    );
+
+    return (
+      <ThemeOverrider
+        overrides={(t) => ({
+          buttonGhostColorText: t.colorText,
+          borderRadius: 0,
+          buttonHeight: theme.menuItemHeight,
+          buttonPaddingHorizontal: theme.menuItemPaddingHorizontal,
+        })}
+      >
+        <StyledButton
+          selected={selected}
+          right={
+            selected ? (
+              <ThemeOverrider
+                overrides={(t) => ({ colorText: t.menuItemSelectedColorIcon })}
+              >
+                <Check />
+              </ThemeOverrider>
+            ) : (
+              right
+            )
+          }
+          type='ghost'
+          onPress={clickHandler}
+          viewProps={{
+            ...viewProps,
+            style: {
+              ...(safeAreaInsets.left > 0
+                ? { paddingLeft: safeAreaInsets.left }
+                : {}),
+              ...(safeAreaInsets.right > 0
+                ? { paddingRight: safeAreaInsets.right }
+                : {}),
+              ...(typeof viewProps?.style === 'object' ? viewProps.style : {}),
+            },
+          }}
+          textProps={{
+            ...textProps,
+            style: {
+              flex: 1,
+              textAlign: 'left',
+              fontWeight: 'normal',
+              ...(typeof textProps?.style === 'object' ? textProps.style : {}),
+            },
+          }}
+          {...rest}
+          ref={ref}
+        />
+      </ThemeOverrider>
+    );
+  }
+);
+
+MenuItem.displayName = 'MenuItem';
+
+export default MenuItem;

package/src/index.ts

@@ -0,0 +1,9 @@
+export { default as Menu } from './Menu';
+export { default as MenuDivider } from './MenuDivider';
+export { default as MenuGroup } from './MenuGroup';
+export { default as MenuItem } from './MenuItem';
+
+export * from './Menu';
+export * from './MenuDivider';
+export * from './MenuGroup';
+export * from './MenuItem';