231 lines
7.5 KiB
Java
231 lines
7.5 KiB
Java
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.CarouselProps = exports.CarouselEffect = undefined;
|
|
|
|
var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
|
|
|
|
var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
|
|
|
|
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
|
|
|
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
|
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
|
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
|
|
|
var _vueTypes = require('../_util/vue-types');
|
|
|
|
var _vueTypes2 = _interopRequireDefault(_vueTypes);
|
|
|
|
var _debounce = require('lodash/debounce');
|
|
|
|
var _debounce2 = _interopRequireDefault(_debounce);
|
|
|
|
var _propsUtil = require('../_util/props-util');
|
|
|
|
var _propsUtil2 = _interopRequireDefault(_propsUtil);
|
|
|
|
var _configConsumerProps = require('../config-provider/configConsumerProps');
|
|
|
|
var _base = require('../base');
|
|
|
|
var _base2 = _interopRequireDefault(_base);
|
|
|
|
var _warning = require('../_util/warning');
|
|
|
|
var _warning2 = _interopRequireDefault(_warning);
|
|
|
|
var _classnames = require('classnames');
|
|
|
|
var _classnames2 = _interopRequireDefault(_classnames);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
// matchMedia polyfill for
|
|
// https://github.com/WickyNilliams/enquire.js/issues/82
|
|
if (typeof window !== 'undefined') {
|
|
var matchMediaPolyfill = function matchMediaPolyfill(mediaQuery) {
|
|
return {
|
|
media: mediaQuery,
|
|
matches: false,
|
|
addListener: function addListener() {},
|
|
removeListener: function removeListener() {}
|
|
};
|
|
};
|
|
// ref: https://github.com/ant-design/ant-design/issues/18774
|
|
if (!window.matchMedia) window.matchMedia = matchMediaPolyfill;
|
|
}
|
|
// Use require over import (will be lifted up)
|
|
// make sure matchMedia polyfill run before require('vc-slick')
|
|
// Fix https://github.com/ant-design/ant-design/issues/6560
|
|
// Fix https://github.com/ant-design/ant-design/issues/3308
|
|
var SlickCarousel = require('../vc-slick/src')['default'];
|
|
|
|
var CarouselEffect = exports.CarouselEffect = _vueTypes2['default'].oneOf(['scrollx', 'fade']);
|
|
// Carousel
|
|
var CarouselProps = exports.CarouselProps = {
|
|
effect: CarouselEffect,
|
|
dots: _vueTypes2['default'].bool,
|
|
vertical: _vueTypes2['default'].bool,
|
|
autoplay: _vueTypes2['default'].bool,
|
|
easing: _vueTypes2['default'].string,
|
|
beforeChange: _vueTypes2['default'].func,
|
|
afterChange: _vueTypes2['default'].func,
|
|
// style: PropTypes.React.CSSProperties,
|
|
prefixCls: _vueTypes2['default'].string,
|
|
accessibility: _vueTypes2['default'].bool,
|
|
nextArrow: _vueTypes2['default'].any,
|
|
prevArrow: _vueTypes2['default'].any,
|
|
pauseOnHover: _vueTypes2['default'].bool,
|
|
// className: PropTypes.string,
|
|
adaptiveHeight: _vueTypes2['default'].bool,
|
|
arrows: _vueTypes2['default'].bool,
|
|
autoplaySpeed: _vueTypes2['default'].number,
|
|
centerMode: _vueTypes2['default'].bool,
|
|
centerPadding: _vueTypes2['default'].string,
|
|
cssEase: _vueTypes2['default'].string,
|
|
dotsClass: _vueTypes2['default'].string,
|
|
draggable: _vueTypes2['default'].bool,
|
|
fade: _vueTypes2['default'].bool,
|
|
focusOnSelect: _vueTypes2['default'].bool,
|
|
infinite: _vueTypes2['default'].bool,
|
|
initialSlide: _vueTypes2['default'].number,
|
|
lazyLoad: _vueTypes2['default'].bool,
|
|
rtl: _vueTypes2['default'].bool,
|
|
slide: _vueTypes2['default'].string,
|
|
slidesToShow: _vueTypes2['default'].number,
|
|
slidesToScroll: _vueTypes2['default'].number,
|
|
speed: _vueTypes2['default'].number,
|
|
swipe: _vueTypes2['default'].bool,
|
|
swipeToSlide: _vueTypes2['default'].bool,
|
|
touchMove: _vueTypes2['default'].bool,
|
|
touchThreshold: _vueTypes2['default'].number,
|
|
variableWidth: _vueTypes2['default'].bool,
|
|
useCSS: _vueTypes2['default'].bool,
|
|
slickGoTo: _vueTypes2['default'].number,
|
|
responsive: _vueTypes2['default'].array,
|
|
dotPosition: _vueTypes2['default'].oneOf(['top', 'bottom', 'left', 'right'])
|
|
};
|
|
|
|
var Carousel = {
|
|
name: 'ACarousel',
|
|
props: (0, _propsUtil.initDefaultProps)(CarouselProps, {
|
|
dots: true,
|
|
arrows: false,
|
|
draggable: false
|
|
}),
|
|
inject: {
|
|
configProvider: { 'default': function _default() {
|
|
return _configConsumerProps.ConfigConsumerProps;
|
|
} }
|
|
},
|
|
|
|
beforeMount: function beforeMount() {
|
|
this.onWindowResized = (0, _debounce2['default'])(this.onWindowResized, 500, {
|
|
leading: false
|
|
});
|
|
},
|
|
mounted: function mounted() {
|
|
if ((0, _propsUtil2['default'])(this, 'vertical')) {
|
|
(0, _warning2['default'])(!this.vertical, 'Carousel', '`vertical` is deprecated, please use `dotPosition` instead.');
|
|
}
|
|
var autoplay = this.autoplay;
|
|
|
|
if (autoplay) {
|
|
window.addEventListener('resize', this.onWindowResized);
|
|
}
|
|
// https://github.com/ant-design/ant-design/issues/7191
|
|
this.innerSlider = this.$refs.slick && this.$refs.slick.innerSlider;
|
|
},
|
|
beforeDestroy: function beforeDestroy() {
|
|
var autoplay = this.autoplay;
|
|
|
|
if (autoplay) {
|
|
window.removeEventListener('resize', this.onWindowResized);
|
|
this.onWindowResized.cancel();
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
getDotPosition: function getDotPosition() {
|
|
if (this.dotPosition) {
|
|
return this.dotPosition;
|
|
}
|
|
if ((0, _propsUtil2['default'])(this, 'vertical')) {
|
|
return this.vertical ? 'right' : 'bottom';
|
|
}
|
|
return 'bottom';
|
|
},
|
|
onWindowResized: function onWindowResized() {
|
|
// Fix https://github.com/ant-design/ant-design/issues/2550
|
|
var autoplay = this.autoplay;
|
|
|
|
if (autoplay && this.$refs.slick && this.$refs.slick.innerSlider && this.$refs.slick.innerSlider.autoPlay) {
|
|
this.$refs.slick.innerSlider.autoPlay();
|
|
}
|
|
},
|
|
next: function next() {
|
|
this.$refs.slick.slickNext();
|
|
},
|
|
prev: function prev() {
|
|
this.$refs.slick.slickPrev();
|
|
},
|
|
goTo: function goTo(slide) {
|
|
var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
|
|
this.$refs.slick.slickGoTo(slide, dontAnimate);
|
|
}
|
|
},
|
|
|
|
render: function render() {
|
|
var h = arguments[0];
|
|
|
|
var props = (0, _extends3['default'])({}, this.$props);
|
|
var $slots = this.$slots;
|
|
|
|
|
|
if (props.effect === 'fade') {
|
|
props.fade = true;
|
|
}
|
|
|
|
var getPrefixCls = this.configProvider.getPrefixCls;
|
|
var className = getPrefixCls('carousel', props.prefixCls);
|
|
var dotsClass = 'slick-dots';
|
|
var dotPosition = this.getDotPosition();
|
|
props.vertical = dotPosition === 'left' || dotPosition === 'right';
|
|
props.dotsClass = (0, _classnames2['default'])('' + dotsClass, dotsClass + '-' + (dotPosition || 'bottom'), (0, _defineProperty3['default'])({}, '' + props.dotsClass, !!props.dotsClass));
|
|
if (props.vertical) {
|
|
className = className + ' ' + className + '-vertical';
|
|
}
|
|
var SlickCarouselProps = {
|
|
props: (0, _extends3['default'])({}, props, {
|
|
nextArrow: (0, _propsUtil.getComponentFromProp)(this, 'nextArrow'),
|
|
prevArrow: (0, _propsUtil.getComponentFromProp)(this, 'prevArrow')
|
|
}),
|
|
on: (0, _propsUtil.getListeners)(this),
|
|
scopedSlots: this.$scopedSlots
|
|
};
|
|
var children = (0, _propsUtil.filterEmpty)($slots['default']);
|
|
return h(
|
|
'div',
|
|
{ 'class': className },
|
|
[h(
|
|
SlickCarousel,
|
|
(0, _babelHelperVueJsxMergeProps2['default'])([{ ref: 'slick' }, SlickCarouselProps]),
|
|
[children]
|
|
)]
|
|
);
|
|
}
|
|
};
|
|
|
|
/* istanbul ignore next */
|
|
Carousel.install = function (Vue) {
|
|
Vue.use(_base2['default']);
|
|
Vue.component(Carousel.name, Carousel);
|
|
};
|
|
|
|
exports['default'] = Carousel; |