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

Refreshed Windows 95 style UI components for your React Native app

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactNative = require("react-native");

var _theming = require("../../core/theming");

var _ = require("../..");

var _MenuItem = _interopRequireDefault(require("./MenuItem"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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); }

const Menu = ({
  anchor,
  children,
  open = false,
  orientation = 'vertical',
  style = {},
  theme,
  horizontalAlignment: horizontalAlign = 'left',
  verticalAlignment: verticalAlign = 'below',
  ...rest
}) => {
  const [menuSize, setMenuSize] = _react.default.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.default.createElement(_reactNative.View, {
    style: styles.wrapper
  }, anchor, open && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.menuWrapper, menuPosition]
  }, /*#__PURE__*/_react.default.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 = _reactNative.StyleSheet.create({
  wrapper: {
    position: 'relative'
  },
  menuWrapper: {
    position: 'absolute'
  },
  menu: {
    width: 'auto',
    position: 'absolute',
    height: 'auto',
    flexGrow: 0,
    padding: 6
  }
});

Menu.Item = _MenuItem.default;

var _default = (0, _theming.withTheme)(Menu);

exports.default = _default;
//# sourceMappingURL=Menu.js.map