[fslightbox-react] add typings (#43953)

types/fslightbox-react/fslightbox-react-tests.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import FsLightbox from 'fslightbox-react';
+
+class Test extends React.Component {
+    handleEvent = () => {};
+
+    render() {
+        return (
+            <div>
+                <FsLightbox toggler={false} sources={['https://i.imgur.com/fsyrScY.jpg']} type={'image'} />
+
+                <FsLightbox toggler={false} sources={['https://i.imgur.com/fsyrScY.jpg']} types={['image']} />
+
+                <FsLightbox
+                    toggler={false}
+                    sources={[
+                        'https://i.imgur.com/fsyrScY.jpg',
+                        'https://www.youtube.com/watch?v=xshEZzpS4CQ',
+                        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+                    ]}
+                    videosPosters={[null, null, 'https://i.imgur.com/fsyrScY.jpg']}
+                    openOnMount={false}
+                    disableLocalStorage={true}
+                    onInit={this.handleEvent}
+                    onOpen={this.handleEvent}
+                    onShow={this.handleEvent}
+                    onClose={this.handleEvent}
+                    maxYoutubeVideoDimensions={{ width: 400, height: 300 }}
+                />
+
+                <FsLightbox
+                    toggler={false}
+                    customSources={[
+                        <iframe
+                            src="https://player.vimeo.com/video/22439234"
+                            width="1920px"
+                            height="1080px"
+                            frameBorder="0"
+                            allow="autoplay; fullscreen"
+                            allowFullScreen
+                        />,
+                        <iframe
+                            src="//maps.google.com/maps?q=?&q=London&output=embed"
+                            width="1920px"
+                            height="1080px"
+                            allowFullScreen
+                            scrolling="no"
+                            allow="autoplay; fullscreen"
+                        />,
+                        <div style={{ width: '200px', height: '100px' }}>
+                            <h3>I'm a completely custom source</h3>
+                        </div>,
+                    ]}
+                />
+            </div>
+        );
+    }
+}

types/fslightbox-react/index.d.ts

@@ -0,0 +1,52 @@
+// Type definitions for fslightbox-react 1.4
+// Project: https://fslightbox.com/
+// Definitions by: Kirill Nikitin <https://github.com/locke23rus>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+import * as React from 'react';
+
+export type SourceType = 'image' | 'video' | 'youtube' | null;
+
+export type VideoPoster = string | null;
+
+export interface VideoDimensions {
+    width: number;
+    height: number;
+}
+
+export interface FsLightboxProps {
+    toggler: boolean;
+    sources?: string[];
+
+    // custom sources
+    customSources?: JSX.Element[];
+
+    // slide number controlling
+    slide?: number;
+    source?: string;
+    sourceIndex?: number;
+
+    // events
+    onOpen?: () => void;
+    onClose?: () => void;
+    onInit?: () => void;
+    onShow?: () => void;
+
+    // types
+    disableLocalStorage?: boolean;
+    types?: SourceType[];
+    type?: SourceType;
+
+    // sources
+    videosPosters?: VideoPoster[];
+    maxYoutubeVideoDimensions?: VideoDimensions;
+
+    // preferences
+    loadOnlyCurrentSource?: boolean;
+    slideDistance?: number;
+    openOnMount?: boolean;
+}
+
+declare class FsLightbox extends React.Component<FsLightboxProps> {}
+
+export default FsLightbox;

types/fslightbox-react/tsconfig.json

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

types/fslightbox-react/tslint.json

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