mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-12 13:00:19 +00:00
React owl carousel (#25170)
* adding react-owl-carousel types * Update Definitions by list Fix Test error * Fix tslint Fix tsconfig * Add docs Fix Bugs
This commit is contained in:
tbounsiar
committed by
Ryan Cavanaugh
Ryan Cavanaugh
parent
3bd1232485
commit
f38bda6988
Vendored
+414
@@ -0,0 +1,414 @@
|
||||
// Type definitions for react-owl-carousel 2.2
|
||||
// Project: https://github.com/seal789ie/react-owl-carousel
|
||||
// Definitions by: T Bounsiar <https://github.com/tbounsiar>, Ismael Gorissen <https://github.com/igorissen>, Kenneth Ceyer <https://github.com/KennethanCeyer>
|
||||
// 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 <img>.
|
||||
*/
|
||||
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 '<responsiveClass>-<breakpoint>' 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<Options, any> {
|
||||
}
|
||||
@@ -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 (
|
||||
<div>
|
||||
<OwlCarousel className={"owl-theme"} loop={false} margin={10} nav={false} dots={false}>
|
||||
<div className="item"><h4>1</h4></div>
|
||||
<div className="item"><h4>2</h4></div>
|
||||
<div className="item"><h4>3</h4></div>
|
||||
<div className="item"><h4>4</h4></div>
|
||||
<div className="item"><h4>5</h4></div>
|
||||
<div className="item"><h4>6</h4></div>
|
||||
<div className="item"><h4>7</h4></div>
|
||||
<div className="item"><h4>8</h4></div>
|
||||
<div className="item"><h4>9</h4></div>
|
||||
<div className="item"><h4>10</h4></div>
|
||||
<div className="item"><h4>11</h4></div>
|
||||
<div className="item"><h4>12</h4></div>
|
||||
</OwlCarousel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<ReactOwlCarouselTest/>, document.getElementById("root"));
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json"
|
||||
}
|
||||
Reference in New Issue
Block a user