@nexara/nativeflow/lib/commonjs/components/Menu/Menu.js

Beautiful, responsive, and customizable UI components for React Native – built for performance and seamless experiences.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _index = require("../StyledComponents/index.js");
var _Portal = _interopRequireDefault(require("../Portal/Portal.js"));
var _calculations = require("./calculations.js");
var _ResponsiveCalculations = require("../../helpers/ResponsiveCalculations.js");
var _index2 = require("../../hooks/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Menu = ({
  placement = 'top',
  anchor,
  disableBuiltInState = false,
  isOpen = false,
  portalKey,
  onRequestOpen,
  onRequestClose,
  onSelect,
  style,
  children
}) => {
  const uniqueKey = (0, _react.useId)();
  const [isVisible, setIsVisible] = (0, _react.useState)(false);
  const anchorLayoutRef = (0, _react.useRef)({
    pageY: 0,
    pageX: 0,
    height: 0,
    width: 0
  });
  const menuLayoutRef = (0, _react.useRef)({
    height: 0,
    width: 0
  });
  const buttonRef = (0, _react.useRef)(null);
  const animatedScaleRef = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
  const theme = (0, _index2.useTheme)();
  const positions = (0, _react.useCallback)(() => (0, _calculations.positionCalculations)(anchorLayoutRef.current, menuLayoutRef.current, placement), [menuLayoutRef, anchorLayoutRef, placement])();
  const STYLES = (0, _react.useMemo)(Styles, []);
  (0, _react.useEffect)(() => {
    _reactNative.Animated.timing(animatedScaleRef, {
      toValue: disableBuiltInState && isOpen || isVisible ? 1 : 0,
      duration: 150,
      useNativeDriver: true
    }).start();
  }, [isOpen, isVisible]);
  const measureLayout = (0, _react.useCallback)(() => {
    return new Promise(resolve => {
      buttonRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
        anchorLayoutRef.current = {
          pageY,
          pageX,
          height,
          width
        };
        resolve(true);
      });
    });
  }, []);
  const onOpen = async () => {
    await measureLayout();
    if (disableBuiltInState) {
      onRequestOpen?.();
    } else {
      setIsVisible(true);
    }
  };
  const onClose = () => {
    if (disableBuiltInState) {
      onRequestClose?.();
    } else {
      setIsVisible(false);
    }
  };
  const renderChildren = (0, _react.useCallback)(() => {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
      children: _react.default.Children?.toArray(children).map(child => {
        if (/*#__PURE__*/_react.default.isValidElement(child)) {
          return /*#__PURE__*/_react.default.cloneElement(child, {
            onPress: () => {
              child?.props?.onPress?.();
              onSelect?.(child?.props?.name);
              onClose();
            }
          });
        }
        return null;
      })
    });
  }, [children])();
  const scale = disableBuiltInState ? Number(isOpen) : Number(isVisible);
  const pointerEvent = isVisible && !disableBuiltInState || isOpen && disableBuiltInState ? 'auto' : 'none';
  const dynamicStyles = {
    left: positions.left,
    top: positions.top,
    backgroundColor: theme?.colors.background.elevated
  };
  const menuAnimatedStyle = {
    transform: [{
      scale: animatedScaleRef
    }],
    opacity: animatedScaleRef
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
      name: portalKey ?? `menu-${uniqueKey}`,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
        style: [_reactNative.StyleSheet.absoluteFill, {
          transform: [{
            scale
          }]
        }],
        pointerEvents: pointerEvent,
        onPress: onClose,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
          onStartShouldSetResponder: () => true,
          style: [STYLES.MENU_CONT, dynamicStyles, menuAnimatedStyle, style],
          onLayout: ({
            nativeEvent: {
              layout: {
                height,
                width
              }
            }
          }) => menuLayoutRef.current = {
            width,
            height
          },
          children: renderChildren
        })
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StyledView, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StyledView, {
        ref: buttonRef,
        onLayout: measureLayout,
        alignSelf: "flex-start",
        children: anchor && /*#__PURE__*/_react.default.isValidElement(anchor) && /*#__PURE__*/_react.default.cloneElement(anchor, {
          onPress: onOpen
        })
      })
    })]
  });
};
var _default = exports.default = Menu;
const Styles = () => _reactNative.StyleSheet.create({
  MENU_CONT: {
    shadowColor: "#000",
    backgroundColor: '#fff',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.23,
    shadowRadius: 2.62,
    elevation: 4,
    position: 'absolute',
    borderRadius: 5,
    maxHeight: 400,
    minWidth: (0, _ResponsiveCalculations.horizontalScale)(150),
    paddingVertical: (0, _ResponsiveCalculations.verticalScale)(5)
  }
});
//# sourceMappingURL=Menu.js.map