add react-alice-carousel

types/react-alice-carousel/index.d.ts

@@ -0,0 +1,129 @@
+// Type definitions for react-alert 2.4
+// Project: https://github.com/maxmarinich/react-alice-carousel
+// Definitions by: endigo <https://github.com/endigo>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+declare module 'react-big-calendar' {
+	import * as React from "react";
+
+	export interface EventObject {
+		item: number;
+		index: number;
+	}
+
+	export interface ResponsiveSettings {
+		breakpoint: {
+			items: number;
+		};
+	}
+
+	export interface Props {
+		/**
+		 * Fired when the event object is changing / returns event object
+		 */
+		onSlideChange?: (e: EventObject) => void;
+		/**
+		 * Fired when the event object was changed / returns event object
+		 */
+		onSlideChanged?: (e: EventObject) => void;
+		/**
+		 * Disable keys controls (left, right, space)
+		 *
+		 * Default: false.
+		 */
+		keysControlDisabled?: boolean;
+		/**
+		 * Disable play/pause button
+		 *
+		 * Default: false.
+		 */
+		playButtonEnabled?: boolean;
+		/**
+		 * Disable buttons control
+		 *
+		 * Default: false.
+		 */
+		buttonsDisabled?: boolean;
+		/**
+		 * Disable dots navigation
+		 *
+		 * Default: false.
+		 */
+		dotsDisabled?: boolean;
+		/**
+		 * Disable swipe handlers
+		 *
+		 * Default: false.
+		 */
+		swipeDisabled?: boolean;
+		/**
+		 * Number of items in the slide.
+		 *
+		 * Default: {}.
+		 */
+		responsive?: ResponsiveSettings,
+		/**
+		 * Duration of slides transition (milliseconds)
+		 *
+		 * Default: 250.
+		 */
+		duration?: number;
+		/**
+		 * The starting index of the carousel
+		 *
+		 * Default: 0.
+		 */
+		startIndex?: number;
+		/**
+		 * Sets the carousel at the specified position
+		 *
+		 * Default: 0.
+		 */
+		slideToIndex?: number;
+		/**
+		 *  Set auto play mode
+		 *
+		 * Default: false.
+		 */
+		autoPlay?: boolean;
+		/**
+		 * Disable infinite mode
+		 *
+		 * Default: true.
+		 */
+		infinite?: boolean;
+		/**
+		 * The offset of the alert from the page border, can be any number.
+		 *
+		 * Default: 14.
+		 */
+		mouseDragEnabled?: boolean;
+		/**
+		 * Enable fadeout animation. Fired when 1 item is in the slide
+		 *
+		 * Default: false.
+		 */
+		fadeOutAnimation?: boolean;
+		/**
+		 * Interval of auto play animation (milliseconds). If specified, a larger value will be taken from comparing this property and the duration one
+		 *
+		 * Default: 250.
+		 */
+		autoPlayInterval?: number;
+		/**
+		 * To run auto play in the left direction specify rtl value
+		 *
+		 * Default: 'ltr'.
+		 */
+		autoPlayDirection?: string;
+		/**
+		 * If this property is identified as true auto play animation will be stopped after clicking user on any gallery button
+		 *
+		 * Default: false.
+		 */
+		autoPlayActionDisabled?: boolean;
+	}
+
+	export default class Carousel extends React.Component<Props> {}
+}

types/react-alice-carousel/react-alice-carousel-tests.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import * as AliceCarousel from 'react-alice-carousel';
+
+class SimpleAliceCarousel extends React.Component<AliceCarousel.Props> {
+	render() {
+		return (
+			<div>
+				<AliceCarousel/>
+			</div>
+		);
+	}
+}
+
+class Gallery extends React.Component<AliceCarousel> {
+	onSlideChange(e: AliceCarousel.EventObject) {
+		console.log('Item`s position during a change: ', e.item);
+		console.log('Slide`s position during a change: ', e.slide);
+	}
+
+	onSlideChanged(e: AliceCarousel.EventObject) {
+		console.log('Item`s position after changes: ', e.item);
+		console.log('Slide`s position after changes: ', e.slide);
+	}
+
+	render() {
+		const responsive = {
+			0: {
+				items: 1
+			},
+			600: {
+				items: 2
+			},
+			1024: {
+				items: 3
+			}
+		};
+
+		return (
+			<AliceCarousel
+				duration={400}
+				autoPlay={true}
+				startIndex = {1}
+				fadeOutAnimation={true}
+				mouseDragEnabled={true}
+				playButtonEnabled={true}
+				responsive={responsive}
+				autoPlayInterval={2000}
+				autoPlayDirection="rtl"
+				autoPlayActionDisabled={true}
+				onSlideChange={this.onSlideChange}
+				onSlideChanged={this.onSlideChanged}
+			>
+				<div className="yours-custom-class"><h2>1</h2></div>
+				<div className="yours-custom-class"><h2>2</h2></div>
+				<div className="yours-custom-class"><h2>3</h2></div>
+				<div className="yours-custom-class"><h2>4</h2></div>
+				<div className="yours-custom-class"><h2>5</h2></div>
+			</AliceCarousel>
+		);
+	}
+}

types/react-alice-carousel/tsconfig.json

@@ -0,0 +1,24 @@
+{
+	"compilerOptions": {
+			"module": "commonjs",
+			"lib": [
+					"es6"
+			],
+			"noImplicitAny": true,
+			"noImplicitThis": true,
+			"strictNullChecks": true,
+			"strictFunctionTypes": true,
+			"baseUrl": "../",
+			"typeRoots": [
+					"../"
+			],
+			"types": [],
+			"noEmit": true,
+			"forceConsistentCasingInFileNames": true,
+			"jsx": "react"
+	},
+	"files": [
+			"index.d.ts",
+			"react-alice-carousel-tests.tsx"
+	]
+}

types/react-alice-carousel/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }