Added type definitions for react-image-magnify (#38516)

* Updated types for react-image-magnify

* Fixed CI issues

types/react-image-magnify/index.d.ts

@@ -0,0 +1,224 @@
+// Type definitions for react-image-magnify 2.7
+// Project: https://github.com/ethanselzer/react-image-magnify
+// Definitions by: Sumit Parakh <https://github.com/sumitparakh>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from 'react';
+
+/**
+ * React Image Magnify
+ */
+export default function ReactImageMagnify(props: ReactImageMagnifyProps & Readonly<{ children?: React.ReactNode }>): React.ReactElement;
+
+export interface CommonImageType {
+    src: string;
+    srcSet?: string;
+    sizes?: string;
+    onLoad?: () => void;
+    onError?: () => void;
+}
+
+export interface SmallImageType extends CommonImageType {
+    /**
+     * Required if isFluidWidth is not set
+     */
+    width?: number;
+
+    /**
+     * Required if isFluidWidth is not set
+     */
+    height?: number;
+    alt?: string;
+
+    /**
+     * Default: false
+     */
+    isFluidWidth: boolean;
+}
+
+export interface LargeImageType extends CommonImageType {
+    width: number;
+    height: number;
+
+    /**
+     * Defaults to empty string
+     */
+    alt?: string;
+}
+
+export interface ReactImageMagnifyProps {
+    /**
+     * Small image information.
+     */
+    smallImage: SmallImageType;
+
+    /**
+     * Large image information
+     */
+    largeImage: LargeImageType;
+
+    /**
+     * CSS class applied to root container element.
+     */
+    className?: string;
+
+    /**
+     * Style applied to root container element.
+     */
+    style?: React.CSSProperties;
+
+    /**
+     * CSS class applied to small image element.
+     */
+    imageClassName?: string;
+
+    /**
+     * Style applied to small image element.
+     */
+    imageStyle?: React.CSSProperties;
+
+    /**
+     * Style applied to tinted lens.
+     */
+    lensStyle?: React.CSSProperties;
+
+    /**
+     * CSS class applied to enlarged image container element.
+     */
+    enlargedImageContainerClassName?: string;
+
+    /**
+     * Style applied to enlarged image container element.
+     */
+    enlargedImageContainerStyle?: React.CSSProperties;
+
+    /**
+     * CSS class applied to enlarged image element.
+     */
+    enlargedImageClassName?: string;
+
+    /**
+     * Style applied to enlarged image element.
+     */
+    enlargedImageStyle?: React.CSSProperties;
+
+    // Interation properties
+
+    /**
+     * Milliseconds duration of magnified image fade in/fade out.
+     *
+     * Default: 300
+     */
+    fadeDurationInMs?: number;
+
+    /**
+     * Milliseconds to delay hover trigger.
+     *
+     * Default: 250
+     */
+    hoverDelayInMs?: number;
+
+    /**
+     * Milliseconds to delay hover-off trigger.
+     *
+     * Default: 150
+     */
+    hoverOffDelayInMs?: number;
+
+    /**
+     * Activate magnification immediately on touch. May impact scrolling.
+     *
+     * Default: false
+     */
+    isActivatedOnTouch?: boolean;
+
+    /**
+     * Milliseconds to delay long-press activation (long touch).
+     *
+     * Default: 500
+     */
+    pressDuration?: number;
+
+    /**
+     * Pixels of movement allowed during long-press activation.
+     *
+     * Default: 5
+     */
+    pressMoveThreshold?: number;
+
+    // Behavioral props
+
+    /**
+     * Enlarged image placement. Can be 'beside' or 'over'.
+     *
+     * Default: beside(over for touch)
+     */
+    enlargedImagePosition?: string;
+
+    /**
+     * Specify enlarged image container dimensions as an object with width and height properties.
+     * Values may be expressed as a percentage (e.g. '150%') or a number (e.g. 200).
+     * Percentage is based on small image dimension. Number is pixels.
+     * Not applied when enlargedImagePosition is set to 'over', the default for touch input.
+     */
+    enlargedImageContainerDimensions?: { width: number | string; height: number | string };
+
+    /**
+     * Render enlarged image into an HTML element of your choosing by specifying the target element id.
+     * Requires React v16. Ignored for touch input by default - see isEnlargedImagePortalEnabledForTouch.
+     */
+    enlargedImagePortalId?: string;
+
+    /**
+     * Specify portal rendering should be honored for touch input.
+     *
+     * Default: false
+     */
+    isEnlargedImagePortalEnabledForTouch?: boolean;
+
+    /**
+     * Reference to a component class or functional component. A Default is provided.
+     */
+    hintComponent?: () => void;
+
+    /**
+     * Only show hint until the first interaction begins.
+     *
+     * Default: true
+     */
+    shouldHideHintAfterFirstActivation?: boolean;
+
+    /**
+     * Enable hint feature.
+     *
+     * Default: false
+     */
+    isHintEnabled?: boolean;
+
+    /**
+     * Hint text for mouse.
+     *
+     * Default: Hover to Zoom
+     */
+    hintTextMouse?: string;
+
+    /**
+     * Hint text for touch.
+     *
+     * Default: Long-Touch to Zoom
+     */
+    hintTextTouch?: string;
+
+    /**
+     * Specify a positive space lens in place of the default negative space lens.
+     *
+     * Default: false
+     */
+    shouldUsePositiveSpaceLens?: boolean;
+
+    /**
+     * Specify a custom lens component.
+     */
+    lensComponent?: () => void;
+}

types/react-image-magnify/react-image-magnify-tests.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import ReactImageMagnify from 'react-image-magnify';
+
+class TestImageMagnify extends React.Component {
+    render() {
+        return (
+            <ReactImageMagnify
+                smallImage={{
+                    alt: 'Wristwatch by Ted Baker London',
+                    isFluidWidth: true,
+                    src:
+                        'https://ethanselzer.github.io/react-image-magnify/static/media/wristwatch_687.8ea75ffc.jpg',
+                }}
+                largeImage={{
+                    src:
+                        'https://ethanselzer.github.io/react-image-magnify/static/media/wristwatch_687.8ea75ffc.jpg',
+                    width: 1200,
+                    height: 1800,
+                }}
+            ></ReactImageMagnify>
+        );
+    }
+}
+
+const App: React.FC = () => {
+    return (
+        <div>
+            <ReactImageMagnify
+                enlargedImageContainerDimensions={{ width: '100%', height: '100%' }}
+                smallImage={{
+                    alt: 'Testing',
+                    isFluidWidth: false,
+                    width: 300,
+                    height: 400,
+                    src: "https://ethanselzer.github.io/react-image-magnify/static/media/wristwatch_687.8ea75ffc.jpg"
+                }}
+                largeImage={{
+                    width: 1200,
+                    height: 1200,
+                    src: "https://ethanselzer.github.io/react-image-magnify/static/media/wristwatch_1200.c9182206.jpg"
+                }}
+            >
+            </ReactImageMagnify>
+        </div>
+    );
+};
+
+export default App;

types/react-image-magnify/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",
+        "react-image-magnify-tests.tsx"
+    ]
+}

types/react-image-magnify/tslint.json

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