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

Toolkit to speed up React Native development

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Menu = Menu;
exports.MenuContext = void 0;
var _portal = require("@gorhom/portal");
var _native = require("@react-navigation/native");
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _scale = require("../../utils/scale");
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 MenuContext = /*#__PURE__*/(0, _react.createContext)({});
exports.MenuContext = MenuContext;
function Menu(_ref) {
  let {
    button: originalButton,
    children,
    anchor,
    position,
    offset,
    overlayColor,
    style
  } = _ref;
  const [isOpened, setIsOpened] = (0, _react.useState)(false);
  const animSharedValue = (0, _reactNativeReanimated.useSharedValue)(0);
  const buttonRef = (0, _react.useRef)();
  const buttonLayoutRef = (0, _react.useRef)();
  const menuLayoutRef = (0, _react.useRef)();
  const menuRef = (0, _react.useRef)();
  const button = /*#__PURE__*/(0, _react.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
  } = (0, _react.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 = (0, _react.useMemo)(() => ({
    isOpened,
    closeMenu: () => setIsOpened(false),
    openMenu: () => setIsOpened(true)
  }), [isOpened]);
  const animatedOverlayStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    backgroundColor: overlayColor ? (0, _reactNativeReanimated.interpolateColor)(animSharedValue.value, [0, 1], ['rgba(0,0,0,0)', overlayColor]) : 'transparent'
  }), []);
  const animatedMenuStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    opacity: animSharedValue.value
  }), []);
  (0, _native.useFocusEffect)((0, _react.useCallback)(() => {
    return () => {
      setIsOpened(false);
    };
  }, []));
  (0, _react.useEffect)(() => {
    animSharedValue.value = (0, _reactNativeReanimated.withTiming)(isOpened ? 1 : 0, {
      duration: 100
    });
  }, [isOpened]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MenuContext.Provider, {
    value: menuData
  }, button), /*#__PURE__*/_react.default.createElement(_portal.Portal, {
    hostName: "ModalHost"
  }, /*#__PURE__*/_react.default.createElement(MenuContext.Provider, {
    value: menuData
  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
    onPress: () => {
      setIsOpened(false);
    }
  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
    style: [{
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      top: 0
    }, animatedOverlayStyle],
    pointerEvents: isOpened ? 'auto' : 'none'
  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.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: (0, _scale.scaleY)(4)
      },
      backgroundColor: 'white'
    }, style, animatedMenuStyle]
  }, children))))));
}
//# sourceMappingURL=Menu.js.map