@kiwicom/orbit-components/es/Sticky/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from "react";
import styled, { css } from "styled-components";
import { addScrollHandler, removeScrollHandler, getScrollingElement } from "../utils/scroll";
import defaultTheme from "../defaultTheme";
const StyledSticky = styled.div.withConfig({
  displayName: "Sticky__StyledSticky",
  componentId: "sc-15w40gm-0"
})([""]);
const StyledStickyContent = styled.div.withConfig({
  displayName: "Sticky__StyledStickyContent",
  componentId: "sc-15w40gm-1"
})(["position:", ";", ";box-shadow:0 2px 20px 6px rgba(23,27,30,0.15);border-radius:", ";"], ({
  sticky
}) => sticky ? `fixed` : `relative`, ({
  size,
  initialWidth
}) => css(["top:", ";width:", ";"], size.height && `${size.height}px`, size.width && !initialWidth && `${size.width}px` || `100%`), ({
  theme
}) => theme.orbit.borderRadiusNormal);
StyledStickyContent.defaultProps = {
  theme: defaultTheme
};

class Sticky extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      sticky: false,
      height: 0,
      initialWidth: true,
      initialTop: 0,
      width: 0
    });

    _defineProperty(this, "content", React.createRef());

    _defineProperty(this, "sticky", React.createRef());

    _defineProperty(this, "handleTop", () => {
      if (this.sticky.current) {
        const values = this.sticky.current.getBoundingClientRect();
        this.setState({
          initialTop: values.top
        });
      }
    });

    _defineProperty(this, "stickyState", (sticky, height, width) => {
      this.setState({
        sticky,
        height,
        width
      });
    });

    _defineProperty(this, "handleScroll", () => {
      const element = this.content.current;
      const sticky = this.sticky.current;
      const elementHeight = element.offsetHeight; // $FlowFixMe

      const parent = sticky.parentNode.getBoundingClientRect();
      const scrollingElement = getScrollingElement().getBoundingClientRect();
      const {
        offset = 0
      } = this.props;
      const {
        initialTop
      } = this.state;
      this.setState({
        initialWidth: false
      }); // if (sets fixed position if window with offset reaches elements and current position is not on the bottom of parent element)

      if (Math.abs(scrollingElement.top) + offset >= initialTop && parent.bottom - elementHeight - offset >= 0) {
        this.stickyState(true, offset, parent.width); // turns off fixed if it's on the bottom of parent's element
      } else if (parent.bottom - elementHeight - offset <= 0) {
        this.stickyState(false, parent.height - elementHeight, parent.width);
      } else {
        // just off fixed
        this.stickyState(false, 0, parent.width);
      }
    });
  }

  componentDidMount() {
    this.handleTop();
    addScrollHandler(this.handleScroll);
    window.addEventListener("resize", this.handleTop);
    window.addEventListener("resize", this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.handleTop);
    window.removeEventListener("resize", this.handleScroll);
    removeScrollHandler(this.handleScroll);
  }

  render() {
    const {
      children
    } = this.props;
    const {
      sticky,
      height,
      width,
      initialWidth
    } = this.state;
    return React.createElement(StyledSticky, {
      ref: this.sticky
    }, React.createElement(StyledStickyContent, {
      sticky: sticky,
      size: {
        height,
        width
      },
      initialWidth: initialWidth,
      ref: this.content
    }, children));
  }

}

export default Sticky;