@shopify/polaris/dist/esm/components/Sticky/Sticky.js

Shopify’s product component library

import React$1, { Component } from 'react';
import { useStickyManager } from '../../utilities/sticky-manager/hooks.js';
import { getRectForNode } from '../../utilities/geometry.js';

class StickyInner extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      isSticky: false,
      style: {}
    };
    this.placeHolderNode = null;
    this.stickyNode = null;

    this.setPlaceHolderNode = node => {
      this.placeHolderNode = node;
    };

    this.setStickyNode = node => {
      this.stickyNode = node;
    };

    this.handlePositioning = (stick, top = 0, left = 0, width = 0) => {
      var {
        isSticky
      } = this.state;

      if (stick && !isSticky || !stick && isSticky) {
        this.adjustPlaceHolderNode(stick);
        this.setState({
          isSticky: !isSticky
        });
      }

      var style = stick ? {
        position: 'fixed',
        top,
        left,
        width
      } : {};
      this.setState({
        style
      });
    };

    this.adjustPlaceHolderNode = add => {
      if (this.placeHolderNode && this.stickyNode) {
        this.placeHolderNode.style.paddingBottom = add ? "".concat(getRectForNode(this.stickyNode).height, "px") : '0px';
      }
    };
  }

  componentDidMount() {
    var {
      boundingElement,
      offset = false,
      disableWhenStacked = false,
      stickyManager
    } = this.props;
    if (!this.stickyNode || !this.placeHolderNode) return;
    stickyManager.registerStickyItem({
      stickyNode: this.stickyNode,
      placeHolderNode: this.placeHolderNode,
      handlePositioning: this.handlePositioning,
      offset,
      boundingElement,
      disableWhenStacked
    });
  }

  componentWillUnmount() {
    var {
      stickyManager
    } = this.props;
    if (!this.stickyNode) return;
    stickyManager.unregisterStickyItem(this.stickyNode);
  }

  render() {
    var {
      style,
      isSticky
    } = this.state;
    var {
      children
    } = this.props;
    var childrenContent = isFunction(children) ? children(isSticky) : children;
    return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("div", {
      ref: this.setPlaceHolderNode
    }), /*#__PURE__*/React$1.createElement("div", {
      ref: this.setStickyNode,
      style: style
    }, childrenContent));
  }

}

function isFunction(arg) {
  return typeof arg === 'function';
}

function Sticky(props) {
  var stickyManager = useStickyManager();
  return /*#__PURE__*/React$1.createElement(StickyInner, Object.assign({}, props, {
    stickyManager: stickyManager
  }));
}

export { Sticky };