123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231 |
- '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;
|