reblend-ui/cjs/Waypoint.js

Utilities for creating robust overlay components

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _reblendHooks = require("reblend-hooks");
var Reblend = require("reblendjs");
var _useWaypoint = require("./useWaypoint");
exports.Position = _useWaypoint.Position;
const defaultRenderComponent = ref => Reblend.Reblend.construct.bind(this)("span", {
  ref: ref,
  style: {
    fontSize: 0
  }
});
/**
 * A component that tracks when it enters or leaves the viewport. Implemented
 * using IntersectionObserver, polyfill may be required for older browsers.
 */
class Waypoint extends Reblend.Reblend {
  static ELEMENT_NAME = "Waypoint";
  constructor() {
    super();
  }
  async initState() {
    const [element, setElement] = _reblendHooks.useCallbackRef.bind(this)();
    this.state.element = element;
    this.state.setElement = setElement;
    _useWaypoint.default.bind(this)(this.state.element, this.props.onPositionChange, this.props);
  }
  async initProps({
    renderComponent = defaultRenderComponent,
    onPositionChange,
    ...options
  }) {
    this.props = {};
    this.props.renderComponent = renderComponent;
    this.props.onPositionChange = onPositionChange;
    this.props = {
      ...this.props,
      ...options
    };
  }
  async html() {
    return this.props.renderComponent(this.state.setElement);
  }
}
/* @Reblend: Transformed from function to class */
var _default = exports.default = Waypoint;