added renderNextToEachOther prop, improvements

Author: gtarnopolski

README.md

@@ -46,7 +46,7 @@ vertical         | boolean                                                  | De
 draggable        | boolean                                                  | Default: `false`.<br> Allows to scroll by dragging content.
 pagination       | boolean                                                  | Default: `false`.<br> Renders Slider with children, arrowRight, arrowLeft and dots (number of dots same as children length)
 startAt          | {<br>&nbsp;startIndex: number<br>&nbsp;center?: boolean<br>}| Default: `undefined`.<br> Defines start position of scroller (index of element)
-paginationConfig | {<br>&nbsp; infinite?: boolean,<br>&nbsp; unactiveDotsColor?: string,<br>&nbsp; activeDotColor?: string,<br>&nbsp; transitionTime?: number,<br>&nbsp; minOffsetToChangeSlide?: number,<br>&nbsp; draggable?: boolean,<br>withScroll?: boolean<br>} | Default: `undefined`.<br> `infinite` is optional boolean that allows user to scroll to first element from lsat after clicking next and in opposite way<br> `uncativeDotsColor` is optional string that defines unactive color of dots, default: `gray`<br> `activeDotColor` is optional string that defines active color of dot, default: `green`<br> `transitionTime` is optional number that sets transition time between slides Default: `1s` <br>`minOffsetToChangeSlide` is optional number that defines minimal offset needed to change slide in pixels Default: `150px`<br> `draggable` is optional boolean that enables switching slides by dragging them Default: `false` `withScroll` is optional boolean that enables -> for horizontal scroll pagination and for pagination scrollable inner wrapper<br>
+paginationConfig | {<br>&nbsp; infinite?: boolean,<br>&nbsp; unactiveDotsColor?: string,<br>&nbsp; activeDotColor?: string,<br>&nbsp; transitionTime?: number,<br>&nbsp; minOffsetToChangeSlide?: number,<br>&nbsp; draggable?: boolean,<br>withScroll?: boolean<br>} | Default: `undefined`.<br> `infinite` is optional boolean that allows user to scroll to first element from lsat after clicking next and in opposite way<br> `uncativeDotsColor` is optional string that defines unactive color of dots, default: `gray`<br> `activeDotColor` is optional string that defines active color of dot, default: `green`<br> `transitionTime` is optional number that sets transition time between slides Default: `1s` <br>`minOffsetToChangeSlide` is optional number that defines minimal offset needed to change slide in pixels Default: `150px`<br> `draggable` is optional boolean that enables switching slides by dragging them Default: `false`<br>`withScroll` is optional boolean that enables -> for horizontal scroll pagination and for pagination scrollable inner wrapper<br>`renderNextToEachOther` is optional boolean that enables to render children next to each other
 renderPagination | ({<br>&nbsp; selectedDot: number,<br>&nbsp; childrenCount: number,<br>&nbsp; onNext(): void,<br>&nbsp; onPrev(): void,<br>&nbsp; onDotClick(index: number): void<br>}) => JSX.Element | Default: `undefined`.<br> Replaces original pagination, first element is arrowLeft and last element is arrowRight, elements in between are 'dots'<br> `selectedDot` is an index of selectedDot<br> `childrenCount` number of children  <br>`onNext` function that triggers next slide<br> `onPrev` function that triggers previous slide<br> `onDotClick` is a function that requires index of clicked dot, triggers transition to selected slide
 
 ## Usage

index.d.ts

@@ -43,6 +43,13 @@ type PaginationConfig = {
 
     draggable?: boolean
 
+    /**
+        Default false.
+        Allows to render elements next to each other
+     */
+
+    renderNextToEachOther?: boolean
+
     /**
         Default false.
         Allows scroll with pagination

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-smart-scroller",
-  "version": "1.1.18",
+  "version": "1.1.19",
   "description": "React-smart-scroller is a library that allows you to create highly customizable horizontal or vertical scroller in easy way. You can modify track styles or pass your own thumb (own component)",
   "main": "dist/index.js",
   "module": "dist/react-smart-scroller.esm.js",

src/components/ReactSmartScrollerPagination.tsx

@@ -150,7 +150,7 @@ export class ReactSmartScrollerPagination extends React.Component<ReactSmartScro
         const { paginationIndex, scrollValue } = this.state
         const { paginationConfig } = this.props
 
-        if (overflowRef && paginationConfig && paginationConfig.withScroll && paginationIndex < this.numberOfViews - 1) {
+        if (overflowRef && paginationConfig && paginationConfig?.withScroll && paginationIndex < this.numberOfViews - 1) {
             const index = paginationIndex + 1
             const newScrollValue = overflowRef.children.item(paginationIndex)?.clientWidth || 0
 
@@ -176,7 +176,13 @@ export class ReactSmartScrollerPagination extends React.Component<ReactSmartScro
 
         if (overflowRef && paginationIndex < this.numberOfViews - 1) {
             const index = paginationIndex + 1
-            const newScrollValue = this.props.paginationConfig?.withScroll
+            const isLast = overflowRef.clientWidth + Math.abs(this.state.scrollValue) >= overflowRef.scrollWidth
+
+            if (isLast) {
+                return
+            }
+
+            const newScrollValue = this.props.paginationConfig?.withScroll || this.props.paginationConfig?.renderNextToEachOther
                 ? scrollValue - (overflowRef.children.item(paginationIndex)?.clientWidth || 0)
                 : scrollValue - overflowRef.offsetWidth
 
@@ -194,7 +200,7 @@ export class ReactSmartScrollerPagination extends React.Component<ReactSmartScro
         const { paginationIndex, scrollValue } = this.state
         const { paginationConfig } = this.props
 
-        if (overflowRef && paginationConfig && paginationConfig.withScroll && paginationIndex > 0) {
+        if (overflowRef && paginationConfig && paginationConfig?.withScroll && paginationIndex > 0) {
             const index = paginationIndex - 1
             const newScrollValue = overflowRef.children.item(index)?.clientWidth || 0
 
@@ -211,7 +217,7 @@ export class ReactSmartScrollerPagination extends React.Component<ReactSmartScro
 
         if (overflowRef && paginationIndex === 0 && paginationConfig && paginationConfig.infinite) {
             const index = this.numberOfViews - 1
-            const newScrollValue = this.props.paginationConfig?.withScroll
+            const newScrollValue = this.props.paginationConfig?.withScroll || this.props.paginationConfig?.renderNextToEachOther
                 ? index + (overflowRef.children.item(index)?.clientWidth || 0)
                 : index * overflowRef.offsetWidth
 
@@ -225,7 +231,7 @@ export class ReactSmartScrollerPagination extends React.Component<ReactSmartScro
 
         if (overflowRef && paginationIndex > 0) {
             const index = paginationIndex - 1
-            const newScrollValue = this.props.paginationConfig?.withScroll
+            const newScrollValue = this.props.paginationConfig?.withScroll || this.props.paginationConfig?.renderNextToEachOther
                 ? scrollValue + (overflowRef.children.item(index)?.clientWidth || 0)
                 : scrollValue + overflowRef.offsetWidth
 
@@ -243,7 +249,7 @@ export class ReactSmartScrollerPagination extends React.Component<ReactSmartScro
         const { paginationIndex } = this.state
         const { paginationConfig } = this.props
 
-        if (overflowRef && paginationConfig && paginationConfig.withScroll) {
+        if (overflowRef && paginationConfig && (paginationConfig?.withScroll || paginationConfig?.renderNextToEachOther)) {
             const newScrollValue = (overflowRef?.children.item(index) as HTMLDivElement)?.offsetLeft || 0
 
             overflowRef.scroll({
@@ -258,7 +264,7 @@ export class ReactSmartScrollerPagination extends React.Component<ReactSmartScro
         }
 
         if (overflowRef && index !== paginationIndex) {
-            const newScrollValue = this.props.paginationConfig?.withScroll
+            const newScrollValue = this.props.paginationConfig?.withScroll || this.props.paginationConfig?.renderNextToEachOther
                 ? -((overflowRef?.children.item(index) as HTMLDivElement)?.offsetLeft || 0)
                 : -(index * overflowRef.clientWidth)
 
@@ -432,7 +438,7 @@ export class ReactSmartScrollerPagination extends React.Component<ReactSmartScro
                 ? `paddingLeft: ${padding}px`
                 : undefined
             const flexBasis = cols ? `calc(100% / ${cols})` : 'unset'
-            const width = this.props.paginationConfig?.withScroll ? 'unset' : undefined
+            const width = (this.props.paginationConfig?.withScroll || this.props.paginationConfig?.renderNextToEachOther) ? 'unset' : undefined
 
             return (
                 <ChildrenWrapper

src/lib/types/reactSmartScroller.ts

@@ -28,7 +28,8 @@ export type ReactSmartScrollerProps = {
         transitionTime?: number,
         minOffsetToChangeSlide?: number,
         draggable?: boolean,
-        withScroll?: boolean
+        withScroll?: boolean,
+        renderNextToEachOther?: boolean
     },
     style?: React.CSSProperties,
     renderPagination?(options: RenderPaginationProps): JSX.Element