Add typings for react-lazy-load-image-component (#40565)

* Add typings for react-lazy-load-image-component

* Add a package.json

* require TypeScript 3.5

* fix lint issue

* One more author

types/react-lazy-load-image-component/index.d.ts

@@ -0,0 +1,71 @@
+// Type definitions for react-lazy-load-image-component 1.3
+// Project: https://github.com/Aljullu/react-lazy-load-image-component#readme
+// Definitions by: Dan Vanderkam <https://github.com/danvk>
+//                 Diego Chavez <https://github.com/diegochavez>
+//                 Truong Hoang Dung <https://github.com/revskill10>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.5
+
+import {
+    CSSProperties,
+    ComponentType,
+    FunctionComponent,
+    ImgHTMLAttributes,
+    ReactElement,
+    ReactNode,
+} from 'react';
+
+export type DelayMethod = 'debounce' | 'throttle';
+export type Effect = 'blur' | 'black-and-white' | 'opacity';
+
+export interface ScrollPosition {
+    x: number;
+    y: number;
+}
+
+export interface CommonProps {
+    /** Function called after the image has been completely loaded. */
+    afterLoad?: () => any;
+    /** Function called right before the placeholder is replaced with the image element. */
+    beforeLoad?: () => any;
+    /* Method from lodash to use to delay the scroll/resize events. */
+    delayMethod?: DelayMethod;
+    /** Time in ms sent to the delayMethod. */
+    delayTime?: number;
+    /** Threshold in pixels. So the image starts loading before it appears in the viewport. */
+    threshold?: number;
+    /** Whether to use browser's IntersectionObserver when available. */
+    useIntersectionObserver?: boolean;
+    /** Whether the image must be visible from the beginning. */
+    visibleByDefault?: boolean;
+    /** React element to use as a placeholder. Default is <span>. */
+    placeholder?: ReactElement | null;
+    /** See trackWindowScroll(). */
+    scrollPosition?: ScrollPosition;
+}
+
+export interface LazyLoadImageProps extends CommonProps, Omit<ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onload'>  {
+    /** Name of the effect to use. Requires importing CSS, see README.md. */
+    effect?: Effect;
+    /** Image src to display while the image is not visible or loaded. */
+    placeholderSrc?: string;
+    /** In some occasions (for example, when using a placeholderSrc) a wrapper span tag is rendered. This prop allows setting a class to that element. */
+    wrapperClassName?: string;
+}
+
+export const LazyLoadImage: FunctionComponent<LazyLoadImageProps>;
+
+export interface LazyComponentProps {
+    scrollPosition: ScrollPosition;
+}
+
+export function trackWindowScroll<P extends LazyComponentProps>(
+    BaseComponent: ComponentType<P>,
+): ComponentType<Omit<P, 'scrollPosition'>>;
+
+export interface LazyLoadComponentProps extends CommonProps {
+    children: ReactNode;
+    style?: CSSProperties;
+}
+
+export const LazyLoadComponent: FunctionComponent<LazyLoadComponentProps>;

types/react-lazy-load-image-component/package.json

@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+        "csstype": "^2.2.0"
+    }
+}

types/react-lazy-load-image-component/react-lazy-load-image-component-tests.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { LazyLoadComponent, LazyLoadImage, LazyLoadImageProps, trackWindowScroll, ScrollPosition } from 'react-lazy-load-image-component';
+
+interface ImageProps {
+  key: string;
+  src: string;
+  alt: string;
+  height: number;
+  width: number;
+  caption: string;
+}
+
+// From https://github.com/Aljullu/react-lazy-load-image-component#lazyloadimage-usage
+const MyImage = ({ image }: {image: ImageProps}) => (
+  <div>
+    <LazyLoadImage
+      alt={image.alt}
+      height={image.height}
+      src={image.src} // use normal <img> attributes as props
+      width={image.width} />
+    <span>{image.caption}</span>
+    <img />
+  </div>
+);
+
+const ImageWithCallbacks = () => (
+  <LazyLoadImage
+    src="foo.png"
+    title="title"
+    delayMethod="debounce"
+    delayTime={500}
+    threshold={200}
+    beforeLoad={() => {}}
+    afterLoad={() => {}}
+    placeholder={<span/>}
+  />
+);
+
+{
+  // From src/components/LazyLoadImage.spec.js
+  const props: LazyLoadImageProps = {
+    beforeLoad: () => null,
+    delayMethod: 'debounce',
+    delayTime: 600,
+    placeholder: null,
+    scrollPosition: { x: 0, y: 0 },
+    style: {},
+    src: 'http://localhost/lorem-ipsum.jpg',
+    visibleByDefault: false,
+  };
+  const lazyLoadImage = (
+    <LazyLoadImage
+      beforeLoad={props.beforeLoad}
+      delayMethod={props.delayMethod}
+      delayTime={props.delayTime}
+      placeholder={props.placeholder}
+      scrollPosition={props.scrollPosition}
+      src={props.src}
+      style={props.style}
+      visibleByDefault={props.visibleByDefault} />
+  );
+}
+
+{
+  const el = (
+    <LazyLoadComponent>
+      <p style={{}}>Lorem Ipsum</p>
+    </LazyLoadComponent>
+  );
+
+  const elWithStyle = (
+    <LazyLoadComponent
+      style={{ marginTop: 100000 }}
+    >
+      <p>Lorem Ipsum</p>
+    </LazyLoadComponent>
+  );
+}
+
+{
+  // From README.md
+
+  const Gallery = ({ images, scrollPosition }: {images: ImageProps[]; scrollPosition: ScrollPosition}) => (
+    <div>
+      {images.map((image) =>
+        <LazyLoadImage
+          key={image.key}
+          alt={image.alt}
+          height={image.height}
+          // Make sure to pass down the scrollPosition,
+          // this will be used by the component to know
+          // whether it must track the scroll position or not
+          scrollPosition={scrollPosition}
+          src={image.src}
+          width={image.width} />
+      )}
+    </div>
+  );
+  // Wrap Gallery with trackWindowScroll HOC so it receives
+  // a scrollPosition prop to pass down to the images
+  const WrappedGallery = trackWindowScroll(Gallery);
+
+  // Omitting scrollPosition is OK but omitting images is not.
+  <WrappedGallery images={[]} />;
+  // $ExpectError
+  <WrappedGallery />;
+}

types/react-lazy-load-image-component/tsconfig.json

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

types/react-lazy-load-image-component/tslint.json

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