@shopify/hydrogen-react
Version:
React components, hooks, and utilities for creating custom Shopify storefronts
77 lines (76 loc) • 2.38 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const CartProvider = require("./CartProvider.js");
const ProductProvider = require("./ProductProvider.js");
const BaseButton = require("./BaseButton.js");
function AddToCartButton(props) {
const [addingItem, setAddingItem] = React.useState(false);
const {
variantId: explicitVariantId,
quantity = 1,
attributes,
sellingPlanId,
onClick,
children,
accessibleAddingToCartLabel,
parent,
...passthroughProps
} = props;
const { status, linesAdd } = CartProvider.useCart();
const { selectedVariant } = ProductProvider.useProduct();
const variantId = explicitVariantId ?? (selectedVariant == null ? void 0 : selectedVariant.id) ?? "";
const disabled = explicitVariantId === null || variantId === "" || selectedVariant === null || addingItem || // Only certain 'as' types such as 'button' contain `disabled`
passthroughProps.disabled;
React.useEffect(() => {
if (addingItem && status === "idle") {
setAddingItem(false);
}
}, [status, addingItem]);
const handleAddItem = React.useCallback(() => {
setAddingItem(true);
linesAdd([
{
quantity,
merchandiseId: variantId || "",
attributes,
parent,
sellingPlanId
}
]);
}, [linesAdd, quantity, variantId, attributes, sellingPlanId, parent]);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
BaseButton.BaseButton,
{
...passthroughProps,
disabled,
onClick,
defaultOnClick: handleAddItem,
children
}
),
accessibleAddingToCartLabel ? /* @__PURE__ */ jsxRuntime.jsx(
"p",
{
style: {
position: "absolute",
width: "1px",
height: "1px",
padding: "0",
margin: "-1px",
overflow: "hidden",
clip: "rect(0, 0, 0, 0)",
whiteSpace: "nowrap",
borderWidth: "0"
},
role: "alert",
"aria-live": "assertive",
children: addingItem ? accessibleAddingToCartLabel : null
}
) : null
] });
}
exports.AddToCartButton = AddToCartButton;
//# sourceMappingURL=AddToCartButton.js.map