@shopify/polaris/build/cjs/components/MediaQueryProvider/MediaQueryProvider.js

Shopify’s admin product component library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var debounce = require('lodash/debounce');
var breakpoints = require('../../utilities/breakpoints.js');
var context = require('../../utilities/media-query/context.js');
var EventListener = require('../EventListener/EventListener.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);

const MediaQueryProvider = function MediaQueryProvider({
  children
}) {
  const [isNavigationCollapsed, setIsNavigationCollapsed] = React.useState(breakpoints.navigationBarCollapsed().matches); // eslint-disable-next-line react-hooks/exhaustive-deps

  const handleResize = React.useCallback(debounce__default['default'](() => {
    if (isNavigationCollapsed !== breakpoints.navigationBarCollapsed().matches) {
      setIsNavigationCollapsed(!isNavigationCollapsed);
    }
  }, 40, {
    trailing: true,
    leading: true,
    maxWait: 40
  }), [isNavigationCollapsed]);
  React.useEffect(() => {
    setIsNavigationCollapsed(breakpoints.navigationBarCollapsed().matches);
  }, []);
  return /*#__PURE__*/React__default['default'].createElement(context.MediaQueryContext.Provider, {
    value: {
      isNavigationCollapsed
    }
  }, /*#__PURE__*/React__default['default'].createElement(EventListener.EventListener, {
    event: "resize",
    handler: handleResize
  }), children);
};

exports.MediaQueryProvider = MediaQueryProvider;