ant-design-vue/components/vc-slick/src/slider.js

201 lines
6.3 KiB
JavaScript
Raw Normal View History

2019-01-12 11:33:27 +08:00
import json2mq from 'json2mq';
import BaseMixin from '../../_util/BaseMixin';
import { cloneElement } from '../../_util/vnode';
import InnerSlider from './inner-slider';
import defaultProps from './default-props';
import { canUseDOM } from './utils/innerSliderUtils';
2020-07-20 16:29:46 +08:00
import { getSlot } from '../../_util/props-util';
2020-10-12 13:27:16 +08:00
import { defineComponent } from 'vue';
2018-07-20 16:13:21 +08:00
2020-10-12 13:27:16 +08:00
export default defineComponent({
2020-07-20 16:29:46 +08:00
name: 'Slider',
2020-11-07 21:19:50 +08:00
mixins: [BaseMixin],
inheritAttrs: false,
2018-07-20 16:13:21 +08:00
props: {
...defaultProps,
},
2019-01-12 11:33:27 +08:00
data() {
this._responsiveMediaHandlers = [];
2018-07-20 16:13:21 +08:00
return {
breakpoint: null,
2019-01-12 11:33:27 +08:00
};
2018-07-20 16:13:21 +08:00
},
// handles responsive breakpoints
2019-01-12 11:33:27 +08:00
beforeMount() {
2018-07-20 16:13:21 +08:00
if (this.responsive) {
2019-01-12 11:33:27 +08:00
const breakpoints = this.responsive.map(breakpt => breakpt.breakpoint);
2018-07-20 16:13:21 +08:00
// sort them in increasing order of their numerical value
2019-01-12 11:33:27 +08:00
breakpoints.sort((x, y) => x - y);
2018-07-20 16:13:21 +08:00
breakpoints.forEach((breakpoint, index) => {
// media query for each breakpoint
2019-01-12 11:33:27 +08:00
let bQuery;
2018-07-20 16:13:21 +08:00
if (index === 0) {
2019-01-12 11:33:27 +08:00
bQuery = json2mq({ minWidth: 0, maxWidth: breakpoint });
2018-07-20 16:13:21 +08:00
} else {
bQuery = json2mq({
minWidth: breakpoints[index - 1] + 1,
maxWidth: breakpoint,
2019-01-12 11:33:27 +08:00
});
2018-07-20 16:13:21 +08:00
}
// when not using server side rendering
canUseDOM() &&
this.media(bQuery, () => {
this.setState({ breakpoint });
2019-01-12 11:33:27 +08:00
});
});
2018-07-20 16:13:21 +08:00
// Register media query for full screen. Need to support resize from small to large
// convert javascript object to media query string
2019-01-12 11:33:27 +08:00
const query = json2mq({ minWidth: breakpoints.slice(-1)[0] });
2018-07-20 16:13:21 +08:00
canUseDOM() &&
this.media(query, () => {
2019-01-12 11:33:27 +08:00
this.setState({ breakpoint: null });
});
2018-07-20 16:13:21 +08:00
}
},
2020-06-11 16:13:09 +08:00
beforeUnmount() {
2019-01-12 11:33:27 +08:00
this._responsiveMediaHandlers.forEach(function(obj) {
2020-08-30 22:23:36 +08:00
obj.mql.removeListener(obj.listener);
2019-01-12 11:33:27 +08:00
});
2018-07-20 16:13:21 +08:00
},
2020-11-07 15:37:17 +08:00
methods: {
innerSliderRefHandler(ref) {
this.innerSlider = ref;
},
media(query, handler) {
// javascript handler for css media query
const mql = window.matchMedia(query);
const listener = ({ matches }) => {
if (matches) {
handler();
}
};
mql.addListener(listener);
listener(mql);
this._responsiveMediaHandlers.push({ mql, query, listener });
},
slickPrev() {
this.innerSlider.slickPrev();
},
slickNext() {
this.innerSlider.slickNext();
},
slickGoTo(slide, dontAnimate = false) {
this.innerSlider.slickGoTo(slide, dontAnimate);
},
slickPause() {
this.innerSlider.pause('paused');
},
slickPlay() {
this.innerSlider.handleAutoPlay('play');
},
},
2018-07-20 16:13:21 +08:00
2019-01-12 11:33:27 +08:00
render() {
let settings;
let newProps;
2018-07-20 16:13:21 +08:00
if (this.breakpoint) {
2019-01-12 11:33:27 +08:00
newProps = this.responsive.filter(resp => resp.breakpoint === this.breakpoint);
2018-07-20 16:13:21 +08:00
settings =
newProps[0].settings === 'unslick'
? 'unslick'
2019-01-12 11:33:27 +08:00
: { ...this.$props, ...newProps[0].settings };
2018-07-20 16:13:21 +08:00
} else {
2019-01-12 11:33:27 +08:00
settings = { ...this.$props };
2018-07-20 16:13:21 +08:00
}
// force scrolling by one if centerMode is on
if (settings.centerMode) {
2019-01-12 11:33:27 +08:00
if (settings.slidesToScroll > 1 && process.env.NODE_ENV !== 'production') {
2018-07-20 16:13:21 +08:00
console.warn(
2019-08-12 20:38:09 +08:00
`slidesToScroll should be equal to 1 in centerMode, you are using ${settings.slidesToScroll}`,
2019-01-12 11:33:27 +08:00
);
2018-07-20 16:13:21 +08:00
}
2019-01-12 11:33:27 +08:00
settings.slidesToScroll = 1;
2018-07-20 16:13:21 +08:00
}
// force showing one slide and scrolling by one if the fade mode is on
if (settings.fade) {
if (settings.slidesToShow > 1 && process.env.NODE_ENV !== 'production') {
console.warn(
2019-08-12 20:38:09 +08:00
`slidesToShow should be equal to 1 when fade is true, you're using ${settings.slidesToShow}`,
2019-01-12 11:33:27 +08:00
);
2018-07-20 16:13:21 +08:00
}
2019-01-12 11:33:27 +08:00
if (settings.slidesToScroll > 1 && process.env.NODE_ENV !== 'production') {
2018-07-20 16:13:21 +08:00
console.warn(
2019-08-12 20:38:09 +08:00
`slidesToScroll should be equal to 1 when fade is true, you're using ${settings.slidesToScroll}`,
2019-01-12 11:33:27 +08:00
);
2018-07-20 16:13:21 +08:00
}
2019-01-12 11:33:27 +08:00
settings.slidesToShow = 1;
settings.slidesToScroll = 1;
2018-07-20 16:13:21 +08:00
}
// makes sure that children is an array, even when there is only 1 child
2020-07-20 16:29:46 +08:00
let children = getSlot(this) || [];
2018-07-20 16:13:21 +08:00
// Children may contain false or null, so we should filter them
// children may also contain string filled with spaces (in certain cases where we use jsx strings)
children = children.filter(child => {
if (typeof child === 'string') {
2019-01-12 11:33:27 +08:00
return !!child.trim();
2018-07-20 16:13:21 +08:00
}
2019-01-12 11:33:27 +08:00
return !!child;
});
2018-07-20 16:13:21 +08:00
// rows and slidesPerRow logic is handled here
2019-01-12 11:33:27 +08:00
if (settings.variableWidth && (settings.rows > 1 || settings.slidesPerRow > 1)) {
console.warn(`variableWidth is not supported in case of rows > 1 or slidesPerRow > 1`);
settings.variableWidth = false;
2018-07-20 16:13:21 +08:00
}
2019-01-12 11:33:27 +08:00
const newChildren = [];
let currentWidth = null;
for (let i = 0; i < children.length; i += settings.rows * settings.slidesPerRow) {
const newSlide = [];
for (let j = i; j < i + settings.rows * settings.slidesPerRow; j += settings.slidesPerRow) {
const row = [];
2018-07-20 16:13:21 +08:00
for (let k = j; k < j + settings.slidesPerRow; k += 1) {
2020-07-20 16:29:46 +08:00
if (settings.variableWidth && children[k].props.style) {
currentWidth = children[k].props.style.width;
2018-07-20 16:13:21 +08:00
}
2019-01-12 11:33:27 +08:00
if (k >= children.length) break;
2018-07-20 16:13:21 +08:00
row.push(
cloneElement(children[k], {
key: 100 * i + 10 * j + k,
2020-07-20 16:29:46 +08:00
tabindex: -1,
2018-07-20 16:13:21 +08:00
style: {
width: `${100 / settings.slidesPerRow}%`,
display: 'inline-block',
},
2019-01-12 11:33:27 +08:00
}),
);
2018-07-20 16:13:21 +08:00
}
2019-01-12 11:33:27 +08:00
newSlide.push(<div key={10 * i + j}>{row}</div>);
2018-07-20 16:13:21 +08:00
}
if (settings.variableWidth) {
newChildren.push(
<div key={i} style={{ width: currentWidth }}>
{newSlide}
2019-01-12 11:33:27 +08:00
</div>,
);
2018-07-20 16:13:21 +08:00
} else {
2019-01-12 11:33:27 +08:00
newChildren.push(<div key={i}>{newSlide}</div>);
2018-07-20 16:13:21 +08:00
}
}
if (settings === 'unslick') {
2019-01-12 11:33:27 +08:00
const className = 'regular slider ' + (this.className || '');
return <div class={className}>{newChildren}</div>;
2018-07-20 16:13:21 +08:00
} else if (newChildren.length <= settings.slidesToShow) {
2019-01-12 11:33:27 +08:00
settings.unslick = true;
2018-07-20 16:13:21 +08:00
}
const sliderProps = {
2020-07-20 16:29:46 +08:00
...this.$attrs,
...settings,
children: newChildren,
ref: this.innerSliderRefHandler,
2019-01-12 11:33:27 +08:00
};
2020-08-27 18:34:23 +08:00
return <InnerSlider {...sliderProps} vSlots={this.$slots} __propsSymbol__={[]} />;
2018-07-20 16:13:21 +08:00
},
2020-10-12 13:27:16 +08:00
});