}
*/
const operatorEntries = Object.entries(operators);
const queries = Object.entries(breakpoints).flatMap(([name, width]) => {
return operatorEntries.map(([operator, condition]) => {
const list = window.matchMedia(`(${condition}: ${width}px)`);
list.addEventListener('change', setIsMatching);
return [`${operator} ${name}`, list];
});
});
window.addEventListener('orientationchange', setIsMatching);
// Set initial values.
setIsMatching();
setIsMatching.flush();
};
/* harmony default export */ const listener = (addDimensionsEventListener);
;// CONCATENATED MODULE: external "React"
const external_React_namespaceObject = window["React"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/with-viewport-match.js
/**
* WordPress dependencies
*/
/**
* Higher-order component creator, creating a new component which renders with
* the given prop names, where the value passed to the underlying component is
* the result of the query assigned as the object's value.
*
* @see isViewportMatch
*
* @param {Object} queries Object of prop name to viewport query.
*
* @example
*
* ```jsx
* function MyComponent( { isMobile } ) {
* return (
* Currently: { isMobile ? 'Mobile' : 'Not Mobile' }
* );
* }
*
* MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent );
* ```
*
* @return {Function} Higher-order component.
*/
const withViewportMatch = queries => {
const queryEntries = Object.entries(queries);
const useViewPortQueriesResult = () => Object.fromEntries(queryEntries.map(([key, query]) => {
let [operator, breakpointName] = query.split(' ');
if (breakpointName === undefined) {
breakpointName = operator;
operator = '>=';
}
// Hooks should unconditionally execute in the same order,
// we are respecting that as from the static query of the HOC we generate
// a hook that calls other hooks always in the same order (because the query never changes).
// eslint-disable-next-line react-hooks/rules-of-hooks
return [key, (0,external_wp_compose_namespaceObject.useViewportMatch)(breakpointName, operator)];
}));
return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => {
return (0,external_wp_compose_namespaceObject.pure)(props => {
const queriesResult = useViewPortQueriesResult();
return (0,external_React_namespaceObject.createElement)(WrappedComponent, {
...props,
...queriesResult
});
});
}, 'withViewportMatch');
};
/* harmony default export */ const with_viewport_match = (withViewportMatch);
;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/if-viewport-matches.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Higher-order component creator, creating a new component which renders if
* the viewport query is satisfied.
*
* @see withViewportMatches
*
* @param {string} query Viewport query.
*
* @example
*
* ```jsx
* function MyMobileComponent() {
* return I'm only rendered on mobile viewports!
;
* }
*
* MyMobileComponent = ifViewportMatches( '< small' )( MyMobileComponent );
* ```
*
* @return {Function} Higher-order component.
*/
const ifViewportMatches = query => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)((0,external_wp_compose_namespaceObject.compose)([with_viewport_match({
isViewportMatch: query
}), (0,external_wp_compose_namespaceObject.ifCondition)(props => props.isViewportMatch)]), 'ifViewportMatches');
/* harmony default export */ const if_viewport_matches = (ifViewportMatches);
;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/index.js
/**
* Internal dependencies
*/
/**
* Hash of breakpoint names with pixel width at which it becomes effective.
*
* @see _breakpoints.scss
*
* @type {Object}
*/
const BREAKPOINTS = {
huge: 1440,
wide: 1280,
large: 960,
medium: 782,
small: 600,
mobile: 480
};
/**
* Hash of query operators with corresponding condition for media query.
*
* @type {Object}
*/
const OPERATORS = {
'<': 'max-width',
'>=': 'min-width'
};
listener(BREAKPOINTS, OPERATORS);
(window.wp = window.wp || {}).viewport = __webpack_exports__;
/******/ })()
;