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");
var _jsxRuntime = require("react/jsx-runtime");
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); }
/**
 * 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__*/(0, _jsxRuntime.jsx)(RenderContext.Provider, {
      value: contextValue,
      children: 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