react-misc-toolbox/dist/ResizeListener.js

[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useResizeListener = undefined;

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var useResizeListener = exports.useResizeListener = function useResizeListener(_ref) {
  var threshold = _ref.threshold,
      showLog = _ref.showLog;

  var _useState = (0, _react.useState)({
    isOverThreshold: false
  }),
      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  var setIsOverThresholdTo = function setIsOverThresholdTo(value) {
    return setState({ isOverThreshold: value });
  };
  var listener = function listener() {
    if (typeof window !== 'undefined' && window.innerWidth >= threshold) {
      setIsOverThresholdTo(true);
    } else {
      setIsOverThresholdTo(false);
    }
  };
  (0, _react.useEffect)(function () {
    showLog && console.log('useEffect 0');
    if (typeof window !== 'undefined') {
      if (window.innerWidth >= threshold) {
        setIsOverThresholdTo(true);
      }
      window.addEventListener('resize', listener);
    }
    return function () {
      showLog && console.log('useEffect 1');
      if (typeof window !== 'undefined') {
        window.removeEventListener('resize', listener);
      }
    };
  }, []);

  return state;
};

var ResizeListener = function ResizeListener(_ref2) {
  var children = _ref2.children,
      threshold = _ref2.threshold;
  return children(useResizeListener({ threshold: threshold }));
};

exports.default = ResizeListener;