1 | import { PureComponent, ReactNode, RefObject } from 'react';
|
2 | export interface ReactResizeDetectorDimensions {
|
3 | height?: number;
|
4 | width?: number;
|
5 | }
|
6 | interface ChildFunctionProps<ElementT extends HTMLElement> extends ReactResizeDetectorDimensions {
|
7 | targetRef?: RefObject<ElementT>;
|
8 | }
|
9 | export interface Props {
|
10 | /**
|
11 | * Function that will be invoked with observable element's width and height.
|
12 | * Default: undefined
|
13 | */
|
14 | onResize?: (width?: number, height?: number) => void;
|
15 | /**
|
16 | * Trigger update on height change.
|
17 | * Default: true
|
18 | */
|
19 | handleHeight?: boolean;
|
20 | /**
|
21 | * Trigger onResize on width change.
|
22 | * Default: true
|
23 | */
|
24 | handleWidth?: boolean;
|
25 | /**
|
26 | * Do not trigger update when a component mounts.
|
27 | * Default: false
|
28 | */
|
29 | skipOnMount?: boolean;
|
30 | /**
|
31 | * Changes the update strategy. Possible values: "throttle" and "debounce".
|
32 | * See `lodash` docs for more information https://lodash.com/docs/
|
33 | * undefined - callback will be fired for every frame.
|
34 | * Default: undefined
|
35 | */
|
36 | refreshMode?: 'throttle' | 'debounce';
|
37 | /**
|
38 | * Set the timeout/interval for `refreshMode` strategy
|
39 | * Default: undefined
|
40 | */
|
41 | refreshRate?: number;
|
42 | /**
|
43 | * Pass additional params to `refreshMode` according to lodash docs
|
44 | * Default: undefined
|
45 | */
|
46 | refreshOptions?: {
|
47 | leading?: boolean;
|
48 | trailing?: boolean;
|
49 | };
|
50 | /**
|
51 | * These options will be used as a second parameter of `resizeObserver.observe` method
|
52 | * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe
|
53 | * Default: undefined
|
54 | */
|
55 | observerOptions?: ResizeObserverOptions;
|
56 | }
|
57 | export interface ComponentsProps<ElementT extends HTMLElement> extends Props {
|
58 | /**
|
59 | * A selector of an element to observe.
|
60 | * You can use this property to attach resize-observer to any DOM element.
|
61 | * Please refer to the querySelector docs.
|
62 | * Default: undefined
|
63 | * @deprecated since version 5.0.0. It will be removed in version 7.0.0.
|
64 | * Use targetRef instead
|
65 | */
|
66 | querySelector?: string;
|
67 | /**
|
68 | * Valid only for a callback-pattern.
|
69 | * Ignored for other render types.
|
70 | * Set resize-detector's node type.
|
71 | * You can pass any valid React node: string with node's name or element.
|
72 | * Can be useful when you need to handle table's or paragraph's resizes.
|
73 | * Default: "div"
|
74 | * @deprecated since version 5.0.0. It will be removed in version 7.0.0.
|
75 | * Use targetRef instead
|
76 | */
|
77 | nodeType?: keyof JSX.IntrinsicElements;
|
78 | /**
|
79 | * A DOM element to observe.
|
80 | * By default it's a parent element in relation to the ReactResizeDetector component.
|
81 | * But you can pass any DOM element to observe.
|
82 | * This property is omitted when you pass querySelector.
|
83 | * Default: undefined
|
84 | * @deprecated since version 5.0.0. It will be removed in version 6.0.0.
|
85 | * Use targetRef instead
|
86 | */
|
87 | targetDomEl?: ElementT;
|
88 | /**
|
89 | * A React reference of the element to observe.
|
90 | * Pass a reference to the element you want to attach resize handlers to.
|
91 | * It must be an instance of React.useRef or React.createRef functions
|
92 | * Default: undefined
|
93 | */
|
94 | targetRef?: RefObject<ElementT>;
|
95 | render?: (props: ReactResizeDetectorDimensions) => ReactNode;
|
96 | children?: ReactNode | ((props: ChildFunctionProps<ElementT>) => ReactNode);
|
97 | }
|
98 | declare class ResizeDetector<ElementT extends HTMLElement = HTMLElement> extends PureComponent<ComponentsProps<ElementT>, ReactResizeDetectorDimensions> {
|
99 | skipOnMount: boolean | undefined;
|
100 | targetRef: any;
|
101 | observableElement: any;
|
102 | resizeHandler: any;
|
103 | resizeObserver: any;
|
104 | constructor(props: ComponentsProps<ElementT>);
|
105 | componentDidMount(): void;
|
106 | componentDidUpdate(): void;
|
107 | componentWillUnmount(): void;
|
108 | cancelHandler: () => void;
|
109 | attachObserver: () => void;
|
110 | getElement: () => Element | Text | null;
|
111 | createResizeHandler: ResizeObserverCallback;
|
112 | getRenderType: () => string;
|
113 | render(): any;
|
114 | }
|
115 | export default ResizeDetector;
|