Skip to content

Commit 9d6fae6

Browse files
akiranakiran
authored
Merge pull request #1020 from akiran/dev
merge dev to master
2 parents 62fd590 + b9481f2 commit 9d6fae6

12 files changed

+255
-181
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ Props | Type | Default Value | Descripti
9696
`customPaging` | `func` | `i => <button>{i + 1}</button>` | Custom paging templates. [Example](examples/CustomPaging.js) | Yes
9797
`dots` | `bool` | `Default` | | Yes
9898
`dotsClass` | `string` | `'slick-dots'` | CSS class for dots | Yes
99+
`appendDots` | `func` | `dots => <ul>{dots}</ul>` | Custom dots templates. Works same as customPaging | Yes
99100
`draggable` | `bool` | `true` | Enable scrollable via dragging on desktop | Yes
100101
`easing` | `string` | `'linear'` | |
101102
`fade` | `bool` | `Default` | | Yes

‎examples/CenterMode.js

+1-40
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,12 @@ export default class CenterMode extends Component {
88
centerMode: true,
99
infinite: true,
1010
centerPadding: '60px',
11-
slidesToShow: 4,
11+
slidesToShow: 3,
1212
speed: 500,
1313
};
14-
const settings2 = {
15-
...settings,
16-
infinite: false
17-
}
18-
const settings3 = {
19-
...settings,
20-
slidesToShow: 3
21-
}
22-
const settings4 = {
23-
...settings,
24-
slidesToShow: 3,
25-
infinite: false
26-
}
2714
return (
2815
<div>
2916
<h2>Center Mode</h2>
30-
<h4>Infinite, Even</h4>
3117
<Slider {...settings}>
3218
<div><h3>1</h3></div>
3319
<div><h3>2</h3></div>
@@ -36,31 +22,6 @@ export default class CenterMode extends Component {
3622
<div><h3>5</h3></div>
3723
<div><h3>6</h3></div>
3824
</Slider>
39-
<h4>Finite, Even</h4>
40-
<Slider {...settings2}>
41-
<div><h3>1</h3></div>
42-
<div><h3>2</h3></div>
43-
<div><h3>3</h3></div>
44-
<div><h3>4</h3></div>
45-
<div><h3>5</h3></div>
46-
<div><h3>6</h3></div>
47-
</Slider>
48-
<h4>Infinite, Odd</h4>
49-
<Slider {...settings3}>
50-
<div><h3>1</h3></div>
51-
<div><h3>2</h3></div>
52-
<div><h3>3</h3></div>
53-
<div><h3>4</h3></div>
54-
<div><h3>5</h3></div>
55-
</Slider>
56-
<h4>Finite, Odd</h4>
57-
<Slider {...settings4}>
58-
<div><h3>1</h3></div>
59-
<div><h3>2</h3></div>
60-
<div><h3>3</h3></div>
61-
<div><h3>4</h3></div>
62-
<div><h3>5</h3></div>
63-
</Slider>
6425
</div>
6526
);
6627
}

‎examples/__tests__/__snapshots__/SimpleSlider.test.js.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ exports[`Simple Slider Snapshots click on 3rd dot 1`] = `
4747
</div>
4848
</div>
4949
</div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button>
50-
<ul class=\\"slick-dots\\" style=\\"display: block;\\">
50+
<ul style=\\"display: block;\\" class=\\"slick-dots\\">
5151
<li class=\\"\\"><button>1</button></li>
5252
<li class=\\"\\"><button>2</button></li>
5353
<li class=\\"slick-active\\"><button>3</button></li>
@@ -106,7 +106,7 @@ exports[`Simple Slider Snapshots click on next button 1`] = `
106106
</div>
107107
</div>
108108
</div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button>
109-
<ul class=\\"slick-dots\\" style=\\"display: block;\\">
109+
<ul style=\\"display: block;\\" class=\\"slick-dots\\">
110110
<li class=\\"\\"><button>1</button></li>
111111
<li class=\\"slick-active\\"><button>2</button></li>
112112
<li class=\\"\\"><button>3</button></li>
@@ -165,7 +165,7 @@ exports[`Simple Slider Snapshots click on prev button 1`] = `
165165
</div>
166166
</div>
167167
</div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button>
168-
<ul class=\\"slick-dots\\" style=\\"display: block;\\">
168+
<ul style=\\"display: block;\\" class=\\"slick-dots\\">
169169
<li class=\\"\\"><button>1</button></li>
170170
<li class=\\"\\"><button>2</button></li>
171171
<li class=\\"\\"><button>3</button></li>
@@ -224,7 +224,7 @@ exports[`Simple Slider Snapshots slider initial state 1`] = `
224224
</div>
225225
</div>
226226
</div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button>
227-
<ul class=\\"slick-dots\\" style=\\"display: block;\\">
227+
<ul style=\\"display: block;\\" class=\\"slick-dots\\">
228228
<li class=\\"slick-active\\"><button>1</button></li>
229229
<li class=\\"\\"><button>2</button></li>
230230
<li class=\\"\\"><button>3</button></li>

‎src/default-props.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,10 @@ var defaultProps = {
4646
swipeEvent: null,
4747
// nextArrow, prevArrow should react componets
4848
nextArrow: null,
49-
prevArrow: null
49+
prevArrow: null,
50+
appendDots: function(dots) {
51+
return <ul style={{display: 'block'}}>{dots}</ul>;
52+
}
5053
};
5154

5255
export default defaultProps

‎src/dots.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,6 @@ export class Dots extends React.Component {
5959
);
6060
});
6161

62-
return (
63-
<ul className={this.props.dotsClass} style={{display: 'block'}}>
64-
{dots}
65-
</ul>
66-
);
62+
return React.cloneElement(this.props.appendDots(dots), {className: this.props.dotsClass});
6763
}
6864
}

‎src/inner-slider.js

+40-27
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,14 @@ export var InnerSlider = createReactClass({
3030
},
3131
componentWillMount: function () {
3232
if (this.props.init) {
33+
if (process.env.NODE_ENV !== 'production') {
34+
console.warn('init prop is deprecated and will be removed in next release')
35+
}
3336
this.props.init();
3437
}
35-
this.setState({
36-
mounted: true
37-
});
38+
// this.setState({
39+
// mounted: true
40+
// });
3841
let lazyLoadedList = [];
3942
// number of slides shown in the active frame
4043
const slidesToShow = this.props.slidesToShow;
@@ -182,7 +185,8 @@ export var InnerSlider = createReactClass({
182185
slidesToScroll: this.props.slidesToScroll,
183186
slideCount: this.state.slideCount,
184187
trackStyle: this.state.trackStyle,
185-
variableWidth: this.props.variableWidth
188+
variableWidth: this.props.variableWidth,
189+
unslick: this.props.unslick
186190
};
187191

188192
var dots;
@@ -197,7 +201,8 @@ export var InnerSlider = createReactClass({
197201
clickHandler: this.changeSlide,
198202
children: this.props.children,
199203
customPaging: this.props.customPaging,
200-
infinite: this.props.infinite
204+
infinite: this.props.infinite,
205+
appendDots: this.props.appendDots
201206
};
202207

203208
dots = (<Dots {...dotProps} />);
@@ -246,34 +251,42 @@ export var InnerSlider = createReactClass({
246251
}
247252

248253
const listStyle = assign({}, verticalHeightStyle, centerPaddingStyle);
254+
let listProps = {
255+
className: 'slick-list',
256+
style: listStyle,
257+
onMouseDown: this.swipeStart,
258+
onMouseMove: this.state.dragging ? this.swipeMove : null,
259+
onMouseUp: this.swipeEnd,
260+
onMouseLeave: this.state.dragging ? this.swipeEnd : null,
261+
onTouchStart: this.swipeStart,
262+
onTouchMove: this.state.dragging ? this.swipeMove : null,
263+
onTouchEnd: this.swipeEnd,
264+
onTouchCancel: this.state.dragging ? this.swipeEnd : null,
265+
onKeyDown: this.props.accessibility ? this.keyHandler : null,
266+
}
267+
268+
let innerSliderProps = {
269+
className: className,
270+
onMouseEnter: this.onInnerSliderEnter,
271+
onMouseLeave: this.onInnerSliderLeave,
272+
onMouseOver: this.onInnerSliderOver,
273+
}
249274

275+
if (this.props.unslick) {
276+
listProps = { className: 'slick-list' }
277+
innerSliderProps = { className }
278+
}
279+
250280
return (
251-
<div
252-
className={className}
253-
onMouseEnter={this.onInnerSliderEnter}
254-
onMouseLeave={this.onInnerSliderLeave}
255-
onMouseOver={this.onInnerSliderOver}
256-
>
257-
{prevArrow}
258-
<div
259-
ref={this.listRefHandler}
260-
className="slick-list"
261-
style={listStyle}
262-
onMouseDown={this.swipeStart}
263-
onMouseMove={this.state.dragging ? this.swipeMove : null}
264-
onMouseUp={this.swipeEnd}
265-
onMouseLeave={this.state.dragging ? this.swipeEnd : null}
266-
onTouchStart={this.swipeStart}
267-
onTouchMove={this.state.dragging ? this.swipeMove : null}
268-
onTouchEnd={this.swipeEnd}
269-
onTouchCancel={this.state.dragging ? this.swipeEnd : null}
270-
onKeyDown={this.props.accessibility ? this.keyHandler : null}>
281+
<div {...innerSliderProps} >
282+
{ !this.props.unslick ? prevArrow : '' }
283+
<div ref={this.listRefHandler} {...listProps} >
271284
<Track ref={this.trackRefHandler} {...trackProps}>
272285
{this.props.children}
273286
</Track>
274287
</div>
275-
{nextArrow}
276-
{dots}
288+
{ !this.props.unslick ? nextArrow: '' }
289+
{ !this.props.unslick ? dots : '' }
277290
</div>
278291
);
279292
}

‎src/mixins/event-handlers.js

+26-10
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import {getTrackCSS, getTrackLeft, getTrackAnimateCSS} from './trackHelper';
33
import helpers from './helpers';
44
import assign from 'object-assign';
55
import ReactDOM from 'react-dom';
6+
import { siblingDirection } from '../utils/trackUtils'
67

78
var EventHandlers = {
89
// Event handler for previous and next
910
// gets called if slide is changed via arrows or dots but not swiping/dragging
1011
changeSlide: function (options) {
1112
var indexOffset, previousInt, slideOffset, unevenOffset, targetSlide;
12-
const {slidesToScroll, slidesToShow} = this.props
13+
const {slidesToScroll, slidesToShow, centerMode, rtl} = this.props
1314
const {slideCount, currentSlide} = this.state
1415
unevenOffset = (slideCount % slidesToScroll !== 0);
1516
indexOffset = unevenOffset ? 0 : (slideCount - currentSlide) % slidesToScroll;
@@ -27,19 +28,32 @@ var EventHandlers = {
2728
if (this.props.lazyLoad && !this.props.infinite) {
2829
targetSlide = ((currentSlide + slidesToScroll) % slideCount) + indexOffset;
2930
}
30-
} else if (options.message === 'dots' || options.message === 'children') {
31+
} else if (options.message === 'dots') {
3132
// Click on dots
32-
targetSlide = options.index * options.slidesToScroll;
33+
targetSlide = options.index * options.slidesToScroll
3334
if (targetSlide === options.currentSlide) {
3435
return;
3536
}
37+
} else if (options.message === 'children') {
38+
// Click on the slides
39+
targetSlide = options.index
40+
if (targetSlide === options.currentSlide) {
41+
return
42+
}
43+
if (this.props.infinite) {
44+
let direction = siblingDirection({currentSlide, targetSlide, slidesToShow, centerMode, slideCount, rtl})
45+
if (targetSlide > options.currentSlide && direction === 'left') {
46+
targetSlide = targetSlide - slideCount
47+
} else if (targetSlide < options.currentSlide && direction === 'right') {
48+
targetSlide = targetSlide + slideCount
49+
}
50+
}
3651
} else if (options.message === 'index') {
3752
targetSlide = Number(options.index);
3853
if (targetSlide === options.currentSlide) {
3954
return;
4055
}
4156
}
42-
4357
this.slideHandler(targetSlide);
4458
},
4559

@@ -66,7 +80,8 @@ var EventHandlers = {
6680
swipeStart: function (e) {
6781
var touches, posX, posY;
6882

69-
if ((this.props.swipe === false) || ('ontouchend' in document && this.props.swipe === false)) {
83+
// the condition after or looked redundant
84+
if ((this.props.swipe === false)) { // || ('ontouchend' in document && this.props.swipe === false)) {
7085
return;
7186
} else if (this.props.draggable === false && e.type.indexOf('mouse') !== -1) {
7287
return;
@@ -112,7 +127,7 @@ var EventHandlers = {
112127
touchObject.swipeLength = Math.round(Math.sqrt(Math.pow(touchObject.curX - touchObject.startX, 2)));
113128
var verticalSwipeLength = Math.round(Math.sqrt(Math.pow(touchObject.curY - touchObject.startY, 2)));
114129

115-
if (!this.props.verticalSwiping && !this.state.swiping && verticalSwipeLength > 4) {
130+
if (!this.props.verticalSwiping && !this.state.swiping && verticalSwipeLength > 10) {
116131
this.setState({
117132
scrolling: true
118133
})
@@ -172,7 +187,7 @@ var EventHandlers = {
172187

173188
if (Math.abs(touchObject.curX - touchObject.startX) < Math.abs(touchObject.curY - touchObject.startY) * 0.8)
174189
{ return; }
175-
if (touchObject.swipeLength > 4) {
190+
if (touchObject.swipeLength > 10) {
176191
this.setState({
177192
swiping: true
178193
})
@@ -301,21 +316,22 @@ var EventHandlers = {
301316
case 'down':
302317
newSlide = this.state.currentSlide + this.getSlideCount();
303318
slideCount = this.props.swipeToSlide ? this.checkNavigable(newSlide) : newSlide;
304-
this.state.currentDirection = 0;
319+
// this.state.currentDirection = 0; // critical: change this line with setState statement
320+
this.setState({ currentDirection: 0 }) // unverified fix of above line
305321
break;
306322

307323
case 'right':
308324
case 'up':
309325
newSlide = this.state.currentSlide - this.getSlideCount();
310326
slideCount = this.props.swipeToSlide ? this.checkNavigable(newSlide) : newSlide;
311-
this.state.currentDirection = 1;
327+
// this.state.currentDirection = 1; // critical: change this line with setState statement
328+
this.setState({ currentDirection: 1 }) // unverified fix of above line
312329
break;
313330

314331
default:
315332
slideCount = this.state.currentSlide;
316333

317334
}
318-
319335
this.slideHandler(slideCount);
320336
} else {
321337
// Adjust the track back to it's original position.

0 commit comments

Comments
 (0)