Skip to content

merge dev to master #1020

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Feb 25, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
7480c6a
Add renderDots for custom rendering the dots.
Feb 7, 2018
1f56fc4
removed extra examples in centermode
laveesingh Feb 19, 2018
7e03606
added clones utilities from mixins to utils
laveesingh Feb 19, 2018
421dc8c
fixed focus on select by implementing a direction function
laveesingh Feb 19, 2018
e10e4fb
fixed approximation in slideWidth calculation
laveesingh Feb 19, 2018
d8dbf5b
Merge branch 'pr1009' into dev
laveesingh Feb 20, 2018
7f628d3
renamed renderDots to appendDots to follow slick naming convention
laveesingh Feb 20, 2018
e5d8ba7
minor modifications
laveesingh Feb 20, 2018
03b0cf0
renamed a couple of variables to make more sense + minor changes
laveesingh Feb 20, 2018
7605ac1
modified logic for handling odd/even cases and centermode cases more …
laveesingh Feb 21, 2018
989b6bc
refactor: extracted innerSlider's and track-list's props outside of d…
laveesingh Feb 21, 2018
583eb70
implemented unslick properly
laveesingh Feb 21, 2018
aa8304d
fixed error thrown during unslick on windowResize
laveesingh Feb 21, 2018
a3b7fd7
removed redundant style resetting
laveesingh Feb 21, 2018
47e7c8e
added missing style prop to listProps
laveesingh Feb 21, 2018
817cd79
fixed autoplay + autopause via change in props
laveesingh Feb 22, 2018
bbb65e5
removed mounted state
laveesingh Feb 22, 2018
06801f1
put in a deprecation warning for init prop
laveesingh Feb 22, 2018
071a29c
fixed variable width mode
laveesingh Feb 22, 2018
ec4042f
handling lost focus in case of fade
laveesingh Feb 22, 2018
d6d5e92
responsive lazyloading bug fixed
laveesingh Feb 22, 2018
b9481f2
increased verticalswiping resistance from 4 to 10
laveesingh Feb 23, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ Props | Type | Default Value | Descripti
`customPaging` | `func` | `i => <button>{i + 1}</button>` | Custom paging templates. [Example](examples/CustomPaging.js) | Yes
`dots` | `bool` | `Default` | | Yes
`dotsClass` | `string` | `'slick-dots'` | CSS class for dots | Yes
`appendDots` | `func` | `dots => <ul>{dots}</ul>` | Custom dots templates. Works same as customPaging | Yes
`draggable` | `bool` | `true` | Enable scrollable via dragging on desktop | Yes
`easing` | `string` | `'linear'` | |
`fade` | `bool` | `Default` | | Yes
Expand Down
41 changes: 1 addition & 40 deletions examples/CenterMode.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,12 @@ export default class CenterMode extends Component {
centerMode: true,
infinite: true,
centerPadding: '60px',
slidesToShow: 4,
slidesToShow: 3,
speed: 500,
};
const settings2 = {
...settings,
infinite: false
}
const settings3 = {
...settings,
slidesToShow: 3
}
const settings4 = {
...settings,
slidesToShow: 3,
infinite: false
}
return (
<div>
<h2>Center Mode</h2>
<h4>Infinite, Even</h4>
<Slider {...settings}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
Expand All @@ -36,31 +22,6 @@ export default class CenterMode extends Component {
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</Slider>
<h4>Finite, Even</h4>
<Slider {...settings2}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</Slider>
<h4>Infinite, Odd</h4>
<Slider {...settings3}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</Slider>
<h4>Finite, Odd</h4>
<Slider {...settings4}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</Slider>
</div>
);
}
Expand Down
8 changes: 4 additions & 4 deletions examples/__tests__/__snapshots__/SimpleSlider.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ exports[`Simple Slider Snapshots click on 3rd dot 1`] = `
</div>
</div>
</div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button>
<ul class=\\"slick-dots\\" style=\\"display: block;\\">
<ul style=\\"display: block;\\" class=\\"slick-dots\\">
<li class=\\"\\"><button>1</button></li>
<li class=\\"\\"><button>2</button></li>
<li class=\\"slick-active\\"><button>3</button></li>
Expand Down Expand Up @@ -106,7 +106,7 @@ exports[`Simple Slider Snapshots click on next button 1`] = `
</div>
</div>
</div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button>
<ul class=\\"slick-dots\\" style=\\"display: block;\\">
<ul style=\\"display: block;\\" class=\\"slick-dots\\">
<li class=\\"\\"><button>1</button></li>
<li class=\\"slick-active\\"><button>2</button></li>
<li class=\\"\\"><button>3</button></li>
Expand Down Expand Up @@ -165,7 +165,7 @@ exports[`Simple Slider Snapshots click on prev button 1`] = `
</div>
</div>
</div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button>
<ul class=\\"slick-dots\\" style=\\"display: block;\\">
<ul style=\\"display: block;\\" class=\\"slick-dots\\">
<li class=\\"\\"><button>1</button></li>
<li class=\\"\\"><button>2</button></li>
<li class=\\"\\"><button>3</button></li>
Expand Down Expand Up @@ -224,7 +224,7 @@ exports[`Simple Slider Snapshots slider initial state 1`] = `
</div>
</div>
</div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next\\" style=\\"display: block;\\"> Next</button>
<ul class=\\"slick-dots\\" style=\\"display: block;\\">
<ul style=\\"display: block;\\" class=\\"slick-dots\\">
<li class=\\"slick-active\\"><button>1</button></li>
<li class=\\"\\"><button>2</button></li>
<li class=\\"\\"><button>3</button></li>
Expand Down
5 changes: 4 additions & 1 deletion src/default-props.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,10 @@ var defaultProps = {
swipeEvent: null,
// nextArrow, prevArrow should react componets
nextArrow: null,
prevArrow: null
prevArrow: null,
appendDots: function(dots) {
return <ul style={{display: 'block'}}>{dots}</ul>;
}
};

export default defaultProps
6 changes: 1 addition & 5 deletions src/dots.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,6 @@ export class Dots extends React.Component {
);
});

return (
<ul className={this.props.dotsClass} style={{display: 'block'}}>
{dots}
</ul>
);
return React.cloneElement(this.props.appendDots(dots), {className: this.props.dotsClass});
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@laveesingh Do we need cloneElement here ?

We can do some thing like this

const AppendDots = this.props.appendDots
return <AppendDots className={this.props.dotsClass} />

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll try and replace that.

}
}
67 changes: 40 additions & 27 deletions src/inner-slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,14 @@ export var InnerSlider = createReactClass({
},
componentWillMount: function () {
if (this.props.init) {
if (process.env.NODE_ENV !== 'production') {
console.warn('init prop is deprecated and will be removed in next release')
}
this.props.init();
}
this.setState({
mounted: true
});
// this.setState({
// mounted: true
// });
let lazyLoadedList = [];
// number of slides shown in the active frame
const slidesToShow = this.props.slidesToShow;
Expand Down Expand Up @@ -182,7 +185,8 @@ export var InnerSlider = createReactClass({
slidesToScroll: this.props.slidesToScroll,
slideCount: this.state.slideCount,
trackStyle: this.state.trackStyle,
variableWidth: this.props.variableWidth
variableWidth: this.props.variableWidth,
unslick: this.props.unslick
};

var dots;
Expand All @@ -197,7 +201,8 @@ export var InnerSlider = createReactClass({
clickHandler: this.changeSlide,
children: this.props.children,
customPaging: this.props.customPaging,
infinite: this.props.infinite
infinite: this.props.infinite,
appendDots: this.props.appendDots
};

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

const listStyle = assign({}, verticalHeightStyle, centerPaddingStyle);
let listProps = {
className: 'slick-list',
style: listStyle,
onMouseDown: this.swipeStart,
onMouseMove: this.state.dragging ? this.swipeMove : null,
onMouseUp: this.swipeEnd,
onMouseLeave: this.state.dragging ? this.swipeEnd : null,
onTouchStart: this.swipeStart,
onTouchMove: this.state.dragging ? this.swipeMove : null,
onTouchEnd: this.swipeEnd,
onTouchCancel: this.state.dragging ? this.swipeEnd : null,
onKeyDown: this.props.accessibility ? this.keyHandler : null,
}

let innerSliderProps = {
className: className,
onMouseEnter: this.onInnerSliderEnter,
onMouseLeave: this.onInnerSliderLeave,
onMouseOver: this.onInnerSliderOver,
}

if (this.props.unslick) {
listProps = { className: 'slick-list' }
innerSliderProps = { className }
}

return (
<div
className={className}
onMouseEnter={this.onInnerSliderEnter}
onMouseLeave={this.onInnerSliderLeave}
onMouseOver={this.onInnerSliderOver}
>
{prevArrow}
<div
ref={this.listRefHandler}
className="slick-list"
style={listStyle}
onMouseDown={this.swipeStart}
onMouseMove={this.state.dragging ? this.swipeMove : null}
onMouseUp={this.swipeEnd}
onMouseLeave={this.state.dragging ? this.swipeEnd : null}
onTouchStart={this.swipeStart}
onTouchMove={this.state.dragging ? this.swipeMove : null}
onTouchEnd={this.swipeEnd}
onTouchCancel={this.state.dragging ? this.swipeEnd : null}
onKeyDown={this.props.accessibility ? this.keyHandler : null}>
<div {...innerSliderProps} >
{ !this.props.unslick ? prevArrow : '' }
<div ref={this.listRefHandler} {...listProps} >
<Track ref={this.trackRefHandler} {...trackProps}>
{this.props.children}
</Track>
</div>
{nextArrow}
{dots}
{ !this.props.unslick ? nextArrow: '' }
{ !this.props.unslick ? dots : '' }
</div>
);
}
Expand Down
36 changes: 26 additions & 10 deletions src/mixins/event-handlers.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import {getTrackCSS, getTrackLeft, getTrackAnimateCSS} from './trackHelper';
import helpers from './helpers';
import assign from 'object-assign';
import ReactDOM from 'react-dom';
import { siblingDirection } from '../utils/trackUtils'

var EventHandlers = {
// Event handler for previous and next
// gets called if slide is changed via arrows or dots but not swiping/dragging
changeSlide: function (options) {
var indexOffset, previousInt, slideOffset, unevenOffset, targetSlide;
const {slidesToScroll, slidesToShow} = this.props
const {slidesToScroll, slidesToShow, centerMode, rtl} = this.props
const {slideCount, currentSlide} = this.state
unevenOffset = (slideCount % slidesToScroll !== 0);
indexOffset = unevenOffset ? 0 : (slideCount - currentSlide) % slidesToScroll;
Expand All @@ -27,19 +28,32 @@ var EventHandlers = {
if (this.props.lazyLoad && !this.props.infinite) {
targetSlide = ((currentSlide + slidesToScroll) % slideCount) + indexOffset;
}
} else if (options.message === 'dots' || options.message === 'children') {
} else if (options.message === 'dots') {
// Click on dots
targetSlide = options.index * options.slidesToScroll;
targetSlide = options.index * options.slidesToScroll
if (targetSlide === options.currentSlide) {
return;
}
} else if (options.message === 'children') {
// Click on the slides
targetSlide = options.index
if (targetSlide === options.currentSlide) {
return
}
if (this.props.infinite) {
let direction = siblingDirection({currentSlide, targetSlide, slidesToShow, centerMode, slideCount, rtl})
if (targetSlide > options.currentSlide && direction === 'left') {
targetSlide = targetSlide - slideCount
} else if (targetSlide < options.currentSlide && direction === 'right') {
targetSlide = targetSlide + slideCount
}
}
} else if (options.message === 'index') {
targetSlide = Number(options.index);
if (targetSlide === options.currentSlide) {
return;
}
}

this.slideHandler(targetSlide);
},

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

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

if (!this.props.verticalSwiping && !this.state.swiping && verticalSwipeLength > 4) {
if (!this.props.verticalSwiping && !this.state.swiping && verticalSwipeLength > 10) {
this.setState({
scrolling: true
})
Expand Down Expand Up @@ -172,7 +187,7 @@ var EventHandlers = {

if (Math.abs(touchObject.curX - touchObject.startX) < Math.abs(touchObject.curY - touchObject.startY) * 0.8)
{ return; }
if (touchObject.swipeLength > 4) {
if (touchObject.swipeLength > 10) {
this.setState({
swiping: true
})
Expand Down Expand Up @@ -301,21 +316,22 @@ var EventHandlers = {
case 'down':
newSlide = this.state.currentSlide + this.getSlideCount();
slideCount = this.props.swipeToSlide ? this.checkNavigable(newSlide) : newSlide;
this.state.currentDirection = 0;
// this.state.currentDirection = 0; // critical: change this line with setState statement
this.setState({ currentDirection: 0 }) // unverified fix of above line
break;

case 'right':
case 'up':
newSlide = this.state.currentSlide - this.getSlideCount();
slideCount = this.props.swipeToSlide ? this.checkNavigable(newSlide) : newSlide;
this.state.currentDirection = 1;
// this.state.currentDirection = 1; // critical: change this line with setState statement
this.setState({ currentDirection: 1 }) // unverified fix of above line
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@laveesingh Can you test this case and remove the unverified comments

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

absolutely

break;

default:
slideCount = this.state.currentSlide;

}

this.slideHandler(slideCount);
} else {
// Adjust the track back to it's original position.
Expand Down
Loading