@shopify/react-native-skia/lib/commonjs/renderer/Canvas.js

High-performance React Native Graphics using Skia

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useCanvasRef = exports.Canvas = void 0;
var _react = _interopRequireWildcard(require("react"));
var _views = require("../views");
var _Skia = require("../skia/Skia");
var _SkiaJSDomView = require("../views/SkiaJSDomView");
var _Reconciler = require("./Reconciler");
var _HostComponents = require("./HostComponents");
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; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const useCanvasRef = () => (0, _react.useRef)(null);
exports.useCanvasRef = useCanvasRef;
const useOnSizeEvent = (resultValue, onLayout) => {
  return (0, _react.useCallback)(event => {
    if (onLayout) {
      onLayout(event);
    }
    const {
      width,
      height
    } = event.nativeEvent.layout;
    if (resultValue) {
      resultValue.value = {
        width,
        height
      };
    }
  }, [onLayout, resultValue]);
};
const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)(({
  children,
  style,
  debug,
  mode,
  onTouch,
  onSize: _onSize,
  onLayout: _onLayout,
  ...props
}, forwardedRef) => {
  const onLayout = useOnSizeEvent(_onSize, _onLayout);
  const innerRef = useCanvasRef();
  const ref = useCombinedRefs(forwardedRef, innerRef);
  const redraw = (0, _react.useCallback)(() => {
    var _innerRef$current;
    (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.redraw();
  }, [innerRef]);
  const getNativeId = (0, _react.useCallback)(() => {
    var _innerRef$current$nat, _innerRef$current2;
    const id = (_innerRef$current$nat = (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.nativeId) !== null && _innerRef$current$nat !== void 0 ? _innerRef$current$nat : -1;
    return id;
  }, [innerRef]);
  const root = (0, _react.useMemo)(() => new _Reconciler.SkiaRoot(_Skia.Skia, _HostComponents.NATIVE_DOM, redraw, getNativeId), [redraw, getNativeId]);

  // Render effect
  (0, _react.useEffect)(() => {
    root.render(children);
  }, [children, root, redraw]);
  (0, _react.useEffect)(() => {
    return () => {
      root.unmount();
    };
  }, [root]);
  if (_HostComponents.NATIVE_DOM) {
    return /*#__PURE__*/_react.default.createElement(_views.SkiaDomView, _extends({
      ref: ref,
      style: style,
      root: root.dom,
      onTouch: onTouch,
      onLayout: onLayout,
      mode: mode,
      debug: debug
    }, props));
  } else {
    return /*#__PURE__*/_react.default.createElement(_SkiaJSDomView.SkiaJSDomView, _extends({
      Skia: _Skia.Skia
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      ,
      ref: ref,
      style: style,
      root: root.dom,
      onTouch: onTouch,
      onLayout: onLayout,
      mode: mode,
      debug: debug
    }, props));
  }
});

/**
 * Combines a list of refs into a single ref. This can be used to provide
 * both a forwarded ref and an internal ref keeping the same functionality
 * on both of the refs.
 * @param refs Array of refs to combine
 * @returns A single ref that can be used in a ref prop.
 */
const useCombinedRefs = (...refs) => {
  const targetRef = _react.default.useRef(null);
  _react.default.useEffect(() => {
    refs.forEach(ref => {
      if (ref) {
        if (typeof ref === "function") {
          ref(targetRef.current);
        } else {
          ref.current = targetRef.current;
        }
      }
    });
  }, [refs]);
  return targetRef;
};
//# sourceMappingURL=Canvas.js.map