Merge pull request #66 from superjose/AddTypings

Add TypeScript typings

Author: sag1v

package.json

@@ -24,6 +24,7 @@
     "build-doc": "docz build",
     "deploy-doc": "gh-pages -d demo"
   },
+  "types": "./dist/index.d.ts",
   "peerDependencies": {
     "prop-types": "^15.5.4",
     "react": "^15.0.0 || ^16.0.0",
@@ -84,6 +85,7 @@
     "rollup-plugin-alias": "^1.4.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^1.6.2",

rollup.config.js

@@ -1,5 +1,6 @@
 import babel from 'rollup-plugin-babel';
 import commonjs from 'rollup-plugin-commonjs';
+import copy from "rollup-plugin-copy";
 import external from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
 import resolve from 'rollup-plugin-node-resolve';
@@ -44,6 +45,9 @@ export default {
       namedExports: {
         'node_modules/react-is/index.js': ['isValidElementType']
       }
+    }),
+    copy({
+      targets: [{ src: `src/${libName}/index.d.ts`, dest: "dist" }],
     })
   ]
 }

src/react-elastic-carousel/index.d.ts

@@ -0,0 +1,101 @@
+import React from "react";
+
+type RenderArrowProps = {
+  type: "PREV" | "NEXT";
+  onClick: () => void;
+};
+
+type RenderPaginationProps = {
+  pages: number;
+  activatePage: number;
+  // The onClick event that sets the state of the carousel and sends
+  // it to a specific page.
+  onClick: (indicatorId: string) => void;
+};
+
+type ItemObject = {
+  // Children's props
+  object: any;
+  index: number;
+};
+
+type Breakpoint = {
+  itemsToScroll: number;
+  itemsToShow: number;
+};
+
+export interface ReactElasticCarouselProps {
+  className?: string;
+  itemsToShow?: number;
+  // Defaults to false
+  verticalMode?: boolean;
+  // Defaults to true
+  pagination?: boolean;
+  // Defaults to 500
+  transitionMs?: number;
+  // Defaults to "ease"
+  easing?: string;
+  // Defaults to "ease"
+  tiltEasing?: string;
+  // Defaults to true.
+  enableTilt?: boolean;
+  // Defaults to 1
+  itemsToScroll?: number;
+  breakpoints?: {
+    width: number;
+    itemsToShow: number;
+    itemsToScroll: number;
+  }[];
+  // Defaults to 0
+  initialFirstItem?: number;
+  // Defaults to true
+  showArrows?: boolean;
+  // Defaults to true
+  disableArrosOnEnd?: boolean;
+  // Defaults to boolean
+  focusOnSelect?: boolean;
+  // Function to generate your own navigation arrows.
+  renderArrow?: (props: RenderArrowProps) => void;
+  // Function to generate your own pagination component.
+  renderPagination?: (props: RenderPaginationProps) => JSX.Element;
+  // Defaults to "CENTER"
+  itemPosition?: "START" | "CENTER" | "END";
+  // A padding for each element - Defaults to [0,0,0,0]
+  itemPadding: number[];
+  // Enable or disable swipe - Defaults to true
+  enableSwipe?: boolean;
+  /** Enable or disable mouse swipe */
+  enableMouseSwipe?: boolean;
+  /** Prevent page scroll on touchmove.
+   * Use this to stop the browser from scrolling while a user swipes.
+   * More details: https://github.com/FormidableLabs/react-swipeable#preventdefaulttouchmoveevent-details
+   */
+  preventDefaultTouchmoveEvent?: boolean;
+  // Enable or disable auto play - Defaults to true
+  enableAutoPlay?: boolean;
+  /** Set auto play speed (ms) - Defaults to 2000 */
+  autoPlaySpeed?: number;
+  onChange?: (currentItemObject: ItemObject, currentPageIndex: number) => void;
+  //  A callback for the beginning of the next transition
+  onNextStart?: (
+    prevItemObject: ItemObject,
+    nextItemObject: ItemObject
+  ) => void;
+  // A callback for the beginning of the prev transition
+  onPrevStart?: (
+    prevItemObject: ItemObject,
+    nextItemObject: ItemObject
+  ) => void;
+  //  A callback for the end of the next transition
+  onNextEnd?: (nextItemObject: ItemObject, currentPageIndex: number) => void;
+  //  A callback for the end of the prev transition
+  onPrevEnd?: (nextItemObject: ItemObject, currentPageIndex: number) => void;
+  // A callback for the "slider-container" resize
+  onResize?: (currentBreakpoint: Breakpoint) => void;
+}
+
+declare class ReactElasticCarousel extends React.Component<
+  ReactElasticCarouselProps
+> {}
+
+export default ReactElasticCarousel;