ant-design/components/_util/hooks/useProxyImperativeHandle.ts

49 lines
1.3 KiB
TypeScript
Raw Normal View History

// Proxy the dom ref with `{ nativeElement, otherFn }` type
// ref: https://github.com/ant-design/ant-design/discussions/45242
import { useImperativeHandle } from 'react';
import type { Ref } from 'react';
function fillProxy(
element: HTMLElement & { _antProxy?: Record<string, any> },
handler: Record<string, any>,
) {
element._antProxy = element._antProxy || {};
Object.keys(handler).forEach((key) => {
if (!(key in element._antProxy!)) {
const ori = (element as any)[key];
element._antProxy![key] = ori;
(element as any)[key] = handler[key];
}
});
return element;
}
export default function useProxyImperativeHandle<
NativeELementType extends HTMLElement,
ReturnRefType extends { nativeElement: NativeELementType },
>(ref: Ref<any> | undefined, init: () => ReturnRefType) {
return useImperativeHandle(ref, () => {
const refObj = init();
const { nativeElement } = refObj;
if (typeof Proxy !== 'undefined') {
return new Proxy(nativeElement, {
get(obj: any, prop: any) {
if ((refObj as any)[prop]) {
return (refObj as any)[prop];
}
return Reflect.get(obj, prop);
},
});
}
// Fallback of IE
return fillProxy(nativeElement, refObj);
});
}