Merge pull request #296 from maxmarinich/2.8.0

2.8.0

README.md

@@ -116,15 +116,16 @@ const Gallery = () => {
           }
         }
     ```
-
+- `syncStateOnPropsUpdate`: Boolean, default `true`  - Sync some props (like `activeIndex`) with carousel state while new props passed. This allows you to avoid resetting the carousel position while updating the props (e.g.: `children` or `items`).
 - `swipeDelta`: Number, default `20`  - Set minimum distance to the start of the swiping (px).
 - `swipeExtraPadding`: Number, default `200`  - Set maximum distance from initial place before swipe action will be stopped (px).
 - `ssrSilentMode`: Boolean, default `true`  - Disable classnames modifiers for server side rendering.
 - `touchTracking`: Boolean, default `true`  - Enable touch move animation.
 - `touchMoveDefaultEvents`: Boolean, default `true`  - Enable touch move default events on swiping. If `false` was specified, this prevents vertical scrolling of the parent elements during the swipe. 
 - `onInitialized(e: EventObject)`: Function - Fired as callback after the gallery was created.
-- `onResizeEvent(e: Event)`: Function - Fired during the "resize" event to determine whether to call the event handler. Default result of `() => true`; 
+- `onResizeEvent(e: Event)`: Function, default `shouldProcessResizeEvent` method - Fired during the "resize" event to determine whether to call the event handler. Default method checks is the root element width has changed. 
 - `onResized(e: EventObject)`: Function - Fired as callback after the gallery was resized.
+- `onUpdated(e: EventObject)`: Function - Fired as callback after updating the gallery props.
 - `onSlideChange(e: EventObject)`: Function - Fired before the event object changes.
 - `onSlideChanged(e: EventObject)`: Function - Fired after the event object was changed.
 - `renderSlideInfo(e: SlideInfo)`: Rendering function - create a custom component.
@@ -133,7 +134,7 @@ const Gallery = () => {
 - `renderNextButton({ isDisabled })`: Rendering function - create a custom component.
 - `renderPlayPauseButton({ isPlaying })`: Rendering function - create a custom component.
 
-#### Methods
+#### Methods (Refs [example](https://maxmarinich.github.io/react-alice-carousel/#custom-components-refs))
 - `slidePrev(e: Event) => void` : Go to the prev slide.
 - `slideNext(e: Event) => void` : Go to the next slide.
 - `slideTo(activeIndex?: number) => void` : Go to the specified slide.
@@ -163,7 +164,7 @@ enum EventType {
   ACTION = 'action', // used if a general user action (button click or swipe)
   INIT = 'init',     // used if the initial event was triggered
   RESIZE = 'resize', // used if the gallery size was changed
-  UPDATE = 'update', // used if the gallery was updated with props (activeIndex)
+  UPDATE = 'update', // used if the gallery was updated with props
 }
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-alice-carousel",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "React image gallery, react slideshow carousel, react content rotator",
   "main": "./lib/react-alice-carousel.js",
   "types": "./lib/react-alice-carousel.d.ts",

src/components/app.tsx

@@ -3,30 +3,37 @@ import Header from './header';
 import Navigation from './navigation';
 import getPageComponent from './pages';
 import scheme from './scheme';
+import { scrollTo } from '../hooks/useScroll';
 import '../main.scss';
 import '../lib/scss/alice-carousel.scss';
 
 export default function App() {
 	const [defaultPage] = scheme;
-	const [{ id, title }, setPage] = useState(defaultPage);
+	const [page, setPage] = useState(defaultPage);
 
 	useEffect(() => {
 		const { hash = '#' } = window.location;
 		const hashId = hash.slice(1);
 		const page = scheme.find(({ id }) => id === hashId || hashId.includes(id));
 
 		if (page) setPage(page);
-	}, []);
+
+		requestAnimationFrame(() => {
+			if (hash.length > 1) {
+				scrollTo(hash);
+			}
+		});
+	}, [page]);
 
 	return (
 		<div className="app">
 			<Header />
 			<Navigation onclick={setPage} scheme={scheme} />
 			<main className="s-main">
 				<h2 className="title">
-					<span>{title} example</span>
+					<span>{page.title} example</span>
 				</h2>
-				{getPageComponent(id)}
+				{getPageComponent(page.id)}
 			</main>
 		</div>
 	);

src/components/pages/auto-width/index.tsx

@@ -7,7 +7,7 @@ const AutowidthPage = () => {
 	return (
 		<section className="p-basic p-custom">
 			<h2 className="title">
-				<Anchor {...genAnchorProps('auto-width')} />
+				<Anchor {...genAnchorProps('auto-width-base')} />
 				&nbsp; Base
 			</h2>
 			<BaseExample />

src/components/pages/custom-components/index.tsx

@@ -9,7 +9,7 @@ const CustomComponentsPage = () => {
 	return (
 		<section className="p-basic p-custom">
 			<h2 className="title">
-				<Anchor {...genAnchorProps('custom-components')} />
+				<Anchor {...genAnchorProps('custom-components-base')} />
 				&nbsp; Base
 			</h2>
 			<EventsExample />

src/components/pages/custom-components/props-components/code.md

@@ -1,6 +1,7 @@
-```javascript
-import React, { useState } from 'react';
+```typescript jsx
+import React from 'react';
 import AliceCarousel from 'react-alice-carousel';
+import type { EventObject } from 'react-alice-carousel';
 import 'react-alice-carousel/lib/alice-carousel.css';
 
 const responsive = {
@@ -20,7 +21,7 @@ const createItems = (length, [handleClick]) => {
 			className="item"
 			onMouseDown={(e) => (deltaX = e.pageX)}
 			onMouseUp={(e) => (difference = Math.abs(e.pageX - deltaX))}
-			onClick={() => (difference < swipeDelta) && handleClick(i)}
+			onClick={() => difference < swipeDelta && handleClick(i)}
 		>
 			<span className="item-inner" />
 		</div>
@@ -33,7 +34,16 @@ const Carousel = () => {
 
 	const slidePrev = () => setActiveIndex(activeIndex - 1);
 	const slideNext = () => setActiveIndex(activeIndex + 1);
-	const syncActiveIndex = ({ item }) => setActiveIndex(item);
+	const syncActiveIndexForSwipeGestures = (e: EventObject) => setActiveIndex(e.item);
+
+	const onSlideChanged = (e: EventObject) => {
+		syncActiveIndexForSwipeGestures(e);
+		console.debug(`onSlideChanged => Item's position after changes: ${e.item}. Event:`, e);
+	};
+
+	const onUpdated = (e: EventObject) => {
+		console.debug(`onUpdated => Item's position after update: ${e.item}. Event:`, e);
+	};
 
 	return [
 		<AliceCarousel
@@ -43,7 +53,8 @@ const Carousel = () => {
 			items={items}
 			activeIndex={activeIndex}
 			responsive={responsive}
-			onSlideChanged={syncActiveIndex}
+			onSlideChanged={onSlideChanged}
+			onUpdated={onUpdated}
 		/>,
 		<div className="b-refs-buttons">
 			<button onClick={slidePrev}>Prev</button>

src/components/pages/custom-components/props-components/index.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import markdown from './code.md';
 import TheCode from '../../../the-code';
 import AliceCarousel from '../../../../lib/react-alice-carousel';
+import type { EventObject } from '../../../../lib/react-alice-carousel';
 
 const responsive = {
 	0: { items: 1 },
@@ -34,7 +35,16 @@ const PropsComponent = () => {
 
 	const slidePrev = () => setActiveIndex(activeIndex - 1);
 	const slideNext = () => setActiveIndex(activeIndex + 1);
-	const syncActiveIndex = ({ item = 0 }) => setActiveIndex(item);
+	const syncActiveIndexForSwipeGestures = ({ item = 0 }) => setActiveIndex(item);
+
+	const onSlideChanged = (e: EventObject) => {
+		syncActiveIndexForSwipeGestures(e);
+		console.debug(`onSlideChanged => Item's position after changes: ${e.item}. Event:`, e);
+	};
+
+	const onUpdated = (e: EventObject) => {
+		console.debug(`onUpdated => Item's position after update: ${e.item}. Event:`, e);
+	};
 
 	return (
 		<section className="p-basic">
@@ -45,7 +55,8 @@ const PropsComponent = () => {
 				items={items}
 				activeIndex={activeIndex}
 				responsive={responsive}
-				onSlideChanged={syncActiveIndex}
+				onSlideChanged={onSlideChanged}
+				onUpdated={onUpdated}
 			/>
 			<div className="b-refs-buttons">
 				<button onClick={slidePrev}>Prev</button>