index.js 7.5 KB

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