@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.

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-s1pqaa-0"
})([""]);
const StyledStickyContent = styled.div.withConfig({
  displayName: "Sticky__StyledStickyContent",
  componentId: "sc-s1pqaa-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); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledStickyContent.defaultProps = {
  theme: defaultTheme
};

class Sticky extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      sticky: false,
      height: 0,
      initialWidth: true,
      initialTop: 0,
      width: 0
    };
    this.content = /*#__PURE__*/React.createRef();
    this.sticky = /*#__PURE__*/React.createRef();

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

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

    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,
      dataTest
    } = this.props;
    const {
      sticky,
      height,
      width,
      initialWidth
    } = this.state;
    return /*#__PURE__*/React.createElement(StyledSticky, {
      ref: this.sticky,
      "data-test": dataTest
    }, /*#__PURE__*/React.createElement(StyledStickyContent, {
      sticky: sticky,
      size: {
        height,
        width
      },
      initialWidth: initialWidth,
      ref: this.content
    }, children));
  }

}

export default Sticky;