diff --git a/types/react-lazy-load-image-component/index.d.ts b/types/react-lazy-load-image-component/index.d.ts new file mode 100644 index 0000000000..4de3744729 --- /dev/null +++ b/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 +// Diego Chavez +// Truong Hoang Dung +// 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 . */ + placeholder?: ReactElement | null; + /** See trackWindowScroll(). */ + scrollPosition?: ScrollPosition; +} + +export interface LazyLoadImageProps extends CommonProps, Omit, '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; + +export interface LazyComponentProps { + scrollPosition: ScrollPosition; +} + +export function trackWindowScroll

( + BaseComponent: ComponentType

, +): ComponentType>; + +export interface LazyLoadComponentProps extends CommonProps { + children: ReactNode; + style?: CSSProperties; +} + +export const LazyLoadComponent: FunctionComponent; diff --git a/types/react-lazy-load-image-component/package.json b/types/react-lazy-load-image-component/package.json new file mode 100644 index 0000000000..4d9ec4a338 --- /dev/null +++ b/types/react-lazy-load-image-component/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "csstype": "^2.2.0" + } +} diff --git a/types/react-lazy-load-image-component/react-lazy-load-image-component-tests.tsx b/types/react-lazy-load-image-component/react-lazy-load-image-component-tests.tsx new file mode 100644 index 0000000000..8abe440f76 --- /dev/null +++ b/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}) => ( +

+ attributes as props + width={image.width} /> + {image.caption} + +
+); + +const ImageWithCallbacks = () => ( + {}} + afterLoad={() => {}} + placeholder={} + /> +); + +{ + // 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 = ( + + ); +} + +{ + const el = ( + +

Lorem Ipsum

+
+ ); + + const elWithStyle = ( + +

Lorem Ipsum

+
+ ); +} + +{ + // From README.md + + const Gallery = ({ images, scrollPosition }: {images: ImageProps[]; scrollPosition: ScrollPosition}) => ( +
+ {images.map((image) => + + )} +
+ ); + // 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. + ; + // $ExpectError + ; +} diff --git a/types/react-lazy-load-image-component/tsconfig.json b/types/react-lazy-load-image-component/tsconfig.json new file mode 100644 index 0000000000..5ffa6e760c --- /dev/null +++ b/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" + ] +} diff --git a/types/react-lazy-load-image-component/tslint.json b/types/react-lazy-load-image-component/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-lazy-load-image-component/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }