Merge pull request #314 from maxmarinich/dnd-link

Add DNDLink component

.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;