122 lines
3.9 KiB
JavaScript
122 lines
3.9 KiB
JavaScript
'use client'
|
|
"use strict";
|
|
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);
|
|
|
|
// src/hide.tsx
|
|
var hide_exports = {};
|
|
__export(hide_exports, {
|
|
Hide: () => Hide
|
|
});
|
|
module.exports = __toCommonJS(hide_exports);
|
|
|
|
// src/media-query.tsx
|
|
var import_system = require("@chakra-ui/system");
|
|
var getBreakpoint = (theme, value) => {
|
|
var _a, _b;
|
|
return (_b = (_a = theme == null ? void 0 : theme.breakpoints) == null ? void 0 : _a[value]) != null ? _b : value;
|
|
};
|
|
function useQuery(props) {
|
|
const { breakpoint = "", below, above } = props;
|
|
const theme = (0, import_system.useTheme)();
|
|
const bpBelow = getBreakpoint(theme, below);
|
|
const bpAbove = getBreakpoint(theme, above);
|
|
let query = breakpoint;
|
|
if (bpBelow) {
|
|
query = `(max-width: ${bpBelow})`;
|
|
} else if (bpAbove) {
|
|
query = `(min-width: ${bpAbove})`;
|
|
}
|
|
return query;
|
|
}
|
|
|
|
// src/use-media-query.ts
|
|
var import_react_env = require("@chakra-ui/react-env");
|
|
var import_react = require("react");
|
|
function useMediaQuery(query, options = {}) {
|
|
const { ssr = true, fallback } = options;
|
|
const { getWindow } = (0, import_react_env.useEnvironment)();
|
|
const queries = Array.isArray(query) ? query : [query];
|
|
let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];
|
|
fallbackValues = fallbackValues.filter((v) => v != null);
|
|
const [value, setValue] = (0, import_react.useState)(() => {
|
|
return queries.map((query2, index) => ({
|
|
media: query2,
|
|
matches: ssr ? !!fallbackValues[index] : getWindow().matchMedia(query2).matches
|
|
}));
|
|
});
|
|
(0, import_react.useEffect)(() => {
|
|
const win = getWindow();
|
|
setValue(
|
|
queries.map((query2) => ({
|
|
media: query2,
|
|
matches: win.matchMedia(query2).matches
|
|
}))
|
|
);
|
|
const mql = queries.map((query2) => win.matchMedia(query2));
|
|
const handler = (evt) => {
|
|
setValue((prev) => {
|
|
return prev.slice().map((item) => {
|
|
if (item.media === evt.media)
|
|
return { ...item, matches: evt.matches };
|
|
return item;
|
|
});
|
|
});
|
|
};
|
|
mql.forEach((mql2) => {
|
|
if (typeof mql2.addListener === "function") {
|
|
mql2.addListener(handler);
|
|
} else {
|
|
mql2.addEventListener("change", handler);
|
|
}
|
|
});
|
|
return () => {
|
|
mql.forEach((mql2) => {
|
|
if (typeof mql2.removeListener === "function") {
|
|
mql2.removeListener(handler);
|
|
} else {
|
|
mql2.removeEventListener("change", handler);
|
|
}
|
|
});
|
|
};
|
|
}, [getWindow]);
|
|
return value.map((item) => item.matches);
|
|
}
|
|
|
|
// src/visibility.tsx
|
|
function Visibility(props) {
|
|
const { breakpoint, hide, children, ssr } = props;
|
|
const [show] = useMediaQuery(breakpoint, { ssr });
|
|
const isVisible = hide ? !show : show;
|
|
const rendered = isVisible ? children : null;
|
|
return rendered;
|
|
}
|
|
|
|
// src/hide.tsx
|
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
function Hide(props) {
|
|
const { children, ssr } = props;
|
|
const query = useQuery(props);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Visibility, { breakpoint: query, hide: true, ssr, children });
|
|
}
|
|
Hide.displayName = "Hide";
|
|
// Annotate the CommonJS export names for ESM import in node:
|
|
0 && (module.exports = {
|
|
Hide
|
|
});
|
|
//# sourceMappingURL=hide.js.map
|