image_zoom_function
Version:
Adds a pincode functionality to PDP
181 lines (177 loc) • 7.91 kB
JavaScript
"use strict";
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = require("prop-types");
var _reactIntl = require("react-intl");
var _reactFeather = require("react-feather");
var _images = require("@magento/peregrine/lib/util/images");
var _useProductImageCarousel = require("@magento/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel");
var _classify = require("@magento/venia-ui/lib/classify");
var _AriaButton = _interopRequireDefault(require("@magento/venia-ui/lib/components/AriaButton"));
var _index = _interopRequireDefault(require("@magento/venia-ui/lib/components/Icon/index"));
var _index2 = _interopRequireDefault(require("@magento/venia-ui/lib/components/Image/index"));
var _carouselModule = _interopRequireDefault(require("@magento/venia-ui/lib/components/ProductImageCarousel/carousel.module.css"));
var _thumbnail = _interopRequireDefault(require("@magento/venia-ui/lib/components/ProductImageCarousel/thumbnail"));
var _reactZoomPanPinch = require("react-zoom-pan-pinch");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var IMAGE_WIDTH = 640;
/**
* Carousel component for product images
* Carousel - Component that holds number of images
* where typically one image visible, and other
* images can be navigated through previous and next buttons
*
* @typedef ProductImageCarousel
* @kind functional component
*
* @param {props} props
*
* @returns {React.Element} React carousel component that displays a product image
*/
var ProductImageCarousel = function ProductImageCarousel(props) {
var images = props.images;
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var talonProps = (0, _useProductImageCarousel.useProductImageCarousel)({
images: images,
imageWidth: IMAGE_WIDTH
});
var currentImage = talonProps.currentImage,
activeItemIndex = talonProps.activeItemIndex,
altText = talonProps.altText,
handleNext = talonProps.handleNext,
handlePrevious = talonProps.handlePrevious,
handleThumbnailClick = talonProps.handleThumbnailClick,
sortedImages = talonProps.sortedImages;
// create thumbnail image component for every images in sorted order
var thumbnails = (0, _react.useMemo)(function () {
return sortedImages.map(function (item, index) {
return /*#__PURE__*/_react["default"].createElement(_thumbnail["default"], {
key: item.uid,
item: item,
itemIndex: index,
isActive: activeItemIndex === index,
onClickHandler: handleThumbnailClick
});
});
}, [activeItemIndex, handleThumbnailClick, sortedImages]);
var classes = (0, _classify.useStyle)(_carouselModule["default"], props.classes);
var image;
if (currentImage.file) {
image =
/*#__PURE__*/
// <div style={{
// maxWidth: '100%', width: '450px',
// height: 'auto', justifyContent: 'center', alignItems: 'center'
// }}>
// <ReactImageZoom {...propsForZoom} />
// </div>
_react["default"].createElement("div", {
style: {
display: "flex",
gap: "20px"
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: "450px"
}
}, /*#__PURE__*/_react["default"].createElement(_reactZoomPanPinch.TransformWrapper, null, /*#__PURE__*/_react["default"].createElement(_reactZoomPanPinch.TransformComponent, null, /*#__PURE__*/_react["default"].createElement(_index2["default"], {
alt: altText
// classes={{
// image: classes.currentImage,
// root: classes.imageContainer
// }}
,
resource: currentImage.file,
width: IMAGE_WIDTH
})))));
} else {
image = /*#__PURE__*/_react["default"].createElement(_index2["default"], {
alt: altText,
classes: {
image: classes.currentImage_placeholder,
root: classes.imageContainer
},
src: _images.transparentPlaceholder
});
}
var previousButton = formatMessage({
id: 'productImageCarousel.previousButtonAriaLabel',
defaultMessage: 'Previous Image'
});
var nextButton = formatMessage({
id: 'productImageCarousel.nextButtonAriaLabel',
defaultMessage: 'Next Image'
});
var chevronClasses = {
root: classes.chevron
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: classes.root
}, /*#__PURE__*/_react["default"].createElement("div", {
className: classes.carouselContainer
}, /*#__PURE__*/_react["default"].createElement(_AriaButton["default"], {
className: classes.previousButton,
onPress: handlePrevious,
"aria-label": previousButton,
type: "button"
}, /*#__PURE__*/_react["default"].createElement(_index["default"], {
classes: chevronClasses,
src: _reactFeather.ChevronLeft,
size: 40
})), image, /*#__PURE__*/_react["default"].createElement(_AriaButton["default"], {
className: classes.nextButton,
onPress: handleNext,
"aria-label": nextButton,
type: "button"
}, /*#__PURE__*/_react["default"].createElement(_index["default"], {
classes: chevronClasses,
src: _reactFeather.ChevronRight,
size: 40
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: classes.thumbnailList
}, thumbnails));
};
/**
* Props for {@link ProductImageCarousel}
*
* @typedef props
*
* @property {Object} classes An object containing the class names for the
* ProductImageCarousel component
* @property {string} classes.currentImage classes for visible image
* @property {string} classes.imageContainer classes for image container
* @property {string} classes.nextButton classes for next button
* @property {string} classes.previousButton classes for previous button
* @property {string} classes.root classes for root container
* @property {Object[]} images Product images input for Carousel
* @property {bool} images[].disabled Is image disabled
* @property {string} images[].file filePath of image
* @property {string} images[].uid the id of the image
* @property {string} images[].label label for image
* @property {string} images[].position Position of image in Carousel
*/
ProductImageCarousel.propTypes = {
classes: (0, _propTypes.shape)({
carouselContainer: _propTypes.string,
currentImage: _propTypes.string,
currentImage_placeholder: _propTypes.string,
imageContainer: _propTypes.string,
nextButton: _propTypes.string,
previousButton: _propTypes.string,
root: _propTypes.string
}),
images: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
label: _propTypes.string,
position: _propTypes.number,
disabled: _propTypes.bool,
file: _propTypes.string.isRequired,
uid: _propTypes.string.isRequired
})).isRequired
};
var _default = exports["default"] = ProductImageCarousel;