Latest repo

This commit is contained in:
Marc
2025-06-02 16:42:16 +00:00
parent 53ddf1a329
commit cde5fae175
27907 changed files with 3875388 additions and 1 deletions

1100
node_modules/react-responsive-carousel/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,46 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at leandrowd+github@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/

51
node_modules/react-responsive-carousel/CONTRIBUTING.md generated vendored Normal file
View File

@@ -0,0 +1,51 @@
# Contributing
Found a bug? Want a new feature? Don't like the docs? Please send a pull request or raise an issue.
## Raising issues
When raising an issue, please add as much details as possible. Screenshots, video recordings, or anything else that can make it easier to reproduce the bug you are reporting.
- A new option is to create a code pen with the code that causes the bug. Fork this [example](https://www.webpackbin.com/bins/-Kxr6IEf5zXSQvGCgKBR) and add your code there, then fork and add the new link to the issue.
## Creating Pull Requests
Pull requests are always welcome. To speed up the review process, please ensure that your pull request have:
- A good title and description message;
- Recommended that each commit follows the commit message format #{issueId}: {commitDescriptionj}
- Tests covering the changes;
- Story (storybook) if it's a new feature;
- Green builds;
In order to send a Pull Request, you will need to setup your environment - check instructions below;
## How to setup the development environment
Fork and clone the repo:
- `git clone git@github.com:leandrowd/react-responsive-carousel.git`
Ensure you have the right node version:
- `nvm use` # or `nvm install` in case the right version is not installed. Find the right version looking at the `.nvmrc` file.
Install dependencies:
- `yarn install`
Start the dev server:
- `yarn start` and open the browser on `http://localhost:1234/index.html`
Run the tests:
- `yarn test`
Format the files:
- `yarn format:write` # this will also run as part of the pre-commit hook. CI will fail the build if unformatted files are pushed.
Develop on storybooks (optional):
- `yarn storybook`

21
node_modules/react-responsive-carousel/LICENSE.md generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) [year] [fullname]
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

255
node_modules/react-responsive-carousel/README.md generated vendored Normal file
View File

@@ -0,0 +1,255 @@
# React Responsive Carousel
[![npm version](https://badge.fury.io/js/react-responsive-carousel.svg)](https://badge.fury.io/js/react-responsive-carousel)
[![Build Status](https://travis-ci.org/leandrowd/react-responsive-carousel.svg?branch=master)](https://travis-ci.org/leandrowd/react-responsive-carousel)
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel?ref=badge_shield)
Powerful, lightweight and fully customizable carousel component for React apps.
### Important
I don't have any time available to keep maintaining this package. If you have any request, try to sort it within the community. I'm able to merge pull requests that look safe from time to time but no commitment on timelines here. Feel free to fork it and publish under other name if you are in a hurry or to use another component.
### Features
- Responsive
- Mobile friendly
- Swipe to slide
- Mouse emulating touch
- Server side rendering compatible
- Keyboard navigation
- Custom animation duration
- Auto play w/ custom interval
- Infinite loop
- Horizontal or Vertical directions
- Supports images, videos, text content or anything you want. Each direct child represents one slide!
- Supports external controls
- Highly customizable:
- Custom thumbs
- Custom arrows
- Custom indicators
- Custom status
- Custom animation handlers
### Important links:
- [Codesandbox playground](https://codesandbox.io/s/github/leandrowd/react-responsive-carousel/tree/master/codesandbox/default)
- [Storybook](http://react-responsive-carousel.js.org/storybook/)
- [Changelog](https://github.com/leandrowd/react-responsive-carousel/blob/master/CHANGELOG.md)
- [Before contributing](https://github.com/leandrowd/react-responsive-carousel/blob/master/CONTRIBUTING.md)
- [Troubleshooting](https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md)
### Demo
<http://leandrowd.github.io/react-responsive-carousel/>
Check it out these [cool demos](http://react-responsive-carousel.js.org/storybook/index.html) created using [storybook](https://storybook.js.org/). The source code for each example is available [here](https://github.com/leandrowd/react-responsive-carousel/blob/master/stories/)
Customize it yourself:
- Codesandbox: <https://codesandbox.io/s/lp602ljjj7>
### Installing as a package
`yarn add react-responsive-carousel`
### Usage
```javascript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
class DemoCarousel extends Component {
render() {
return (
<Carousel>
<div>
<img src="assets/1.jpeg" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="assets/2.jpeg" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="assets/3.jpeg" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
}
});
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
// Don't forget to include the css in your page
// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>
```
### Props
| Name | Value | Description |
| ---------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ariaLabel | `string` | Define the `aria-label` attribute for the root carousel element. The default is `undefined`, skipping the attribute from markup. |
| axis | `'horizontal'`, `'vertical'` | Define the direction of the slider, defaults to `'horizontal'`. |
| autoFocus | `boolean` | Force focus on the carousel when it renders. |
| autoPlay | `boolean` | Change the slide automatically based on `interval` prop. |
| centerMode | `boolean` | Center the current item and set the slide width based on `centerSlidePercentage`. |
| centerSlidePercentage | `number` | Define the width percentage relative to the carousel width when `centerMode` is `true`. |
| dynamicHeight | `boolean` | The height of the items will not be fixed. |
| emulateTouch | `boolean` | Enable swipe on non-touch screens when `swipeable` is `true`. |
| infiniteLoop | `boolean` | Going after the last item will move back to the first slide. |
| interval | `number` | Interval in milliseconds to automatically go to the next item when `autoPlay` is true, defaults to `3000`. |
| labels | `object` | Apply `aria-label` on carousel with an `object` with the properties `leftArrow`, `rightArrow` and `item`. The default is `{leftArrow: 'previous slide / item', rightArrow: 'next slide / item', item: 'slide item'}`. |
| onClickItem | `function` | Callback to handle a click event on a slide, receives the current index and item as arguments. |
| onClickThumb | `function` | Callback to handle a click event on a thumb, receives the current index and item as arguments. |
| onChange | `function` | Callback to handle every time the selected item changes, receives the current index and item as arguments. |
| onSwipeStart | `function` | Callback to handle when the swipe starts, receives a touch event as argument. |
| onSwipeEnd | `function` | Callback to handle when the swipe ends, receives a touch event as argument. |
| onSwipeMove | `function` | Callback triggered on every movement while swiping, receives a touch event as argument. |
| preventMovementUntilSwipeScrollTolerance | `boolean` | Don't let the carousel scroll until the user swipe to the value specified on `swipeScrollTolerance`. |
| renderArrowPrev | `function` | Render custom previous arrow. Receives a click handler, a `boolean` that shows if there's a previous item, and the accessibility label as arguments. |
| renderArrowNext | `function` | Render custom previous arrow. Receives a click handler, a `boolean` that shows if there's a next item, and the accessibility label as arguments. |
| renderIndicator | `function` | Render custom indicator. Receives a click handler, a `boolean` that shows if the item is selected, the item index, and the accessibility label as arguments. |
| renderItem | `function` | Render a custom item. Receives an item of the carousel, and an `object` with the `isSelected` property as arguments. |
| renderThumbs | `function` | Render prop to show the thumbs, receives the carousel items as argument. Get the `img` tag of each item of the slider, and render it by default. |
| selectedItem | `number` | Set the selected item, defaults to `0`. |
| showArrows | `boolean` | Enable previous and next arrow, defaults to `true`. |
| showStatus | `boolean` | Enable status of the current item to the total, defaults to `true`. |
| showIndicators | `boolean` | Enable indicators to select items, defaults to `true`. |
| showThumbs | `boolean` | Enable thumbs, defaults to `true`. |
| statusFormatter | `function` | Formatter that returns the status as a `string`, receives the current item and the total count as arguments. Defaults to `{currentItem} of {total}` format. |
| stopOnHover | `boolean` | The slide will not change by `autoPlay` on hover, defaults to `true`. |
| swipeable | `boolean` | Enable the user to swipe the carousel, defaults to `true`. |
| swipeScrollTolerance | `number` | How many pixels it's needed to change the slide when swiping, defaults to `5`. |
| thumbWidth | `number` | Width of the thumb, defaults to `80`. |
| transitionTime | `number` | Duration of the animation of changing slides. |
| useKeyboardArrows | `boolean` | Enable the arrows to move the slider when focused. |
| verticalSwipe | `'natural'`, `'standard'` | Set the mode of swipe when the axis is `'vertical'`. The default is `'standard'`. |
| width | `number` or `string` | The width of the carousel, defaults to `100%`. |
### Customizing
#### Items (Slides)
By default, each slide will be rendered as passed as children. If you need to customize them, use the prop `renderItem`.
```
renderItem: (item: React.ReactNode, options?: { isSelected: boolean }) => React.ReactNode;
```
#### Thumbs
By default, thumbs are generated extracting the images in each slide. If you don't have images on your slides or if you prefer a different thumbnail, use the method `renderThumbs` to return a new list of images to be used as thumbs.
```
renderThumbs: (children: React.ReactChild[]) => React.ReactChild[]
```
#### Arrows
By default, simple arrows are rendered on each side. If you need to customize them and the css is not enough, use the `renderArrowPrev` and `renderArrowNext`. The click handler is passed as argument to the prop and needs to be added as click handler in the custom arrow.
```
renderArrowPrev: (clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode;
renderArrowNext: (clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode;
```
#### Indicators
By default, indicators will be rendered as those small little dots in the bottom part of the carousel. To customize them, use the `renderIndicator` prop.
```
renderIndicator: (
clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void,
isSelected: boolean,
index: number,
label: string
) => React.ReactNode;
```
#### Take full control of the carousel
If none of the previous options are enough, you can build your own controls for the carousel. Check an example at http://react-responsive-carousel.js.org/storybook/?path=/story/02-advanced--with-external-controls
#### Custom Animations
By default, the carousel uses the traditional 'slide' style animation. There is also a built in fade animation, which can be used by passing `'fade'` to the `animationHandler` prop. \*note: the 'fade' animation does not support swiping animations, so you may want to set `swipeable` to `false`
If you would like something completely custom, you can pass custom animation handler functions to `animationHandler`, `swipeAnimationHandler`, and `stopSwipingHandler`. The animation handler functions accept props and state, and return styles for the contain list, default slide style, selected slide style, and previous slide style. Take a look at the fade animation handler for an idea of how they work:
```javascript
const fadeAnimationHandler: AnimationHandler = (props, state): AnimationHandlerResponse => {
const transitionTime = props.transitionTime + 'ms';
const transitionTimingFunction = 'ease-in-out';
let slideStyle: React.CSSProperties = {
position: 'absolute',
display: 'block',
zIndex: -2,
minHeight: '100%',
opacity: 0,
top: 0,
right: 0,
left: 0,
bottom: 0,
transitionTimingFunction: transitionTimingFunction,
msTransitionTimingFunction: transitionTimingFunction,
MozTransitionTimingFunction: transitionTimingFunction,
WebkitTransitionTimingFunction: transitionTimingFunction,
OTransitionTimingFunction: transitionTimingFunction,
};
if (!state.swiping) {
slideStyle = {
...slideStyle,
WebkitTransitionDuration: transitionTime,
MozTransitionDuration: transitionTime,
OTransitionDuration: transitionTime,
transitionDuration: transitionTime,
msTransitionDuration: transitionTime,
};
}
return {
slideStyle,
selectedStyle: { ...slideStyle, opacity: 1, position: 'relative' },
prevStyle: { ...slideStyle },
};
};
```
### Videos
If your carousel is about videos, keep in mind that it's up to you to control which videos will play. Using the `renderItem` prop, you will get information saying if the slide is selected or not and can use that to change the video state. Only play videos on selected slides to avoid issues. Check an example at http://react-responsive-carousel.js.org/storybook/?path=/story/02-advanced--youtube-autoplay-with-custom-thumbs
=======================
### Contributing
The [contributing guide](https://github.com/leandrowd/react-responsive-carousel/blob/master/CONTRIBUTING.md) contains details on how to create pull requests and setup your dev environment. Please read it before contributing!
=======================
### Raising issues
When raising an issue, please add as much details as possible. Screenshots, video recordings, or anything else that can make it easier to reproduce the bug you are reporting.
- A new option is to create an example with the code that causes the bug. Fork this [example from codesandbox](https://codesandbox.io/s/github/leandrowd/react-responsive-carousel/tree/master/codesandbox/default) and add your code there. Don't forget to fork, save and add the link for the example to the issue.
=======================
## License
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel?ref=badge_large)
```
```

View File

@@ -0,0 +1,48 @@
# Thumbs not visible
### Error message:
> No images found! Can't build the thumb list without images. If you don't need thumbs, set showThumbs={false} in the Carousel. Note that it's not possible to get images rendered inside custom components.
Carousel will find the thumbs if they are rendered as direct children of the carousel or if they are inside a div or another normal html element in a way that it's possible to access the children of these elements from the carousel.
For performance reasons, it's not possible to get images inside custom components.
Good:
```javascript
<Carousel showArrows={true} showThumbs={true}>
{
images.map((url, index) => (
<div key={index}>
<img src={url} />
<p>Legend</p>
</div>
))
}
</Carousel>
```
Good:
```javascript
<Carousel showArrows={true} showThumbs={true}>
{
images.map((url, index) => (
<img key={index} src={url} />
))
}
</Carousel>
```
Bad:
```javascript
const ImgSlider = ({ url }) => (
<div>
<img src={url} />
</div>
);
<Carousel showArrows={true} showThumbs={true}>
{
images.map((url, index) => <ImgSlider key={index} url={url}/>)
}
</Carousel>
```

View File

@@ -0,0 +1,14 @@
{
"presets": [
[
"@babel/env",
{
"modules": "commonjs",
"targets": ["last 2 versions", "not dead"]
}
],
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _default = function _default(position, metric, axis) {
var positionPercent = position === 0 ? position : position + metric;
var positionCss = axis === 'horizontal' ? [positionPercent, 0, 0] : [0, positionPercent, 0];
var transitionProp = 'translate3d';
var translatedPosition = '(' + positionCss.join(',') + ')';
return transitionProp + translatedPosition;
};
exports.default = _default;

View File

@@ -0,0 +1,200 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.fadeAnimationHandler = exports.slideStopSwipingHandler = exports.slideSwipeAnimationHandler = exports.slideAnimationHandler = void 0;
var _react = require("react");
var _CSSTranslate = _interopRequireDefault(require("../../CSSTranslate"));
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/**
* Main animation handler for the default 'sliding' style animation
* @param props
* @param state
*/
var slideAnimationHandler = function slideAnimationHandler(props, state) {
var returnStyles = {};
var selectedItem = state.selectedItem;
var previousItem = selectedItem;
var lastPosition = _react.Children.count(props.children) - 1;
var needClonedSlide = props.infiniteLoop && (selectedItem < 0 || selectedItem > lastPosition); // Handle list position if it needs a clone
if (needClonedSlide) {
if (previousItem < 0) {
if (props.centerMode && props.centerSlidePercentage && props.axis === 'horizontal') {
returnStyles.itemListStyle = (0, _utils.setPosition)(-(lastPosition + 2) * props.centerSlidePercentage - (100 - props.centerSlidePercentage) / 2, props.axis);
} else {
returnStyles.itemListStyle = (0, _utils.setPosition)(-(lastPosition + 2) * 100, props.axis);
}
} else if (previousItem > lastPosition) {
returnStyles.itemListStyle = (0, _utils.setPosition)(0, props.axis);
}
return returnStyles;
}
var currentPosition = (0, _utils.getPosition)(selectedItem, props); // if 3d is available, let's take advantage of the performance of transform
var transformProp = (0, _CSSTranslate.default)(currentPosition, '%', props.axis);
var transitionTime = props.transitionTime + 'ms';
returnStyles.itemListStyle = {
WebkitTransform: transformProp,
msTransform: transformProp,
OTransform: transformProp,
transform: transformProp
};
if (!state.swiping) {
returnStyles.itemListStyle = _objectSpread(_objectSpread({}, returnStyles.itemListStyle), {}, {
WebkitTransitionDuration: transitionTime,
MozTransitionDuration: transitionTime,
OTransitionDuration: transitionTime,
transitionDuration: transitionTime,
msTransitionDuration: transitionTime
});
}
return returnStyles;
};
/**
* Swiping animation handler for the default 'sliding' style animation
* @param delta
* @param props
* @param state
* @param setState
*/
exports.slideAnimationHandler = slideAnimationHandler;
var slideSwipeAnimationHandler = function slideSwipeAnimationHandler(delta, props, state, setState) {
var returnStyles = {};
var isHorizontal = props.axis === 'horizontal';
var childrenLength = _react.Children.count(props.children);
var initialBoundry = 0;
var currentPosition = (0, _utils.getPosition)(state.selectedItem, props);
var finalBoundry = props.infiniteLoop ? (0, _utils.getPosition)(childrenLength - 1, props) - 100 : (0, _utils.getPosition)(childrenLength - 1, props);
var axisDelta = isHorizontal ? delta.x : delta.y;
var handledDelta = axisDelta; // prevent user from swiping left out of boundaries
if (currentPosition === initialBoundry && axisDelta > 0) {
handledDelta = 0;
} // prevent user from swiping right out of boundaries
if (currentPosition === finalBoundry && axisDelta < 0) {
handledDelta = 0;
}
var position = currentPosition + 100 / (state.itemSize / handledDelta);
var hasMoved = Math.abs(axisDelta) > props.swipeScrollTolerance;
if (props.infiniteLoop && hasMoved) {
// When allowing infinite loop, if we slide left from position 0 we reveal the cloned last slide that appears before it
// if we slide even further we need to jump to other side so it can continue - and vice versa for the last slide
if (state.selectedItem === 0 && position > -100) {
position -= childrenLength * 100;
} else if (state.selectedItem === childrenLength - 1 && position < -childrenLength * 100) {
position += childrenLength * 100;
}
}
if (!props.preventMovementUntilSwipeScrollTolerance || hasMoved || state.swipeMovementStarted) {
if (!state.swipeMovementStarted) {
setState({
swipeMovementStarted: true
});
}
returnStyles.itemListStyle = (0, _utils.setPosition)(position, props.axis);
} //allows scroll if the swipe was within the tolerance
if (hasMoved && !state.cancelClick) {
setState({
cancelClick: true
});
}
return returnStyles;
};
/**
* Default 'sliding' style animination handler for when a swipe action stops.
* @param props
* @param state
*/
exports.slideSwipeAnimationHandler = slideSwipeAnimationHandler;
var slideStopSwipingHandler = function slideStopSwipingHandler(props, state) {
var currentPosition = (0, _utils.getPosition)(state.selectedItem, props);
var itemListStyle = (0, _utils.setPosition)(currentPosition, props.axis);
return {
itemListStyle: itemListStyle
};
};
/**
* Main animation handler for the default 'fade' style animation
* @param props
* @param state
*/
exports.slideStopSwipingHandler = slideStopSwipingHandler;
var fadeAnimationHandler = function fadeAnimationHandler(props, state) {
var transitionTime = props.transitionTime + 'ms';
var transitionTimingFunction = 'ease-in-out';
var slideStyle = {
position: 'absolute',
display: 'block',
zIndex: -2,
minHeight: '100%',
opacity: 0,
top: 0,
right: 0,
left: 0,
bottom: 0,
transitionTimingFunction: transitionTimingFunction,
msTransitionTimingFunction: transitionTimingFunction,
MozTransitionTimingFunction: transitionTimingFunction,
WebkitTransitionTimingFunction: transitionTimingFunction,
OTransitionTimingFunction: transitionTimingFunction
};
if (!state.swiping) {
slideStyle = _objectSpread(_objectSpread({}, slideStyle), {}, {
WebkitTransitionDuration: transitionTime,
MozTransitionDuration: transitionTime,
OTransitionDuration: transitionTime,
transitionDuration: transitionTime,
msTransitionDuration: transitionTime
});
}
return {
slideStyle: slideStyle,
selectedStyle: _objectSpread(_objectSpread({}, slideStyle), {}, {
opacity: 1,
position: 'relative'
}),
prevStyle: _objectSpread({}, slideStyle)
};
};
exports.fadeAnimationHandler = fadeAnimationHandler;

View File

@@ -0,0 +1,830 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactEasySwipe = _interopRequireDefault(require("react-easy-swipe"));
var _cssClasses = _interopRequireDefault(require("../../cssClasses"));
var _Thumbs = _interopRequireDefault(require("../Thumbs"));
var _document = _interopRequireDefault(require("../../shims/document"));
var _window = _interopRequireDefault(require("../../shims/window"));
var _utils = require("./utils");
var _animations = require("./animations");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var Carousel = /*#__PURE__*/function (_React$Component) {
_inherits(Carousel, _React$Component);
var _super = _createSuper(Carousel);
// @ts-ignore
function Carousel(props) {
var _this;
_classCallCheck(this, Carousel);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "thumbsRef", void 0);
_defineProperty(_assertThisInitialized(_this), "carouselWrapperRef", void 0);
_defineProperty(_assertThisInitialized(_this), "listRef", void 0);
_defineProperty(_assertThisInitialized(_this), "itemsRef", void 0);
_defineProperty(_assertThisInitialized(_this), "timer", void 0);
_defineProperty(_assertThisInitialized(_this), "animationHandler", void 0);
_defineProperty(_assertThisInitialized(_this), "setThumbsRef", function (node) {
_this.thumbsRef = node;
});
_defineProperty(_assertThisInitialized(_this), "setCarouselWrapperRef", function (node) {
_this.carouselWrapperRef = node;
});
_defineProperty(_assertThisInitialized(_this), "setListRef", function (node) {
_this.listRef = node;
});
_defineProperty(_assertThisInitialized(_this), "setItemsRef", function (node, index) {
if (!_this.itemsRef) {
_this.itemsRef = [];
}
_this.itemsRef[index] = node;
});
_defineProperty(_assertThisInitialized(_this), "autoPlay", function () {
if (_react.Children.count(_this.props.children) <= 1) {
return;
}
_this.clearAutoPlay();
if (!_this.props.autoPlay) {
return;
}
_this.timer = setTimeout(function () {
_this.increment();
}, _this.props.interval);
});
_defineProperty(_assertThisInitialized(_this), "clearAutoPlay", function () {
if (_this.timer) clearTimeout(_this.timer);
});
_defineProperty(_assertThisInitialized(_this), "resetAutoPlay", function () {
_this.clearAutoPlay();
_this.autoPlay();
});
_defineProperty(_assertThisInitialized(_this), "stopOnHover", function () {
_this.setState({
isMouseEntered: true
}, _this.clearAutoPlay);
});
_defineProperty(_assertThisInitialized(_this), "startOnLeave", function () {
_this.setState({
isMouseEntered: false
}, _this.autoPlay);
});
_defineProperty(_assertThisInitialized(_this), "isFocusWithinTheCarousel", function () {
if (!_this.carouselWrapperRef) {
return false;
}
if ((0, _document.default)().activeElement === _this.carouselWrapperRef || _this.carouselWrapperRef.contains((0, _document.default)().activeElement)) {
return true;
}
return false;
});
_defineProperty(_assertThisInitialized(_this), "navigateWithKeyboard", function (e) {
if (!_this.isFocusWithinTheCarousel()) {
return;
}
var axis = _this.props.axis;
var isHorizontal = axis === 'horizontal';
var keyNames = {
ArrowUp: 38,
ArrowRight: 39,
ArrowDown: 40,
ArrowLeft: 37
};
var nextKey = isHorizontal ? keyNames.ArrowRight : keyNames.ArrowDown;
var prevKey = isHorizontal ? keyNames.ArrowLeft : keyNames.ArrowUp;
if (nextKey === e.keyCode) {
_this.increment();
} else if (prevKey === e.keyCode) {
_this.decrement();
}
});
_defineProperty(_assertThisInitialized(_this), "updateSizes", function () {
if (!_this.state.initialized || !_this.itemsRef || _this.itemsRef.length === 0) {
return;
}
var isHorizontal = _this.props.axis === 'horizontal';
var firstItem = _this.itemsRef[0];
if (!firstItem) {
return;
}
var itemSize = isHorizontal ? firstItem.clientWidth : firstItem.clientHeight;
_this.setState({
itemSize: itemSize
});
if (_this.thumbsRef) {
_this.thumbsRef.updateSizes();
}
});
_defineProperty(_assertThisInitialized(_this), "setMountState", function () {
_this.setState({
hasMount: true
});
_this.updateSizes();
});
_defineProperty(_assertThisInitialized(_this), "handleClickItem", function (index, item) {
if (_react.Children.count(_this.props.children) === 0) {
return;
}
if (_this.state.cancelClick) {
_this.setState({
cancelClick: false
});
return;
}
_this.props.onClickItem(index, item);
if (index !== _this.state.selectedItem) {
_this.setState({
selectedItem: index
});
}
});
_defineProperty(_assertThisInitialized(_this), "handleOnChange", function (index, item) {
if (_react.Children.count(_this.props.children) <= 1) {
return;
}
_this.props.onChange(index, item);
});
_defineProperty(_assertThisInitialized(_this), "handleClickThumb", function (index, item) {
_this.props.onClickThumb(index, item);
_this.moveTo(index);
});
_defineProperty(_assertThisInitialized(_this), "onSwipeStart", function (event) {
_this.setState({
swiping: true
});
_this.props.onSwipeStart(event);
});
_defineProperty(_assertThisInitialized(_this), "onSwipeEnd", function (event) {
_this.setState({
swiping: false,
cancelClick: false,
swipeMovementStarted: false
});
_this.props.onSwipeEnd(event);
_this.clearAutoPlay();
if (_this.state.autoPlay) {
_this.autoPlay();
}
});
_defineProperty(_assertThisInitialized(_this), "onSwipeMove", function (delta, event) {
_this.props.onSwipeMove(event);
var animationHandlerResponse = _this.props.swipeAnimationHandler(delta, _this.props, _this.state, _this.setState.bind(_assertThisInitialized(_this)));
_this.setState(_objectSpread({}, animationHandlerResponse)); // If we have not moved, we should have an empty object returned
// Return false to allow scrolling when not swiping
return !!Object.keys(animationHandlerResponse).length;
});
_defineProperty(_assertThisInitialized(_this), "decrement", function () {
var positions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
_this.moveTo(_this.state.selectedItem - (typeof positions === 'number' ? positions : 1));
});
_defineProperty(_assertThisInitialized(_this), "increment", function () {
var positions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
_this.moveTo(_this.state.selectedItem + (typeof positions === 'number' ? positions : 1));
});
_defineProperty(_assertThisInitialized(_this), "moveTo", function (position) {
if (typeof position !== 'number') {
return;
}
var lastPosition = _react.Children.count(_this.props.children) - 1;
if (position < 0) {
position = _this.props.infiniteLoop ? lastPosition : 0;
}
if (position > lastPosition) {
position = _this.props.infiniteLoop ? 0 : lastPosition;
}
_this.selectItem({
// if it's not a slider, we don't need to set position here
selectedItem: position
}); // don't reset auto play when stop on hover is enabled, doing so will trigger a call to auto play more than once
// and will result in the interval function not being cleared correctly.
if (_this.state.autoPlay && _this.state.isMouseEntered === false) {
_this.resetAutoPlay();
}
});
_defineProperty(_assertThisInitialized(_this), "onClickNext", function () {
_this.increment(1);
});
_defineProperty(_assertThisInitialized(_this), "onClickPrev", function () {
_this.decrement(1);
});
_defineProperty(_assertThisInitialized(_this), "onSwipeForward", function () {
_this.increment(1);
if (_this.props.emulateTouch) {
_this.setState({
cancelClick: true
});
}
});
_defineProperty(_assertThisInitialized(_this), "onSwipeBackwards", function () {
_this.decrement(1);
if (_this.props.emulateTouch) {
_this.setState({
cancelClick: true
});
}
});
_defineProperty(_assertThisInitialized(_this), "changeItem", function (newIndex) {
return function (e) {
if (!(0, _utils.isKeyboardEvent)(e) || e.key === 'Enter') {
_this.moveTo(newIndex);
}
};
});
_defineProperty(_assertThisInitialized(_this), "selectItem", function (state) {
// Merge in the new state while updating updating previous item
_this.setState(_objectSpread({
previousItem: _this.state.selectedItem
}, state), function () {
// Run animation handler and update styles based on it
_this.setState(_this.animationHandler(_this.props, _this.state));
});
_this.handleOnChange(state.selectedItem, _react.Children.toArray(_this.props.children)[state.selectedItem]);
});
_defineProperty(_assertThisInitialized(_this), "getInitialImage", function () {
var selectedItem = _this.props.selectedItem;
var item = _this.itemsRef && _this.itemsRef[selectedItem];
var images = item && item.getElementsByTagName('img') || [];
return images[0];
});
_defineProperty(_assertThisInitialized(_this), "getVariableItemHeight", function (position) {
var item = _this.itemsRef && _this.itemsRef[position];
if (_this.state.hasMount && item && item.children.length) {
var slideImages = item.children[0].getElementsByTagName('img') || [];
if (slideImages.length > 0) {
var image = slideImages[0];
if (!image.complete) {
// if the image is still loading, the size won't be available so we trigger a new render after it's done
var onImageLoad = function onImageLoad() {
_this.forceUpdate();
image.removeEventListener('load', onImageLoad);
};
image.addEventListener('load', onImageLoad);
}
} // try to get img first, if img not there find first display tag
var displayItem = slideImages[0] || item.children[0];
var height = displayItem.clientHeight;
return height > 0 ? height : null;
}
return null;
});
var initState = {
initialized: false,
previousItem: props.selectedItem,
selectedItem: props.selectedItem,
hasMount: false,
isMouseEntered: false,
autoPlay: props.autoPlay,
swiping: false,
swipeMovementStarted: false,
cancelClick: false,
itemSize: 1,
itemListStyle: {},
slideStyle: {},
selectedStyle: {},
prevStyle: {}
};
_this.animationHandler = typeof props.animationHandler === 'function' && props.animationHandler || props.animationHandler === 'fade' && _animations.fadeAnimationHandler || _animations.slideAnimationHandler;
_this.state = _objectSpread(_objectSpread({}, initState), _this.animationHandler(props, initState));
return _this;
}
_createClass(Carousel, [{
key: "componentDidMount",
value: function componentDidMount() {
if (!this.props.children) {
return;
}
this.setupCarousel();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
if (!prevProps.children && this.props.children && !this.state.initialized) {
this.setupCarousel();
}
if (!prevProps.autoFocus && this.props.autoFocus) {
this.forceFocus();
}
if (prevState.swiping && !this.state.swiping) {
// We stopped swiping, ensure we are heading to the new/current slide and not stuck
this.setState(_objectSpread({}, this.props.stopSwipingHandler(this.props, this.state)));
}
if (prevProps.selectedItem !== this.props.selectedItem || prevProps.centerMode !== this.props.centerMode) {
this.updateSizes();
this.moveTo(this.props.selectedItem);
}
if (prevProps.autoPlay !== this.props.autoPlay) {
if (this.props.autoPlay) {
this.setupAutoPlay();
} else {
this.destroyAutoPlay();
}
this.setState({
autoPlay: this.props.autoPlay
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.destroyCarousel();
}
}, {
key: "setupCarousel",
value: function setupCarousel() {
var _this2 = this;
this.bindEvents();
if (this.state.autoPlay && _react.Children.count(this.props.children) > 1) {
this.setupAutoPlay();
}
if (this.props.autoFocus) {
this.forceFocus();
}
this.setState({
initialized: true
}, function () {
var initialImage = _this2.getInitialImage();
if (initialImage && !initialImage.complete) {
// if it's a carousel of images, we set the mount state after the first image is loaded
initialImage.addEventListener('load', _this2.setMountState);
} else {
_this2.setMountState();
}
});
}
}, {
key: "destroyCarousel",
value: function destroyCarousel() {
if (this.state.initialized) {
this.unbindEvents();
this.destroyAutoPlay();
}
}
}, {
key: "setupAutoPlay",
value: function setupAutoPlay() {
this.autoPlay();
var carouselWrapper = this.carouselWrapperRef;
if (this.props.stopOnHover && carouselWrapper) {
carouselWrapper.addEventListener('mouseenter', this.stopOnHover);
carouselWrapper.addEventListener('mouseleave', this.startOnLeave);
}
}
}, {
key: "destroyAutoPlay",
value: function destroyAutoPlay() {
this.clearAutoPlay();
var carouselWrapper = this.carouselWrapperRef;
if (this.props.stopOnHover && carouselWrapper) {
carouselWrapper.removeEventListener('mouseenter', this.stopOnHover);
carouselWrapper.removeEventListener('mouseleave', this.startOnLeave);
}
}
}, {
key: "bindEvents",
value: function bindEvents() {
// as the widths are calculated, we need to resize
// the carousel when the window is resized
(0, _window.default)().addEventListener('resize', this.updateSizes); // issue #2 - image loading smaller
(0, _window.default)().addEventListener('DOMContentLoaded', this.updateSizes);
if (this.props.useKeyboardArrows) {
(0, _document.default)().addEventListener('keydown', this.navigateWithKeyboard);
}
}
}, {
key: "unbindEvents",
value: function unbindEvents() {
// removing listeners
(0, _window.default)().removeEventListener('resize', this.updateSizes);
(0, _window.default)().removeEventListener('DOMContentLoaded', this.updateSizes);
var initialImage = this.getInitialImage();
if (initialImage) {
initialImage.removeEventListener('load', this.setMountState);
}
if (this.props.useKeyboardArrows) {
(0, _document.default)().removeEventListener('keydown', this.navigateWithKeyboard);
}
}
}, {
key: "forceFocus",
value: function forceFocus() {
var _this$carouselWrapper;
(_this$carouselWrapper = this.carouselWrapperRef) === null || _this$carouselWrapper === void 0 ? void 0 : _this$carouselWrapper.focus();
}
}, {
key: "renderItems",
value: function renderItems(isClone) {
var _this3 = this;
if (!this.props.children) {
return [];
}
return _react.Children.map(this.props.children, function (item, index) {
var isSelected = index === _this3.state.selectedItem;
var isPrevious = index === _this3.state.previousItem;
var style = isSelected && _this3.state.selectedStyle || isPrevious && _this3.state.prevStyle || _this3.state.slideStyle || {};
if (_this3.props.centerMode && _this3.props.axis === 'horizontal') {
style = _objectSpread(_objectSpread({}, style), {}, {
minWidth: _this3.props.centerSlidePercentage + '%'
});
}
if (_this3.state.swiping && _this3.state.swipeMovementStarted) {
style = _objectSpread(_objectSpread({}, style), {}, {
pointerEvents: 'none'
});
}
var slideProps = {
ref: function ref(e) {
return _this3.setItemsRef(e, index);
},
key: 'itemKey' + index + (isClone ? 'clone' : ''),
className: _cssClasses.default.ITEM(true, index === _this3.state.selectedItem, index === _this3.state.previousItem),
onClick: _this3.handleClickItem.bind(_this3, index, item),
style: style
};
return /*#__PURE__*/_react.default.createElement("li", slideProps, _this3.props.renderItem(item, {
isSelected: index === _this3.state.selectedItem,
isPrevious: index === _this3.state.previousItem
}));
});
}
}, {
key: "renderControls",
value: function renderControls() {
var _this4 = this;
var _this$props = this.props,
showIndicators = _this$props.showIndicators,
labels = _this$props.labels,
renderIndicator = _this$props.renderIndicator,
children = _this$props.children;
if (!showIndicators) {
return null;
}
return /*#__PURE__*/_react.default.createElement("ul", {
className: "control-dots"
}, _react.Children.map(children, function (_, index) {
return renderIndicator && renderIndicator(_this4.changeItem(index), index === _this4.state.selectedItem, index, labels.item);
}));
}
}, {
key: "renderStatus",
value: function renderStatus() {
if (!this.props.showStatus) {
return null;
}
return /*#__PURE__*/_react.default.createElement("p", {
className: "carousel-status"
}, this.props.statusFormatter(this.state.selectedItem + 1, _react.Children.count(this.props.children)));
}
}, {
key: "renderThumbs",
value: function renderThumbs() {
if (!this.props.showThumbs || !this.props.children || _react.Children.count(this.props.children) === 0) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_Thumbs.default, {
ref: this.setThumbsRef,
onSelectItem: this.handleClickThumb,
selectedItem: this.state.selectedItem,
transitionTime: this.props.transitionTime,
thumbWidth: this.props.thumbWidth,
labels: this.props.labels,
emulateTouch: this.props.emulateTouch
}, this.props.renderThumbs(this.props.children));
}
}, {
key: "render",
value: function render() {
var _this5 = this;
if (!this.props.children || _react.Children.count(this.props.children) === 0) {
return null;
}
var isSwipeable = this.props.swipeable && _react.Children.count(this.props.children) > 1;
var isHorizontal = this.props.axis === 'horizontal';
var canShowArrows = this.props.showArrows && _react.Children.count(this.props.children) > 1; // show left arrow?
var hasPrev = canShowArrows && (this.state.selectedItem > 0 || this.props.infiniteLoop) || false; // show right arrow
var hasNext = canShowArrows && (this.state.selectedItem < _react.Children.count(this.props.children) - 1 || this.props.infiniteLoop) || false;
var itemsClone = this.renderItems(true);
var firstClone = itemsClone.shift();
var lastClone = itemsClone.pop();
var swiperProps = {
className: _cssClasses.default.SLIDER(true, this.state.swiping),
onSwipeMove: this.onSwipeMove,
onSwipeStart: this.onSwipeStart,
onSwipeEnd: this.onSwipeEnd,
style: this.state.itemListStyle,
tolerance: this.props.swipeScrollTolerance
};
var containerStyles = {};
if (isHorizontal) {
swiperProps.onSwipeLeft = this.onSwipeForward;
swiperProps.onSwipeRight = this.onSwipeBackwards;
if (this.props.dynamicHeight) {
var itemHeight = this.getVariableItemHeight(this.state.selectedItem); // swiperProps.style.height = itemHeight || 'auto';
containerStyles.height = itemHeight || 'auto';
}
} else {
swiperProps.onSwipeUp = this.props.verticalSwipe === 'natural' ? this.onSwipeBackwards : this.onSwipeForward;
swiperProps.onSwipeDown = this.props.verticalSwipe === 'natural' ? this.onSwipeForward : this.onSwipeBackwards;
swiperProps.style = _objectSpread(_objectSpread({}, swiperProps.style), {}, {
height: this.state.itemSize
});
containerStyles.height = this.state.itemSize;
}
return /*#__PURE__*/_react.default.createElement("div", {
"aria-label": this.props.ariaLabel,
className: _cssClasses.default.ROOT(this.props.className),
ref: this.setCarouselWrapperRef,
tabIndex: this.props.useKeyboardArrows ? 0 : undefined
}, /*#__PURE__*/_react.default.createElement("div", {
className: _cssClasses.default.CAROUSEL(true),
style: {
width: this.props.width
}
}, this.renderControls(), this.props.renderArrowPrev(this.onClickPrev, hasPrev, this.props.labels.leftArrow), /*#__PURE__*/_react.default.createElement("div", {
className: _cssClasses.default.WRAPPER(true, this.props.axis),
style: containerStyles
}, isSwipeable ? /*#__PURE__*/_react.default.createElement(_reactEasySwipe.default, _extends({
tagName: "ul",
innerRef: this.setListRef
}, swiperProps, {
allowMouseEvents: this.props.emulateTouch
}), this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone) : /*#__PURE__*/_react.default.createElement("ul", {
className: _cssClasses.default.SLIDER(true, this.state.swiping),
ref: function ref(node) {
return _this5.setListRef(node);
},
style: this.state.itemListStyle || {}
}, this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone)), this.props.renderArrowNext(this.onClickNext, hasNext, this.props.labels.rightArrow), this.renderStatus()), this.renderThumbs());
}
}]);
return Carousel;
}(_react.default.Component);
exports.default = Carousel;
_defineProperty(Carousel, "displayName", 'Carousel');
_defineProperty(Carousel, "defaultProps", {
ariaLabel: undefined,
axis: 'horizontal',
centerSlidePercentage: 80,
interval: 3000,
labels: {
leftArrow: 'previous slide / item',
rightArrow: 'next slide / item',
item: 'slide item'
},
onClickItem: _utils.noop,
onClickThumb: _utils.noop,
onChange: _utils.noop,
onSwipeStart: function onSwipeStart() {},
onSwipeEnd: function onSwipeEnd() {},
onSwipeMove: function onSwipeMove() {
return false;
},
preventMovementUntilSwipeScrollTolerance: false,
renderArrowPrev: function renderArrowPrev(onClickHandler, hasPrev, label) {
return /*#__PURE__*/_react.default.createElement("button", {
type: "button",
"aria-label": label,
className: _cssClasses.default.ARROW_PREV(!hasPrev),
onClick: onClickHandler
});
},
renderArrowNext: function renderArrowNext(onClickHandler, hasNext, label) {
return /*#__PURE__*/_react.default.createElement("button", {
type: "button",
"aria-label": label,
className: _cssClasses.default.ARROW_NEXT(!hasNext),
onClick: onClickHandler
});
},
renderIndicator: function renderIndicator(onClickHandler, isSelected, index, label) {
return /*#__PURE__*/_react.default.createElement("li", {
className: _cssClasses.default.DOT(isSelected),
onClick: onClickHandler,
onKeyDown: onClickHandler,
value: index,
key: index,
role: "button",
tabIndex: 0,
"aria-label": "".concat(label, " ").concat(index + 1)
});
},
renderItem: function renderItem(item) {
return item;
},
renderThumbs: function renderThumbs(children) {
var images = _react.Children.map(children, function (item) {
var img = item; // if the item is not an image, try to find the first image in the item's children.
if (item.type !== 'img') {
img = _react.Children.toArray(item.props.children).find(function (children) {
return children.type === 'img';
});
}
if (!img) {
return undefined;
}
return img;
});
if (images.filter(function (image) {
return image;
}).length === 0) {
console.warn("No images found! Can't build the thumb list without images. If you don't need thumbs, set showThumbs={false} in the Carousel. Note that it's not possible to get images rendered inside custom components. More info at https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md");
return [];
}
return images;
},
statusFormatter: _utils.defaultStatusFormatter,
selectedItem: 0,
showArrows: true,
showIndicators: true,
showStatus: true,
showThumbs: true,
stopOnHover: true,
swipeScrollTolerance: 5,
swipeable: true,
transitionTime: 350,
verticalSwipe: 'standard',
width: '100%',
animationHandler: 'slide',
swipeAnimationHandler: _animations.slideSwipeAnimationHandler,
stopSwipingHandler: _animations.slideStopSwipingHandler
});

View File

@@ -0,0 +1 @@
"use strict";

View File

@@ -0,0 +1,80 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.setPosition = exports.getPosition = exports.isKeyboardEvent = exports.defaultStatusFormatter = exports.noop = void 0;
var _react = require("react");
var _CSSTranslate = _interopRequireDefault(require("../../CSSTranslate"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var noop = function noop() {};
exports.noop = noop;
var defaultStatusFormatter = function defaultStatusFormatter(current, total) {
return "".concat(current, " of ").concat(total);
};
exports.defaultStatusFormatter = defaultStatusFormatter;
var isKeyboardEvent = function isKeyboardEvent(e) {
return e ? e.hasOwnProperty('key') : false;
};
/**
* Gets the list 'position' relative to a current index
* @param index
*/
exports.isKeyboardEvent = isKeyboardEvent;
var getPosition = function getPosition(index, props) {
if (props.infiniteLoop) {
// index has to be added by 1 because of the first cloned slide
++index;
}
if (index === 0) {
return 0;
}
var childrenLength = _react.Children.count(props.children);
if (props.centerMode && props.axis === 'horizontal') {
var currentPosition = -index * props.centerSlidePercentage;
var lastPosition = childrenLength - 1;
if (index && (index !== lastPosition || props.infiniteLoop)) {
currentPosition += (100 - props.centerSlidePercentage) / 2;
} else if (index === lastPosition) {
currentPosition += 100 - props.centerSlidePercentage;
}
return currentPosition;
}
return -index * 100;
};
/**
* Sets the 'position' transform for sliding animations
* @param position
* @param forceReflow
*/
exports.getPosition = getPosition;
var setPosition = function setPosition(position, axis) {
var style = {};
['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
// @ts-ignore
style[prop] = (0, _CSSTranslate.default)(position, '%', axis);
});
return style;
};
exports.setPosition = setPosition;

View File

@@ -0,0 +1,385 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _cssClasses = _interopRequireDefault(require("../cssClasses"));
var _dimensions = require("../dimensions");
var _CSSTranslate = _interopRequireDefault(require("../CSSTranslate"));
var _reactEasySwipe = _interopRequireDefault(require("react-easy-swipe"));
var _window = _interopRequireDefault(require("../shims/window"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var isKeyboardEvent = function isKeyboardEvent(e) {
return e.hasOwnProperty('key');
};
var Thumbs = /*#__PURE__*/function (_Component) {
_inherits(Thumbs, _Component);
var _super = _createSuper(Thumbs);
function Thumbs(_props) {
var _this;
_classCallCheck(this, Thumbs);
_this = _super.call(this, _props);
_defineProperty(_assertThisInitialized(_this), "itemsWrapperRef", void 0);
_defineProperty(_assertThisInitialized(_this), "itemsListRef", void 0);
_defineProperty(_assertThisInitialized(_this), "thumbsRef", void 0);
_defineProperty(_assertThisInitialized(_this), "setItemsWrapperRef", function (node) {
_this.itemsWrapperRef = node;
});
_defineProperty(_assertThisInitialized(_this), "setItemsListRef", function (node) {
_this.itemsListRef = node;
});
_defineProperty(_assertThisInitialized(_this), "setThumbsRef", function (node, index) {
if (!_this.thumbsRef) {
_this.thumbsRef = [];
}
_this.thumbsRef[index] = node;
});
_defineProperty(_assertThisInitialized(_this), "updateSizes", function () {
if (!_this.props.children || !_this.itemsWrapperRef || !_this.thumbsRef) {
return;
}
var total = _react.Children.count(_this.props.children);
var wrapperSize = _this.itemsWrapperRef.clientWidth;
var itemSize = _this.props.thumbWidth ? _this.props.thumbWidth : (0, _dimensions.outerWidth)(_this.thumbsRef[0]);
var visibleItems = Math.floor(wrapperSize / itemSize);
var showArrows = visibleItems < total;
var lastPosition = showArrows ? total - visibleItems : 0;
_this.setState(function (_state, props) {
return {
itemSize: itemSize,
visibleItems: visibleItems,
firstItem: showArrows ? _this.getFirstItem(props.selectedItem) : 0,
lastPosition: lastPosition,
showArrows: showArrows
};
});
});
_defineProperty(_assertThisInitialized(_this), "handleClickItem", function (index, item, e) {
if (!isKeyboardEvent(e) || e.key === 'Enter') {
var handler = _this.props.onSelectItem;
if (typeof handler === 'function') {
handler(index, item);
}
}
});
_defineProperty(_assertThisInitialized(_this), "onSwipeStart", function () {
_this.setState({
swiping: true
});
});
_defineProperty(_assertThisInitialized(_this), "onSwipeEnd", function () {
_this.setState({
swiping: false
});
});
_defineProperty(_assertThisInitialized(_this), "onSwipeMove", function (delta) {
var deltaX = delta.x;
if (!_this.state.itemSize || !_this.itemsWrapperRef || !_this.state.visibleItems) {
return false;
}
var leftBoundary = 0;
var childrenLength = _react.Children.count(_this.props.children);
var currentPosition = -(_this.state.firstItem * 100) / _this.state.visibleItems;
var lastLeftItem = Math.max(childrenLength - _this.state.visibleItems, 0);
var lastLeftBoundary = -lastLeftItem * 100 / _this.state.visibleItems; // prevent user from swiping left out of boundaries
if (currentPosition === leftBoundary && deltaX > 0) {
deltaX = 0;
} // prevent user from swiping right out of boundaries
if (currentPosition === lastLeftBoundary && deltaX < 0) {
deltaX = 0;
}
var wrapperSize = _this.itemsWrapperRef.clientWidth;
var position = currentPosition + 100 / (wrapperSize / deltaX); // if 3d isn't available we will use left to move
if (_this.itemsListRef) {
['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
_this.itemsListRef.style[prop] = (0, _CSSTranslate.default)(position, '%', _this.props.axis);
});
}
return true;
});
_defineProperty(_assertThisInitialized(_this), "slideRight", function (positions) {
_this.moveTo(_this.state.firstItem - (typeof positions === 'number' ? positions : 1));
});
_defineProperty(_assertThisInitialized(_this), "slideLeft", function (positions) {
_this.moveTo(_this.state.firstItem + (typeof positions === 'number' ? positions : 1));
});
_defineProperty(_assertThisInitialized(_this), "moveTo", function (position) {
// position can't be lower than 0
position = position < 0 ? 0 : position; // position can't be higher than last postion
position = position >= _this.state.lastPosition ? _this.state.lastPosition : position;
_this.setState({
firstItem: position
});
});
_this.state = {
selectedItem: _props.selectedItem,
swiping: false,
showArrows: false,
firstItem: 0,
visibleItems: 0,
lastPosition: 0
};
return _this;
}
_createClass(Thumbs, [{
key: "componentDidMount",
value: function componentDidMount() {
this.setupThumbs();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (this.props.selectedItem !== this.state.selectedItem) {
this.setState({
selectedItem: this.props.selectedItem,
firstItem: this.getFirstItem(this.props.selectedItem)
});
}
if (this.props.children === prevProps.children) {
return;
} // This will capture any size changes for arrow adjustments etc.
// usually in the same render cycle so we don't see any flickers
this.updateSizes();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.destroyThumbs();
}
}, {
key: "setupThumbs",
value: function setupThumbs() {
// as the widths are calculated, we need to resize
// the carousel when the window is resized
(0, _window.default)().addEventListener('resize', this.updateSizes); // issue #2 - image loading smaller
(0, _window.default)().addEventListener('DOMContentLoaded', this.updateSizes); // when the component is rendered we need to calculate
// the container size to adjust the responsive behaviour
this.updateSizes();
}
}, {
key: "destroyThumbs",
value: function destroyThumbs() {
// removing listeners
(0, _window.default)().removeEventListener('resize', this.updateSizes);
(0, _window.default)().removeEventListener('DOMContentLoaded', this.updateSizes);
}
}, {
key: "getFirstItem",
value: function getFirstItem(selectedItem) {
var firstItem = selectedItem;
if (selectedItem >= this.state.lastPosition) {
firstItem = this.state.lastPosition;
}
if (selectedItem < this.state.firstItem + this.state.visibleItems) {
firstItem = this.state.firstItem;
}
if (selectedItem < this.state.firstItem) {
firstItem = selectedItem;
}
return firstItem;
}
}, {
key: "renderItems",
value: function renderItems() {
var _this2 = this;
return this.props.children.map(function (img, index) {
var itemClass = _cssClasses.default.ITEM(false, index === _this2.state.selectedItem);
var thumbProps = {
key: index,
ref: function ref(e) {
return _this2.setThumbsRef(e, index);
},
className: itemClass,
onClick: _this2.handleClickItem.bind(_this2, index, _this2.props.children[index]),
onKeyDown: _this2.handleClickItem.bind(_this2, index, _this2.props.children[index]),
'aria-label': "".concat(_this2.props.labels.item, " ").concat(index + 1),
style: {
width: _this2.props.thumbWidth
}
};
return /*#__PURE__*/_react.default.createElement("li", _extends({}, thumbProps, {
role: "button",
tabIndex: 0
}), img);
});
}
}, {
key: "render",
value: function render() {
var _this3 = this;
if (!this.props.children) {
return null;
}
var isSwipeable = _react.Children.count(this.props.children) > 1; // show left arrow?
var hasPrev = this.state.showArrows && this.state.firstItem > 0; // show right arrow
var hasNext = this.state.showArrows && this.state.firstItem < this.state.lastPosition; // obj to hold the transformations and styles
var itemListStyles = {};
var currentPosition = -this.state.firstItem * (this.state.itemSize || 0);
var transformProp = (0, _CSSTranslate.default)(currentPosition, 'px', this.props.axis);
var transitionTime = this.props.transitionTime + 'ms';
itemListStyles = {
WebkitTransform: transformProp,
MozTransform: transformProp,
MsTransform: transformProp,
OTransform: transformProp,
transform: transformProp,
msTransform: transformProp,
WebkitTransitionDuration: transitionTime,
MozTransitionDuration: transitionTime,
MsTransitionDuration: transitionTime,
OTransitionDuration: transitionTime,
transitionDuration: transitionTime,
msTransitionDuration: transitionTime
};
return /*#__PURE__*/_react.default.createElement("div", {
className: _cssClasses.default.CAROUSEL(false)
}, /*#__PURE__*/_react.default.createElement("div", {
className: _cssClasses.default.WRAPPER(false),
ref: this.setItemsWrapperRef
}, /*#__PURE__*/_react.default.createElement("button", {
type: "button",
className: _cssClasses.default.ARROW_PREV(!hasPrev),
onClick: function onClick() {
return _this3.slideRight();
},
"aria-label": this.props.labels.leftArrow
}), isSwipeable ? /*#__PURE__*/_react.default.createElement(_reactEasySwipe.default, {
tagName: "ul",
className: _cssClasses.default.SLIDER(false, this.state.swiping),
onSwipeLeft: this.slideLeft,
onSwipeRight: this.slideRight,
onSwipeMove: this.onSwipeMove,
onSwipeStart: this.onSwipeStart,
onSwipeEnd: this.onSwipeEnd,
style: itemListStyles,
innerRef: this.setItemsListRef,
allowMouseEvents: this.props.emulateTouch
}, this.renderItems()) : /*#__PURE__*/_react.default.createElement("ul", {
className: _cssClasses.default.SLIDER(false, this.state.swiping),
ref: function ref(node) {
return _this3.setItemsListRef(node);
},
style: itemListStyles
}, this.renderItems()), /*#__PURE__*/_react.default.createElement("button", {
type: "button",
className: _cssClasses.default.ARROW_NEXT(!hasNext),
onClick: function onClick() {
return _this3.slideLeft();
},
"aria-label": this.props.labels.rightArrow
})));
}
}]);
return Thumbs;
}(_react.Component);
exports.default = Thumbs;
_defineProperty(Thumbs, "displayName", 'Thumbs');
_defineProperty(Thumbs, "defaultProps", {
axis: 'horizontal',
labels: {
leftArrow: 'previous slide / item',
rightArrow: 'next slide / item',
item: 'slide item'
},
selectedItem: 0,
thumbWidth: 80,
transitionTime: 350
});

View File

@@ -0,0 +1,68 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var _default = {
ROOT: function ROOT(customClassName) {
return (0, _classnames.default)(_defineProperty({
'carousel-root': true
}, customClassName || '', !!customClassName));
},
CAROUSEL: function CAROUSEL(isSlider) {
return (0, _classnames.default)({
carousel: true,
'carousel-slider': isSlider
});
},
WRAPPER: function WRAPPER(isSlider, axis) {
return (0, _classnames.default)({
'thumbs-wrapper': !isSlider,
'slider-wrapper': isSlider,
'axis-horizontal': axis === 'horizontal',
'axis-vertical': axis !== 'horizontal'
});
},
SLIDER: function SLIDER(isSlider, isSwiping) {
return (0, _classnames.default)({
thumbs: !isSlider,
slider: isSlider,
animated: !isSwiping
});
},
ITEM: function ITEM(isSlider, selected, previous) {
return (0, _classnames.default)({
thumb: !isSlider,
slide: isSlider,
selected: selected,
previous: previous
});
},
ARROW_PREV: function ARROW_PREV(disabled) {
return (0, _classnames.default)({
'control-arrow control-prev': true,
'control-disabled': disabled
});
},
ARROW_NEXT: function ARROW_NEXT(disabled) {
return (0, _classnames.default)({
'control-arrow control-next': true,
'control-disabled': disabled
});
},
DOT: function DOT(selected) {
return (0, _classnames.default)({
dot: true,
selected: selected
});
}
};
exports.default = _default;

View File

@@ -0,0 +1,15 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.outerWidth = void 0;
var outerWidth = function outerWidth(el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width += parseInt(style.marginLeft) + parseInt(style.marginRight);
return width;
};
exports.outerWidth = outerWidth;

31
node_modules/react-responsive-carousel/lib/js/index.js generated vendored Normal file
View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Carousel", {
enumerable: true,
get: function get() {
return _Carousel.default;
}
});
Object.defineProperty(exports, "CarouselProps", {
enumerable: true,
get: function get() {
return _types.CarouselProps;
}
});
Object.defineProperty(exports, "Thumbs", {
enumerable: true,
get: function get() {
return _Thumbs.default;
}
});
var _Carousel = _interopRequireDefault(require("./components/Carousel"));
var _types = require("./components/Carousel/types");
var _Thumbs = _interopRequireDefault(require("./components/Thumbs"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

81
node_modules/react-responsive-carousel/lib/js/main.js generated vendored Normal file
View File

@@ -0,0 +1,81 @@
"use strict";
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
Promise.resolve().then(function () {
return _interopRequireWildcard(require('./components/Carousel'));
}).then(function (_ref) {
var Carousel = _ref.default;
var DemoCarousel = function DemoCarousel() {
return /*#__PURE__*/_react.default.createElement(Carousel, {
showArrows: true,
infiniteLoop: true,
autoPlay: true,
emulateTouch: true,
onClickItem: function onClickItem() {
var _console;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return (_console = console).log.apply(_console, ['onClickItem'].concat(args));
},
onChange: function onChange() {
var _console2;
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return (_console2 = console).log.apply(_console2, ['onChange'].concat(args));
},
onClickThumb: function onClickThumb() {
var _console3;
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
return (_console3 = console).log.apply(_console3, ['onClickThumb'].concat(args));
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/1.jpeg"
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"
}, "Legend 1")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/2.jpeg"
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"
}, "Legend 2")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/3.jpeg"
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"
}, "Legend 3")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/4.jpeg"
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"
}, "Legend 4")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/5.jpeg"
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"
}, "Legend 5")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/6.jpeg"
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"
}, "Legend 6")));
};
_reactDom.default.render( /*#__PURE__*/_react.default.createElement(DemoCarousel, null), document.querySelector('.demo-carousel'));
});

View File

@@ -0,0 +1,12 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _default = function _default() {
return document;
};
exports.default = _default;

View File

@@ -0,0 +1,12 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _default = function _default() {
return window;
};
exports.default = _default;

View File

@@ -0,0 +1,239 @@
/********************************************
BREAKPOINT WIDTHS
********************************************/
/********************************************
FONTS
********************************************/
/********************************************
COLOURS
********************************************/
.carousel .control-arrow, .carousel.carousel-slider .control-arrow {
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
opacity: 0.4;
filter: alpha(opacity=40);
position: absolute;
z-index: 2;
top: 20px;
background: none;
border: 0;
font-size: 32px;
cursor: pointer; }
.carousel .control-arrow:focus, .carousel .control-arrow:hover {
opacity: 1;
filter: alpha(opacity=100); }
.carousel .control-arrow:before, .carousel.carousel-slider .control-arrow:before {
margin: 0 5px;
display: inline-block;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
content: ''; }
.carousel .control-disabled.control-arrow {
opacity: 0;
filter: alpha(opacity=0);
cursor: inherit;
display: none; }
.carousel .control-prev.control-arrow {
left: 0; }
.carousel .control-prev.control-arrow:before {
border-right: 8px solid #fff; }
.carousel .control-next.control-arrow {
right: 0; }
.carousel .control-next.control-arrow:before {
border-left: 8px solid #fff; }
.carousel-root {
outline: none; }
.carousel {
position: relative;
width: 100%; }
.carousel * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.carousel img {
width: 100%;
display: inline-block;
pointer-events: none; }
.carousel .carousel {
position: relative; }
.carousel .control-arrow {
outline: 0;
border: 0;
background: none;
top: 50%;
margin-top: -13px;
font-size: 18px; }
.carousel .thumbs-wrapper {
margin: 20px;
overflow: hidden; }
.carousel .thumbs {
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
-ms-transition: all 0.15s ease-in;
-o-transition: all 0.15s ease-in;
transition: all 0.15s ease-in;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: relative;
list-style: none;
white-space: nowrap; }
.carousel .thumb {
-webkit-transition: border 0.15s ease-in;
-moz-transition: border 0.15s ease-in;
-ms-transition: border 0.15s ease-in;
-o-transition: border 0.15s ease-in;
transition: border 0.15s ease-in;
display: inline-block;
margin-right: 6px;
white-space: nowrap;
overflow: hidden;
border: 3px solid #fff;
padding: 2px; }
.carousel .thumb:focus {
border: 3px solid #ccc;
outline: none; }
.carousel .thumb.selected, .carousel .thumb:hover {
border: 3px solid #333; }
.carousel .thumb img {
vertical-align: top; }
.carousel.carousel-slider {
position: relative;
margin: 0;
overflow: hidden; }
.carousel.carousel-slider .control-arrow {
top: 0;
color: #fff;
font-size: 26px;
bottom: 0;
margin-top: 0;
padding: 5px; }
.carousel.carousel-slider .control-arrow:hover {
background: rgba(0, 0, 0, 0.2); }
.carousel .slider-wrapper {
overflow: hidden;
margin: auto;
width: 100%;
-webkit-transition: height 0.15s ease-in;
-moz-transition: height 0.15s ease-in;
-ms-transition: height 0.15s ease-in;
-o-transition: height 0.15s ease-in;
transition: height 0.15s ease-in; }
.carousel .slider-wrapper.axis-horizontal .slider {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex; }
.carousel .slider-wrapper.axis-horizontal .slider .slide {
flex-direction: column;
flex-flow: column; }
.carousel .slider-wrapper.axis-vertical {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex; }
.carousel .slider-wrapper.axis-vertical .slider {
-webkit-flex-direction: column;
flex-direction: column; }
.carousel .slider {
margin: 0;
padding: 0;
position: relative;
list-style: none;
width: 100%; }
.carousel .slider.animated {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out; }
.carousel .slide {
min-width: 100%;
margin: 0;
position: relative;
text-align: center; }
.carousel .slide img {
width: 100%;
vertical-align: top;
border: 0; }
.carousel .slide iframe {
display: inline-block;
width: calc(100% - 80px);
margin: 0 40px 40px;
border: 0; }
.carousel .slide .legend {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -45%;
width: 90%;
border-radius: 10px;
background: #000;
color: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
opacity: 0.25;
-webkit-transition: opacity 0.35s ease-in-out;
-moz-transition: opacity 0.35s ease-in-out;
-ms-transition: opacity 0.35s ease-in-out;
-o-transition: opacity 0.35s ease-in-out;
transition: opacity 0.35s ease-in-out; }
.carousel .control-dots {
position: absolute;
bottom: 0;
margin: 10px 0;
padding: 0;
text-align: center;
width: 100%;
z-index: 1; }
@media (min-width: 960px) {
.carousel .control-dots {
bottom: 0; } }
.carousel .control-dots .dot {
-webkit-transition: opacity 0.25s ease-in;
-moz-transition: opacity 0.25s ease-in;
-ms-transition: opacity 0.25s ease-in;
-o-transition: opacity 0.25s ease-in;
transition: opacity 0.25s ease-in;
opacity: 0.3;
filter: alpha(opacity=30);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
background: #fff;
border-radius: 50%;
width: 8px;
height: 8px;
cursor: pointer;
display: inline-block;
margin: 0 8px; }
.carousel .control-dots .dot.selected, .carousel .control-dots .dot:hover {
opacity: 1;
filter: alpha(opacity=100); }
.carousel .carousel-status {
position: absolute;
top: 0;
right: 0;
padding: 5px;
font-size: 10px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
color: #fff; }
.carousel:hover .slide .legend {
opacity: 1; }

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,3 @@
declare const _default: (position: number, metric: 'px' | '%', axis: 'horizontal' | 'vertical') => string;
export default _default;
//# sourceMappingURL=CSSTranslate.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"CSSTranslate.d.ts","sourceRoot":"","sources":["../../src/CSSTranslate.ts"],"names":[],"mappings":"mCAA0B,MAAM,UAAU,IAAI,GAAG,GAAG,QAAQ,YAAY,GAAG,UAAU;AAArF,wBAQE"}

View File

@@ -0,0 +1,28 @@
import { AnimationHandler, SwipeAnimationHandler, StopSwipingHandler } from './types';
/**
* Main animation handler for the default 'sliding' style animation
* @param props
* @param state
*/
export declare const slideAnimationHandler: AnimationHandler;
/**
* Swiping animation handler for the default 'sliding' style animation
* @param delta
* @param props
* @param state
* @param setState
*/
export declare const slideSwipeAnimationHandler: SwipeAnimationHandler;
/**
* Default 'sliding' style animination handler for when a swipe action stops.
* @param props
* @param state
*/
export declare const slideStopSwipingHandler: StopSwipingHandler;
/**
* Main animation handler for the default 'fade' style animation
* @param props
* @param state
*/
export declare const fadeAnimationHandler: AnimationHandler;
//# sourceMappingURL=animations.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/animations.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAA4B,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEhH;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,gBAmDnC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,EAAE,qBA0DxC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,kBAOrC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,gBAqClC,CAAC"}

View File

@@ -0,0 +1,88 @@
import React from 'react';
import Thumbs from '../Thumbs';
import { CarouselProps, CarouselState } from './types';
export default class Carousel extends React.Component<CarouselProps, CarouselState> {
private thumbsRef?;
private carouselWrapperRef?;
private listRef?;
private itemsRef?;
private timer?;
private animationHandler;
static displayName: string;
static defaultProps: CarouselProps;
constructor(props: CarouselProps);
componentDidMount(): void;
componentDidUpdate(prevProps: CarouselProps, prevState: CarouselState): void;
componentWillUnmount(): void;
setThumbsRef: (node: Thumbs) => void;
setCarouselWrapperRef: (node: HTMLDivElement) => void;
setListRef: (node: HTMLElement | HTMLUListElement) => void;
setItemsRef: (node: HTMLElement, index: number) => void;
setupCarousel(): void;
destroyCarousel(): void;
setupAutoPlay(): void;
destroyAutoPlay(): void;
bindEvents(): void;
unbindEvents(): void;
autoPlay: () => void;
clearAutoPlay: () => void;
resetAutoPlay: () => void;
stopOnHover: () => void;
startOnLeave: () => void;
forceFocus(): void;
isFocusWithinTheCarousel: () => boolean;
navigateWithKeyboard: (e: KeyboardEvent) => void;
updateSizes: () => void;
setMountState: () => void;
handleClickItem: (index: number, item: React.ReactNode) => void;
/**
* On Change handler, Passes the index and React node to the supplied onChange prop
* @param index of the carousel item
* @param item React node of the item being changed
*/
handleOnChange: (index: number, item: React.ReactNode) => void;
handleClickThumb: (index: number, item: React.ReactNode) => void;
onSwipeStart: (event: React.TouchEvent) => void;
onSwipeEnd: (event: React.TouchEvent) => void;
onSwipeMove: (delta: {
x: number;
y: number;
}, event: React.TouchEvent) => boolean;
/**
* Decrements the selectedItem index a number of positions through the children list
* @param positions
* @param fromSwipe
*/
decrement: (positions?: number) => void;
/**
* Increments the selectedItem index a number of positions through the children list
* @param positions
* @param fromSwipe
*/
increment: (positions?: number) => void;
/**
* Moves the selected item to the position provided
* @param position
* @param fromSwipe
*/
moveTo: (position?: number | undefined) => void;
onClickNext: () => void;
onClickPrev: () => void;
onSwipeForward: () => void;
onSwipeBackwards: () => void;
changeItem: (newIndex: number) => (e: React.MouseEvent | React.KeyboardEvent) => void;
/**
* This function is called when you want to 'select' a new item, or rather move to a 'selected' item
* It also handles the onChange callback wrapper
* @param state state object with updated selected item, and swiping bool if relevant
*/
selectItem: (state: Pick<CarouselState, 'selectedItem' | 'swiping'>) => void;
getInitialImage: () => HTMLImageElement;
getVariableItemHeight: (position: number) => number | null;
renderItems(isClone?: boolean): JSX.Element[];
renderControls(): JSX.Element | null;
renderStatus(): JSX.Element | null;
renderThumbs(): JSX.Element | null;
render(): JSX.Element | null;
}
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,MAAM,MAAM,WAAW,CAAC;AAI/B,OAAO,EAAoB,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQzE,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC;IAC/E,OAAO,CAAC,SAAS,CAAC,CAAS;IAC3B,OAAO,CAAC,kBAAkB,CAAC,CAAiB;IAE5C,OAAO,CAAC,OAAO,CAAC,CAAiC;IACjD,OAAO,CAAC,QAAQ,CAAC,CAAgB;IACjC,OAAO,CAAC,KAAK,CAAC,CAAgC;IAC9C,OAAO,CAAC,gBAAgB,CAAmB;IAE3C,MAAM,CAAC,WAAW,SAAc;IAEhC,MAAM,CAAC,YAAY,EAAE,aAAa,CAwFhC;gBAEU,KAAK,EAAE,aAAa;IA+BhC,iBAAiB;IAQjB,kBAAkB,CAAC,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa;IAiCrE,oBAAoB;IAIpB,YAAY,SAAU,MAAM,UAE1B;IAEF,qBAAqB,SAAU,cAAc,UAE3C;IAEF,UAAU,SAAU,WAAW,GAAG,gBAAgB,UAEhD;IAEF,WAAW,SAAU,WAAW,SAAS,MAAM,UAK7C;IAEF,aAAa;IA2Bb,eAAe;IAOf,aAAa;IAUb,eAAe;IAUf,UAAU;IAYV,YAAY;IAgBZ,QAAQ,aAcN;IAEF,aAAa,aAEX;IAEF,aAAa,aAGX;IAEF,WAAW,aAET;IAEF,YAAY,aAEV;IAEF,UAAU;IAIV,wBAAwB,gBAatB;IAEF,oBAAoB,MAAO,aAAa,UAsBtC;IAEF,WAAW,aAkBT;IAEF,aAAa,aAGX;IAEF,eAAe,UAAW,MAAM,QAAQ,KAAK,CAAC,SAAS,UAoBrD;IAEF;;;;OAIG;IACH,cAAc,UAAW,MAAM,QAAQ,KAAK,CAAC,SAAS,UAMpD;IAEF,gBAAgB,UAAW,MAAM,QAAQ,KAAK,CAAC,SAAS,UAItD;IAEF,YAAY,UAAW,KAAK,CAAC,UAAU,UAKrC;IAEF,UAAU,UAAW,KAAK,CAAC,UAAU,UAanC;IAEF,WAAW,UAAW;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,SAAS,KAAK,CAAC,UAAU,aAiBrE;IAEF;;;;OAIG;IACH,SAAS,+BAEP;IAEF;;;;OAIG;IACH,SAAS,+BAEP;IAEF;;;;OAIG;IACH,MAAM,0CAyBJ;IAEF,WAAW,aAET;IAEF,WAAW,aAET;IAEF,cAAc,aAMZ;IAEF,gBAAgB,aAMd;IAEF,UAAU,aAAc,MAAM,SAAS,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,UAI3E;IAEF;;;;OAIG;IACH,UAAU,UAAW,IAAI,CAAC,aAAa,EAAE,cAAc,GAAG,SAAS,CAAC,UAalE;IAEF,eAAe,yBAKb;IAEF,qBAAqB,aAAc,MAAM,mBA2BvC;IAEF,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO;IA0C7B,cAAc;IAkBd,YAAY;IAYZ,YAAY;IAoBZ,MAAM;CA4FT"}

View File

@@ -0,0 +1,81 @@
/// <reference types="react" />
export interface AnimationHandlerResponse {
itemListStyle?: React.CSSProperties;
slideStyle?: React.CSSProperties;
selectedStyle?: React.CSSProperties;
prevStyle?: React.CSSProperties;
}
export declare type AnimationHandler = (props: CarouselProps, state: CarouselState) => AnimationHandlerResponse;
export declare type SwipeAnimationHandler = (delta: {
x: number;
y: number;
}, props: CarouselProps, state: CarouselState, setState: Function) => AnimationHandlerResponse;
export declare type StopSwipingHandler = (props: CarouselProps, state: CarouselState) => AnimationHandlerResponse;
export interface CarouselProps {
ariaLabel?: string | undefined;
axis: 'horizontal' | 'vertical';
autoFocus?: boolean;
autoPlay?: boolean;
centerMode?: boolean;
centerSlidePercentage: number;
children?: React.ReactChild[];
className?: string;
dynamicHeight?: boolean;
emulateTouch?: boolean;
infiniteLoop?: boolean;
interval: number;
labels: {
leftArrow: string;
rightArrow: string;
item: string;
};
onClickItem: (index: number, item: React.ReactNode) => void;
onClickThumb: (index: number, item: React.ReactNode) => void;
onChange: (index: number, item: React.ReactNode) => void;
onSwipeStart: (event: React.TouchEvent) => void;
onSwipeEnd: (event: React.TouchEvent) => void;
onSwipeMove: (event: React.TouchEvent) => boolean;
preventMovementUntilSwipeScrollTolerance: boolean;
renderArrowPrev: (clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode;
renderArrowNext: (clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode;
renderIndicator: (clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void, isSelected: boolean, index: number, label: string) => React.ReactNode;
renderItem: (item: React.ReactNode, options?: {
isSelected: boolean;
isPrevious: boolean;
}) => React.ReactNode;
renderThumbs: (children: React.ReactChild[]) => React.ReactChild[];
selectedItem: number;
showArrows: boolean;
showStatus: boolean;
showIndicators: boolean;
showThumbs: boolean;
statusFormatter: (currentItem: number, total: number) => string;
stopOnHover: boolean;
swipeable: boolean;
swipeScrollTolerance: number;
thumbWidth?: number;
transitionTime: number;
useKeyboardArrows?: boolean;
verticalSwipe: 'natural' | 'standard';
width: number | string;
animationHandler: 'slide' | 'fade' | AnimationHandler;
swipeAnimationHandler: SwipeAnimationHandler;
stopSwipingHandler: StopSwipingHandler;
}
export interface CarouselState {
autoPlay?: boolean;
cancelClick: boolean;
hasMount: boolean;
initialized: boolean;
isMouseEntered: boolean;
itemSize: number;
previousItem: number;
selectedItem: number;
swiping?: boolean;
swipeMovementStarted: boolean;
itemListStyle?: React.CSSProperties;
slideStyle?: React.CSSProperties;
selectedStyle?: React.CSSProperties;
prevStyle?: React.CSSProperties;
}
//# sourceMappingURL=types.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/types.ts"],"names":[],"mappings":";AAAA,MAAM,WAAW,wBAAwB;IACrC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACnC;AAED,oBAAY,gBAAgB,GAAG,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,KAAK,wBAAwB,CAAC;AAExG,oBAAY,qBAAqB,GAAG,CAChC,KAAK,EAAE;IACH,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb,EACD,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,QAAQ,KACjB,wBAAwB,CAAC;AAE9B,oBAAY,kBAAkB,GAAG,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,KAAK,wBAAwB,CAAC;AAE1G,MAAM,WAAW,aAAa;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,IAAI,EAAE,YAAY,GAAG,UAAU,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACzD,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC;IAClD,wCAAwC,EAAE,OAAO,CAAC;IAClD,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChG,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChG,eAAe,EAAE,CACb,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,KAAK,IAAI,EACjE,UAAU,EAAE,OAAO,EACnB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,KACZ,KAAK,CAAC,SAAS,CAAC;IACrB,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE;QAAE,UAAU,EAAE,OAAO,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/G,YAAY,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,KAAK,CAAC,UAAU,EAAE,CAAC;IACnE,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAChE,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,SAAS,GAAG,UAAU,CAAC;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,gBAAgB,EAAE,OAAO,GAAG,MAAM,GAAG,gBAAgB,CAAC;IACtD,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,kBAAkB,EAAE,kBAAkB,CAAC;CAC1C;AAED,MAAM,WAAW,aAAa;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACnC"}

View File

@@ -0,0 +1,17 @@
/// <reference types="react" />
import { CarouselProps } from './types';
export declare const noop: () => void;
export declare const defaultStatusFormatter: (current: number, total: number) => string;
export declare const isKeyboardEvent: (e?: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element> | undefined) => e is import("react").KeyboardEvent<Element>;
/**
* Gets the list 'position' relative to a current index
* @param index
*/
export declare const getPosition: (index: number, props: CarouselProps) => number;
/**
* Sets the 'position' transform for sliding animations
* @param position
* @param forceReflow
*/
export declare const setPosition: (position: number, axis: 'horizontal' | 'vertical') => React.CSSProperties;
//# sourceMappingURL=utils.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/utils.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,eAAO,MAAM,IAAI,YAAW,CAAC;AAE7B,eAAO,MAAM,sBAAsB,YAAa,MAAM,SAAS,MAAM,WAA6B,CAAC;AAEnG,eAAO,MAAM,eAAe,2JACW,CAAC;AAExC;;;GAGG;AACH,eAAO,MAAM,WAAW,UAAW,MAAM,SAAS,aAAa,KAAG,MAyBjE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,aAAc,MAAM,QAAQ,YAAY,GAAG,UAAU,KAAG,KAAK,CAAC,aAQrF,CAAC"}

View File

@@ -0,0 +1,66 @@
import React, { Component } from 'react';
export interface Props {
axis: 'horizontal' | 'vertical';
children: React.ReactChild[];
labels: {
leftArrow: string;
rightArrow: string;
item: string;
};
onSelectItem: (index: number, item: React.ReactNode) => void;
selectedItem: number;
thumbWidth: number;
transitionTime: number;
emulateTouch?: boolean;
}
interface State {
selectedItem: number;
firstItem: number;
itemSize?: number;
visibleItems: number;
lastPosition: number;
showArrows: boolean;
swiping: boolean;
}
export default class Thumbs extends Component<Props, State> {
private itemsWrapperRef?;
private itemsListRef?;
private thumbsRef?;
static displayName: string;
static defaultProps: {
axis: string;
labels: {
leftArrow: string;
rightArrow: string;
item: string;
};
selectedItem: number;
thumbWidth: number;
transitionTime: number;
};
constructor(props: Props);
componentDidMount(): void;
componentDidUpdate(prevProps: Props): void;
componentWillUnmount(): void;
setItemsWrapperRef: (node: HTMLDivElement) => void;
setItemsListRef: (node: HTMLUListElement) => void;
setThumbsRef: (node: HTMLLIElement, index: number) => void;
setupThumbs(): void;
destroyThumbs(): void;
updateSizes: () => void;
handleClickItem: (index: number, item: React.ReactNode, e: React.MouseEvent | React.KeyboardEvent) => void;
onSwipeStart: () => void;
onSwipeEnd: () => void;
onSwipeMove: (delta: {
x: number;
y: number;
}) => boolean;
slideRight: (positions?: number | undefined) => void;
slideLeft: (positions?: number | undefined) => void;
moveTo: (position: number) => void;
getFirstItem(selectedItem: number): number;
renderItems(): JSX.Element[];
render(): JSX.Element | null;
}
export {};
//# sourceMappingURL=Thumbs.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Thumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Thumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAWnD,MAAM,WAAW,KAAK;IAClB,IAAI,EAAE,YAAY,GAAG,UAAU,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC;IAC7B,MAAM,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,UAAU,KAAK;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACvD,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,YAAY,CAAC,CAAmB;IACxC,OAAO,CAAC,SAAS,CAAC,CAAkB;IAEpC,MAAM,CAAC,WAAW,SAAY;IAE9B,MAAM,CAAC,YAAY;;;;;;;;;;MAUjB;gBAEU,KAAK,EAAE,KAAK;IAaxB,iBAAiB;IAIjB,kBAAkB,CAAC,SAAS,EAAE,KAAK;IAiBnC,oBAAoB;IAIpB,kBAAkB,SAAU,cAAc,UAExC;IAEF,eAAe,SAAU,gBAAgB,UAEvC;IAEF,YAAY,SAAU,aAAa,SAAS,MAAM,UAKhD;IAEF,WAAW;IAYX,aAAa;IAMb,WAAW,aAkBT;IAEF,eAAe,UAAW,MAAM,QAAQ,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,UAQhG;IAEF,YAAY,aAIV;IAEF,UAAU,aAIR;IAEF,WAAW,UAAW;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,aAkC5C;IAEF,UAAU,2CAER;IAEF,SAAS,2CAEP;IAEF,MAAM,aAAc,MAAM,UASxB;IAEF,YAAY,CAAC,YAAY,EAAE,MAAM;IAkBjC,WAAW;IAsBX,MAAM;CA8ET"}

View File

@@ -0,0 +1,12 @@
declare const _default: {
ROOT: (customClassName?: string | undefined) => string;
CAROUSEL: (isSlider?: boolean | undefined) => string;
WRAPPER: (isSlider: boolean, axis?: "horizontal" | "vertical" | undefined) => string;
SLIDER: (isSlider: boolean, isSwiping?: boolean | undefined) => string;
ITEM: (isSlider: boolean, selected: boolean, previous?: boolean | undefined) => string;
ARROW_PREV: (disabled?: boolean | undefined) => string;
ARROW_NEXT: (disabled?: boolean | undefined) => string;
DOT: (selected?: boolean | undefined) => string;
};
export default _default;
//# sourceMappingURL=cssClasses.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"cssClasses.d.ts","sourceRoot":"","sources":["../../src/cssClasses.ts"],"names":[],"mappings":";;;wBAewB,OAAO;uBAQR,OAAO;qBAOT,OAAO,YAAY,OAAO;;;;;AA5B/C,wBAqDE"}

View File

@@ -0,0 +1,2 @@
export declare const outerWidth: (el: HTMLElement) => number;
//# sourceMappingURL=dimensions.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../src/dimensions.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,OAAQ,WAAW,WAMzC,CAAC"}

View File

@@ -0,0 +1,4 @@
export { default as Carousel } from './components/Carousel';
export { CarouselProps } from './components/Carousel/types';
export { default as Thumbs } from './components/Thumbs';
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC"}

View File

@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=main.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/main.tsx"],"names":[],"mappings":""}

View File

@@ -0,0 +1,3 @@
declare const _default: () => Document;
export default _default;
//# sourceMappingURL=document.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"document.d.ts","sourceRoot":"","sources":["../../../src/shims/document.ts"],"names":[],"mappings":";AAAA,wBAA8B"}

View File

@@ -0,0 +1,3 @@
declare const _default: () => Window & typeof globalThis;
export default _default;
//# sourceMappingURL=window.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/shims/window.ts"],"names":[],"mappings":";AAAA,wBAA4B"}

132
node_modules/react-responsive-carousel/package.json generated vendored Normal file
View File

@@ -0,0 +1,132 @@
{
"name": "react-responsive-carousel",
"version": "3.2.23",
"description": "React Responsive Carousel",
"author": {
"name": "Leandro Augusto Lemos",
"url": "http://leandrowd.github.io/"
},
"main": "lib/js/index.js",
"types": "lib/ts/index.d.ts",
"license": "MIT",
"keywords": [
"react",
"carousel",
"gallery",
"image-gallery",
"slider",
"responsive",
"swipe",
"mobile-friendly",
"react-component",
"view"
],
"repository": {
"type": "git",
"url": "https://github.com/leandrowd/react-responsive-carousel.git"
},
"bugs": {
"url": "https://github.com/leandrowd/react-responsive-carousel/issues"
},
"homepage": "http://leandrowd.github.io/react-responsive-carousel/",
"scripts": {
"start": "parcel src/index.html src/assets/**/*",
"storybook": "start-storybook -p 9001 -s ./src -c .storybook",
"changelog": "auto-changelog --ignore-commit-pattern=\"(Merge pull request|Merge branch|Updating changelog|Prepare for publishing)\"",
"update-codesandbox": "cd codesandbox/default && yarn add react-responsive-carousel@latest",
"format": "prettier \"**/*.{js,ts,tsx,json}\"",
"format:check": "yarn format --check",
"format:write": "yarn format --write",
"test": "yarn format:check && yarn typecheck && yarn jest && yarn jest-ssr",
"jest": "jest",
"jest-ssr": "jest --testEnvironment=node ./src/__tests__/SSR.tsx",
"typecheck": "tsc -p tsconfig.json --noEmit",
"update-snapshots": "jest --updateSnapshot",
"build": "yarn lib:build",
"lib:build": "yarn lib:build-js && yarn lib:build-styles && yarn lib:build-types",
"lib:build-js": "babel ./src -d lib/js --ignore './src/__tests__' --extensions .ts,.tsx --config-file ./babel.config.json",
"lib:build-styles": "mkdirp lib/styles && node-sass src/carousel.scss > lib/styles/carousel.css && node-sass --output-style compressed src/carousel.scss > lib/styles/carousel.min.css",
"lib:build-types": "tsc -p tsconfig.types.json",
"lib:pre-publish": "npm version patch && git push origin master",
"lib:publish": "npm publish && git push --tags",
"lib:post-publish": "yarn changelog && yarn update-codesandbox && git add . && git commit -m 'Updating changelog and codesandbox' && git push origin master",
"lib:build-and-publish": "yarn lib:build && yarn lib:pre-publish && npm run lib:publish && yarn lib:post-publish",
"website:build": "parcel build ./src/index.html --out-dir temp/website",
"website:copy-assets": "cp -r ./src/assets temp/website/assets && cp -r ./CNAME temp/website/CNAME",
"website:storybook": "build-storybook -s ./src -o ./temp/website/storybook",
"website:deploy": "gh-pages -d temp/website",
"website:create-and-publish": "yarn website:build && yarn website:copy-assets && yarn website:storybook && yarn website:deploy",
"prepublish-to-npm": "git pull && yarn build",
"publish-to-npm": "npm version patch && npm publish && git push --tags",
"postpublish-to-npm": "yarn changelog && yarn update-codesandbox && git add . && git commit -m 'Updating changelog and codesandbox' && git push origin master",
"prepublish-prerelease-to-npm": "git pull && yarn build && git add . && git commit -m 'Prepare for publishing prerelease'",
"publish-prerelease-to-npm": "(git pull && npm version prerelease --preid=next && npm publish)"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"@kadira/react-storybook-addon-info": "^3.4.0",
"@kadira/storybook": "^2.35.3",
"@storybook/addon-actions": "^5.3.18",
"@storybook/addon-essentials": "^5.3.18",
"@storybook/addon-knobs": "^5.3.18",
"@storybook/addon-storysource": "^5.3.18",
"@storybook/addon-viewport": "^5.3.18",
"@storybook/react": "^5.3.18",
"@types/classnames": "^2.2.10",
"@types/enzyme": "^3.10.5",
"@types/jest": "^25.2.1",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.6",
"@types/react-test-renderer": "^16.9.2",
"auto-changelog": "^1.10.2",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"gh-pages": "^2.2.0",
"husky": "^3.0.9",
"jest-cli": "^25.3.0",
"mkdirp": "^1.0.4",
"node-sass": "^4.13.1",
"parcel-bundler": "^1.12.4",
"prettier": "^1.18.2",
"pretty-quick": "^2.0.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-player": "^1.15.3",
"react-test-renderer": "^16.9.0",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"typescript": "^3.8.3"
},
"dependencies": {
"classnames": "^2.2.5",
"prop-types": "^15.5.8",
"react-easy-swipe": "^0.0.21"
},
"jest": {
"unmockedModulePathPatterns": [
"node_modules"
],
"rootDir": "src",
"setupFilesAfterEnv": [
"../setupTests.js"
]
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
"auto-changelog": {
"output": "CHANGELOG.md",
"template": "keepachangelog",
"unreleased": true,
"commitLimit": true
}
}

20
node_modules/react-responsive-carousel/tsconfig.json generated vendored Normal file
View File

@@ -0,0 +1,20 @@
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"noImplicitAny": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"strict": true,
"target": "es5",
"jsx": "react",
"baseUrl": "./src",
"typeRoots": ["./node_modules/@types", "./types"],
"paths": {
"~*": ["./*"],
"react-easy-swipe": ["./types/react-easy-swipe.d.ts"]
}
},
"include": ["./src/**/*.ts", "./src/**/*.tsx"]
}

View File

@@ -0,0 +1,13 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "lib/ts",
"declaration": true,
"declarationMap": true,
"isolatedModules": false,
"noEmit": false,
"allowJs": false,
"emitDeclarationOnly": true
},
"exclude": ["src/__tests__"]
}