@wordpress/components
Version:
UI components for WordPress.
81 lines (79 loc) • 2.94 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/components/src/utils/use-responsive-value.ts
var use_responsive_value_exports = {};
__export(use_responsive_value_exports, {
useBreakpointIndex: () => useBreakpointIndex,
useResponsiveValue: () => useResponsiveValue
});
module.exports = __toCommonJS(use_responsive_value_exports);
var import_element = require("@wordpress/element");
var breakpoints = ["40em", "52em", "64em"];
var useBreakpointIndex = (options = {}) => {
const {
defaultIndex = 0
} = options;
if (typeof defaultIndex !== "number") {
throw new TypeError(`Default breakpoint index should be a number. Got: ${defaultIndex}, ${typeof defaultIndex}`);
} else if (defaultIndex < 0 || defaultIndex > breakpoints.length - 1) {
throw new RangeError(`Default breakpoint index out of range. Theme has ${breakpoints.length} breakpoints, got index ${defaultIndex}`);
}
const [value, setValue] = (0, import_element.useState)(defaultIndex);
(0, import_element.useEffect)(() => {
const getIndex = () => breakpoints.filter((bp) => {
return typeof window !== "undefined" ? window.matchMedia(`screen and (min-width: ${bp})`).matches : false;
}).length;
const onResize = () => {
const newValue = getIndex();
if (value !== newValue) {
setValue(newValue);
}
};
onResize();
if (typeof window !== "undefined") {
window.addEventListener("resize", onResize);
}
return () => {
if (typeof window !== "undefined") {
window.removeEventListener("resize", onResize);
}
};
}, [value]);
return value;
};
function useResponsiveValue(values, options = {}) {
const index = useBreakpointIndex(options);
if (!Array.isArray(values) && typeof values !== "function") {
return values;
}
const array = values || [];
return (
/** @type {T[]} */
array[
/* eslint-enable jsdoc/no-undefined-types */
index >= array.length ? array.length - 1 : index
]
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useBreakpointIndex,
useResponsiveValue
});
//# sourceMappingURL=use-responsive-value.js.map