@shopify/hydrogen-react
Version:
React components, hooks, and utilities for creating custom Shopify storefronts
296 lines (295 loc) • 8.97 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const require$$0 = require("react");
const ShopifyProvider = require("./ShopifyProvider.js");
const Image = require("./Image.js");
const Video = require("./Video.js");
const flattenConnection = require("./flatten-connection.js");
const jsxRuntime = require("react/jsx-runtime");
function Metafield(props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
const {
data,
as,
...passthroughProps
} = props;
const {
locale
} = ShopifyProvider.useShop();
const parsedMetafield = require$$0.useMemo(() => parseMetafield(data), [data]);
if (!parsedMetafield) {
const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;
{
throw new Error(noDataPropWarning);
}
}
if (parsedMetafield.value === null || parsedMetafield.value === void 0) {
const noValueWarning = `<Metafield/>: No metafield value for metafield ${(_a = parsedMetafield.id) != null ? _a : parsedMetafield.key}. Rendering 'null'`;
{
throw new Error(noValueWarning);
}
}
switch (parsedMetafield.type) {
case "date": {
const Wrapper2 = as != null ? as : "time";
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
...passthroughProps,
children: parsedMetafield.value.toLocaleDateString(locale)
});
}
case "date_time": {
const Wrapper2 = as != null ? as : "time";
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
...passthroughProps,
children: parsedMetafield.value.toLocaleString(locale)
});
}
case "weight":
case "dimension":
case "volume": {
const Wrapper2 = as != null ? as : "span";
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
...passthroughProps,
children: getMeasurementAsString(parsedMetafield.value, locale)
});
}
case "rating": {
const Wrapper2 = as != null ? as : "span";
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
...passthroughProps,
children: parsedMetafield.value.value
});
}
case "single_line_text_field": {
const Wrapper2 = as != null ? as : "span";
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
...passthroughProps,
dangerouslySetInnerHTML: {
__html: parsedMetafield.value
}
});
}
case "multi_line_text_field": {
const Wrapper2 = as != null ? as : "div";
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
...passthroughProps,
dangerouslySetInnerHTML: {
__html: parsedMetafield.value.split("\n").join("<br/>")
}
});
}
case "url": {
const protocolLessUrl = new URL(parsedMetafield.value);
return /* @__PURE__ */ jsxRuntime.jsx("a", {
href: protocolLessUrl.href.replace(protocolLessUrl.protocol, ""),
...passthroughProps,
children: parsedMetafield.value
});
}
case "json": {
const Wrapper2 = as != null ? as : "span";
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
...passthroughProps,
children: JSON.stringify(parsedMetafield.value)
});
}
case "product_reference":
case "variant_reference":
case "page_reference": {
const Wrapper2 = as != null ? as : "span";
const ref = parsedMetafield.reference;
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
...passthroughProps,
children: (_c = (_b = ref == null ? void 0 : ref.title) != null ? _b : ref == null ? void 0 : ref.id) != null ? _c : ""
});
}
case "list.single_line_text_field": {
const Wrapper2 = as != null ? as : "ul";
const refArray = parsedMetafield.references ? flattenConnection.flattenConnection(parsedMetafield.references) : [];
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
...passthroughProps,
children: refArray.map((ref, index) => /* @__PURE__ */ jsxRuntime.jsx("li", {
children: ref
}, `${ref != null ? ref : ""}-${index}`))
});
}
case "file_reference": {
if (((_d = parsedMetafield.reference) == null ? void 0 : _d.__typename) === "MediaImage") {
const ref = parsedMetafield.reference;
return ref.image ? /* @__PURE__ */ jsxRuntime.jsx(Image.Image, {
data: ref.image,
...passthroughProps
}) : null;
} else if (((_e = parsedMetafield.reference) == null ? void 0 : _e.__typename) === "GenericFile") {
const ref = parsedMetafield.reference;
return ref.previewImage ? /* @__PURE__ */ jsxRuntime.jsx("a", {
href: (_g = (_f = parsedMetafield.reference) == null ? void 0 : _f.url) != null ? _g : "",
...passthroughProps,
children: /* @__PURE__ */ jsxRuntime.jsx(Image.Image, {
data: ref.previewImage
})
}) : null;
} else if (((_h = parsedMetafield.reference) == null ? void 0 : _h.__typename) === "Video") {
const ref = parsedMetafield.reference;
return /* @__PURE__ */ jsxRuntime.jsx(Video.Video, {
...passthroughProps,
data: ref
});
}
}
}
const Wrapper = as != null ? as : "span";
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, {
...passthroughProps,
children: (_i = parsedMetafield.value) == null ? void 0 : _i.toString()
});
}
function parseMetafield(metafield) {
if (!metafield) {
{
console.warn(`'parseMetafield' was not passed any value for the 'metafield' argument`);
}
return null;
}
if (metafield.value === null || metafield.value === void 0) {
console.warn(`'parseMetafield()' was passed ${metafield.value} for 'metafield.value'`);
}
return {
...metafield,
value: parseMetafieldValue(metafield)
};
}
function parseMetafieldValue(metafield) {
if (!metafield) {
return null;
}
if (metafield.value === null || metafield.value === void 0) {
{
console.warn(`'parseMetafieldValue()' was passed ${metafield.value} for 'metafield.value'`);
}
return metafield.value;
}
switch (metafield.type) {
case "boolean":
return metafield.value === "true";
case "number_integer":
return parseInt(metafield.value);
case "number_decimal":
return parseFloat(metafield.value);
case "date":
case "date_time":
return new Date(metafield.value);
case "json":
case "weight":
case "dimension":
case "volume":
case "rating":
return parseJSON(metafield.value);
case "color":
case "single_line_text_field":
case "multi_line_text_field":
case "product_reference":
case "page_reference":
case "variant_reference":
case "file_reference":
case "url":
default:
return metafield.value;
}
}
function parseJSON(json) {
if (String(json).includes("__proto__")) {
return JSON.parse(json, (k, v) => {
if (k !== "__proto__")
return v;
});
}
return JSON.parse(json);
}
const UNIT_MAPPING = {
mm: "millimeter",
cm: "centimeter",
m: "meter",
in: "inch",
ft: "foot",
yd: "yard",
ml: "milliliter",
l: "liter",
us_fl_oz: "fluid-ounce",
us_gal: "gallon",
kg: "kilogram",
g: "gram",
lb: "pound",
oz: "ounce"
};
function getMeasurementAsString(measurement, locale = "en-us", options = {}) {
let measure = {
value: measurement.value,
unit: UNIT_MAPPING[measurement.unit]
};
if (measure.unit == null) {
measure = convertToSupportedUnit(measurement.value, measurement.unit);
}
return new Intl.NumberFormat(locale, {
...options,
unit: measure.unit,
style: "unit"
}).format(measure.value);
}
function convertToSupportedUnit(value, unit) {
switch (unit) {
case "cl":
return {
value: value / 1e3,
unit: "liter"
};
case "m3":
return {
value: value * 1e3,
unit: "liter"
};
case "us_pt":
return {
value: value * 0.125,
unit: "gallon"
};
case "us_qt":
return {
value: value * 0.5,
unit: "gallon"
};
case "us_oz":
return {
value: value / 128,
unit: "gallon"
};
case "imp_pt":
return {
value: value / 6.661,
unit: "gallon"
};
case "imp_qt":
return {
value: value / 3.331,
unit: "gallon"
};
case "imp_gal":
return {
value: value / 1.201,
unit: "gallon"
};
case "imp_fl_oz":
return {
value: value * 0.96076,
unit: "fluid-ounce"
};
default:
throw new Error(`Unit not supported: ${unit}`);
}
}
exports.Metafield = Metafield;
exports.getMeasurementAsString = getMeasurementAsString;
exports.parseJSON = parseJSON;
exports.parseMetafield = parseMetafield;
exports.parseMetafieldValue = parseMetafieldValue;
//# sourceMappingURL=Metafield.js.map