From 05c5c440fa354bcdb838c00418cc9fb0b6793612 Mon Sep 17 00:00:00 2001 From: Christian Rackerseder Date: Wed, 14 Mar 2018 15:17:15 +0100 Subject: [PATCH 1/2] [tiny-slider-react] Add types --- types/tiny-slider-react/index.d.ts | 264 ++++++++++++++++++ .../tiny-slider-react-tests.tsx | 28 ++ types/tiny-slider-react/tsconfig.json | 25 ++ types/tiny-slider-react/tslint.json | 1 + 4 files changed, 318 insertions(+) create mode 100644 types/tiny-slider-react/index.d.ts create mode 100644 types/tiny-slider-react/tiny-slider-react-tests.tsx create mode 100644 types/tiny-slider-react/tsconfig.json create mode 100644 types/tiny-slider-react/tslint.json diff --git a/types/tiny-slider-react/index.d.ts b/types/tiny-slider-react/index.d.ts new file mode 100644 index 0000000000..a8cd14760c --- /dev/null +++ b/types/tiny-slider-react/index.d.ts @@ -0,0 +1,264 @@ +// Type definitions for tiny-slider-react 0.3 +// Project: https://github.com/jechav/tiny-slider-react#readme +// Definitions by: Christian Rackerseder +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.6 +import * as React from "react"; + +interface CommonOptions { + /** + * Default: 0. + * The initial index of the slider. + */ + startIndex?: number; + /** + * Default: 1. + * Number of slides being displayed in the viewport. + */ + items?: number; + /** + * Default: 0. + * Space between slides (in "px"). + */ + gutter?: number; + /** + * Default: 1. + * Number of slides going on one "click". + */ + slideBy?: number | "page"; + /** + * Default: 300. + * Speed of the slide animation (in "ms"). + */ + speed?: number; + /** + * Default: false. + * Height of slider container changes according to each slide"s height. + */ + autoHeight?: boolean; + /** + * Default: false. + * Controls width attribute of the slides. + */ + fixedWidth?: number | false; + /** + * Default: 0. + * Space on the outside (in "px"). + */ + edgePadding?: number; + /** + * Default: true. + * Controls the display and functionalities of controls components (prev/next buttons). If true, display the controls and add all functionalities. + */ + controls?: boolean; + /** + * Default: ["prev", "next"]. + * Text or markup in the prev/next buttons + */ + controlsText?: string[]; + /** + * Default: true. + * Controls the display and functionalities of nav components (dots). If true, display the nav and add all functionalities. + */ + nav?: boolean; + /** + * Default: false. + * Toggles the automatic change of slides + */ + autoplay?: boolean; + /** + * Default: false. + * Stops sliding on mouseover. + */ + autoplayHoverPause?: boolean; + /** + * Default: true. + * Pauses the sliding when the page is invisiable and resumes it when the page become visiable again + */ + autoplayResetOnVisibility?: boolean; + /** + * Default: ["start", "stop"]. + * Text or markup in the autoplay start/stop button. + */ + autoplayText?: string[]; + /** + * Default: 5000. + * Time between 2 autoplay slides change (in "ms"). + */ + autoplayTimeout?: number; + /** + * Default: true. + * Activates input detection for touch devices. + */ + touch?: boolean; + /** + * Default: false. + * Changing slides by dragging them. + */ + mouseDrag?: boolean; + /** + * Default: false. + * Allows using arrow keys to switch slides. + */ + arrowKeys?: boolean; + /** + * Default: false. + * Disable slider. + */ + disable?: boolean; +} + +export interface ResponsiveOptions { + [breakpoint: number]: CommonOptions; +} + +export interface TinySliderSettings extends CommonOptions { + /** + * Default: document.querySelector(".slider"). + * The slider container element or selector. + */ + container?: HTMLElement | string; + /** + * Default: "carousel". + * Controls animation behaviour. + * With carousel everything slides to the side, while gallery uses fade animations and changes all slides at once. + */ + mode?: "carousel" | "gallery"; + /** + * Default: "horizontal". + * The axis of the slider. + */ + axis?: "horizontal" | "vertical"; + /** + * Default: false. + * The container element/selector around the prev/next buttons. + * controlsContainer must have at least 2 child elements. + */ + controlsContainer?: HTMLElement | string | false; + /** + * Default: false. + * The container element/selector around the dots. + * navContainer must have at least same number of children as the slides. + */ + navContainer?: HTMLElement | string | false; + /** + * Default: false. + * Indecate if the dots are thurbnails. If true, they will always be visible even when more than 1 slides displayed in the viewport. + */ + navAsThumbnails?: boolean; + /** + * Default: "forward". + * Direction of slide movement (ascending/descending the slide index). + */ + autoplayDirection?: "forward" | "backward"; + /** + * Default: false. + * The customized autoplay start/stop button or selector. + */ + autoplayButton?: HTMLElement | string | false; + /** + * Default: true. + * Output autoplayButton markup when autoplay is true but a customized autoplayButton is not provided. + */ + autoplayButtonOutput?: boolean; + /** + * Default: "tns-fadeIn". + * Name of intro animation class. + */ + animateIn?: string; + /** + * Default: "tns-fadeOut". + * Name of outro animation class. + */ + animateOut?: string; + /** + * Default: "tns-normal". + * Name of default animation class. + */ + animateNormal?: string; + /** + * Default: false. + * Time between each gallery animation (in "ms"). + */ + animateDelay?: number | false; + /** + * Default: true. + * Moves throughout all the slides seamlessly. + */ + loop?: boolean; + /** + * Default: false. + * Moves to the opposite edge when reaching the first or last slide. + */ + rewind?: boolean; + /** + * Default: false. + * Breakpoint: Integer. + * Defines options for different viewport widths + */ + responsive?: ResponsiveOptions | false; + /** + * Default: false. + * Enables lazyloading images that are currently not viewed, thus saving bandwidth + */ + lazyload?: boolean; + /** + * Default: 15. + * Swipe or drag will not be triggered if the angle is not inside the range when set. + */ + swipeAngle?: number | boolean; + /** + * Default: false. + * Difine the relationship between nested sliders. + * Make sure you run the inner slider first, otherwise the height of the inner slider container will be wrong. + */ + nested?: "inner" | "outer" | false; + /** + * Default: true. + * Indicate whether the slider will be frozen (controls, nav, autoplay and other functions will stop work) when all slides can be displayed in one page. + */ + freezable?: boolean; + /** + * Default: false. + * Callback to be run on initialization. + */ + onInit?: () => void | false; +} + +export interface TinySliderInfo { + cloneCount: number; + container: HTMLElement; + controlsContainer?: boolean; + hasControls: boolean; + index: number; + indexCached: number; + items: number; + navContainer?: HTMLElement; + navCurrentIndex?: number; + navCurrentIndexCached?: number; + navItems?: HTMLCollection; + nextButton?: HTMLElement; + prevButton?: HTMLElement; + slideBy: number; + slideCount: number; + slideCountNew: number; + slideItems: HTMLCollection; + visibleNavIndexes?: number; + visibleNavIndexesCached?: number; +} + +export interface TinySliderProps { + settings?: TinySliderSettings; + onClick?: (slideClicked: number, info: string, event: Event) => void; + startIndex?: number; + onIndexChanged?: (info: TinySliderInfo) => void; + onTransitionStart?: (info: TinySliderInfo) => void; + onTransitionEnd?: (info: TinySliderInfo) => void; + onTouchStart?: (info: TinySliderInfo) => void; + onTouchMove?: (info: TinySliderInfo) => void; + onTouchEnd?: (info: TinySliderInfo) => void; +} + +declare class TinySlider extends React.Component {} + +export default TinySlider; diff --git a/types/tiny-slider-react/tiny-slider-react-tests.tsx b/types/tiny-slider-react/tiny-slider-react-tests.tsx new file mode 100644 index 0000000000..29c7eb97c7 --- /dev/null +++ b/types/tiny-slider-react/tiny-slider-react-tests.tsx @@ -0,0 +1,28 @@ +import * as React from "react"; +import TinySlider, { TinySliderSettings, TinySliderInfo } from "tiny-slider-react"; + +const settings: TinySliderSettings = { + startIndex: 1, + slideBy: "page", + speed: 60, + controlsText: ["yes", "no"], + nav: false, + autoplayText: ["start", "stop"], + arrowKeys: false, + disable: true, + mode: "gallery", + axis: "vertical", + responsive: { + 600: { + startIndex: 3, + gutter: 5, + fixedWidth: false + } + } +}; + +function handleIndexChanged(info: TinySliderInfo) { + console.log(info.hasControls, info.slideCount); +} + +const MyComponent = ; diff --git a/types/tiny-slider-react/tsconfig.json b/types/tiny-slider-react/tsconfig.json new file mode 100644 index 0000000000..87076a05e3 --- /dev/null +++ b/types/tiny-slider-react/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react" + }, + "files": [ + "index.d.ts", + "tiny-slider-react-tests.tsx" + ] +} diff --git a/types/tiny-slider-react/tslint.json b/types/tiny-slider-react/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/tiny-slider-react/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From da3a84f6822a20f21b3e017a81b07e86d99df1ec Mon Sep 17 00:00:00 2001 From: Christian Rackerseder Date: Thu, 15 Mar 2018 08:32:15 +0100 Subject: [PATCH 2/2] Fixed documentation --- types/tiny-slider-react/index.d.ts | 85 ++++++++++++++---------------- 1 file changed, 40 insertions(+), 45 deletions(-) diff --git a/types/tiny-slider-react/index.d.ts b/types/tiny-slider-react/index.d.ts index a8cd14760c..b509595f81 100644 --- a/types/tiny-slider-react/index.d.ts +++ b/types/tiny-slider-react/index.d.ts @@ -7,103 +7,103 @@ import * as React from "react"; interface CommonOptions { /** - * Default: 0. * The initial index of the slider. + * @defaultValue 0 */ startIndex?: number; /** - * Default: 1. * Number of slides being displayed in the viewport. + * @defaultValue 1 */ items?: number; /** - * Default: 0. * Space between slides (in "px"). + * @defaultValue 0 */ gutter?: number; /** - * Default: 1. * Number of slides going on one "click". + * @defaultValue 1 */ slideBy?: number | "page"; /** - * Default: 300. * Speed of the slide animation (in "ms"). + * @defaultValue 300 */ speed?: number; /** - * Default: false. * Height of slider container changes according to each slide"s height. + * @defaultValue false */ autoHeight?: boolean; /** - * Default: false. * Controls width attribute of the slides. + * @defaultValue false */ fixedWidth?: number | false; /** - * Default: 0. * Space on the outside (in "px"). + * @defaultValue 0 */ edgePadding?: number; /** - * Default: true. * Controls the display and functionalities of controls components (prev/next buttons). If true, display the controls and add all functionalities. + * @defaultValue true */ controls?: boolean; /** - * Default: ["prev", "next"]. * Text or markup in the prev/next buttons + * @defaultValue ["prev", "next"] */ controlsText?: string[]; /** - * Default: true. * Controls the display and functionalities of nav components (dots). If true, display the nav and add all functionalities. + * @defaultValue true */ nav?: boolean; /** - * Default: false. * Toggles the automatic change of slides + * @defaultValue false */ autoplay?: boolean; /** - * Default: false. * Stops sliding on mouseover. + * @defaultValue false */ autoplayHoverPause?: boolean; /** - * Default: true. * Pauses the sliding when the page is invisiable and resumes it when the page become visiable again + * @defaultValue true */ autoplayResetOnVisibility?: boolean; /** - * Default: ["start", "stop"]. * Text or markup in the autoplay start/stop button. + * @defaultValue ["start", "stop"] */ autoplayText?: string[]; /** - * Default: 5000. * Time between 2 autoplay slides change (in "ms"). + * @defaultValue 5000 */ autoplayTimeout?: number; /** - * Default: true. * Activates input detection for touch devices. + * @defaultValue true */ touch?: boolean; /** - * Default: false. * Changing slides by dragging them. + * @defaultValue false */ mouseDrag?: boolean; /** - * Default: false. * Allows using arrow keys to switch slides. + * @defaultValue false */ arrowKeys?: boolean; /** - * Default: false. * Disable slider. + * @defaultValue false */ disable?: boolean; } @@ -114,113 +114,108 @@ export interface ResponsiveOptions { export interface TinySliderSettings extends CommonOptions { /** - * Default: document.querySelector(".slider"). - * The slider container element or selector. - */ - container?: HTMLElement | string; - /** - * Default: "carousel". * Controls animation behaviour. * With carousel everything slides to the side, while gallery uses fade animations and changes all slides at once. + * @defaultValue "carousel" */ mode?: "carousel" | "gallery"; /** - * Default: "horizontal". * The axis of the slider. + * @defaultValue "horizontal" */ axis?: "horizontal" | "vertical"; /** - * Default: false. * The container element/selector around the prev/next buttons. * controlsContainer must have at least 2 child elements. + * @defaultValue false */ controlsContainer?: HTMLElement | string | false; /** - * Default: false. * The container element/selector around the dots. * navContainer must have at least same number of children as the slides. + * @defaultValue false */ navContainer?: HTMLElement | string | false; /** - * Default: false. * Indecate if the dots are thurbnails. If true, they will always be visible even when more than 1 slides displayed in the viewport. + * @defaultValue false */ navAsThumbnails?: boolean; /** - * Default: "forward". * Direction of slide movement (ascending/descending the slide index). + * @defaultValue "forward" */ autoplayDirection?: "forward" | "backward"; /** - * Default: false. * The customized autoplay start/stop button or selector. + * @defaultValue false */ autoplayButton?: HTMLElement | string | false; /** - * Default: true. * Output autoplayButton markup when autoplay is true but a customized autoplayButton is not provided. + * @defaultValue true */ autoplayButtonOutput?: boolean; /** - * Default: "tns-fadeIn". * Name of intro animation class. + * @defaultValue "tns-fadeIn" */ animateIn?: string; /** - * Default: "tns-fadeOut". * Name of outro animation class. + * @defaultValue "tns-fadeOut" */ animateOut?: string; /** - * Default: "tns-normal". * Name of default animation class. + * @defaultValue "tns-normal" */ animateNormal?: string; /** - * Default: false. * Time between each gallery animation (in "ms"). + * @defaultValue false */ animateDelay?: number | false; /** - * Default: true. * Moves throughout all the slides seamlessly. + * @defaultValue true */ loop?: boolean; /** - * Default: false. * Moves to the opposite edge when reaching the first or last slide. + * @defaultValue false */ rewind?: boolean; /** - * Default: false. * Breakpoint: Integer. * Defines options for different viewport widths + * @defaultValue false */ responsive?: ResponsiveOptions | false; /** - * Default: false. * Enables lazyloading images that are currently not viewed, thus saving bandwidth + * @defaultValue false */ lazyload?: boolean; /** - * Default: 15. * Swipe or drag will not be triggered if the angle is not inside the range when set. + * @defaultValue 15 */ swipeAngle?: number | boolean; /** - * Default: false. * Difine the relationship between nested sliders. * Make sure you run the inner slider first, otherwise the height of the inner slider container will be wrong. + * @defaultValue false */ nested?: "inner" | "outer" | false; /** - * Default: true. * Indicate whether the slider will be frozen (controls, nav, autoplay and other functions will stop work) when all slides can be displayed in one page. + * @defaultValue true */ freezable?: boolean; /** - * Default: false. * Callback to be run on initialization. + * @defaultValue false */ onInit?: () => void | false; }