diff --git a/types/react-owl-carousel/index.d.ts b/types/react-owl-carousel/index.d.ts new file mode 100644 index 0000000000..bcd9af38b5 --- /dev/null +++ b/types/react-owl-carousel/index.d.ts @@ -0,0 +1,414 @@ +// Type definitions for react-owl-carousel 2.2 +// Project: https://github.com/seal789ie/react-owl-carousel +// Definitions by: T Bounsiar , Ismael Gorissen , Kenneth Ceyer +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.6 + +import * as React from "react"; + +export type HandlerCallback = (...args: any[]) => void; + +export interface Options { + // OPTIONS + /** + * Default: + * Adding a -striped className to OwlCarousel. + */ + className?: string; + /** + * Default: 3 + * The number of items you want to see on the screen. + */ + items?: number; + /** + * Default: 0 + * margin-right(px) on item. + */ + margin?: number; + /** + * Default: false + * Infinity loop. Duplicate last and first items to get loop illusion. + */ + loop?: boolean; + /** + * Default: false + * Center item. Works well with even an odd number of items. + */ + center?: boolean; + /** + * Default: true + * Mouse drag enabled. + */ + mouseDrag?: boolean; + /** + * Default: true + * Touch drag enabled. + */ + touchDrag?: boolean; + /** + * Default: true + * Stage pull to edge. + */ + pullDrag?: boolean; + /** + * Default: false + * Item pull to edge. + */ + freeDrag?: boolean; + /** + * Default: 0 + * Padding left and right on stage (can see neighbours). + */ + stagePadding?: number; + /** + * Default: false + * Merge items. Looking for data-merge='{number}' inside item. + */ + merge?: boolean; + /** + * Default: true + * Fit merged items if screen is smaller than items value. + */ + mergeFit?: boolean; + /** + * Default: false + * Set non grid content. Try using width style on divs. + */ + autoWidth?: boolean; + /** + * Default: 0 + * Start position or URL Hash string like '#id'. + */ + startPosition?: number | string; + /** + * Default: false + * Listen to url hash changes. data-hash on items is required. + */ + URLhashListener?: boolean; + /** + * Default: false + * Show next/prev buttons. + */ + nav?: boolean; + /** + * Default: true + * Go backwards when the boundary has reached. + */ + rewind?: boolean; + /** + * Default: ['next','prev'] + * HTML allowed. + */ + navText?: string[]; + /** + * Default: div + * DOM element type for a single directional navigation link. + */ + navElement?: string; + /** + * Default: 1 + * Navigation slide by x. 'page' string can be set to slide by page. + */ + slideBy?: number | string; + /** + * Default: true + * Show dots navigation. + */ + dots?: boolean; + /** + * Default: false + * Show dots each x item. + */ + dotsEach?: number | boolean; + /** + * Default: false + * Used by data-dot content. + */ + dotData?: boolean; + /** + * Default: false + * Lazy load images. data-src and data-src-retina for highres. + * Also load images into background inline style if element is not . + */ + lazyLoad?: boolean; + /** + * Default: false + * lazyContent was introduced during beta tests but i removed it from the final release due to bad implementation. + * It is a nice options so i will work on it in the nearest feature. + */ + lazyContent?: boolean; + /** + * Default: false + * Autoplay. + */ + autoplay?: boolean; + /** + * Default: 5000 + * Autoplay interval timeout. + */ + autoplayTimeout?: number; + /** + * Default: false + * Pause on mouse hover. + */ + autoplayHoverPause?: boolean; + /** + * Default: 250 + * Speed Calculate. More info to come.. + */ + smartSpeed?: number | boolean; + /** + * Default: Number + * Speed Calculate. More info to come.. + */ + fluidSpeed?: number | boolean; + /** + * Default: false + * autoplay speed. + */ + autoplaySpeed?: number | boolean; + /** + * Default: false + * Navigation speed. + */ + navSpeed?: number | boolean; + /** + * Default: Number/Boolean + * Pagination speed. + */ + dotsSpeed?: number | boolean; + /** + * Default: false + * Drag end speed. + */ + dragEndSpeed?: number | boolean; + /** + * Default: true + * Enable callback events. + */ + callbacks?: boolean; + /** + * Default: empty object + * Object containing responsive options. Can be set to false to remove responsive capabilities.. + */ + responsive?: { [breakpoint: string]: Options }; + /** + * Default: 200 + * Responsive refresh rate. + */ + responsiveRefreshRate?: number; + /** + * Default: window + * Set on any DOM element. + * If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing. + */ + responsiveBaseElement?: Element; + /** + * Default: false + * Enable fetching YouTube/Vimeo/Vzaar videos. + */ + video?: boolean; + /** + * Default: false + * Set height for videos. + */ + videoHeight?: number | boolean; + /** + * Default: false + * Set width for videos. + */ + videoWidth?: number | boolean; + /** + * Default: false + * Class for CSS3 animation out. + */ + animateOut?: string | boolean; + /** + * Default: false + * Class for CSS3 animation in. + */ + animateIn?: string | boolean; + /** + * Default: swing + * Easing for CSS2 $.animate. + */ + fallbackEasing?: string; + /** + * Default: false + * Callback to retrieve basic information (current item/pages/widths). + * Info function second parameter is Owl DOM object reference. + */ + info?: HandlerCallback; + /** + * Default: false + * Use it if owl items are deep nested inside some generated content. E.g 'youritem'. Dont use dot before class name. + */ + nestedItemSelector?: string; + /** + * Default: div + * DOM element type for owl-item. + */ + itemElement?: string; + /** + * Default: div + * DOM element type for owl-stage. + */ + stageElement?: string; + /** + * Default: false + * Set your own container for nav. + */ + navContainer?: string | boolean; + /** + * Default: false + * Set your own container for nav. + */ + dotsContainer?: string | boolean; + + // CLASSES + /** + * Default: owl-refresh + * Class during refresh. + */ + refreshClass?: string; + /** + * Default: owl-loading + * Class during load. + */ + loadingClass?: string; + /** + * Default: owl-loaded + * Class after load. + */ + loadedClass?: string; + /** + * Default: owl-rtl + * Class for right to left mode. + */ + rtlClass?: string; + /** + * Default: owl-drag + * Class for mouse drag mode. + */ + dragClass?: string; + /** + * Default: owl-grab + * Class during mouse drag. + */ + grabClass?: string; + /** + * Default: owl-stage + * Stage class. + */ + stageClass?: string; + /** + * Default: owl-stage-outer + * Stage outer class. + */ + stageOuterClass?: string; + /** + * Default: owl-nav + * Navigation container class. + */ + navContainerClass?: string; + /** + * Default: ['owl-prev','owl-next'] + * Navigation buttons classes. + */ + navClass?: string[]; + /** + * Default: owl-controls + * Controls container class - wrapper for navs and dots. + */ + controlsClass?: string; + /** + * Default: owl-dot + * Dot Class. + */ + dotClass?: string; + /** + * Default: owl-dots + * Dots container class. + */ + dotsClass?: string; + /** + * Default: owl-height + * Auto height class. + */ + autoHeightClass?: string; + /** + * Default: false + * Optional helper class. + * Add '-' class to main element. Can be used to stylize content on given breakpoint. + */ + responsiveClass?: string | boolean; + + // EVENTS + /** + * When the plugin initializes. + */ + onInitialize?: HandlerCallback; + /** + * When the plugin has initialized. + */ + onInitialized?: HandlerCallback; + /** + * When the plugin gets resized. + */ + onResize?: HandlerCallback; + /** + * When the plugin has resized. + */ + onResized?: HandlerCallback; + /** + * When the internal state of the plugin needs update. + */ + onRefresh?: HandlerCallback; + /** + * When the internal state of the plugin has updated. + */ + onRefreshed?: HandlerCallback; + /** + * When the dragging of an item is started. + */ + onDrag?: HandlerCallback; + /** + * When the dragging of an item has finished. + */ + onDragged?: HandlerCallback; + /** + * When the translation of the stage starts. + */ + onTranslate?: HandlerCallback; + /** + * When the translation of the stage has finished. + */ + onTranslated?: HandlerCallback; + /** + * When a property is going to change its value. + */ + onChange?: HandlerCallback; + /** + * When a property has changed its value. + */ + onChanged?: HandlerCallback; + /** + * When lazy image loads. + */ + onLoadLazy?: HandlerCallback; + /** + * When lazy image has loaded. + */ + onLoadedLazy?: HandlerCallback; + /** + * When video has unloaded. + */ + onStopVideo?: HandlerCallback; + /** + * When video has loaded. + */ + onPlayVideo?: HandlerCallback; +} + +export default class OwlCarousel extends React.Component { +} diff --git a/types/react-owl-carousel/react-owl-carousel-tests.tsx b/types/react-owl-carousel/react-owl-carousel-tests.tsx new file mode 100644 index 0000000000..ba65ca9557 --- /dev/null +++ b/types/react-owl-carousel/react-owl-carousel-tests.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; +import * as ReactDOM from 'react-dom'; + +// Import React Owl Carousel +import OwlCarousel from "react-owl-carousel"; + +export class ReactOwlCarouselTest extends React.Component { + render() { + return ( +
+ +

1

+

2

+

3

+

4

+

5

+

6

+

7

+

8

+

9

+

10

+

11

+

12

+ +
+ ); + } +} + +ReactDOM.render(, document.getElementById("root")); diff --git a/types/react-owl-carousel/tsconfig.json b/types/react-owl-carousel/tsconfig.json new file mode 100644 index 0000000000..3733b428c9 --- /dev/null +++ b/types/react-owl-carousel/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "jsx": "react", + "strictNullChecks": true, + "strictFunctionTypes": true, + "noImplicitAny": true, + "noImplicitThis": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "experimentalDecorators": true + }, + "files": [ + "index.d.ts", + "react-owl-carousel-tests.tsx" + ] +} diff --git a/types/react-owl-carousel/tslint.json b/types/react-owl-carousel/tslint.json new file mode 100644 index 0000000000..f93cf8562a --- /dev/null +++ b/types/react-owl-carousel/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +}