wix-style-react
Version:
330 lines (269 loc) • 14.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ChevronLeftLarge = _interopRequireDefault(require("wix-ui-icons-common/ChevronLeftLarge"));
var _ChevronRightLarge = _interopRequireDefault(require("wix-ui-icons-common/ChevronRightLarge"));
var _ChevronLeftLargeSmall = _interopRequireDefault(require("wix-ui-icons-common/ChevronLeftLargeSmall"));
var _ChevronRightLargeSmall = _interopRequireDefault(require("wix-ui-icons-common/ChevronRightLargeSmall"));
var _ChevronLeftSmall = _interopRequireDefault(require("wix-ui-icons-common/ChevronLeftSmall"));
var _ChevronRightSmall = _interopRequireDefault(require("wix-ui-icons-common/ChevronRightSmall"));
require("../common/match-media-register");
var _reactSlick = _interopRequireDefault(require("react-slick"));
var _CarouselSt = require("./Carousel.st.css");
var _Pagination = _interopRequireDefault(require("./Pagination"));
var _SliderArrow = _interopRequireDefault(require("./SliderArrow"));
var _Loader = _interopRequireDefault(require("../Loader"));
var _Proportion = _interopRequireDefault(require("../Proportion"));
var _excluded = ["currentSlide", "slideCount"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var AUTOPLAY_SPEED = 2000;
var TRANSITION_SPEED = 600;
var dataHooks = {
imagesContainer: 'images-container',
carouselImage: 'carousel-img',
loader: 'loader',
prevButton: 'prev-button',
nextButton: 'next-button',
pageNavigation: function pageNavigation(index) {
return "page-navigation-".concat(index);
}
};
var WrappedSliderArrow = function WrappedSliderArrow(_ref) {
var currentSlide = _ref.currentSlide,
slideCount = _ref.slideCount,
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
return /*#__PURE__*/_react["default"].createElement(_SliderArrow["default"], rest);
};
var Carousel = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(Carousel, _React$Component);
var _super = _createSuper(Carousel);
function Carousel(props) {
var _this;
(0, _classCallCheck2["default"])(this, Carousel);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "leftIconByControlSize", function (controlSize) {
switch (controlSize) {
case 'tiny':
return /*#__PURE__*/_react["default"].createElement(_ChevronLeftSmall["default"], null);
case 'small':
return /*#__PURE__*/_react["default"].createElement(_ChevronLeftLargeSmall["default"], null);
default:
return /*#__PURE__*/_react["default"].createElement(_ChevronLeftLarge["default"], null);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "rightIconByControlSize", function (controlSize) {
switch (controlSize) {
case 'tiny':
return /*#__PURE__*/_react["default"].createElement(_ChevronRightSmall["default"], null);
case 'small':
return /*#__PURE__*/_react["default"].createElement(_ChevronRightLargeSmall["default"], null);
default:
return /*#__PURE__*/_react["default"].createElement(_ChevronRightLarge["default"], null);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_resolveSliderSettings", function (_ref2) {
var infinite = _ref2.infinite,
autoplay = _ref2.autoplay,
dots = _ref2.dots,
variableWidth = _ref2.variableWidth,
buttonSkin = _ref2.buttonSkin,
initialSlideIndex = _ref2.initialSlideIndex,
afterChange = _ref2.afterChange,
beforeChange = _ref2.beforeChange,
controlsPosition = _ref2.controlsPosition,
controlsSize = _ref2.controlsSize,
controlsStartEnd = _ref2.controlsStartEnd;
return {
infinite: infinite,
autoplay: autoplay,
speed: TRANSITION_SPEED,
autoplaySpeed: AUTOPLAY_SPEED,
initialSlide: initialSlideIndex,
dots: dots,
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: variableWidth,
afterChange: afterChange,
beforeChange: beforeChange,
nextArrow: /*#__PURE__*/_react["default"].createElement(WrappedSliderArrow, {
dataHook: dataHooks.nextButton,
buttonSkin: buttonSkin,
arrowSize: controlsSize,
icon: _this.rightIconByControlSize(controlsSize),
controlsStartEnd: controlsStartEnd
}),
prevArrow: /*#__PURE__*/_react["default"].createElement(WrappedSliderArrow, {
dataHook: dataHooks.prevButton,
buttonSkin: buttonSkin,
arrowSize: controlsSize,
icon: _this.leftIconByControlSize(controlsSize),
controlsStartEnd: controlsStartEnd
}),
arrows: controlsPosition !== 'none',
appendDots: function appendDots(pages) {
/*
* originalClassName is a workaround for stylable API extend to work and pass an extendable className.
* This is because react-slick overrides brutally the className prop with cloneElement().
*/
return /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
originalClassName: _CarouselSt.classes.pagination,
pages: pages
});
},
customPaging: function customPaging(i) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: _CarouselSt.classes.pageNavigation,
"data-hook": dataHooks.pageNavigation(i)
}, i);
}
};
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderImages", function (images) {
var _this$props = _this.props,
imagesPosition = _this$props.imagesPosition,
imagesFit = _this$props.imagesFit;
return images.map(function (image, index) {
return /*#__PURE__*/_react["default"].createElement(_Proportion["default"], {
key: "".concat(index).concat(image.src),
aspectRatio: _Proportion["default"].PREDEFINED_RATIOS.landscape
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _CarouselSt.st)(_CarouselSt.classes.imageContainer, {
isLoading: _this._isLoading(image.src)
}),
"data-hook": dataHooks.imagesContainer
}, /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, image, {
"data-hook": dataHooks.carouselImage,
className: _CarouselSt.classes.image,
onLoad: function onLoad() {
return _this._onImageLoad(image.src);
},
style: _objectSpread({
objectPosition: imagesPosition,
objectFit: imagesFit
}, image.style)
}))), _this._isLoading(image.src) && /*#__PURE__*/_react["default"].createElement("div", {
className: _CarouselSt.classes.loader
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
dataHook: "loader",
size: "small"
})));
});
});
_this.state = {
sliderSettings: _this._resolveSliderSettings(props),
loadedImages: []
};
return _this;
}
(0, _createClass2["default"])(Carousel, [{
key: "render",
value: function render() {
var _this$props2 = this.props,
dataHook = _this$props2.dataHook,
className = _this$props2.className,
images = _this$props2.images,
children = _this$props2.children,
controlsPosition = _this$props2.controlsPosition,
controlsSize = _this$props2.controlsSize,
showControlsShadow = _this$props2.showControlsShadow;
var sliderSettings = this.state.sliderSettings;
var hasImages = !children && images.length > 0;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _CarouselSt.st)(_CarouselSt.classes.root, {
controlsPosition: controlsPosition,
controlsSize: controlsSize,
showControlsShadow: showControlsShadow
}, className)
}, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], sliderSettings, children, hasImages && this._renderImages(images)));
}
}, {
key: "_onImageLoad",
value: function _onImageLoad(src) {
this.setState(function (state) {
return {
loadedImages: [].concat((0, _toConsumableArray2["default"])(state.loadedImages), [src])
};
});
}
}, {
key: "_isLoading",
value: function _isLoading(src) {
return !this.state.loadedImages.includes(src);
}
}]);
return Carousel;
}(_react["default"].Component);
(0, _defineProperty2["default"])(Carousel, "displayName", 'Carousel');
(0, _defineProperty2["default"])(Carousel, "propTypes", {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes["default"].string,
/** A single CSS class name to be appended to the Carousel's wrapper element. */
className: _propTypes["default"].string,
/** Array of objects where each contains the `src` of an image (in \<img src="your_src" /\>) */
images: _propTypes["default"].array,
/** Sets the images position */
imagesPosition: _propTypes["default"].string,
/** Sets the images fit */
imagesFit: _propTypes["default"].oneOf(['fill', 'contain', 'cover', 'none', 'scale-down']),
/** Any element to render inside */
children: _propTypes["default"].node,
/** Sets the skin of the arrow buttons */
buttonSkin: _propTypes["default"].oneOf(['standard', 'inverted', 'light']),
/** Show a shadow for the carousel controls */
showControlsShadow: _propTypes["default"].bool,
/** Images loop endlessly */
infinite: _propTypes["default"].bool,
/** Auto-playing of images */
autoplay: _propTypes["default"].bool,
/** Show dots */
dots: _propTypes["default"].bool,
/** Variable width of children */
variableWidth: _propTypes["default"].bool,
/** An index of the slide to start on */
initialSlideIndex: _propTypes["default"].number,
/** Index change callback. `index => ...` */
afterChange: _propTypes["default"].func,
/** Index change callback. `(oldIndex, newIndex) => ...` */
beforeChange: _propTypes["default"].func,
/** Sets the arrows position */
controlsPosition: _propTypes["default"].oneOf(['sides', 'overlay', 'bottom', 'none']),
/** Sets the arrows size */
controlsSize: _propTypes["default"].oneOf(['tiny', 'small', 'medium']),
/** Configure the start and end controls to be shown disabled or hidden. Relevant when infinite prop is set to false. */
controlsStartEnd: _propTypes["default"].oneOf(['disabled', 'hidden'])
});
(0, _defineProperty2["default"])(Carousel, "defaultProps", {
infinite: true,
dots: true,
variableWidth: false,
initialSlideIndex: 0,
images: [],
imagesPosition: 'center top',
imagesFit: 'contain',
buttonSkin: 'standard',
controlsPosition: 'sides',
controlsSize: 'medium',
controlsStartEnd: 'disabled',
showControlsShadow: false
});
var _default = Carousel;
exports["default"] = _default;