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

UI kit for React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _KitraProvider = require("../../core/KitraProvider");
var _Divider = _interopRequireDefault(require("../Divider/Divider"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const HEIGHT = _reactNative.Dimensions.get('window').height;
const styles = _reactNative.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(_reactNative.Text, {
      style: {
        color: theme === null || theme === void 0 ? void 0 : theme.primary,
        fontSize: 20,
        bottom: 5
      }
    }, "...")
  } = _ref;
  const [open, setOpen] = (0, _react.useState)(false);
  const [size, setSize] = (0, _react.useState)({
    x: 0,
    y: 0,
    width: 0,
    height: 0
  });
  const [menuHeight, setMenuHeight] = (0, _react.useState)({
    height: 0
  });
  const menu = (0, _react.useRef)(null);
  (0, _react.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 = (0, _react.useCallback)(() => {
    if (closeOnPress) {
      setOpen(false);
    }
  }, [closeOnPress]);
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.container, containerStyle],
    ref: menu
  }, /*#__PURE__*/React.createElement(_reactNativeGestureHandler.TouchableOpacity, {
    testID: "open_button",
    onPress: () => setOpen(!open),
    style: styles.openButton
  }, button(open)), open ? /*#__PURE__*/React.createElement(_reactNativeReanimated.default.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: _reactNativeReanimated.FadeIn.duration(300),
    exiting: _reactNativeReanimated.FadeOut.duration(300),
    onLayout: e => setMenuHeight({
      height: e.nativeEvent.layout.height
    })
  }, items.map((item, index) => /*#__PURE__*/React.createElement(_reactNative.View, {
    key: index,
    style: rowStyle
  }, /*#__PURE__*/React.createElement(_reactNativeGestureHandler.TouchableOpacity, {
    testID: `item_button_${index}`,
    onPress: () => {
      item.onPress && item.onPress();
      closeMenu();
    },
    style: styles.menuButton
  }, item.left && item.left, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.buttonContainer
  }, /*#__PURE__*/React.createElement(_reactNative.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.default, {
    theme: theme,
    typography: typography,
    color: dividerColor,
    style: {
      paddingHorizontal: 10
    }
  }) : null))) : null);
};
var _default = (0, _KitraProvider.applyDefaults)(Menu);
exports.default = _default;
//# sourceMappingURL=Menu.js.map