react-native-filament/lib/commonjs/react/RenderCallbackContext.js

A real-time physically based 3D rendering engine for React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.makeRenderContext = exports.RenderCallbackContext = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNativeWorkletsCore = require("react-native-worklets-core");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * In react-native-filament we can only have one render callback, which we provide to the FilamentView.
 * This context allows us to have multiple render callbacks, as we call them in the render callback.
 */

const makeRenderContext = () => {
  const RenderContext = /*#__PURE__*/(0, _react.createContext)({
    renderCallbacks: {
      value: [],
      addListener: () => {
        throw new Error('RenderContextProvider not found');
      }
    },
    addRenderCallback: () => {
      throw new Error('RenderContextProvider not found');
    }
  });
  const RenderContextProvider = ({
    children
  }) => {
    const renderCallbacks = (0, _reactNativeWorkletsCore.useSharedValue)([]);
    const addRenderCallback = (0, _react.useCallback)(callback => {
      const id = Math.random().toString(36).substring(7);
      const entry = {
        callback,
        id
      };
      renderCallbacks.value.push(entry);
      return () => {
        renderCallbacks.value = renderCallbacks.value.filter(e => e.id !== id);
      };
    }, [renderCallbacks]);
    const contextValue = (0, _react.useMemo)(() => ({
      renderCallbacks,
      addRenderCallback
    }), [addRenderCallback, renderCallbacks]);
    return /*#__PURE__*/_react.default.createElement(RenderContext.Provider, {
      value: contextValue
    }, children);
  };
  const useRenderContext = () => {
    const context = (0, _react.useContext)(RenderContext);
    if (!context) {
      throw new Error('useRenderContext must be used within a RenderContextProvider');
    }
    return context;
  };

  /**
   * Use this method to add render callbacks to the render callback chain.
   */
  const useRenderCallback = (callback, deps) => {
    const {
      addRenderCallback
    } = useRenderContext();
    (0, _react.useEffect)(() => {
      const remove = addRenderCallback(callback);
      return () => {
        remove();
      };
      // Explicitly skip the callback, we memoize by the provided dependencies
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [...deps, addRenderCallback]);
    return callback;
  };

  /**
   * This should be called in the render callback of the FilamentView.
   * For the default exported context this happens automatically.
   */
  const useRenderCallbacks = () => {
    const renderContext = useRenderContext();
    return renderContext.renderCallbacks;
  };
  return {
    useRenderContext,
    RenderContextProvider,
    useRenderCallback,
    useRenderCallbacks
  };
};
exports.makeRenderContext = makeRenderContext;
const RenderCallbackContext = exports.RenderCallbackContext = makeRenderContext();
//# sourceMappingURL=RenderCallbackContext.js.map