@wix/design-system
Version:
@wix/design-system
402 lines (399 loc) • 15 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.js");
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/57e038ea7326c1ec/packages/wix-design-system/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 = 3000;
var TRANSITION_SPEED = 600;
var SLIDES_TO_SHOW = 1;
var dataHooks = {
imagesContainer: 'images-container',
carouselImage: 'carousel-img',
loader: 'loader',
prevButton: 'prev-button',
nextButton: 'next-button',
pageNavigation: index => "page-navigation-".concat(index)
};
/**
* @internal
* SliderArrow wrapper that passes `...rest` props.
* This is a workaround for react-slick#1195 arrow error */
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: 39,
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: 155,
columnNumber: 16
}
});
case 'small':
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeftLargeSmall, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 16
}
});
default:
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeftLarge, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 16
}
});
}
};
this.rightIconByControlSize = controlSize => {
switch (controlSize) {
case 'tiny':
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRightSmall, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 16
}
});
case 'small':
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRightLargeSmall, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 16
}
});
default:
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRightLarge, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 170,
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 _this$props$children, _this$props$images;
var {
infinite,
autoplay,
dots,
variableWidth,
buttonSkin,
initialSlideIndex,
afterChange,
beforeChange,
controlsPosition,
controlsSize,
gradient,
controlsStartEnd
} = _ref2;
return {
// in order to avoid duplicated items bug react-slick@0.30.2 - https://github.com/akiran/react-slick/issues/1171
infinite: (((_this$props$children = this.props.children) == null ? void 0 : _this$props$children.length) || ((_this$props$images = this.props.images) == null ? void 0 : _this$props$images.length)) > SLIDES_TO_SHOW ? infinite : false,
autoplay,
speed: TRANSITION_SPEED,
autoplaySpeed: AUTOPLAY_SPEED,
initialSlide: initialSlideIndex,
dots,
slidesToShow: SLIDES_TO_SHOW,
slidesToScroll: 1,
variableWidth,
afterChange,
beforeChange,
prevArrow: /*#__PURE__*/_react.default.createElement(WrappedSliderArrow, {
dataHook: dataHooks.prevButton,
buttonSkin: buttonSkin,
arrowSize: controlsSize,
icon: this.leftIconByControlSize(controlsSize),
controlsStartEnd: controlsStartEnd,
gradientClassName: !!gradient && controlsPosition === 'overlay' ? _CarouselSt.classes.arrowPrevBackground : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 9
}
}),
nextArrow: /*#__PURE__*/_react.default.createElement(WrappedSliderArrow, {
dataHook: dataHooks.nextButton,
buttonSkin: buttonSkin,
arrowSize: controlsSize,
icon: this.rightIconByControlSize(controlsSize),
controlsStartEnd: controlsStartEnd,
gradientClassName: !!gradient && controlsPosition === 'overlay' ? _CarouselSt.classes.arrowNextBackground : undefined,
__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: (0, _CarouselSt.st)(_CarouselSt.classes.pagination, {
controlsPosition
}),
pages: pages,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 11
}
});
},
customPaging: i => /*#__PURE__*/_react.default.createElement("div", {
className: _CarouselSt.classes.pageNavigation,
"data-hook": dataHooks.pageNavigation(i),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 252,
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: 265,
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: 269,
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: 275,
columnNumber: 11
}
}))), this._isLoading(image.src) && /*#__PURE__*/_react.default.createElement("div", {
className: _CarouselSt.classes.loader,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 288,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Loader.default, {
dataHook: "loader",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 289,
columnNumber: 13
}
}))));
};
this.state = {
sliderSettings: this._resolveSliderSettings(props),
loadedImages: []
};
this.sliderRef = /*#__PURE__*/_react.default.createRef();
}
_onImageLoad(src) {
this.setState(state => ({
loadedImages: [...state.loadedImages, src]
}));
}
_isLoading(src) {
return !this.state.loadedImages.includes(src);
}
render() {
var {
dataHook,
className,
images,
children,
controlsPosition,
controlsSize,
showControlsShadow,
gradient,
gradientColor,
dots
} = 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,
gradient,
customGradient: !!gradientColor,
dots
}, className),
style: {
[_CarouselSt.vars['carousel-gradient-color']]: gradientColor
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 323,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_reactSlick.default, (0, _extends2.default)({
ref: this.sliderRef
}, sliderSettings, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 339,
columnNumber: 9
}
}), children, hasImages && this._renderImages(images)));
}
}
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.
* @internal
*/
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', 'large']),
/** 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']),
/** Controls gradient color when controlsPosition set to overlay
* @default white
*/
gradientColor: _propTypes.default.string,
/** Enables gradient on when controlsPosition set to overlay
* @default false
*/
gradient: _propTypes.default.bool
};
Carousel.defaultProps = {
infinite: true,
dots: true,
variableWidth: false,
initialSlideIndex: 0,
gradient: false,
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