Skip to content

Commit f9b468e

Browse files
authored
feat: extract DOM node check and retrieval to separate function (#539)
* feat: extract DOM node check and retrieval to separate function * chore: rename * typo * chore: rename
1 parent 70da09e commit f9b468e

File tree

2 files changed

+47
-8
lines changed

2 files changed

+47
-8
lines changed

src/Dom/findDOMNode.ts

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,34 @@ export function isDOM(node: any): node is HTMLElement | SVGElement {
77
return node instanceof HTMLElement || node instanceof SVGElement;
88
}
99

10+
/**
11+
* Retrieves a DOM node via a ref, and does not invoke `findDOMNode`.
12+
*/
13+
export function getDOM(node: any): node is HTMLElement | SVGElement {
14+
if (node && typeof node === 'object' && isDOM(node.nativeElement)) {
15+
return node.nativeElement;
16+
}
17+
18+
if (isDOM(node)) {
19+
return node as any;
20+
}
21+
22+
return null;
23+
}
24+
1025
/**
1126
* Return if a node is a DOM node. Else will return by `findDOMNode`
1227
*/
1328
export default function findDOMNode<T = Element | Text>(
1429
node: React.ReactInstance | HTMLElement | SVGElement | { nativeElement: T },
1530
): T {
16-
if (node && typeof node === 'object' && isDOM((node as any).nativeElement)) {
17-
return ((node as any).nativeElement as unknown) as T;
18-
}
19-
20-
if (isDOM(node)) {
21-
return (node as unknown) as T;
31+
const domNode = getDOM(node);
32+
if (domNode) {
33+
return domNode as T;
2234
}
2335

2436
if (node instanceof React.Component) {
25-
return (ReactDOM.findDOMNode(node) as unknown) as T;
37+
return ReactDOM.findDOMNode(node) as unknown as T;
2638
}
2739

2840
return null;

tests/findDOMNode.test.tsx

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { render } from '@testing-library/react';
22
import * as React from 'react';
3-
import findDOMNode, { isDOM } from '../src/Dom/findDOMNode';
3+
import findDOMNode, { getDOM, isDOM } from '../src/Dom/findDOMNode';
44
import proxyObject from '../src/proxyObject';
55

66
describe('findDOMNode', () => {
@@ -129,4 +129,31 @@ describe('findDOMNode', () => {
129129
container.querySelector('span'),
130130
);
131131
});
132+
133+
describe('getDOM', () => {
134+
it('should return the DOM node when input is a DOM node', () => {
135+
const node = document.createElement('div');
136+
const result = getDOM(node);
137+
138+
expect(result).toBe(node);
139+
});
140+
141+
it('should return the nativeElement when input is an object with a DOM node as nativeElement', () => {
142+
const nativeElement = document.createElement('div');
143+
const node = { nativeElement };
144+
145+
const result = getDOM(node);
146+
147+
expect(result).toBe(nativeElement);
148+
});
149+
150+
it.each([null, void 0, { foo: 'bar' }, 'string'])(
151+
'should return null when input is not a DOM node',
152+
node => {
153+
const result = getDOM(node);
154+
155+
expect(result).toBeNull();
156+
},
157+
);
158+
});
132159
});

0 commit comments

Comments
 (0)