@tra-tech/react-native-kitra/lib/module/components/Menu/Menu.js

UI kit for React Native

import { useCallback, useEffect, useRef, useState } from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { applyDefaults } from '../../core/KitraProvider';
import Divider from '../Divider/Divider';
const HEIGHT = Dimensions.get('window').height;
const styles = StyleSheet.create({
  container: {
    zIndex: 1
  },
  openButton: {
    alignItems: 'flex-end',
    marginRight: 10
  },
  menuContainer: {
    borderRadius: 5,
    position: 'absolute'
  },
  menuButton: {
    margin: 10,
    flexDirection: 'row'
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexGrow: 1
  }
});
const Menu = _ref => {
  let {
    typography,
    theme,
    items,
    dividerColor,
    menuStyle,
    labelStyle,
    containerStyle,
    rowStyle,
    closeOnPress,
    button = () => /*#__PURE__*/React.createElement(Text, {
      style: {
        color: theme === null || theme === void 0 ? void 0 : theme.primary,
        fontSize: 20,
        bottom: 5
      }
    }, "...")
  } = _ref;
  const [open, setOpen] = useState(false);
  const [size, setSize] = useState({
    x: 0,
    y: 0,
    width: 0,
    height: 0
  });
  const [menuHeight, setMenuHeight] = useState({
    height: 0
  });
  const menu = useRef(null);
  useEffect(() => {
    var _menu$current;
    (_menu$current = menu.current) === null || _menu$current === void 0 ? void 0 : _menu$current.measure((x, y, width, height, pageX, pageY) => {
      setSize({
        x: pageX,
        y: pageY,
        width,
        height
      });
    });
  }, [open]);
  const closeMenu = useCallback(() => {
    if (closeOnPress) {
      setOpen(false);
    }
  }, [closeOnPress]);
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, containerStyle],
    ref: menu
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    testID: "open_button",
    onPress: () => setOpen(!open),
    style: styles.openButton
  }, button(open)), open ? /*#__PURE__*/React.createElement(Animated.View, {
    testID: "menu_container",
    style: [styles.menuContainer, {
      backgroundColor: (menuStyle === null || menuStyle === void 0 ? void 0 : menuStyle.backgroundColor) || (theme === null || theme === void 0 ? void 0 : theme.white),
      right: 0
    }, HEIGHT - (size.y + menuHeight.height + size.height) >= 0 ? {
      top: size.height + 10
    } : {
      bottom: 30
    }, menuStyle],
    entering: FadeIn.duration(300),
    exiting: FadeOut.duration(300),
    onLayout: e => setMenuHeight({
      height: e.nativeEvent.layout.height
    })
  }, items.map((item, index) => /*#__PURE__*/React.createElement(View, {
    key: index,
    style: rowStyle
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    testID: `item_button_${index}`,
    onPress: () => {
      item.onPress && item.onPress();
      closeMenu();
    },
    style: styles.menuButton
  }, item.left && item.left, /*#__PURE__*/React.createElement(View, {
    style: styles.buttonContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: [{
      fontSize: typography === null || typography === void 0 ? void 0 : typography.body.smedium.fontSize,
      fontWeight: '500',
      lineHeight: typography === null || typography === void 0 ? void 0 : typography.body.smedium.lineHeight,
      paddingHorizontal: item.left ? 5 : 0,
      color: theme === null || theme === void 0 ? void 0 : theme.lightBlack
    }, labelStyle]
  }, item.label), item.right && item.right)), items.length - 1 !== index ? /*#__PURE__*/React.createElement(Divider, {
    theme: theme,
    typography: typography,
    color: dividerColor,
    style: {
      paddingHorizontal: 10
    }
  }) : null))) : null);
};
export default applyDefaults(Menu);
//# sourceMappingURL=Menu.js.map