wix-style-react
Version:
wix-style-react
368 lines (367 loc) • 13.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _matchMediaRegister = require("./utils/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"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Carousel/Carousel.js"; // This is here and not in the test setup because we don't want consumers to need to run it as well
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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: index => "page-navigation-".concat(index)
};
var WrappedSliderArrow = _ref => {
var {
currentSlide,
slideCount
} = _ref,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
return /*#__PURE__*/_react.default.createElement(_SliderArrow.default, (0, _extends2.default)({}, rest, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 3
}
}));
};
var isTestEnv = process.env.NODE_ENV === 'test';
if (isTestEnv && typeof window !== 'undefined' && !window.matchMedia) {
(0, _matchMediaRegister.register)();
}
class Carousel extends _react.default.Component {
constructor(props) {
super(props);
this.leftIconByControlSize = controlSize => {
switch (controlSize) {
case 'tiny':
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeftSmall, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 16
}
});
case 'small':
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeftLargeSmall, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 16
}
});
default:
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeftLarge, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 16
}
});
}
};
this.rightIconByControlSize = controlSize => {
switch (controlSize) {
case 'tiny':
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRightSmall, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 16
}
});
case 'small':
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRightLargeSmall, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 16
}
});
default:
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRightLarge, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 16
}
});
}
};
/** Slide to slide by index */
this.slideTo = index => {
var _this$sliderRef;
(_this$sliderRef = this.sliderRef) == null || _this$sliderRef.current.slickGoTo(index);
};
this._resolveSliderSettings = _ref2 => {
var {
infinite,
autoplay,
dots,
variableWidth,
buttonSkin,
initialSlideIndex,
afterChange,
beforeChange,
controlsPosition,
controlsSize,
controlsStartEnd
} = _ref2;
return {
infinite,
autoplay,
speed: TRANSITION_SPEED,
autoplaySpeed: AUTOPLAY_SPEED,
initialSlide: initialSlideIndex,
dots,
slidesToShow: 1,
slidesToScroll: 1,
variableWidth,
afterChange,
beforeChange,
nextArrow: /*#__PURE__*/_react.default.createElement(WrappedSliderArrow, {
dataHook: dataHooks.nextButton,
buttonSkin: buttonSkin,
arrowSize: controlsSize,
icon: this.rightIconByControlSize(controlsSize),
controlsStartEnd: controlsStartEnd,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 9
}
}),
prevArrow: /*#__PURE__*/_react.default.createElement(WrappedSliderArrow, {
dataHook: dataHooks.prevButton,
buttonSkin: buttonSkin,
arrowSize: controlsSize,
icon: this.leftIconByControlSize(controlsSize),
controlsStartEnd: controlsStartEnd,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 9
}
}),
arrows: controlsPosition !== 'none',
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,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 240,
columnNumber: 11
}
});
},
customPaging: i => /*#__PURE__*/_react.default.createElement("div", {
className: _CarouselSt.classes.pageNavigation,
"data-hook": dataHooks.pageNavigation(i),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 9
}
}, i)
};
};
this._renderImages = images => {
var {
imagesPosition,
imagesFit
} = this.props;
return images.map((image, index) => /*#__PURE__*/_react.default.createElement(_Proportion.default, {
key: "".concat(index).concat(image.src),
aspectRatio: _Proportion.default.PREDEFINED_RATIOS.landscape,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _CarouselSt.st)(_CarouselSt.classes.imageContainer, {
isLoading: this._isLoading(image.src)
}),
"data-hook": dataHooks.imagesContainer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, image, {
"data-hook": dataHooks.carouselImage,
className: _CarouselSt.classes.image,
onLoad: () => this._onImageLoad(image.src),
style: _objectSpread({
objectPosition: imagesPosition,
objectFit: imagesFit
}, image.style),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 267,
columnNumber: 11
}
}))), this._isLoading(image.src) && /*#__PURE__*/_react.default.createElement("div", {
className: _CarouselSt.classes.loader,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Loader.default, {
dataHook: "loader",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 13
}
}))));
};
this.state = {
sliderSettings: this._resolveSliderSettings(props),
loadedImages: []
};
this.sliderRef = /*#__PURE__*/_react.default.createRef();
}
render() {
var {
dataHook,
className,
images,
children,
controlsPosition,
controlsSize,
showControlsShadow
} = this.props;
var {
sliderSettings
} = this.state;
var hasImages = !children && images.length > 0;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _CarouselSt.st)(_CarouselSt.classes.root, {
controlsPosition,
controlsSize,
showControlsShadow
}, className),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_reactSlick.default, (0, _extends2.default)({
ref: this.sliderRef
}, sliderSettings, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 9
}
}), children, hasImages && this._renderImages(images)));
}
_onImageLoad(src) {
this.setState(state => ({
loadedImages: [...state.loadedImages, src]
}));
}
_isLoading(src) {
return !this.state.loadedImages.includes(src);
}
}
Carousel.displayName = 'Carousel';
Carousel.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** Specifies a CSS class name to be appended to the component’s root element */
className: _propTypes.default.string,
/** Defines an array of objects where each contains the `src` of an image (in `<img src="your_src" />`) */
images: _propTypes.default.array,
/** Sets the image's position */
imagesPosition: _propTypes.default.string,
/** Sets the image’s fit */
imagesFit: _propTypes.default.oneOf(['fill', 'contain', 'cover', 'none', 'scale-down']),
/** Accepts any component as a child item. Most commonly used to display `<Card/>`, `<Image/>` or video files. */
children: _propTypes.default.node,
/** Sets the skin of the control (next / previous) buttons */
buttonSkin: _propTypes.default.oneOf(['standard', 'inverted', 'light']),
/** Drops a shadow below the control buttons */
showControlsShadow: _propTypes.default.bool,
/** Loops images endlessly */
infinite: _propTypes.default.bool,
/** Auto-plays images */
autoplay: _propTypes.default.bool,
/** Controls if the bottom dots are visible or hidden */
dots: _propTypes.default.bool,
/** Shows one slide at a time (default) or stacks one slide after another horizontally */
variableWidth: _propTypes.default.bool,
/** Sets the slide to start a presentation with */
initialSlideIndex: _propTypes.default.number,
/** Index change callback. `index => ...` */
afterChange: _propTypes.default.func,
/** Index change callback. `(oldIndex, newIndex) => ...` */
beforeChange: _propTypes.default.func,
/** Sets the control buttons’ position */
controlsPosition: _propTypes.default.oneOf(['sides', 'overlay', 'bottom', 'none']),
/** Sets the control buttons’ size */
controlsSize: _propTypes.default.oneOf(['tiny', 'small', 'medium']),
/** Controls if the next / previous control buttons are visible, hidden or disabled at the start and end of the slideshow */
controlsStartEnd: _propTypes.default.oneOf(['disabled', 'hidden'])
};
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 = exports.default = Carousel;
//# sourceMappingURL=Carousel.js.map