react95-native/dist/module/components/Menu/Menu.js

Refreshed Windows 95 style UI components for your React Native app

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { withTheme } from '../../core/theming';
import { Panel } from '../..';
import MenuItem from './MenuItem';

const Menu = ({
  anchor,
  children,
  open = false,
  orientation = 'vertical',
  style = {},
  theme,
  horizontalAlignment: horizontalAlign = 'left',
  verticalAlignment: verticalAlign = 'below',
  ...rest
}) => {
  const [menuSize, setMenuSize] = React.useState({
    width: 0,
    height: 0
  });

  const handleMenuLayout = e => {
    const {
      width,
      height
    } = e.nativeEvent.layout;
    setMenuSize({
      width,
      height
    });
  };

  const menuPosition = {};

  if (verticalAlign === 'below') {
    menuPosition.top = '100%';
  } else {
    menuPosition.top = -menuSize.height;
  }

  if (horizontalAlign === 'left') {
    menuPosition.left = 0;
  } else {
    menuPosition.right = menuSize.width;
  }

  return /*#__PURE__*/React.createElement(View, {
    style: styles.wrapper
  }, anchor, open && /*#__PURE__*/React.createElement(View, {
    style: [styles.menuWrapper, menuPosition]
  }, /*#__PURE__*/React.createElement(Panel, _extends({}, rest, {
    theme: theme,
    variant: "raised",
    elevation: 2,
    onLayout: handleMenuLayout,
    style: [styles.menu, {
      display: 'flex',
      flexDirection: orientation === 'vertical' ? 'column' : 'row'
    }, style]
  }), children)));
};

const styles = StyleSheet.create({
  wrapper: {
    position: 'relative'
  },
  menuWrapper: {
    position: 'absolute'
  },
  menu: {
    width: 'auto',
    position: 'absolute',
    height: 'auto',
    flexGrow: 0,
    padding: 6
  }
});
Menu.Item = MenuItem;
export default withTheme(Menu);
//# sourceMappingURL=Menu.js.map