index.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
  2. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  3. import _extends from 'babel-runtime/helpers/extends';
  4. import PropTypes from '../_util/vue-types';
  5. import debounce from 'lodash/debounce';
  6. import hasProp, { initDefaultProps, getComponentFromProp, filterEmpty, getListeners } from '../_util/props-util';
  7. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  8. import Base from '../base';
  9. import warning from '../_util/warning';
  10. import classNames from 'classnames';
  11. // matchMedia polyfill for
  12. // https://github.com/WickyNilliams/enquire.js/issues/82
  13. if (typeof window !== 'undefined') {
  14. var matchMediaPolyfill = function matchMediaPolyfill(mediaQuery) {
  15. return {
  16. media: mediaQuery,
  17. matches: false,
  18. addListener: function addListener() {},
  19. removeListener: function removeListener() {}
  20. };
  21. };
  22. // ref: https://github.com/ant-design/ant-design/issues/18774
  23. if (!window.matchMedia) window.matchMedia = matchMediaPolyfill;
  24. }
  25. // Use require over import (will be lifted up)
  26. // make sure matchMedia polyfill run before require('vc-slick')
  27. // Fix https://github.com/ant-design/ant-design/issues/6560
  28. // Fix https://github.com/ant-design/ant-design/issues/3308
  29. var SlickCarousel = require('../vc-slick/src')['default'];
  30. export var CarouselEffect = PropTypes.oneOf(['scrollx', 'fade']);
  31. // Carousel
  32. export var CarouselProps = {
  33. effect: CarouselEffect,
  34. dots: PropTypes.bool,
  35. vertical: PropTypes.bool,
  36. autoplay: PropTypes.bool,
  37. easing: PropTypes.string,
  38. beforeChange: PropTypes.func,
  39. afterChange: PropTypes.func,
  40. // style: PropTypes.React.CSSProperties,
  41. prefixCls: PropTypes.string,
  42. accessibility: PropTypes.bool,
  43. nextArrow: PropTypes.any,
  44. prevArrow: PropTypes.any,
  45. pauseOnHover: PropTypes.bool,
  46. // className: PropTypes.string,
  47. adaptiveHeight: PropTypes.bool,
  48. arrows: PropTypes.bool,
  49. autoplaySpeed: PropTypes.number,
  50. centerMode: PropTypes.bool,
  51. centerPadding: PropTypes.string,
  52. cssEase: PropTypes.string,
  53. dotsClass: PropTypes.string,
  54. draggable: PropTypes.bool,
  55. fade: PropTypes.bool,
  56. focusOnSelect: PropTypes.bool,
  57. infinite: PropTypes.bool,
  58. initialSlide: PropTypes.number,
  59. lazyLoad: PropTypes.bool,
  60. rtl: PropTypes.bool,
  61. slide: PropTypes.string,
  62. slidesToShow: PropTypes.number,
  63. slidesToScroll: PropTypes.number,
  64. speed: PropTypes.number,
  65. swipe: PropTypes.bool,
  66. swipeToSlide: PropTypes.bool,
  67. touchMove: PropTypes.bool,
  68. touchThreshold: PropTypes.number,
  69. variableWidth: PropTypes.bool,
  70. useCSS: PropTypes.bool,
  71. slickGoTo: PropTypes.number,
  72. responsive: PropTypes.array,
  73. dotPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right'])
  74. };
  75. var Carousel = {
  76. name: 'ACarousel',
  77. props: initDefaultProps(CarouselProps, {
  78. dots: true,
  79. arrows: false,
  80. draggable: false
  81. }),
  82. inject: {
  83. configProvider: { 'default': function _default() {
  84. return ConfigConsumerProps;
  85. } }
  86. },
  87. beforeMount: function beforeMount() {
  88. this.onWindowResized = debounce(this.onWindowResized, 500, {
  89. leading: false
  90. });
  91. },
  92. mounted: function mounted() {
  93. if (hasProp(this, 'vertical')) {
  94. warning(!this.vertical, 'Carousel', '`vertical` is deprecated, please use `dotPosition` instead.');
  95. }
  96. var autoplay = this.autoplay;
  97. if (autoplay) {
  98. window.addEventListener('resize', this.onWindowResized);
  99. }
  100. // https://github.com/ant-design/ant-design/issues/7191
  101. this.innerSlider = this.$refs.slick && this.$refs.slick.innerSlider;
  102. },
  103. beforeDestroy: function beforeDestroy() {
  104. var autoplay = this.autoplay;
  105. if (autoplay) {
  106. window.removeEventListener('resize', this.onWindowResized);
  107. this.onWindowResized.cancel();
  108. }
  109. },
  110. methods: {
  111. getDotPosition: function getDotPosition() {
  112. if (this.dotPosition) {
  113. return this.dotPosition;
  114. }
  115. if (hasProp(this, 'vertical')) {
  116. return this.vertical ? 'right' : 'bottom';
  117. }
  118. return 'bottom';
  119. },
  120. onWindowResized: function onWindowResized() {
  121. // Fix https://github.com/ant-design/ant-design/issues/2550
  122. var autoplay = this.autoplay;
  123. if (autoplay && this.$refs.slick && this.$refs.slick.innerSlider && this.$refs.slick.innerSlider.autoPlay) {
  124. this.$refs.slick.innerSlider.autoPlay();
  125. }
  126. },
  127. next: function next() {
  128. this.$refs.slick.slickNext();
  129. },
  130. prev: function prev() {
  131. this.$refs.slick.slickPrev();
  132. },
  133. goTo: function goTo(slide) {
  134. var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  135. this.$refs.slick.slickGoTo(slide, dontAnimate);
  136. }
  137. },
  138. render: function render() {
  139. var h = arguments[0];
  140. var props = _extends({}, this.$props);
  141. var $slots = this.$slots;
  142. if (props.effect === 'fade') {
  143. props.fade = true;
  144. }
  145. var getPrefixCls = this.configProvider.getPrefixCls;
  146. var className = getPrefixCls('carousel', props.prefixCls);
  147. var dotsClass = 'slick-dots';
  148. var dotPosition = this.getDotPosition();
  149. props.vertical = dotPosition === 'left' || dotPosition === 'right';
  150. props.dotsClass = classNames('' + dotsClass, dotsClass + '-' + (dotPosition || 'bottom'), _defineProperty({}, '' + props.dotsClass, !!props.dotsClass));
  151. if (props.vertical) {
  152. className = className + ' ' + className + '-vertical';
  153. }
  154. var SlickCarouselProps = {
  155. props: _extends({}, props, {
  156. nextArrow: getComponentFromProp(this, 'nextArrow'),
  157. prevArrow: getComponentFromProp(this, 'prevArrow')
  158. }),
  159. on: getListeners(this),
  160. scopedSlots: this.$scopedSlots
  161. };
  162. var children = filterEmpty($slots['default']);
  163. return h(
  164. 'div',
  165. { 'class': className },
  166. [h(
  167. SlickCarousel,
  168. _mergeJSXProps([{ ref: 'slick' }, SlickCarouselProps]),
  169. [children]
  170. )]
  171. );
  172. }
  173. };
  174. /* istanbul ignore next */
  175. Carousel.install = function (Vue) {
  176. Vue.use(Base);
  177. Vue.component(Carousel.name, Carousel);
  178. };
  179. export default Carousel;