@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
92 lines (90 loc) • 4.05 kB
JavaScript
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_system_provider = require('../../core/system/system-provider.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_utils = require('../../core/css/utils.cjs');
const require_image = require('../image/image.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/picture/picture.tsx
const createQuery = (minW, maxW) => {
let media = "";
if (minW) {
media = `(min-width: ${minW}px)`;
if (maxW) media += ` and (max-width: ${maxW}px)`;
} else media = `(max-width: ${maxW}px)`;
return media;
};
/**
* `Picture` is a component that uses the `picture` element to provide alternative images for different display or device scenarios.
*
* @see https://yamada-ui.com/docs/components/picture
*/
const Picture = ({ children, enableSorting = true, sources: sourcesProp = [], pictureProps,...rest }) => {
const system = require_system_provider.useSystem();
const { queriesObj } = system.breakpoints;
const { direction = "down", identifier = "@media screen" } = system.config.breakpoint ?? {};
const searchValue = identifier === "@media screen" ? "@media screen and " : `${identifier} `;
const compareSources = (0, react.useCallback)((a, b) => {
const k = direction === "down" ? "maxW" : "minW";
if ((0, require_utils_index.utils_exports.isUndefined)(a[k]) && !(0, require_utils_index.utils_exports.isUndefined)(b[k])) return -1;
if (!(0, require_utils_index.utils_exports.isUndefined)(a[k]) && (0, require_utils_index.utils_exports.isUndefined)(b[k])) return 1;
return direction === "down" ? Number(a.maxW) - Number(b.maxW) : Number(b.minW) - Number(a.minW);
}, [direction]);
const sources = (0, react.useMemo)(() => {
const computedSources = sourcesProp.map(({ maxW, media, minW,...rest$1 }) => {
if (!media) {
if (minW) minW = (0, require_utils_index.utils_exports.getPx)(require_utils.tokenToValue(system)("sizes", minW));
if (maxW) maxW = (0, require_utils_index.utils_exports.getPx)(require_utils.tokenToValue(system)("sizes", maxW));
media = createQuery(minW, maxW);
return {
...rest$1,
maxW,
media,
minW
};
} else {
const { maxW: maxW$1, minW: minW$1, query } = queriesObj[media] ?? {};
if (query) media = query.replace(searchValue, "");
return {
...rest$1,
maxW: maxW$1,
media,
minW: minW$1
};
}
});
if (enableSorting) return computedSources.sort(compareSources);
else return computedSources;
}, [
sourcesProp,
enableSorting,
system,
queriesObj,
searchValue,
compareSources
]);
const sourceElements = (0, react.useMemo)(() => sources.map(({ maxW: _maxW, minW: _minW,...rest$1 }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.source, { ...rest$1 }, index)), [sources]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.picture, {
...pictureProps,
children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [sourceElements, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.Image, { ...rest })] })
});
};
const Source = ({ media,...rest }) => {
const { breakpoints, config } = require_system_provider.useSystem();
const { queriesObj } = breakpoints;
const { identifier = "@media screen" } = config.breakpoint ?? {};
const searchValue = identifier === "@media screen" ? "@media screen and " : `${identifier} `;
const { query } = media ? queriesObj[media] ?? {} : {};
if (query) media = query.replace(searchValue, "");
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.source, {
media,
...rest
});
};
//#endregion
exports.Picture = Picture;
exports.Source = Source;
//# sourceMappingURL=picture.cjs.map