diff --git a/CHANGELOG.md b/CHANGELOG.md index 0cd5a876f..fb82c0510 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ **Release Changes** - Internal Changes + - converted InnerSlider from createReactClass object to ES6 class - removed all the mixins, created classMethods and pure utility functions instead - changed autoplay from setTimeout to setInterval @@ -36,12 +37,12 @@ - fixed bugs due to uncleared callback timers - fixed update issues on just slider resize - ## 0.21.0 **Release Changes** - Fixed issues + - dataset undefined error in case of swipeToSlide but finite slides - slideWidth issue by transform scale - variableWidth + finite alignment problems @@ -50,6 +51,7 @@ - fixed breaking of animation on setState - Mixins to Pure Functions + - getWidth, getHeight - swipeDirection - initialize, update @@ -75,7 +77,6 @@ - implemented reInit event - implemented onSwipe event and documented edgeEvent - ## 0.19.0 **Release Changes** @@ -92,7 +93,6 @@ Following are the changes to be mentioned: - responsive lazyloading bug fixed - increased verticalswiping resistance from 4 to 10 - ## 0.18.0 **Major Changes:** @@ -104,18 +104,17 @@ Following are the changes to be mentioned: - Modified logic for updating lazyLoadedList, earlier there were some whitespaces at ends, now they're gone - Fixed getTrackLeft issue for slideCount=1 - ## 0.17.1 **Major Changes** -* Enforced some settings in specific configurations like: - - `slidesToScroll = 1` *when fade is true* - - `slidesToScroll = 1` *when centerMode is true* - - `slidesToShow = 1` *when fade is true* +- Enforced some settings in specific configurations like: -* Changed the number of clones (preclones and postclones), that fixed couple of issues like blank spaces after last slide and/or before first slide which occurred in several cases. + - `slidesToScroll = 1` _when fade is true_ + - `slidesToScroll = 1` _when centerMode is true_ + - `slidesToShow = 1` _when fade is true_ +- Changed the number of clones (preclones and postclones), that fixed couple of issues like blank spaces after last slide and/or before first slide which occurred in several cases. **Minor Changes** @@ -123,3 +122,7 @@ Following are the changes to be mentioned: - Additional documentation comments added - Refactored small snippets for betterment - Fixed several lazyload and centerMode bugs + +### fix + +- apendots error resolved diff --git a/__test__/__snapshots__/AppendDots.test.js.snap b/__test__/__snapshots__/AppendDots.test.js.snap new file mode 100644 index 000000000..91c443c3b --- /dev/null +++ b/__test__/__snapshots__/AppendDots.test.js.snap @@ -0,0 +1,376 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AppendDots Tests Custom className and dotsClass setting 1`] = ` +"
+

Append Dots

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+

1

+
+
+
+
+
+
+

2

+
+
+
+
+
+
+

3

+
+
+
+
+
+
+

4

+
+
+
+
+
+
+

5

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+

1

+
+
+
+
+
+
+

2

+
+
+
+
+
+
+

3

+
+
+
+
+
+
+

4

+
+
+
+
+
+
+

5

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+
    +
  • +
    1
    +
    • +
  • +
    2
    +
    • +
  • +
    3
    +
    • +
  • +
    4
    +
    • +
  • +
    5
    +
    • +
  • +
    6
    +
    • +
+
+
+
" +`; + +exports[`AppendDots Tests Custom className test 1`] = ` +"
+

Append Dots

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+

1

+
+
+
+
+
+
+

2

+
+
+
+
+
+
+

3

+
+
+
+
+
+
+

4

+
+
+
+
+
+
+

5

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+

1

+
+
+
+
+
+
+

2

+
+
+
+
+
+
+

3

+
+
+
+
+
+
+

4

+
+
+
+
+
+
+

5

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+
    +
  • +
    1
    +
    • +
  • +
    2
    +
    • +
  • +
    3
    +
    • +
  • +
    4
    +
    • +
  • +
    5
    +
    • +
  • +
    6
    +
    • +
+
+
+
" +`; + +exports[`AppendDots Tests Default example test 1`] = ` +"
+

Append Dots

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+

1

+
+
+
+
+
+
+

2

+
+
+
+
+
+
+

3

+
+
+
+
+
+
+

4

+
+
+
+
+
+
+

5

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+

1

+
+
+
+
+
+
+

2

+
+
+
+
+
+
+

3

+
+
+
+
+
+
+

4

+
+
+
+
+
+
+

5

+
+
+
+
+
+
+

6

+
+
+
+
+
+
+
    +
  • +
    1
    +
    • +
  • +
    2
    +
    • +
  • +
    3
    +
    • +
  • +
    4
    +
    • +
  • +
    5
    +
    • +
  • +
    6
    +
    • +
+
+
+
" +`; \ No newline at end of file diff --git a/examples/AppendDots.js b/examples/AppendDots.js index ab467e6bf..5c0fa1962 100644 --- a/examples/AppendDots.js +++ b/examples/AppendDots.js @@ -1,60 +1,70 @@ + import React from "react"; import Slider from "react-slick"; -function AppendDots() { - const settings = { - dots: true, - infinite: true, - speed: 500, - slidesToShow: 1, - slidesToScroll: 1, - appendDots: dots => ( -
- -
- ), - customPaging: i => ( -
- {i + 1} -
- ) +export default class AppendDots extends Component { + static defaultProps = { + setting: {} }; - return ( -
-

Append Dots

- -
-

1

-
-
-

2

-
-
-

3

-
-
-

4

-
-
-

5

-
-
-

6

-
- -
- ); + + render() { + const { settings: propsSettings } = this.props; + const settings = Object.assign( + { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + appendDots: dots => ( +
+ +
+ ), + customPaging: i => ( +
+ {i + 1} +
+ ) + }, + propsSettings + ); + return ( +
+

Append Dots

+ +
+

1

+
+
+

2

+
+
+

3

+
+
+

4

+
+
+

5

+
+
+

6

+
+ +
+ ); + } } -export default AppendDots; diff --git a/examples/__tests__/AppenDots.Test.js b/examples/__tests__/AppenDots.Test.js new file mode 100644 index 000000000..2980edfd6 --- /dev/null +++ b/examples/__tests__/AppenDots.Test.js @@ -0,0 +1,47 @@ +import React from "react"; +import { mount } from "enzyme"; +import AppendDots from "../AppendDots"; +import { html as beautify_html } from "js-beautify"; + +function generateAppendDots(className) { + return dots => ( +
+ +
+ ); +} + +describe("AppendDots Tests", () => { + test("Default example test", () => { + const slider = mount(); + const dotsContainer = slider.find("div.slick-dots"); + expect(dotsContainer.length).toBe(1); + expect(beautify_html(slider.html())).toMatchSnapshot(); + }); + test("Custom className test", () => { + const settings = { + appendDots: generateAppendDots("myClassName") + }; + const slider = mount(); + const dotsContainer = slider.find("div.slick-dots.myClassName"); + expect(dotsContainer.length).toBe(1); + expect(beautify_html(slider.html())).toMatchSnapshot(); + }); + test("Custom className and dotsClass setting", () => { + const settings = { + appendDots: generateAppendDots("myClassName"), + dotsClass: "customClassName" + }; + const slider = mount(); + const dotsContainer = slider.find("div.customClassName.myClassName"); + expect(dotsContainer.length).toBe(1); + expect(beautify_html(slider.html())).toMatchSnapshot(); + }); +}); diff --git a/src/dots.js b/src/dots.js index 93520cbd7..cbb976923 100644 --- a/src/dots.js +++ b/src/dots.js @@ -75,9 +75,10 @@ export class Dots extends React.PureComponent { ); } - - return React.cloneElement(this.props.appendDots(dots), { - className: this.props.dotsClass, + const dotsElement = this.props.appendDots(dots); + return React.cloneElement(dotsElement, { + ...dotsElement.props, + className: classnames(this.props.dotsClass, dotsElement.props.className), ...mouseEvents }); }