@100mslive/react-native-room-kit 0.0.1

package/src/components/MenuModal/Menu.tsx

@@ -0,0 +1,305 @@
+import React from 'react';
+
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  I18nManager,
+  Modal,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import type { LayoutChangeEvent, ViewStyle } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+
+import { COLORS } from '../../utils/theme';
+
+export interface MenuProps {
+  children?: React.ReactNode;
+  anchor?: React.ReactNode;
+  style?: ViewStyle;
+  onRequestClose?(): void;
+  animationDuration?: number;
+  testID?: string;
+  visible?: boolean;
+}
+
+enum States {
+  Hidden,
+  Animating,
+  Shown,
+}
+
+interface State {
+  buttonHeight: number;
+  buttonWidth: number;
+  left: number;
+  menuHeight: number;
+  menuSizeAnimation: Animated.ValueXY;
+  menuState: States;
+  menuWidth: number;
+  opacityAnimation: Animated.Value;
+  top: number;
+}
+
+const EASING = Easing.bezier(0.4, 0, 0.2, 1);
+const SCREEN_INDENT = 8;
+
+export class Menu extends React.Component<MenuProps, State> {
+  _container: View | null = null;
+
+  static defaultProps = {
+    animationDuration: 300,
+  };
+
+  constructor(props: MenuProps) {
+    super(props);
+
+    this.state = {
+      menuState: States.Hidden,
+
+      top: 0,
+      left: 0,
+
+      menuWidth: 0,
+      menuHeight: 0,
+
+      buttonWidth: 0,
+      buttonHeight: 0,
+
+      menuSizeAnimation: new Animated.ValueXY({ x: 0, y: 0 }),
+      opacityAnimation: new Animated.Value(0),
+    };
+  }
+
+  componentDidMount() {
+    if (!this.props.visible) {
+      return;
+    }
+
+    this.show();
+  }
+
+  componentDidUpdate(prevProps: MenuProps) {
+    if (prevProps.visible === this.props.visible) {
+      return;
+    }
+
+    if (this.props.visible) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  private setContainerRef = (ref: View) => {
+    this._container = ref;
+  };
+
+  // Start menu animation
+  private onMenuLayout = (e: LayoutChangeEvent) => {
+    if (this.state.menuState === States.Animating) {
+      return;
+    }
+
+    const { width, height } = e.nativeEvent.layout;
+
+    this.setState(
+      {
+        menuState: States.Animating,
+        menuWidth: width,
+        menuHeight: height,
+      },
+      () => {
+        Animated.parallel([
+          Animated.timing(this.state.menuSizeAnimation, {
+            toValue: { x: width, y: height },
+            duration: this.props.animationDuration,
+            easing: EASING,
+            useNativeDriver: false,
+          }),
+          Animated.timing(this.state.opacityAnimation, {
+            toValue: 1,
+            duration: this.props.animationDuration,
+            easing: EASING,
+            useNativeDriver: false,
+          }),
+        ]).start();
+      }
+    );
+  };
+
+  private show = () => {
+    this._container?.measureInWindow((left, top, buttonWidth, buttonHeight) => {
+      this.setState({
+        buttonHeight,
+        buttonWidth,
+        left,
+        menuState: States.Shown,
+        top,
+      });
+    });
+  };
+
+  private hide = () => {
+    Animated.timing(this.state.opacityAnimation, {
+      toValue: 0,
+      duration: this.props.animationDuration,
+      easing: EASING,
+      useNativeDriver: false,
+    }).start(() => {
+      // Reset state
+      this.setState({
+        menuState: States.Hidden,
+        menuSizeAnimation: new Animated.ValueXY({ x: 0, y: 0 }),
+        opacityAnimation: new Animated.Value(0),
+      });
+    });
+  };
+
+  private onRequestClose = () => {
+    this.props.onRequestClose?.();
+  };
+
+  render() {
+    const { isRTL } = I18nManager;
+
+    const dimensions = Dimensions.get('window');
+    const { width: windowWidth } = dimensions;
+    const windowHeight = dimensions.height - (StatusBar.currentHeight || 0);
+
+    const {
+      menuSizeAnimation,
+      menuWidth,
+      menuHeight,
+      buttonWidth,
+      buttonHeight,
+      opacityAnimation,
+    } = this.state;
+    const menuSize = {
+      width: menuSizeAnimation.x,
+      height: menuSizeAnimation.y,
+    };
+
+    // Adjust position of menu
+    let { left, top } = this.state;
+    const transforms = [];
+
+    if (
+      (isRTL && left + buttonWidth - menuWidth > SCREEN_INDENT) ||
+      (!isRTL && left + menuWidth > windowWidth - SCREEN_INDENT)
+    ) {
+      transforms.push({
+        translateX: Animated.multiply(menuSizeAnimation.x, -1),
+      });
+
+      left = Math.min(windowWidth - SCREEN_INDENT, left + buttonWidth);
+    } else if (left < SCREEN_INDENT) {
+      left = SCREEN_INDENT;
+    }
+
+    // Flip by Y axis if menu hits bottom screen border
+    if (top > windowHeight - menuHeight - SCREEN_INDENT) {
+      transforms.push({
+        translateY: Animated.multiply(menuSizeAnimation.y, -1),
+      });
+
+      top = windowHeight - SCREEN_INDENT;
+      top = Math.min(windowHeight - SCREEN_INDENT, top + buttonHeight);
+    } else if (top < SCREEN_INDENT) {
+      top = SCREEN_INDENT;
+    }
+
+    const shadowMenuContainerStyle = {
+      opacity: opacityAnimation,
+      transform: transforms,
+      top,
+
+      // Switch left to right for rtl devices
+      ...(isRTL ? { right: left } : { left }),
+    };
+
+    const { menuState } = this.state;
+    const animationStarted = menuState === States.Animating;
+    const modalVisible = menuState === States.Shown || animationStarted;
+
+    const { testID, anchor, style, children } = this.props;
+
+    return (
+      <View ref={this.setContainerRef} collapsable={false} testID={testID}>
+        {anchor}
+
+        <Modal
+          visible={modalVisible}
+          onRequestClose={this.onRequestClose}
+          supportedOrientations={[
+            'portrait',
+            'portrait-upside-down',
+            'landscape',
+            'landscape-left',
+            'landscape-right',
+          ]}
+          transparent
+        >
+          <TouchableWithoutFeedback
+            onPress={this.onRequestClose}
+            accessible={false}
+          >
+            <View style={StyleSheet.absoluteFill}>
+              <Animated.View
+                onLayout={this.onMenuLayout}
+                style={[
+                  styles.shadowMenuContainer,
+                  shadowMenuContainerStyle,
+                  style,
+                ]}
+              >
+                <Animated.View
+                  style={[styles.menuContainer, animationStarted && menuSize]}
+                >
+                  <ScrollView
+                    style={styles.children}
+                    keyboardShouldPersistTaps="always"
+                  >
+                    {children}
+                  </ScrollView>
+                </Animated.View>
+              </Animated.View>
+            </View>
+          </TouchableWithoutFeedback>
+        </Modal>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  shadowMenuContainer: {
+    position: 'absolute',
+    backgroundColor: COLORS.WHITE,
+    borderRadius: 4,
+    opacity: 0,
+
+    // Shadow
+    ...Platform.select({
+      ios: {
+        shadowColor: COLORS.BLACK,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.14,
+        shadowRadius: 2,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  },
+  menuContainer: {
+    overflow: 'hidden',
+  },
+  children: {
+    maxHeight: 300,
+  },
+});

package/src/components/MenuModal/MenuDivider.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { StyleSheet, View } from 'react-native';
+
+import { COLORS } from '../../utils/theme';
+
+export interface MenuDividerProps {
+  color?: string;
+}
+
+export function MenuDivider({
+  color = COLORS.BORDER.DEFAULT,
+}: MenuDividerProps) {
+  return <View style={[styles.divider, { borderBottomColor: color }]} />;
+}
+
+const styles = StyleSheet.create({
+  divider: {
+    flex: 1,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+});

package/src/components/MenuModal/MenuItem.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import type { PressableProps, TextStyle, ViewStyle } from 'react-native';
+
+import { COLORS } from '../../utils/theme';
+
+export type MenuItemProps = {
+  children: React.ReactNode;
+  disabled?: boolean;
+  disabledTextColor?: string;
+  pressColor?: string;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+} & PressableProps;
+
+export function MenuItem({
+  children,
+  disabled = false,
+  disabledTextColor = COLORS.TEXT.DISABLED,
+  onPress,
+  pressColor = COLORS.TEXT.MEDIUM_EMPHASIS,
+  style,
+  textStyle,
+  ...props
+}: MenuItemProps) {
+  return (
+    <Pressable
+      disabled={disabled}
+      style={({ pressed }) => ({
+        backgroundColor:
+          Platform.OS !== 'android' && pressed ? pressColor : undefined,
+      })}
+      android_ripple={{ color: pressColor }}
+      onPress={onPress}
+      {...props}
+    >
+      <View style={[styles.container, style]}>
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.title,
+            disabled && { color: disabledTextColor },
+            textStyle,
+          ]}
+        >
+          {children}
+        </Text>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 48,
+    justifyContent: 'center',
+    maxWidth: 248,
+    minWidth: 124,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '400',
+    paddingHorizontal: 16,
+    textAlign: 'left',
+  },
+});

package/src/components/MenuModal/index.ts

@@ -0,0 +1,7 @@
+export { Menu } from './Menu';
+export { MenuDivider } from './MenuDivider';
+export { MenuItem } from './MenuItem';
+
+export type { MenuDividerProps } from './MenuDivider';
+export type { MenuItemProps } from './MenuItem';
+export type { MenuProps } from './Menu';