UNPKG

3.01 kBPlain TextView Raw
1/*
2 * Copyright 2020 Palantir Technologies, Inc. All rights reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17export type IRef<T extends HTMLElement = HTMLElement> = IRefObject<T> | IRefCallback<T>;
18
19// compatible with React.Ref type in @types/react@^16
20export interface IRefObject<T extends HTMLElement = HTMLElement> {
21 current: T | null;
22}
23
24export function isRefObject<T extends HTMLElement>(value: IRef<T> | undefined | null): value is IRefObject<T> {
25 return value != null && typeof value !== "function";
26}
27
28export type IRefCallback<T extends HTMLElement = HTMLElement> = (ref: T | null) => any;
29
30export function isRefCallback<T extends HTMLElement>(value: IRef<T> | undefined | null): value is IRefCallback<T> {
31 return typeof value === "function";
32}
33
34/**
35 * Assign the given ref to a target, either a React ref object or a callback which takes the ref as its first argument.
36 */
37export function setRef<T extends HTMLElement>(refTarget: IRef<T> | undefined | null, ref: T | null): void {
38 if (isRefObject<T>(refTarget)) {
39 refTarget.current = ref;
40 } else if (isRefCallback(refTarget)) {
41 refTarget(ref);
42 }
43}
44
45/** @deprecated use mergeRefs() instead */
46export function combineRefs<T extends HTMLElement>(ref1: IRefCallback<T>, ref2: IRefCallback<T>) {
47 return mergeRefs(ref1, ref2);
48}
49
50/**
51 * Utility for merging refs into one singular callback ref.
52 * If using in a functional component, would recomend using `useMemo` to preserve function identity.
53 */
54export function mergeRefs<T extends HTMLElement>(...refs: Array<IRef<T> | null>): IRefCallback<T> {
55 return value => {
56 refs.forEach(ref => {
57 setRef(ref, value);
58 });
59 };
60}
61
62export function getRef<T extends HTMLElement>(ref: T | IRefObject<T> | null): T | null {
63 if (ref === null) {
64 return null;
65 }
66
67 return (ref as IRefObject<T>).current ?? (ref as T);
68}
69
70/**
71 * Creates a ref handler which assigns the ref returned by React for a mounted component to a field on the target object.
72 * The target object is usually a component class.
73 *
74 * If provided, it will also update the given `refProp` with the value of the ref.
75 */
76export function refHandler<T extends HTMLElement, K extends string>(
77 refTargetParent: { [k in K]: T | null },
78 refTargetKey: K,
79 refProp?: IRef<T> | undefined | null,
80): IRefCallback<T> {
81 return (ref: T | null) => {
82 refTargetParent[refTargetKey] = ref;
83 setRef(refProp, ref);
84 };
85}