sharyn/hocs/hide-on-scroll.js

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/objectSpread"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/objectWithoutProperties"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _lodash = _interopRequireDefault(require("lodash.throttle"));

var _withState = _interopRequireDefault(require("recompose/withState"));

var _lifecycle = _interopRequireDefault(require("recompose/lifecycle"));

var _compose = _interopRequireDefault(require("recompose/compose"));

var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

var _propTypes = _interopRequireDefault(require("prop-types"));

/* eslint-disable import/no-extraneous-dependencies */
// flow-disable-next-line
var styles = function styles(_ref) {
  var breakpoints = _ref.breakpoints;
  return {
    root: (0, _defineProperty2["default"])({
      transition: 'margin-top 0.2s'
    }, breakpoints.up('sm'), {
      marginTop: '0 !important'
    })
  };
};

var lifecycle = {
  componentDidMount: function componentDidMount() {
    var _this$props = this.props,
        updateIsVisible = _this$props.updateIsVisible,
        updateHeight = _this$props.updateHeight;
    var cmp = document.getElementsByClassName('hide-on-scroll')[0];

    if (!cmp) {
      throw Error('You use hideOnScroll but no element with the hide-on-scroll was found');
    }

    var getFullHeight = function getFullHeight() {
      return cmp.clientHeight + 11;
    }; // The Material UI box-shadow height


    var getHeight = function getHeight() {
      return cmp.clientHeight;
    };

    updateHeight(getFullHeight());
    window.onresize = (0, _lodash["default"])(function () {
      return updateHeight(getFullHeight());
    });
    var headroom = 20;
    var current = window.scrollY;
    var initial = current;
    var last = current;
    var lowest = current;
    var highest = current;
    var goingUp;
    var goingDown;
    window.onscroll = (0, _lodash["default"])(function () {
      current = window.scrollY;
      goingUp = current < last;
      goingDown = !goingUp;

      if (initial !== current) {
        if (current < getHeight()) {
          updateIsVisible(true);
        } else {
          if (current < lowest - headroom) {
            updateIsVisible(true);
          }

          if (current > highest + headroom) {
            updateIsVisible(false);
          }
        }
      }

      last = current;

      if (goingDown) {
        if (current > lowest) {
          lowest = current;
        }

        if (current > highest + headroom) {
          highest = current - headroom;
        }
      }

      if (goingUp) {
        if (current < highest) {
          highest = current;
        }

        if (current < lowest - headroom) {
          lowest = current + headroom;
        }
      }
    }, 10);
  }
};

var hideOnScroll = function hideOnScroll(Cmp) {
  var AutoHideCmp = function AutoHideCmp(_ref2) {
    var classes = _ref2.classes,
        children = _ref2.children,
        height = _ref2.height,
        isVisible = _ref2.isVisible,
        style = _ref2.style,
        updateIsVisible = _ref2.updateIsVisible,
        updateHeight = _ref2.updateHeight,
        rest = (0, _objectWithoutProperties2["default"])(_ref2, ["classes", "children", "height", "isVisible", "style", "updateIsVisible", "updateHeight"]);
    return _react["default"].createElement(Cmp, (0, _extends2["default"])({
      classes: classes,
      style: (0, _objectSpread2["default"])({}, style, {
        // eslint-disable-next-line no-nested-ternary
        marginTop: isVisible ? 0 : height ? 0 - height : 0
      })
    }, rest), children);
  };

  AutoHideCmp.propTypes = {
    classes: _propTypes["default"].object.isRequired,
    children: function children(props, propName, componentName) {
      if (!Object.prototype.hasOwnProperty.call(props, propName)) {
        throw new Error("Prop `".concat(propName, "` has type 'any' or 'mixed', but was not provided to `").concat(componentName, "`. Pass undefined or any other value."));
      }
    },
    isVisible: _propTypes["default"].bool.isRequired,
    style: _propTypes["default"].object,
    height: _propTypes["default"].number,
    updateIsVisible: _propTypes["default"].func.isRequired,
    updateHeight: _propTypes["default"].func.isRequired
  };
  return (0, _compose["default"])((0, _withState["default"])('isVisible', 'updateIsVisible', true), (0, _withState["default"])('height', 'updateHeight', null), (0, _lifecycle["default"])(lifecycle), (0, _withStyles["default"])(styles))(AutoHideCmp);
};

var _default = hideOnScroll;
exports["default"] = _default;