diff --git a/types/use-resize-observer/index.d.ts b/types/use-resize-observer/index.d.ts new file mode 100644 index 0000000000..77bea77aed --- /dev/null +++ b/types/use-resize-observer/index.d.ts @@ -0,0 +1,105 @@ +// Type definitions for use-resize-observer 5.0 +// Project: https://github.com/ZeeCoder/use-resize-observer#readme +// Definitions by: PetrSvirak +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.5 +export {}; + +/*** + * Allows using a ResizeObserver to measure size of an element assigned with ref returned from the hook. + * The hook is invoked at least once before the first measurement of actual size by the observer. + * @return a ref, + * and ref.current's width (1 before the first measurement), + * and ref.current's height (1 before the first measurement). + */ +declare function useResizeObserver(): useResizeObserver.ObserverResultWithDefaultSize; + +/*** + * Allows using a ResizeObserver to measure size of an element assigned with ref returned from the hook. + * The hook is invoked at least once before the first measurement of actual size by the observer. + * @return a ref (optionally pass in your own), + * and ref.current's width (undefined before the first measurement), + * and ref.current's height (undefined before the first measurement). + */ +declare function useResizeObserver(defaults: DefaultsWithoutSize): useResizeObserver.ObserverResultWithoutDefaultSize; + +/*** + * Allows using a ResizeObserver to measure size of an element assigned with ref returned from the hook. + * The hook is invoked at least once before the first measurement of actual size by the observer. + * @return a ref (optionally pass in your own), + * and ref.current's width (defaultWidth the first measurement), + * and height (undefined before the first measurement)". + */ +declare function useResizeObserver(defaults: DefaultsWithWidthOnly): useResizeObserver.ObserverResultWithDefaultWidthOnly; + +/*** + * Allows using a ResizeObserver to measure size of an element assigned with ref returned from the hook. + * The hook is invoked at least once before the first measurement of actual size by the observer. + * @return a ref (optionally pass in your own), + * and ref.current's width (undefined the first measurement), + * and height (defaultHeight before the first measurement)". + */ + +declare function useResizeObserver(defaults: DefaultsWithHeightOnly): useResizeObserver.ObserverResultWithDefaultHeightOnly; + +/*** + * Allows using a ResizeObserver to measure size of an element assigned with ref returned from the hook. + * The hook is invoked at least once before the first measurement of actual size by the observer. + * @return a ref (optionally pass in your own), + * and ref.current's width (defaultWidth the first measurement), + * and height (defaultHeight before the first measurement)". + */ +declare function useResizeObserver(defaults: DefaultsWithSize): useResizeObserver.ObserverResultWithDefaultSize; + +import { RefObject } from 'react'; + +interface DefaultsWithoutSize { + ref?: RefObject; + useDefaults?: false; +} + +interface DefaultsWithWidthOnly { + ref?: RefObject; + useDefaults?: true; + defaultWidth: number; +} + +interface DefaultsWithHeightOnly { + ref?: RefObject; + useDefaults?: true; + defaultHeight: number; +} + +type DefaultsWithSize = DefaultsWithHeightOnly & DefaultsWithWidthOnly; + +declare namespace useResizeObserver { + type ObserverDefaults = + DefaultsWithoutSize + | DefaultsWithHeightOnly + | DefaultsWithWidthOnly + | DefaultsWithSize; + + interface ObserverResultWithoutDefaultSize { + height?: number; + ref: RefObject; + width?: number; + } + + interface ObserverResultWithDefaultHeightOnly { + height: number; + ref: RefObject; + width?: number; + } + + interface ObserverResultWithDefaultWidthOnly { + height?: number; + ref: RefObject; + width: number; + } + + type ObserverResultWithDefaultSize = + ObserverResultWithDefaultHeightOnly + & ObserverResultWithDefaultWidthOnly; +} + +export = useResizeObserver; diff --git a/types/use-resize-observer/tsconfig.json b/types/use-resize-observer/tsconfig.json new file mode 100644 index 0000000000..d0d95d09ab --- /dev/null +++ b/types/use-resize-observer/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, + "esModuleInterop": true + }, + "files": [ + "index.d.ts", + "use-resize-observer-tests.ts" + ] +} diff --git a/types/use-resize-observer/tslint.json b/types/use-resize-observer/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/use-resize-observer/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } diff --git a/types/use-resize-observer/use-resize-observer-tests.ts b/types/use-resize-observer/use-resize-observer-tests.ts new file mode 100644 index 0000000000..b8b9af5ca4 --- /dev/null +++ b/types/use-resize-observer/use-resize-observer-tests.ts @@ -0,0 +1,59 @@ +import * as React from 'react'; +import useResizeObserver, { ObserverDefaults } from 'use-resize-observer'; + +const ref: React.RefObject = undefined as any; +const defaultWidth = 42; +const defaultHeight = 1024; + +// default +useResizeObserver(); // $ExpectType ObserverResultWithDefaultSize + +// without default size +useResizeObserver({ }); // $ExpectType ObserverResultWithoutDefaultSize +useResizeObserver({ ref }); // $ExpectType ObserverResultWithoutDefaultSize +useResizeObserver({ ref, useDefaults: false }); // $ExpectType ObserverResultWithoutDefaultSize +useResizeObserver({ useDefaults: true }); // $ExpectError +useResizeObserver({ ref, useDefaults: true }); // $ExpectError + +// with width only +useResizeObserver({ defaultWidth }); // $ExpectType ObserverResultWithDefaultWidthOnly +useResizeObserver({ defaultWidth, ref }); // $ExpectType ObserverResultWithDefaultWidthOnly +useResizeObserver({ defaultWidth, ref, useDefaults: true }); // $ExpectType ObserverResultWithDefaultWidthOnly +useResizeObserver({ defaultWidth, useDefaults: false }); // $ExpectError +useResizeObserver({ defaultWidth, ref, useDefaults: false }); // $ExpectError + +// with height only +useResizeObserver({ defaultHeight }); // $ExpectType ObserverResultWithDefaultHeightOnly +useResizeObserver({ defaultHeight, ref }); // $ExpectType ObserverResultWithDefaultHeightOnly +useResizeObserver({ defaultHeight, ref, useDefaults: true }); // $ExpectType ObserverResultWithDefaultHeightOnly +useResizeObserver({ defaultHeight, useDefaults: false }); // $ExpectError +useResizeObserver({ defaultHeight, ref, useDefaults: false }); // $ExpectError + +// with default size +useResizeObserver({ defaultWidth, defaultHeight }); // $ExpectType ObserverResultWithDefaultSize +useResizeObserver({ defaultWidth, defaultHeight, ref }); // $ExpectType ObserverResultWithDefaultSize +useResizeObserver({ defaultWidth, defaultHeight, ref, useDefaults: true }); // $ExpectType ObserverResultWithDefaultSize +useResizeObserver({ defaultWidth, defaultHeight, useDefaults: false }); // $ExpectError +useResizeObserver({ defaultWidth, defaultHeight, ref, useDefaults: false }); // $ExpectError + +// ObserverDefaults +const o01: ObserverDefaults = { }; +const o02: ObserverDefaults = { ref }; +const o03: ObserverDefaults = { ref, useDefaults: false }; +const o04: ObserverDefaults = { useDefaults: true }; // $ExpectError +const o05: ObserverDefaults = { ref, useDefaults: true }; // $ExpectError +const o06: ObserverDefaults = { defaultWidth }; +const o07: ObserverDefaults = { defaultWidth, ref }; +const o08: ObserverDefaults = { defaultWidth, ref, useDefaults: true }; +const o09: ObserverDefaults = { defaultWidth, useDefaults: false }; // $ExpectError +const o10: ObserverDefaults = { defaultWidth, ref, useDefaults: false }; // $ExpectError +const o11: ObserverDefaults = { defaultHeight }; +const o12: ObserverDefaults = { defaultHeight, ref }; +const o13: ObserverDefaults = { defaultHeight, ref, useDefaults: true }; +const o14: ObserverDefaults = { defaultHeight, useDefaults: false }; // $ExpectError +const o15: ObserverDefaults = { defaultHeight, ref, useDefaults: false }; // $ExpectError +const o16: ObserverDefaults = { defaultWidth, defaultHeight }; +const o17: ObserverDefaults = { defaultWidth, defaultHeight, ref }; +const o18: ObserverDefaults = { defaultWidth, defaultHeight, ref, useDefaults: true }; +const o19: ObserverDefaults = { defaultWidth, defaultHeight, useDefaults: false }; // $ExpectError +const o20: ObserverDefaults = { defaultWidth, defaultHeight, ref, useDefaults: false }; // $ExpectError