@kirz/react-native-toolkit/lib/module/components/Menu/Menu.js

Toolkit to speed up React Native development

import { Portal } from '@gorhom/portal';
import { useFocusEffect } from '@react-navigation/native';
import React, { cloneElement, createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { TouchableWithoutFeedback } from 'react-native';
import Animated, { interpolateColor, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import { scaleY } from '../../utils/scale';
export const MenuContext = /*#__PURE__*/createContext({});
export function Menu(_ref) {
  let {
    button: originalButton,
    children,
    anchor,
    position,
    offset,
    overlayColor,
    style
  } = _ref;
  const [isOpened, setIsOpened] = useState(false);
  const animSharedValue = useSharedValue(0);
  const buttonRef = useRef();
  const buttonLayoutRef = useRef();
  const menuLayoutRef = useRef();
  const menuRef = useRef();
  const button = /*#__PURE__*/cloneElement(originalButton, {
    ref: buttonRef,
    onPress: async function () {
      var _originalButton$props, _originalButton$props2;
      if (!buttonLayoutRef.current && buttonRef.current) {
        await new Promise(resolve => {
          buttonRef.current.measureInWindow((left, top, width, height) => {
            buttonLayoutRef.current = {
              x: left,
              y: top,
              width,
              height
            };
            resolve();
          });
        });
      }
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
      originalButton === null || originalButton === void 0 ? void 0 : (_originalButton$props = originalButton.props) === null || _originalButton$props === void 0 ? void 0 : (_originalButton$props2 = _originalButton$props.onPress) === null || _originalButton$props2 === void 0 ? void 0 : _originalButton$props2.call(_originalButton$props, ...args);
      setIsOpened(x => !x);
    }
  });
  const {
    left,
    top
  } = useMemo(() => {
    if (!buttonLayoutRef.current || !menuLayoutRef.current) {
      return {
        left: 0,
        top: 0
      };
    }
    const anchorPointX = buttonLayoutRef.current.x + ((anchor === null || anchor === void 0 ? void 0 : anchor.horizontal) === 'right' ? buttonLayoutRef.current.width : (anchor === null || anchor === void 0 ? void 0 : anchor.horizontal) === 'center' ? buttonLayoutRef.current.width / 2 : 0);
    const anchorPointY = buttonLayoutRef.current.y + ((anchor === null || anchor === void 0 ? void 0 : anchor.vertical) === 'top' ? 0 : (anchor === null || anchor === void 0 ? void 0 : anchor.vertical) === 'center' ? buttonLayoutRef.current.height / 2 : buttonLayoutRef.current.height);
    const transformX = ((offset === null || offset === void 0 ? void 0 : offset.horizontal) ?? 0) + ((position === null || position === void 0 ? void 0 : position.horizontal) === 'left' ? -menuLayoutRef.current.width : (position === null || position === void 0 ? void 0 : position.horizontal) === 'center' ? -menuLayoutRef.current.width / 2 : 0);
    const transformY = ((offset === null || offset === void 0 ? void 0 : offset.vertical) ?? 0) + ((position === null || position === void 0 ? void 0 : position.vertical) === 'top' ? -menuLayoutRef.current.height : (position === null || position === void 0 ? void 0 : position.vertical) === 'center' ? -menuLayoutRef.current.height / 2 : 0);
    return {
      left: anchorPointX + transformX,
      top: anchorPointY + transformY
    };
  }, [anchor, position, isOpened]);
  const menuData = useMemo(() => ({
    isOpened,
    closeMenu: () => setIsOpened(false),
    openMenu: () => setIsOpened(true)
  }), [isOpened]);
  const animatedOverlayStyle = useAnimatedStyle(() => ({
    backgroundColor: overlayColor ? interpolateColor(animSharedValue.value, [0, 1], ['rgba(0,0,0,0)', overlayColor]) : 'transparent'
  }), []);
  const animatedMenuStyle = useAnimatedStyle(() => ({
    opacity: animSharedValue.value
  }), []);
  useFocusEffect(useCallback(() => {
    return () => {
      setIsOpened(false);
    };
  }, []));
  useEffect(() => {
    animSharedValue.value = withTiming(isOpened ? 1 : 0, {
      duration: 100
    });
  }, [isOpened]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuContext.Provider, {
    value: menuData
  }, button), /*#__PURE__*/React.createElement(Portal, {
    hostName: "ModalHost"
  }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
    value: menuData
  }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    onPress: () => {
      setIsOpened(false);
    }
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: [{
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      top: 0
    }, animatedOverlayStyle],
    pointerEvents: isOpened ? 'auto' : 'none'
  }, /*#__PURE__*/React.createElement(Animated.View, {
    ref: menuRef,
    onLayout: () => {
      if (menuLayoutRef.current || !menuRef.current || !menuRef.current) {
        return;
      }
      menuRef.current.measureInWindow((left, top, width, height) => {
        menuLayoutRef.current = {
          x: left,
          y: top,
          width,
          height
        };
      });
    },
    style: [{
      position: 'absolute',
      left,
      top,
      shadowColor: 'black',
      shadowOpacity: 0.1,
      shadowOffset: {
        width: 0,
        height: scaleY(4)
      },
      backgroundColor: 'white'
    }, style, animatedMenuStyle]
  }, children))))));
}
//# sourceMappingURL=Menu.js.map