function Slider(props) { _classCallCheck(this, Slider); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { breakpoint: null }; _this._responsiveMediaHandlers = []; _this.innerSliderRefHandler = _this.innerSliderRefHandler.bind(_this); return _this; }
n/a
function Slider(props) { _classCallCheck(this, Slider); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { breakpoint: null }; _this._responsiveMediaHandlers = []; _this.innerSliderRefHandler = _this.innerSliderRefHandler.bind(_this); return _this; }
n/a
function componentWillMount() { var _this2 = this; if (this.props.responsive) { var breakpoints = this.props.responsive.map(function (breakpt) { return breakpt.breakpoint; }); breakpoints.sort(function (x, y) { return x - y; }); breakpoints.forEach(function (breakpoint, index) { var bQuery; if (index === 0) { bQuery = (0, _json2mq2.default)({ minWidth: 0, maxWidth: breakpoint }); } else { bQuery = (0, _json2mq2.default)({ minWidth: breakpoints[index - 1], maxWidth: breakpoint }); } _canUseDom2.default && _this2.media(bQuery, function () { _this2.setState({ breakpoint: breakpoint }); }); }); // Register media query for full screen. Need to support resize from small to large var query = (0, _json2mq2.default)({ minWidth: breakpoints.slice(-1)[0] }); _canUseDom2.default && this.media(query, function () { _this2.setState({ breakpoint: null }); }); } }
n/a
function componentWillUnmount() { this._responsiveMediaHandlers.forEach(function (obj) { enquire.unregister(obj.query, obj.handler); }); }
n/a
function innerSliderRefHandler(ref) { this.innerSlider = ref; }
n/a
function media(query, handler) { enquire.register(query, handler); this._responsiveMediaHandlers.push({ query: query, handler: handler }); }
...
breakpoints.forEach(function (breakpoint, index) {
var bQuery;
if (index === 0) {
bQuery = (0, _json2mq2.default)({ minWidth: 0, maxWidth: breakpoint });
} else {
bQuery = (0, _json2mq2.default)({ minWidth: breakpoints[index - 1], maxWidth: breakpoint });
}
_canUseDom2.default && _this2.media(bQuery, function () {
_this2.setState({ breakpoint: breakpoint });
});
});
// Register media query for full screen. Need to support resize from small to large
var query = (0, _json2mq2.default)({ minWidth: breakpoints.slice(-1)[0] });
...
function render() { var _this3 = this; var settings; var newProps; if (this.state.breakpoint) { newProps = this.props.responsive.filter(function (resp) { return resp.breakpoint === _this3.state.breakpoint; }); settings = newProps[0].settings === 'unslick' ? 'unslick' : (0, _objectAssign2.default)({}, this.props, newProps[0].settings ); } else { settings = (0, _objectAssign2.default)({}, _defaultProps2.default, this.props); } var children = this.props.children; if (!Array.isArray(children)) { children = [children]; } // Children may contain false or null, so we should filter them children = children.filter(function (child) { return !!child; }); if (settings === 'unslick') { // if 'unslick' responsive breakpoint setting used, just return the <Slider> tag nested HTML return _react2.default.createElement( 'div', null, children ); } else { return _react2.default.createElement( _innerSlider.InnerSlider, _extends({ ref: this.innerSliderRefHandler }, settings), children ); } }
...
'use strict';
import React from 'react'
import ReactDOM from 'react-dom'
import Docs from './docs'
React.initializeTouchEvents && React.initializeTouchEvents(true);
ReactDOM.render(<Docs />, document.getElementById('rapp'));
...
function slickGoTo(slide) { this.innerSlider.slickGoTo(slide); }
...
};
Slider.prototype.slickNext = function slickNext() {
this.innerSlider.slickNext();
};
Slider.prototype.slickGoTo = function slickGoTo(slide) {
this.innerSlider.slickGoTo(slide);
};
Slider.prototype.render = function render() {
var _this3 = this;
var settings;
var newProps;
...
function slickNext() { this.innerSlider.slickNext(); }
...
};
Slider.prototype.slickPrev = function slickPrev() {
this.innerSlider.slickPrev();
};
Slider.prototype.slickNext = function slickNext() {
this.innerSlider.slickNext();
};
Slider.prototype.slickGoTo = function slickGoTo(slide) {
this.innerSlider.slickGoTo(slide);
};
Slider.prototype.render = function render() {
...
function slickPrev() { this.innerSlider.slickPrev(); }
...
Slider.prototype.componentWillUnmount = function componentWillUnmount() {
this._responsiveMediaHandlers.forEach(function (obj) {
enquire.unregister(obj.query, obj.handler);
});
};
Slider.prototype.slickPrev = function slickPrev() {
this.innerSlider.slickPrev();
};
Slider.prototype.slickNext = function slickNext() {
this.innerSlider.slickNext();
};
Slider.prototype.slickGoTo = function slickGoTo(slide) {
...