facesjs/build/commonjs/Face.js

A JavaScript library for generating vector-based cartoon faces

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Face = void 0;
var _react = require("react");
var _display = require("./display.js");
var _utils = require("./utils.js");
var _jsxRuntime = require("react/jsx-runtime");
const useIntersectionObserver = () => {
  const [ref, setRef] = (0, _react.useState)();
  const [entry, setEntry] = (0, _react.useState)();
  (0, _react.useEffect)(() => {
    if (!ref) {
      return;
    }
    const observer = new IntersectionObserver(([entry]) => {
      setEntry(entry);
    });
    observer.observe(ref);
    return () => {
      observer.disconnect();
    };
  }, [ref]);
  return [setRef, entry];
};
const Face = exports.Face = /*#__PURE__*/(0, _react.forwardRef)(({
  className,
  face,
  ignoreDisplayErrors,
  lazy,
  overrides,
  style
}, ref) => {
  const [intersectionObserverRef, intersectionObserverEntry] = useIntersectionObserver();
  const faceRef = (0, _react.useRef)(null);
  (0, _react.useLayoutEffect)(() => {
    if ((intersectionObserverEntry?.isIntersecting || !lazy) && faceRef.current) {
      try {
        if (overrides) {
          // Only apply overrides if face is in viewport
          (0, _display.display)(faceRef.current, (0, _utils.deepCopy)(face), overrides);
        } else {
          (0, _display.display)(faceRef.current, face);
        }
      } catch (error) {
        if (!ignoreDisplayErrors) {
          throw error;
        }
      }
    }
  }, [intersectionObserverEntry, face, overrides]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: className,
    ref: node => {
      if (ref) {
        // @ts-expect-error
        ref.current = node;
      }
      // @ts-expect-error
      faceRef.current = node;
      intersectionObserverRef(node);
    },
    style: style
  });
});