react-misc-toolbox/dist/ResizeListener.js

- [ ] diagramexample | optimize creating from blank slate

"use strict";

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

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

var _extends3 = _interopRequireDefault(_extends2);

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,
    timesCrossed: 0
  }),
      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  var setIsOverThresholdTo = function setIsOverThresholdTo(value) {
    return setState((0, _extends3.default)({}, state, { isOverThreshold: value }));
  };
  var incrementTimesCrossed = function incrementTimesCrossed() {
    console.log("crossed");
    setState((0, _extends3.default)({}, state, { timesCrossed: state.timesCrossed + 1 }));
  };
  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;