Merge pull request #314 from maxmarinich/dnd-link

Add DNDLink component

Author: maxmarinich

.gitignore

@@ -69,3 +69,5 @@ npm-debug.log
 dist
 lib
 static
+
+!src/lib

README.md

@@ -33,19 +33,25 @@ React Alice Carousel is a React component for building content galleries, conten
 - TypeScript
 
 ## Installation
+
 ```apacheconfig
 npm i react-alice-carousel
 ```
+
 #### Style import
+
 ```
 # CSS
 @import "react-alice-carousel/lib/alice-carousel.css";
 ```
+
 ```
 # SCSS
 @import "react-alice-carousel/lib/scss/alice-carousel.scss";
 ```
+
 ## Usage
+
 ```javascript
 import React from 'react';
 import AliceCarousel from 'react-alice-carousel';
@@ -54,19 +60,16 @@ import 'react-alice-carousel/lib/alice-carousel.css';
 const handleDragStart = (e) => e.preventDefault();
 
 const items = [
-  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
-  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
-  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
+	<img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
+	<img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
+	<img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
 ];
 
-const Gallery = () => {
-  return (
-    <AliceCarousel mouseTracking items={items} />
-  );
-}
+const Gallery = () => <AliceCarousel mouseTracking items={items} />;
 ```
 
 #### Options
+
 - `activeIndex` : Number, default `0` - Set carousel at the specified position.
 - `animationDuration`: Number, default `400` - Set duration of animation.
 - `animationEasingFunction`: String or [Function](https://developer.mozilla.org/ru/docs/Web/CSS/animation-timing-function), default `ease` - Property sets how an animation progresses through the duration of each cycle.
@@ -78,33 +81,35 @@ const Gallery = () => {
 - `autoPlayDirection`: String(`ltr`, `rtl`), default `ltr` - Set autoplay direction value.
 - `autoPlayInterval`: Number, default `400` - Set autoplay interval value.
 - `autoPlayStrategy`: String(`default`, `action`, `all`, `none`) - Set a strategy for autoplay mode
-    * `default` - pause automatic playback on the hover
-    * `action` - stop automatic playback if user action was detected
-    * `all` - merge `default` && `action` strategies
-    * `none` - ignore any user actions when the `autoPlay` property was specified
+  - `default` - pause automatic playback on the hover
+  - `action` - stop automatic playback if user action was detected
+  - `all` - merge `default` && `action` strategies
+  - `none` - ignore any user actions when the `autoPlay` property was specified
 - `controlsStrategy`: String (`default`, `responsive`, `alternate` or combined string `"default,alternate"`) - Set a strategy for gallery controls.
-    * `default` - use controls as is
-    * `alternate` - show each dot for each slide
-    * `responsive` - navigation will be hidden if the number of gallery elements is equal to the number of items in the slide.
+  - `default` - use controls as is
+  - `alternate` - show each dot for each slide
+  - `responsive` - navigation will be hidden if the number of gallery elements is equal to the number of items in the slide.
 - `disableButtonsControls`: Boolean, default `false` - Disable buttons controls.
 - `disableDotsControls`: Boolean, default `false` - Disable dots controls.
 - `disableSlideInfo`: Boolean, default `true` - Disable information about current slide.
 - `infinite`: Boolean, default `false` - Set infinite mode.
 - `innerWidth`: Number, default `0` - Set a static value for a breakpoint(`key`) of the "responsive" property. For example, if you can't use 'window.innerWidth' during SSR.
-- `items`: Array, default `undefined`  - Set gallery items, preferable to use this property instead of children.
-- `keyboardNavigation`: Boolean, default `false`  - Enable keyboard navigation
-    * `ArrowLeft` - go to the prev slide
-    * `ArrowRight` - go to the next slide
-    * `Space` - run/stop autoplay mode if `autoPlay` property is equal `true`
-- `mouseTracking`: Boolean, default `false`  - Enable mouse drag animation.
-- `paddingLeft`: Number, default `0`  - Set the gallery offset from the left.
-- `paddingRight`: Number, default `0`  - Set the gallery offset from the right.
-- `renderKey`: Number, default `undefined`  - Auxiliary property, allows call the render method without changing the state inside the gallery instance.
+- `items`: Array, default `undefined` - Set gallery items, preferable to use this property instead of children.
+- `keyboardNavigation`: Boolean, default `false` - Enable keyboard navigation
+  - `ArrowLeft` - go to the prev slide
+  - `ArrowRight` - go to the next slide
+  - `Space` - run/stop autoplay mode if `autoPlay` property is equal `true`
+- `mouseTracking`: Boolean, default `false` - Enable mouse drag animation. Consider the problem with links, see the example of using the `<Link/>` component below.
+- `paddingLeft`: Number, default `0` - Set the gallery offset from the left.
+- `paddingRight`: Number, default `0` - Set the gallery offset from the right.
+- `renderKey`: Number, default `undefined` - Auxiliary property, allows call the render method without changing the state inside the gallery instance.
 - `responsive`: Object, default `undefined` - The key is the breakpoint (default is the result of: () => window.innerWidth or `innerWidth` property if the last presented).
-    * `items` - set number of items in the slide. Default: `1`
-    * `itemsFit`: one of (`contain | fill | undefined`) - defines, how item should fill the container according slide's width. Default: `fill`.
-  
-      If `contain` is specified, the gallery will use the value from the `items` property to determine the width of the element for each slide and fill in the empty space as needed.
+
+  - `items` - set number of items in the slide. Default: `1`
+  - `itemsFit`: one of (`contain | fill | undefined`) - defines, how item should fill the container according slide's width. Default: `fill`.
+
+    If `contain` is specified, the gallery will use the value from the `items` property to determine the width of the element for each slide and fill in the empty space as needed.
+
   ```js
         {
           0: {
@@ -115,15 +120,16 @@ const Gallery = () => {
               itemsFit: 'contain',
           }
         }
-    ```
-- `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. 
+  ```
+
+- `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, 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. 
+- `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.
@@ -135,95 +141,116 @@ const Gallery = () => {
 - `renderPlayPauseButton({ isPlaying })`: Rendering function - create a custom component.
 
 #### 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.
 
+#### Components (Links [example](https://maxmarinich.github.io/react-alice-carousel/#custom-components-links))
+
+- `<Link />` : allows properly handle click and drag events when mouseTracking enabled, extends base HTMLAnchorElement
+
+```javascript
+import React from 'react';
+import AliceCarousel, { Link } from 'react-alice-carousel';
+import 'react-alice-carousel/lib/alice-carousel.css';
+
+const Gallery = () => {
+  return (
+    <AliceCarousel mouseTracking>
+      <Link href="#">
+        <img src="path-to-image" />
+      </Link>
+    </AliceCarousel>
+  );
+};
+```
+
 #### Types
+
 ```typescript
 type EventObject = {
-  item: number;
-  slide: number;
-  itemsInSlide: number;
-  isPrevSlideDisabled: boolean;
-  isNextSlideDisabled: boolean;
-  type: EventType;
+	item: number;
+	slide: number;
+	itemsInSlide: number;
+	isPrevSlideDisabled: boolean;
+	isNextSlideDisabled: boolean;
+	type: EventType;
 };
 
 type SlideInfo = {
-  item: number;
-  itemsCount: number;
+	item: number;
+	itemsCount: number;
 };
 
 type DotsItem = {
-  isActive: boolean;
-  activeIndex: number;
+	isActive: boolean;
+	activeIndex: number;
 };
 
 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
+	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
 }
 ```
 
 #### CSS classes
+
 ```css
 .alice-carousel
-
-.alice-carousel__stage
-.alice-carousel__stage-item
-
-.alice-carousel__prev-btn
-.alice-carousel__prev-btn-item
-
-.alice-carousel__next-btn
-.alice-carousel__next-btn-item
-
-.alice-carousel__play-btn
-.alice-carousel__play-btn-item
-
-.alice-carousel__dots
-.alice-carousel__dots-item
-
-.alice-carousel__slide-info
-.alice-carousel__slide-info-item
+	.alice-carousel__stage
+	.alice-carousel__stage-item
+	.alice-carousel__prev-btn
+	.alice-carousel__prev-btn-item
+	.alice-carousel__next-btn
+	.alice-carousel__next-btn-item
+	.alice-carousel__play-btn
+	.alice-carousel__play-btn-item
+	.alice-carousel__dots
+	.alice-carousel__dots-item
+	.alice-carousel__slide-info
+	.alice-carousel__slide-info-item;
 ```
 
 #### CSS modifiers
+
 ```css
 .alice-carousel.__ssr
-
-.alice-carousel__stage-item.__active
-.alice-carousel__stage-item.__cloned
-.alice-carousel__stage-item.__target
-
-.alice-carousel__next-btn-item.__inactive
-.alice-carousel__prev-btn-item.__inactive
-
-.alice-carousel__play-btn-item.__pause
-
-.alice-carousel__dots-item.__active
-.alice-carousel__dots-item.__custom
-
-.alice-carousel__slide-info-item.__separator
+	.alice-carousel__stage-item.__active
+	.alice-carousel__stage-item.__cloned
+	.alice-carousel__stage-item.__target
+	.alice-carousel__next-btn-item.__inactive
+	.alice-carousel__prev-btn-item.__inactive
+	.alice-carousel__play-btn-item.__pause
+	.alice-carousel__dots-item.__active
+	.alice-carousel__dots-item.__custom
+	.alice-carousel__slide-info-item.__separator;
 ```
 
 ## Build the project locally
+
 #### Clone
+
 ```apacheconfig
 git clone https://github.com/maxmarinich/react-alice-carousel
 cd react-alice-carousel
 ```
+
 #### Run
+
 ```apacheconfig
 npm ci
 npm start
 ```
+
 #### Test
+
 ```apacheconfig
 npm test
 ```
+
 ## License
+
 MIT

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

@@ -3,6 +3,7 @@ import RenderExample from './render-components';
 import RefsExample from './refs-components';
 import PropsExample from './props-components';
 import EventsExample from './event-components';
+import Links from './links';
 import Anchor, { genAnchorProps } from '../../the-anchor';
 
 const CustomComponentsPage = () => {
@@ -37,6 +38,14 @@ const CustomComponentsPage = () => {
 				  Refs
 			</h2>
 			<RefsExample />
+			<br />
+			<br />
+			<br />
+			<h2 className="title">
+				<Anchor {...genAnchorProps('custom-components-links')} />
+				&nbsp; Links
+			</h2>
+			<Links />
 		</section>
 	);
 };

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

@@ -0,0 +1,22 @@
+```javascript
+import React from 'react';
+import AliceCarousel, { Link } from 'react-alice-carousel';
+import 'react-alice-carousel/lib/alice-carousel.css';
+
+const href = '//github.com/maxmarinich/react-alice-carousel';
+const src = '//github.com/maxmarinich/react-alice-carousel/raw/master/src/assets/img/1200x200.jpg';
+
+const Carousel = () => (
+	<AliceCarousel mouseTracking>
+		<Link href={href} target="_blank" className="link">
+			<img src={src} alt="" />
+		</Link>
+		<Link href={href} target="_blank" className="link">
+			<img src={src} alt="" />
+		</Link>
+		<Link href={href} target="_blank" className="link">
+			<img src={src} alt="" />
+		</Link>
+	</AliceCarousel>
+);
+```

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import markdown from './code.md';
+import TheCode from '../../../the-code';
+import AliceCarousel, { Link } from '../../../../lib/react-alice-carousel';
+
+const Links = () => {
+	const href = '//github.com/maxmarinich/react-alice-carousel';
+	const src = '//github.com/maxmarinich/react-alice-carousel/raw/master/src/assets/img/1200x200.jpg';
+
+	return (
+		<section className="p-basic">
+			<AliceCarousel mouseTracking>
+				<Link href={href} target="_blank" className="link">
+					<img src={src} alt="" />
+				</Link>
+				<Link href={href} target="_blank" className="link">
+					<img src={src} alt="" />
+				</Link>
+				<Link href={href} target="_blank" className="link">
+					<img src={src} alt="" />
+				</Link>
+			</AliceCarousel>
+			<TheCode html={markdown} />
+		</section>
+	);
+};
+
+export default Links;