Initial commit
This commit is contained in:
21
node_modules/use-callback-ref/LICENSE
generated
vendored
Normal file
21
node_modules/use-callback-ref/LICENSE
generated
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2017 Anton Korzunov
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
170
node_modules/use-callback-ref/README.md
generated
vendored
Normal file
170
node_modules/use-callback-ref/README.md
generated
vendored
Normal file
@@ -0,0 +1,170 @@
|
||||
<div align="center">
|
||||
<h1>🤙 use-callback-ref 📞</h1>
|
||||
<br/>
|
||||
The same `useRef` but it will callback: 📞 Hello! Your ref was changed!
|
||||
<br/>
|
||||
<a href="https://www.npmjs.com/package/use-callback-ref">
|
||||
<img src="https://img.shields.io/npm/v/use-callback-ref.svg?style=flat-square" />
|
||||
</a>
|
||||
<a href="https://travis-ci.org/theKashey/use-callback-ref">
|
||||
<img alt="Travis" src="https://img.shields.io/travis/theKashey/use-callback-ref/master.svg?style=flat-square">
|
||||
</a>
|
||||
<a href="https://bundlephobia.com/result?p=use-callback-ref">
|
||||
<img src="https://img.shields.io/bundlephobia/minzip/use-callback-ref.svg" alt="bundle size">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
> Keep in mind that useRef doesn't notify you when its content changes.
|
||||
> Mutating the .current property doesn't cause a re-render.
|
||||
> If you want to run some code when React attaches or detaches a ref to a DOM node,
|
||||
> you may want to use ~~a callback ref instead~~ .... **useCallbackRef** instead.
|
||||
|
||||
– [Hooks API Reference](https://reactjs.org/docs/hooks-reference.html#useref)
|
||||
|
||||
Read more about `use-callback` pattern and use cases:
|
||||
|
||||
- https://dev.to/thekashey/the-same-useref-but-it-will-callback-8bo
|
||||
|
||||
This library exposes helpers to handle any case related to `ref` _lifecycle_
|
||||
|
||||
- `useCallbackRef` - react on a ref change (replacement for `useRef`)
|
||||
- `createCallbackRef` - - low level version of `useCallbackRef`
|
||||
- `useMergeRefs` - merge multiple refs together creating a stable return ref
|
||||
- `mergeRefs` - low level version of `useMergeRefs`
|
||||
- `useTransformRef` - transform one ref to another (replacement for `useImperativeHandle`)
|
||||
- `transformRef` - low level version of `useTransformRef`
|
||||
- `useRefToCallback` - convert RefObject to an old callback-style ref
|
||||
- `refToCallback` - low level version of `useRefToCallback`
|
||||
- `assignRef` - assign value to the ref, regardless it is RefCallback or RefObject
|
||||
|
||||
All functions are tree shakable, but even together it's **less then 300b**.
|
||||
|
||||
# API
|
||||
|
||||
💡 Some commands are hooks based, and returns the same refs/functions every render.
|
||||
But some are not, to be used in classes or non-react code.
|
||||
|
||||
## useRef API
|
||||
|
||||
🤔 Use case: every time you have to react to ref change
|
||||
|
||||
API is 99% compatible with React `createRef` and `useRef`, and just adds another argument - `callback`,
|
||||
which would be called on **ref update**.
|
||||
|
||||
#### createCallbackRef - to replace React.createRef
|
||||
|
||||
- `createCallbackRef(callback)` - would call provided `callback` when ref is changed.
|
||||
|
||||
#### useCallbackRef - to replace React.useRef
|
||||
|
||||
- `useCallbackRef(initialValue, callback)` - would call provided `callback` when ref is changed.
|
||||
|
||||
> `callback` in both cases is `callback(newValue, oldValue)`. Callback would not be called if newValue and oldValue is the same.
|
||||
|
||||
```js
|
||||
import { useRef, createRef, useState } from 'react';
|
||||
import { useCallbackRef, createCallbackRef } from 'use-callback-ref';
|
||||
|
||||
const Component = () => {
|
||||
const [, forceUpdate] = useState();
|
||||
// I dont need callback when ref changes
|
||||
const ref = useRef(null);
|
||||
|
||||
// but sometimes - it could be what you need
|
||||
const anotherRef = useCallbackRef(null, () => forceUpdate());
|
||||
|
||||
useEffect(() => {
|
||||
// now it's just possible
|
||||
}, [anotherRef.current]); // react to dom node change
|
||||
};
|
||||
```
|
||||
|
||||
💡 You can use `useCallbackRef` to convert RefObject into RefCallback, creating bridges between the old and the new code
|
||||
|
||||
```js
|
||||
// some old component
|
||||
const onRefUpdate = (newRef) => {...}
|
||||
const refObject = useCallbackRef(null, onRefUpdate);
|
||||
// ...
|
||||
<SomeNewComponent ref={refObject}/>
|
||||
```
|
||||
|
||||
## assignRef
|
||||
|
||||
🤔 Use case: every time you need to assign ref manually, and you dont know the shape of the ref
|
||||
|
||||
`assignRef(ref, value)` - assigns `values` to the `ref`. `ref` could be RefObject or RefCallback.
|
||||
|
||||
```
|
||||
🚫 ref.current = value // what if it's a callback-ref?
|
||||
🚫 ref(value) // but what if it's a object ref?
|
||||
|
||||
import {assignRef} from "use-callback-ref";
|
||||
✅ assignRef(ref, value);
|
||||
```
|
||||
|
||||
## useTransformRef (to replace React.useImperativeHandle)
|
||||
|
||||
🤔 Use case: ref could be different.
|
||||
`transformRef(ref, tranformer):Ref` - return a new `ref` which would propagate all changes to the provided `ref` with applied `transform`
|
||||
|
||||
```js
|
||||
// before
|
||||
const ResizableWithRef = forwardRef((props, ref) => <Resizable {...props} ref={(i) => i && ref(i.resizable)} />);
|
||||
|
||||
// after
|
||||
|
||||
const ResizableWithRef = forwardRef((props, ref) => (
|
||||
<Resizable {...props} ref={transformRef(ref, (i) => (i ? i.resizable : null))} />
|
||||
));
|
||||
```
|
||||
|
||||
## refToCallback
|
||||
|
||||
`refToCallback(ref: RefObject): RefCallback` - for compatibility between the old and the new code.
|
||||
For the compatibility between `RefCallback` and RefObject use `useCallbackRef(undefined, callback)`
|
||||
|
||||
## useMergeRefs
|
||||
|
||||
`mergeRefs(refs: arrayOfRefs, [defaultValue]):ReactMutableRef` - merges a few refs together
|
||||
|
||||
When developing low level UI components, it is common to have to use a local ref but also support an external one using React.forwardRef. Natively, React does not offer a way to set two refs inside the ref property. This is the goal of this small utility.
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { useMergeRefs } from 'use-callback-ref';
|
||||
|
||||
const MergedComponent = React.forwardRef((props, ref) => {
|
||||
const localRef = React.useRef();
|
||||
// ...
|
||||
// both localRef and ref would be populated with the `ref` to a `div`
|
||||
return <div ref={useMergeRefs([localRef, ref])} />;
|
||||
});
|
||||
```
|
||||
|
||||
💡 - `useMergeRefs` will always give you the same return, and you don't have to worry about `[localRef, ref]` unique every render.
|
||||
|
||||
## mergeRefs
|
||||
|
||||
`mergeRefs(refs: arrayOfRefs, [defaultValue]):ReactMutableRef` - merges a few refs together
|
||||
is a non-hook based version. Will produce the new `ref` every run, causing the old one to unmount, and be _populated_ with the `null` value.
|
||||
|
||||
> mergeRefs are based on https://github.com/smooth-code/react-merge-refs, just exposes a RefObject, instead of a callback
|
||||
|
||||
`mergeRefs` are "safe" to use as a part of other hooks-based commands, but don't forget - it returns a new object every call.
|
||||
|
||||
# Similar packages:
|
||||
|
||||
- [apply-ref](https://github.com/mitchellhamilton/apply-ref) - `applyRefs` is simular to `mergeRef`, `applyRef` is similar to `assignRef`
|
||||
- [useForkRef](https://react-hooks.org/docs/use-fork-ref) - `useForkRef` is simular to `useMergeRefs`, but accepts only two arguments.
|
||||
- [react-merge-refs](https://github.com/gregberge/react-merge-refs) - `merge-refs` is simular to `useMergeRefs`, but not a hook and does not provide "stable" reference.
|
||||
|
||||
---
|
||||
|
||||
> Is it a rocket science? No, `RefObject` is no more than `{current: ref}`, and `use-callback-ref` is no more than `getter` and `setter` on that field.
|
||||
|
||||
# License
|
||||
|
||||
MIT
|
||||
15
node_modules/use-callback-ref/dist/es2015/assignRef.d.ts
generated
vendored
Normal file
15
node_modules/use-callback-ref/dist/es2015/assignRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
import { ReactRef } from './types';
|
||||
/**
|
||||
* Assigns a value for a given ref, no matter of the ref format
|
||||
* @param {RefObject} ref - a callback function or ref object
|
||||
* @param value - a new value
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#assignref
|
||||
* @example
|
||||
* const refObject = useRef();
|
||||
* const refFn = (ref) => {....}
|
||||
*
|
||||
* assignRef(refObject, "refValue");
|
||||
* assignRef(refFn, "refValue");
|
||||
*/
|
||||
export declare function assignRef<T>(ref: ReactRef<T>, value: T | null): ReactRef<T>;
|
||||
22
node_modules/use-callback-ref/dist/es2015/assignRef.js
generated
vendored
Normal file
22
node_modules/use-callback-ref/dist/es2015/assignRef.js
generated
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Assigns a value for a given ref, no matter of the ref format
|
||||
* @param {RefObject} ref - a callback function or ref object
|
||||
* @param value - a new value
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#assignref
|
||||
* @example
|
||||
* const refObject = useRef();
|
||||
* const refFn = (ref) => {....}
|
||||
*
|
||||
* assignRef(refObject, "refValue");
|
||||
* assignRef(refFn, "refValue");
|
||||
*/
|
||||
export function assignRef(ref, value) {
|
||||
if (typeof ref === 'function') {
|
||||
ref(value);
|
||||
}
|
||||
else if (ref) {
|
||||
ref.current = value;
|
||||
}
|
||||
return ref;
|
||||
}
|
||||
10
node_modules/use-callback-ref/dist/es2015/createRef.d.ts
generated
vendored
Normal file
10
node_modules/use-callback-ref/dist/es2015/createRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
import { RefObject } from 'react';
|
||||
/**
|
||||
* creates a Ref object with on change callback
|
||||
* @param callback
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see {@link useCallbackRef}
|
||||
* @see https://reactjs.org/docs/refs-and-the-dom.html#creating-refs
|
||||
*/
|
||||
export declare function createCallbackRef<T>(callback: (newValue: T | null, lastValue: T | null) => any): RefObject<T>;
|
||||
23
node_modules/use-callback-ref/dist/es2015/createRef.js
generated
vendored
Normal file
23
node_modules/use-callback-ref/dist/es2015/createRef.js
generated
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* creates a Ref object with on change callback
|
||||
* @param callback
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see {@link useCallbackRef}
|
||||
* @see https://reactjs.org/docs/refs-and-the-dom.html#creating-refs
|
||||
*/
|
||||
export function createCallbackRef(callback) {
|
||||
var current = null;
|
||||
return {
|
||||
get current() {
|
||||
return current;
|
||||
},
|
||||
set current(value) {
|
||||
var last = current;
|
||||
if (last !== value) {
|
||||
current = value;
|
||||
callback(value, last);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
8
node_modules/use-callback-ref/dist/es2015/index.d.ts
generated
vendored
Normal file
8
node_modules/use-callback-ref/dist/es2015/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export { assignRef } from './assignRef';
|
||||
export { useCallbackRef } from './useRef';
|
||||
export { createCallbackRef } from './createRef';
|
||||
export { mergeRefs } from './mergeRef';
|
||||
export { useMergeRefs } from './useMergeRef';
|
||||
export { useTransformRef } from './useTransformRef';
|
||||
export { transformRef } from './transformRef';
|
||||
export { refToCallback, useRefToCallback } from './refToCallback';
|
||||
12
node_modules/use-callback-ref/dist/es2015/index.js
generated
vendored
Normal file
12
node_modules/use-callback-ref/dist/es2015/index.js
generated
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
export { assignRef } from './assignRef';
|
||||
// callback ref
|
||||
export { useCallbackRef } from './useRef';
|
||||
export { createCallbackRef } from './createRef';
|
||||
// merge ref
|
||||
export { mergeRefs } from './mergeRef';
|
||||
export { useMergeRefs } from './useMergeRef';
|
||||
// transform ref
|
||||
export { useTransformRef } from './useTransformRef';
|
||||
export { transformRef } from './transformRef';
|
||||
// refToCallback
|
||||
export { refToCallback, useRefToCallback } from './refToCallback';
|
||||
16
node_modules/use-callback-ref/dist/es2015/mergeRef.d.ts
generated
vendored
Normal file
16
node_modules/use-callback-ref/dist/es2015/mergeRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
import { MutableRefObject } from 'react';
|
||||
import { ReactRef } from './types';
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link useMergeRefs} to be used in ReactComponents
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = mergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
export declare function mergeRefs<T>(refs: ReactRef<T>[]): MutableRefObject<T | null>;
|
||||
18
node_modules/use-callback-ref/dist/es2015/mergeRef.js
generated
vendored
Normal file
18
node_modules/use-callback-ref/dist/es2015/mergeRef.js
generated
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
import { assignRef } from './assignRef';
|
||||
import { createCallbackRef } from './createRef';
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link useMergeRefs} to be used in ReactComponents
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = mergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
export function mergeRefs(refs) {
|
||||
return createCallbackRef(function (newValue) { return refs.forEach(function (ref) { return assignRef(ref, newValue); }); });
|
||||
}
|
||||
24
node_modules/use-callback-ref/dist/es2015/refToCallback.d.ts
generated
vendored
Normal file
24
node_modules/use-callback-ref/dist/es2015/refToCallback.d.ts
generated
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
import { ReactRef, RefCallback } from './types';
|
||||
/**
|
||||
* Unmemoized version of {@link useRefToCallback}
|
||||
* @see {@link useRefToCallback}
|
||||
* @param ref
|
||||
*/
|
||||
export declare function refToCallback<T>(ref: ReactRef<T>): RefCallback<T>;
|
||||
/**
|
||||
* Transforms a given `ref` into `callback`.
|
||||
*
|
||||
* To transform `callback` into ref use {@link useCallbackRef|useCallbackRef(undefined, callback)}
|
||||
*
|
||||
* @param {ReactRef} ref
|
||||
* @returns {Function}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#reftocallback
|
||||
*
|
||||
* @example
|
||||
* const ref = useRef(0);
|
||||
* const setRef = useRefToCallback(ref);
|
||||
* 👉 setRef(10);
|
||||
* ✅ ref.current === 10
|
||||
*/
|
||||
export declare function useRefToCallback<T>(ref: ReactRef<T>): RefCallback<T>;
|
||||
48
node_modules/use-callback-ref/dist/es2015/refToCallback.js
generated
vendored
Normal file
48
node_modules/use-callback-ref/dist/es2015/refToCallback.js
generated
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Unmemoized version of {@link useRefToCallback}
|
||||
* @see {@link useRefToCallback}
|
||||
* @param ref
|
||||
*/
|
||||
export function refToCallback(ref) {
|
||||
return function (newValue) {
|
||||
if (typeof ref === 'function') {
|
||||
ref(newValue);
|
||||
}
|
||||
else if (ref) {
|
||||
ref.current = newValue;
|
||||
}
|
||||
};
|
||||
}
|
||||
var nullCallback = function () { return null; };
|
||||
// lets maintain a weak ref to, well, ref :)
|
||||
// not using `kashe` to keep this package small
|
||||
var weakMem = new WeakMap();
|
||||
var weakMemoize = function (ref) {
|
||||
var usedRef = ref || nullCallback;
|
||||
var storedRef = weakMem.get(usedRef);
|
||||
if (storedRef) {
|
||||
return storedRef;
|
||||
}
|
||||
var cb = refToCallback(usedRef);
|
||||
weakMem.set(usedRef, cb);
|
||||
return cb;
|
||||
};
|
||||
/**
|
||||
* Transforms a given `ref` into `callback`.
|
||||
*
|
||||
* To transform `callback` into ref use {@link useCallbackRef|useCallbackRef(undefined, callback)}
|
||||
*
|
||||
* @param {ReactRef} ref
|
||||
* @returns {Function}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#reftocallback
|
||||
*
|
||||
* @example
|
||||
* const ref = useRef(0);
|
||||
* const setRef = useRefToCallback(ref);
|
||||
* 👉 setRef(10);
|
||||
* ✅ ref.current === 10
|
||||
*/
|
||||
export function useRefToCallback(ref) {
|
||||
return weakMemoize(ref);
|
||||
}
|
||||
11
node_modules/use-callback-ref/dist/es2015/transformRef.d.ts
generated
vendored
Normal file
11
node_modules/use-callback-ref/dist/es2015/transformRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
import { ReactRef, RefObject } from './types';
|
||||
/**
|
||||
* Transforms one ref to another
|
||||
* @example
|
||||
* ```tsx
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={transformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
* ```
|
||||
*/
|
||||
export declare function transformRef<T, K>(ref: ReactRef<K>, transformer: (original: T | null) => K): RefObject<T>;
|
||||
14
node_modules/use-callback-ref/dist/es2015/transformRef.js
generated
vendored
Normal file
14
node_modules/use-callback-ref/dist/es2015/transformRef.js
generated
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
import { assignRef } from './assignRef';
|
||||
import { createCallbackRef } from './createRef';
|
||||
/**
|
||||
* Transforms one ref to another
|
||||
* @example
|
||||
* ```tsx
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={transformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
* ```
|
||||
*/
|
||||
export function transformRef(ref, transformer) {
|
||||
return createCallbackRef(function (value) { return assignRef(ref, transformer(value)); });
|
||||
}
|
||||
5
node_modules/use-callback-ref/dist/es2015/types.d.ts
generated
vendored
Normal file
5
node_modules/use-callback-ref/dist/es2015/types.d.ts
generated
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
import * as React from 'react';
|
||||
export declare type RefCallback<T> = (newValue: T | null) => void;
|
||||
export declare type RefObject<T> = React.MutableRefObject<T | null>;
|
||||
export declare type DefinedReactRef<T> = RefCallback<T> | RefObject<T>;
|
||||
export declare type ReactRef<T> = DefinedReactRef<T> | null;
|
||||
1
node_modules/use-callback-ref/dist/es2015/types.js
generated
vendored
Normal file
1
node_modules/use-callback-ref/dist/es2015/types.js
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
17
node_modules/use-callback-ref/dist/es2015/useMergeRef.d.ts
generated
vendored
Normal file
17
node_modules/use-callback-ref/dist/es2015/useMergeRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
import * as React from 'react';
|
||||
import { ReactRef } from './types';
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link mergeRefs} a version without buit-in memoization
|
||||
* @see https://github.com/theKashey/use-callback-ref#usemergerefs
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
export declare function useMergeRefs<T>(refs: ReactRef<T>[], defaultValue?: T): React.MutableRefObject<T | null>;
|
||||
45
node_modules/use-callback-ref/dist/es2015/useMergeRef.js
generated
vendored
Normal file
45
node_modules/use-callback-ref/dist/es2015/useMergeRef.js
generated
vendored
Normal file
@@ -0,0 +1,45 @@
|
||||
import * as React from 'react';
|
||||
import { assignRef } from './assignRef';
|
||||
import { useCallbackRef } from './useRef';
|
||||
var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
||||
var currentValues = new WeakMap();
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link mergeRefs} a version without buit-in memoization
|
||||
* @see https://github.com/theKashey/use-callback-ref#usemergerefs
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
export function useMergeRefs(refs, defaultValue) {
|
||||
var callbackRef = useCallbackRef(defaultValue || null, function (newValue) {
|
||||
return refs.forEach(function (ref) { return assignRef(ref, newValue); });
|
||||
});
|
||||
// handle refs changes - added or removed
|
||||
useIsomorphicLayoutEffect(function () {
|
||||
var oldValue = currentValues.get(callbackRef);
|
||||
if (oldValue) {
|
||||
var prevRefs_1 = new Set(oldValue);
|
||||
var nextRefs_1 = new Set(refs);
|
||||
var current_1 = callbackRef.current;
|
||||
prevRefs_1.forEach(function (ref) {
|
||||
if (!nextRefs_1.has(ref)) {
|
||||
assignRef(ref, null);
|
||||
}
|
||||
});
|
||||
nextRefs_1.forEach(function (ref) {
|
||||
if (!prevRefs_1.has(ref)) {
|
||||
assignRef(ref, current_1);
|
||||
}
|
||||
});
|
||||
}
|
||||
currentValues.set(callbackRef, refs);
|
||||
}, [refs]);
|
||||
return callbackRef;
|
||||
}
|
||||
16
node_modules/use-callback-ref/dist/es2015/useRef.d.ts
generated
vendored
Normal file
16
node_modules/use-callback-ref/dist/es2015/useRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
import { MutableRefObject } from 'react';
|
||||
/**
|
||||
* creates a MutableRef with ref change callback
|
||||
* @param initialValue - initial ref value
|
||||
* @param {Function} callback - a callback to run when value changes
|
||||
*
|
||||
* @example
|
||||
* const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
|
||||
* ref.current = 1;
|
||||
* // prints 0 -> 1
|
||||
*
|
||||
* @see https://reactjs.org/docs/hooks-reference.html#useref
|
||||
* @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
|
||||
* @returns {MutableRefObject}
|
||||
*/
|
||||
export declare function useCallbackRef<T>(initialValue: T | null, callback: (newValue: T | null, lastValue: T | null) => void): MutableRefObject<T | null>;
|
||||
39
node_modules/use-callback-ref/dist/es2015/useRef.js
generated
vendored
Normal file
39
node_modules/use-callback-ref/dist/es2015/useRef.js
generated
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
import { useState } from 'react';
|
||||
/**
|
||||
* creates a MutableRef with ref change callback
|
||||
* @param initialValue - initial ref value
|
||||
* @param {Function} callback - a callback to run when value changes
|
||||
*
|
||||
* @example
|
||||
* const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
|
||||
* ref.current = 1;
|
||||
* // prints 0 -> 1
|
||||
*
|
||||
* @see https://reactjs.org/docs/hooks-reference.html#useref
|
||||
* @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
|
||||
* @returns {MutableRefObject}
|
||||
*/
|
||||
export function useCallbackRef(initialValue, callback) {
|
||||
var ref = useState(function () { return ({
|
||||
// value
|
||||
value: initialValue,
|
||||
// last callback
|
||||
callback: callback,
|
||||
// "memoized" public interface
|
||||
facade: {
|
||||
get current() {
|
||||
return ref.value;
|
||||
},
|
||||
set current(value) {
|
||||
var last = ref.value;
|
||||
if (last !== value) {
|
||||
ref.value = value;
|
||||
ref.callback(value, last);
|
||||
}
|
||||
},
|
||||
},
|
||||
}); })[0];
|
||||
// update callback
|
||||
ref.callback = callback;
|
||||
return ref.facade;
|
||||
}
|
||||
15
node_modules/use-callback-ref/dist/es2015/useTransformRef.d.ts
generated
vendored
Normal file
15
node_modules/use-callback-ref/dist/es2015/useTransformRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
import { ReactRef, RefObject } from './types';
|
||||
/**
|
||||
* Create a _lense_ on Ref, making it possible to transform ref value
|
||||
* @param {ReactRef} ref
|
||||
* @param {Function} transformer. 👉 Ref would be __NOT updated__ on `transformer` update.
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#usetransformref-to-replace-reactuseimperativehandle
|
||||
* @example
|
||||
*
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={useTransformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
*/
|
||||
export declare function useTransformRef<T, K>(ref: ReactRef<K>, transformer: (original: T | null) => K): RefObject<T>;
|
||||
18
node_modules/use-callback-ref/dist/es2015/useTransformRef.js
generated
vendored
Normal file
18
node_modules/use-callback-ref/dist/es2015/useTransformRef.js
generated
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
import { assignRef } from './assignRef';
|
||||
import { useCallbackRef } from './useRef';
|
||||
/**
|
||||
* Create a _lense_ on Ref, making it possible to transform ref value
|
||||
* @param {ReactRef} ref
|
||||
* @param {Function} transformer. 👉 Ref would be __NOT updated__ on `transformer` update.
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#usetransformref-to-replace-reactuseimperativehandle
|
||||
* @example
|
||||
*
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={useTransformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
*/
|
||||
export function useTransformRef(ref, transformer) {
|
||||
return useCallbackRef(null, function (value) { return assignRef(ref, transformer(value)); });
|
||||
}
|
||||
15
node_modules/use-callback-ref/dist/es2019/assignRef.d.ts
generated
vendored
Normal file
15
node_modules/use-callback-ref/dist/es2019/assignRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
import { ReactRef } from './types';
|
||||
/**
|
||||
* Assigns a value for a given ref, no matter of the ref format
|
||||
* @param {RefObject} ref - a callback function or ref object
|
||||
* @param value - a new value
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#assignref
|
||||
* @example
|
||||
* const refObject = useRef();
|
||||
* const refFn = (ref) => {....}
|
||||
*
|
||||
* assignRef(refObject, "refValue");
|
||||
* assignRef(refFn, "refValue");
|
||||
*/
|
||||
export declare function assignRef<T>(ref: ReactRef<T>, value: T | null): ReactRef<T>;
|
||||
22
node_modules/use-callback-ref/dist/es2019/assignRef.js
generated
vendored
Normal file
22
node_modules/use-callback-ref/dist/es2019/assignRef.js
generated
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Assigns a value for a given ref, no matter of the ref format
|
||||
* @param {RefObject} ref - a callback function or ref object
|
||||
* @param value - a new value
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#assignref
|
||||
* @example
|
||||
* const refObject = useRef();
|
||||
* const refFn = (ref) => {....}
|
||||
*
|
||||
* assignRef(refObject, "refValue");
|
||||
* assignRef(refFn, "refValue");
|
||||
*/
|
||||
export function assignRef(ref, value) {
|
||||
if (typeof ref === 'function') {
|
||||
ref(value);
|
||||
}
|
||||
else if (ref) {
|
||||
ref.current = value;
|
||||
}
|
||||
return ref;
|
||||
}
|
||||
10
node_modules/use-callback-ref/dist/es2019/createRef.d.ts
generated
vendored
Normal file
10
node_modules/use-callback-ref/dist/es2019/createRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
import { RefObject } from 'react';
|
||||
/**
|
||||
* creates a Ref object with on change callback
|
||||
* @param callback
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see {@link useCallbackRef}
|
||||
* @see https://reactjs.org/docs/refs-and-the-dom.html#creating-refs
|
||||
*/
|
||||
export declare function createCallbackRef<T>(callback: (newValue: T | null, lastValue: T | null) => any): RefObject<T>;
|
||||
23
node_modules/use-callback-ref/dist/es2019/createRef.js
generated
vendored
Normal file
23
node_modules/use-callback-ref/dist/es2019/createRef.js
generated
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* creates a Ref object with on change callback
|
||||
* @param callback
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see {@link useCallbackRef}
|
||||
* @see https://reactjs.org/docs/refs-and-the-dom.html#creating-refs
|
||||
*/
|
||||
export function createCallbackRef(callback) {
|
||||
let current = null;
|
||||
return {
|
||||
get current() {
|
||||
return current;
|
||||
},
|
||||
set current(value) {
|
||||
const last = current;
|
||||
if (last !== value) {
|
||||
current = value;
|
||||
callback(value, last);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
8
node_modules/use-callback-ref/dist/es2019/index.d.ts
generated
vendored
Normal file
8
node_modules/use-callback-ref/dist/es2019/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export { assignRef } from './assignRef';
|
||||
export { useCallbackRef } from './useRef';
|
||||
export { createCallbackRef } from './createRef';
|
||||
export { mergeRefs } from './mergeRef';
|
||||
export { useMergeRefs } from './useMergeRef';
|
||||
export { useTransformRef } from './useTransformRef';
|
||||
export { transformRef } from './transformRef';
|
||||
export { refToCallback, useRefToCallback } from './refToCallback';
|
||||
12
node_modules/use-callback-ref/dist/es2019/index.js
generated
vendored
Normal file
12
node_modules/use-callback-ref/dist/es2019/index.js
generated
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
export { assignRef } from './assignRef';
|
||||
// callback ref
|
||||
export { useCallbackRef } from './useRef';
|
||||
export { createCallbackRef } from './createRef';
|
||||
// merge ref
|
||||
export { mergeRefs } from './mergeRef';
|
||||
export { useMergeRefs } from './useMergeRef';
|
||||
// transform ref
|
||||
export { useTransformRef } from './useTransformRef';
|
||||
export { transformRef } from './transformRef';
|
||||
// refToCallback
|
||||
export { refToCallback, useRefToCallback } from './refToCallback';
|
||||
16
node_modules/use-callback-ref/dist/es2019/mergeRef.d.ts
generated
vendored
Normal file
16
node_modules/use-callback-ref/dist/es2019/mergeRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
import { MutableRefObject } from 'react';
|
||||
import { ReactRef } from './types';
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link useMergeRefs} to be used in ReactComponents
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = mergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
export declare function mergeRefs<T>(refs: ReactRef<T>[]): MutableRefObject<T | null>;
|
||||
18
node_modules/use-callback-ref/dist/es2019/mergeRef.js
generated
vendored
Normal file
18
node_modules/use-callback-ref/dist/es2019/mergeRef.js
generated
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
import { assignRef } from './assignRef';
|
||||
import { createCallbackRef } from './createRef';
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link useMergeRefs} to be used in ReactComponents
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = mergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
export function mergeRefs(refs) {
|
||||
return createCallbackRef((newValue) => refs.forEach((ref) => assignRef(ref, newValue)));
|
||||
}
|
||||
24
node_modules/use-callback-ref/dist/es2019/refToCallback.d.ts
generated
vendored
Normal file
24
node_modules/use-callback-ref/dist/es2019/refToCallback.d.ts
generated
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
import { ReactRef, RefCallback } from './types';
|
||||
/**
|
||||
* Unmemoized version of {@link useRefToCallback}
|
||||
* @see {@link useRefToCallback}
|
||||
* @param ref
|
||||
*/
|
||||
export declare function refToCallback<T>(ref: ReactRef<T>): RefCallback<T>;
|
||||
/**
|
||||
* Transforms a given `ref` into `callback`.
|
||||
*
|
||||
* To transform `callback` into ref use {@link useCallbackRef|useCallbackRef(undefined, callback)}
|
||||
*
|
||||
* @param {ReactRef} ref
|
||||
* @returns {Function}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#reftocallback
|
||||
*
|
||||
* @example
|
||||
* const ref = useRef(0);
|
||||
* const setRef = useRefToCallback(ref);
|
||||
* 👉 setRef(10);
|
||||
* ✅ ref.current === 10
|
||||
*/
|
||||
export declare function useRefToCallback<T>(ref: ReactRef<T>): RefCallback<T>;
|
||||
48
node_modules/use-callback-ref/dist/es2019/refToCallback.js
generated
vendored
Normal file
48
node_modules/use-callback-ref/dist/es2019/refToCallback.js
generated
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Unmemoized version of {@link useRefToCallback}
|
||||
* @see {@link useRefToCallback}
|
||||
* @param ref
|
||||
*/
|
||||
export function refToCallback(ref) {
|
||||
return (newValue) => {
|
||||
if (typeof ref === 'function') {
|
||||
ref(newValue);
|
||||
}
|
||||
else if (ref) {
|
||||
ref.current = newValue;
|
||||
}
|
||||
};
|
||||
}
|
||||
const nullCallback = () => null;
|
||||
// lets maintain a weak ref to, well, ref :)
|
||||
// not using `kashe` to keep this package small
|
||||
const weakMem = new WeakMap();
|
||||
const weakMemoize = (ref) => {
|
||||
const usedRef = ref || nullCallback;
|
||||
const storedRef = weakMem.get(usedRef);
|
||||
if (storedRef) {
|
||||
return storedRef;
|
||||
}
|
||||
const cb = refToCallback(usedRef);
|
||||
weakMem.set(usedRef, cb);
|
||||
return cb;
|
||||
};
|
||||
/**
|
||||
* Transforms a given `ref` into `callback`.
|
||||
*
|
||||
* To transform `callback` into ref use {@link useCallbackRef|useCallbackRef(undefined, callback)}
|
||||
*
|
||||
* @param {ReactRef} ref
|
||||
* @returns {Function}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#reftocallback
|
||||
*
|
||||
* @example
|
||||
* const ref = useRef(0);
|
||||
* const setRef = useRefToCallback(ref);
|
||||
* 👉 setRef(10);
|
||||
* ✅ ref.current === 10
|
||||
*/
|
||||
export function useRefToCallback(ref) {
|
||||
return weakMemoize(ref);
|
||||
}
|
||||
11
node_modules/use-callback-ref/dist/es2019/transformRef.d.ts
generated
vendored
Normal file
11
node_modules/use-callback-ref/dist/es2019/transformRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
import { ReactRef, RefObject } from './types';
|
||||
/**
|
||||
* Transforms one ref to another
|
||||
* @example
|
||||
* ```tsx
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={transformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
* ```
|
||||
*/
|
||||
export declare function transformRef<T, K>(ref: ReactRef<K>, transformer: (original: T | null) => K): RefObject<T>;
|
||||
14
node_modules/use-callback-ref/dist/es2019/transformRef.js
generated
vendored
Normal file
14
node_modules/use-callback-ref/dist/es2019/transformRef.js
generated
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
import { assignRef } from './assignRef';
|
||||
import { createCallbackRef } from './createRef';
|
||||
/**
|
||||
* Transforms one ref to another
|
||||
* @example
|
||||
* ```tsx
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={transformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
* ```
|
||||
*/
|
||||
export function transformRef(ref, transformer) {
|
||||
return createCallbackRef((value) => assignRef(ref, transformer(value)));
|
||||
}
|
||||
5
node_modules/use-callback-ref/dist/es2019/types.d.ts
generated
vendored
Normal file
5
node_modules/use-callback-ref/dist/es2019/types.d.ts
generated
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
import * as React from 'react';
|
||||
export declare type RefCallback<T> = (newValue: T | null) => void;
|
||||
export declare type RefObject<T> = React.MutableRefObject<T | null>;
|
||||
export declare type DefinedReactRef<T> = RefCallback<T> | RefObject<T>;
|
||||
export declare type ReactRef<T> = DefinedReactRef<T> | null;
|
||||
1
node_modules/use-callback-ref/dist/es2019/types.js
generated
vendored
Normal file
1
node_modules/use-callback-ref/dist/es2019/types.js
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
17
node_modules/use-callback-ref/dist/es2019/useMergeRef.d.ts
generated
vendored
Normal file
17
node_modules/use-callback-ref/dist/es2019/useMergeRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
import * as React from 'react';
|
||||
import { ReactRef } from './types';
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link mergeRefs} a version without buit-in memoization
|
||||
* @see https://github.com/theKashey/use-callback-ref#usemergerefs
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
export declare function useMergeRefs<T>(refs: ReactRef<T>[], defaultValue?: T): React.MutableRefObject<T | null>;
|
||||
43
node_modules/use-callback-ref/dist/es2019/useMergeRef.js
generated
vendored
Normal file
43
node_modules/use-callback-ref/dist/es2019/useMergeRef.js
generated
vendored
Normal file
@@ -0,0 +1,43 @@
|
||||
import * as React from 'react';
|
||||
import { assignRef } from './assignRef';
|
||||
import { useCallbackRef } from './useRef';
|
||||
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
||||
const currentValues = new WeakMap();
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link mergeRefs} a version without buit-in memoization
|
||||
* @see https://github.com/theKashey/use-callback-ref#usemergerefs
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
export function useMergeRefs(refs, defaultValue) {
|
||||
const callbackRef = useCallbackRef(defaultValue || null, (newValue) => refs.forEach((ref) => assignRef(ref, newValue)));
|
||||
// handle refs changes - added or removed
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
const oldValue = currentValues.get(callbackRef);
|
||||
if (oldValue) {
|
||||
const prevRefs = new Set(oldValue);
|
||||
const nextRefs = new Set(refs);
|
||||
const current = callbackRef.current;
|
||||
prevRefs.forEach((ref) => {
|
||||
if (!nextRefs.has(ref)) {
|
||||
assignRef(ref, null);
|
||||
}
|
||||
});
|
||||
nextRefs.forEach((ref) => {
|
||||
if (!prevRefs.has(ref)) {
|
||||
assignRef(ref, current);
|
||||
}
|
||||
});
|
||||
}
|
||||
currentValues.set(callbackRef, refs);
|
||||
}, [refs]);
|
||||
return callbackRef;
|
||||
}
|
||||
16
node_modules/use-callback-ref/dist/es2019/useRef.d.ts
generated
vendored
Normal file
16
node_modules/use-callback-ref/dist/es2019/useRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
import { MutableRefObject } from 'react';
|
||||
/**
|
||||
* creates a MutableRef with ref change callback
|
||||
* @param initialValue - initial ref value
|
||||
* @param {Function} callback - a callback to run when value changes
|
||||
*
|
||||
* @example
|
||||
* const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
|
||||
* ref.current = 1;
|
||||
* // prints 0 -> 1
|
||||
*
|
||||
* @see https://reactjs.org/docs/hooks-reference.html#useref
|
||||
* @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
|
||||
* @returns {MutableRefObject}
|
||||
*/
|
||||
export declare function useCallbackRef<T>(initialValue: T | null, callback: (newValue: T | null, lastValue: T | null) => void): MutableRefObject<T | null>;
|
||||
39
node_modules/use-callback-ref/dist/es2019/useRef.js
generated
vendored
Normal file
39
node_modules/use-callback-ref/dist/es2019/useRef.js
generated
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
import { useState } from 'react';
|
||||
/**
|
||||
* creates a MutableRef with ref change callback
|
||||
* @param initialValue - initial ref value
|
||||
* @param {Function} callback - a callback to run when value changes
|
||||
*
|
||||
* @example
|
||||
* const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
|
||||
* ref.current = 1;
|
||||
* // prints 0 -> 1
|
||||
*
|
||||
* @see https://reactjs.org/docs/hooks-reference.html#useref
|
||||
* @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
|
||||
* @returns {MutableRefObject}
|
||||
*/
|
||||
export function useCallbackRef(initialValue, callback) {
|
||||
const [ref] = useState(() => ({
|
||||
// value
|
||||
value: initialValue,
|
||||
// last callback
|
||||
callback,
|
||||
// "memoized" public interface
|
||||
facade: {
|
||||
get current() {
|
||||
return ref.value;
|
||||
},
|
||||
set current(value) {
|
||||
const last = ref.value;
|
||||
if (last !== value) {
|
||||
ref.value = value;
|
||||
ref.callback(value, last);
|
||||
}
|
||||
},
|
||||
},
|
||||
}));
|
||||
// update callback
|
||||
ref.callback = callback;
|
||||
return ref.facade;
|
||||
}
|
||||
15
node_modules/use-callback-ref/dist/es2019/useTransformRef.d.ts
generated
vendored
Normal file
15
node_modules/use-callback-ref/dist/es2019/useTransformRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
import { ReactRef, RefObject } from './types';
|
||||
/**
|
||||
* Create a _lense_ on Ref, making it possible to transform ref value
|
||||
* @param {ReactRef} ref
|
||||
* @param {Function} transformer. 👉 Ref would be __NOT updated__ on `transformer` update.
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#usetransformref-to-replace-reactuseimperativehandle
|
||||
* @example
|
||||
*
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={useTransformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
*/
|
||||
export declare function useTransformRef<T, K>(ref: ReactRef<K>, transformer: (original: T | null) => K): RefObject<T>;
|
||||
18
node_modules/use-callback-ref/dist/es2019/useTransformRef.js
generated
vendored
Normal file
18
node_modules/use-callback-ref/dist/es2019/useTransformRef.js
generated
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
import { assignRef } from './assignRef';
|
||||
import { useCallbackRef } from './useRef';
|
||||
/**
|
||||
* Create a _lense_ on Ref, making it possible to transform ref value
|
||||
* @param {ReactRef} ref
|
||||
* @param {Function} transformer. 👉 Ref would be __NOT updated__ on `transformer` update.
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#usetransformref-to-replace-reactuseimperativehandle
|
||||
* @example
|
||||
*
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={useTransformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
*/
|
||||
export function useTransformRef(ref, transformer) {
|
||||
return useCallbackRef(null, (value) => assignRef(ref, transformer(value)));
|
||||
}
|
||||
15
node_modules/use-callback-ref/dist/es5/assignRef.d.ts
generated
vendored
Normal file
15
node_modules/use-callback-ref/dist/es5/assignRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
import { ReactRef } from './types';
|
||||
/**
|
||||
* Assigns a value for a given ref, no matter of the ref format
|
||||
* @param {RefObject} ref - a callback function or ref object
|
||||
* @param value - a new value
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#assignref
|
||||
* @example
|
||||
* const refObject = useRef();
|
||||
* const refFn = (ref) => {....}
|
||||
*
|
||||
* assignRef(refObject, "refValue");
|
||||
* assignRef(refFn, "refValue");
|
||||
*/
|
||||
export declare function assignRef<T>(ref: ReactRef<T>, value: T | null): ReactRef<T>;
|
||||
26
node_modules/use-callback-ref/dist/es5/assignRef.js
generated
vendored
Normal file
26
node_modules/use-callback-ref/dist/es5/assignRef.js
generated
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.assignRef = void 0;
|
||||
/**
|
||||
* Assigns a value for a given ref, no matter of the ref format
|
||||
* @param {RefObject} ref - a callback function or ref object
|
||||
* @param value - a new value
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#assignref
|
||||
* @example
|
||||
* const refObject = useRef();
|
||||
* const refFn = (ref) => {....}
|
||||
*
|
||||
* assignRef(refObject, "refValue");
|
||||
* assignRef(refFn, "refValue");
|
||||
*/
|
||||
function assignRef(ref, value) {
|
||||
if (typeof ref === 'function') {
|
||||
ref(value);
|
||||
}
|
||||
else if (ref) {
|
||||
ref.current = value;
|
||||
}
|
||||
return ref;
|
||||
}
|
||||
exports.assignRef = assignRef;
|
||||
10
node_modules/use-callback-ref/dist/es5/createRef.d.ts
generated
vendored
Normal file
10
node_modules/use-callback-ref/dist/es5/createRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
import { RefObject } from 'react';
|
||||
/**
|
||||
* creates a Ref object with on change callback
|
||||
* @param callback
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see {@link useCallbackRef}
|
||||
* @see https://reactjs.org/docs/refs-and-the-dom.html#creating-refs
|
||||
*/
|
||||
export declare function createCallbackRef<T>(callback: (newValue: T | null, lastValue: T | null) => any): RefObject<T>;
|
||||
27
node_modules/use-callback-ref/dist/es5/createRef.js
generated
vendored
Normal file
27
node_modules/use-callback-ref/dist/es5/createRef.js
generated
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.createCallbackRef = void 0;
|
||||
/**
|
||||
* creates a Ref object with on change callback
|
||||
* @param callback
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see {@link useCallbackRef}
|
||||
* @see https://reactjs.org/docs/refs-and-the-dom.html#creating-refs
|
||||
*/
|
||||
function createCallbackRef(callback) {
|
||||
var current = null;
|
||||
return {
|
||||
get current() {
|
||||
return current;
|
||||
},
|
||||
set current(value) {
|
||||
var last = current;
|
||||
if (last !== value) {
|
||||
current = value;
|
||||
callback(value, last);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
exports.createCallbackRef = createCallbackRef;
|
||||
8
node_modules/use-callback-ref/dist/es5/index.d.ts
generated
vendored
Normal file
8
node_modules/use-callback-ref/dist/es5/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export { assignRef } from './assignRef';
|
||||
export { useCallbackRef } from './useRef';
|
||||
export { createCallbackRef } from './createRef';
|
||||
export { mergeRefs } from './mergeRef';
|
||||
export { useMergeRefs } from './useMergeRef';
|
||||
export { useTransformRef } from './useTransformRef';
|
||||
export { transformRef } from './transformRef';
|
||||
export { refToCallback, useRefToCallback } from './refToCallback';
|
||||
24
node_modules/use-callback-ref/dist/es5/index.js
generated
vendored
Normal file
24
node_modules/use-callback-ref/dist/es5/index.js
generated
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.useRefToCallback = exports.refToCallback = exports.transformRef = exports.useTransformRef = exports.useMergeRefs = exports.mergeRefs = exports.createCallbackRef = exports.useCallbackRef = exports.assignRef = void 0;
|
||||
var assignRef_1 = require("./assignRef");
|
||||
Object.defineProperty(exports, "assignRef", { enumerable: true, get: function () { return assignRef_1.assignRef; } });
|
||||
// callback ref
|
||||
var useRef_1 = require("./useRef");
|
||||
Object.defineProperty(exports, "useCallbackRef", { enumerable: true, get: function () { return useRef_1.useCallbackRef; } });
|
||||
var createRef_1 = require("./createRef");
|
||||
Object.defineProperty(exports, "createCallbackRef", { enumerable: true, get: function () { return createRef_1.createCallbackRef; } });
|
||||
// merge ref
|
||||
var mergeRef_1 = require("./mergeRef");
|
||||
Object.defineProperty(exports, "mergeRefs", { enumerable: true, get: function () { return mergeRef_1.mergeRefs; } });
|
||||
var useMergeRef_1 = require("./useMergeRef");
|
||||
Object.defineProperty(exports, "useMergeRefs", { enumerable: true, get: function () { return useMergeRef_1.useMergeRefs; } });
|
||||
// transform ref
|
||||
var useTransformRef_1 = require("./useTransformRef");
|
||||
Object.defineProperty(exports, "useTransformRef", { enumerable: true, get: function () { return useTransformRef_1.useTransformRef; } });
|
||||
var transformRef_1 = require("./transformRef");
|
||||
Object.defineProperty(exports, "transformRef", { enumerable: true, get: function () { return transformRef_1.transformRef; } });
|
||||
// refToCallback
|
||||
var refToCallback_1 = require("./refToCallback");
|
||||
Object.defineProperty(exports, "refToCallback", { enumerable: true, get: function () { return refToCallback_1.refToCallback; } });
|
||||
Object.defineProperty(exports, "useRefToCallback", { enumerable: true, get: function () { return refToCallback_1.useRefToCallback; } });
|
||||
16
node_modules/use-callback-ref/dist/es5/mergeRef.d.ts
generated
vendored
Normal file
16
node_modules/use-callback-ref/dist/es5/mergeRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
import { MutableRefObject } from 'react';
|
||||
import { ReactRef } from './types';
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link useMergeRefs} to be used in ReactComponents
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = mergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
export declare function mergeRefs<T>(refs: ReactRef<T>[]): MutableRefObject<T | null>;
|
||||
22
node_modules/use-callback-ref/dist/es5/mergeRef.js
generated
vendored
Normal file
22
node_modules/use-callback-ref/dist/es5/mergeRef.js
generated
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.mergeRefs = void 0;
|
||||
var assignRef_1 = require("./assignRef");
|
||||
var createRef_1 = require("./createRef");
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link useMergeRefs} to be used in ReactComponents
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = mergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
function mergeRefs(refs) {
|
||||
return (0, createRef_1.createCallbackRef)(function (newValue) { return refs.forEach(function (ref) { return (0, assignRef_1.assignRef)(ref, newValue); }); });
|
||||
}
|
||||
exports.mergeRefs = mergeRefs;
|
||||
24
node_modules/use-callback-ref/dist/es5/refToCallback.d.ts
generated
vendored
Normal file
24
node_modules/use-callback-ref/dist/es5/refToCallback.d.ts
generated
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
import { ReactRef, RefCallback } from './types';
|
||||
/**
|
||||
* Unmemoized version of {@link useRefToCallback}
|
||||
* @see {@link useRefToCallback}
|
||||
* @param ref
|
||||
*/
|
||||
export declare function refToCallback<T>(ref: ReactRef<T>): RefCallback<T>;
|
||||
/**
|
||||
* Transforms a given `ref` into `callback`.
|
||||
*
|
||||
* To transform `callback` into ref use {@link useCallbackRef|useCallbackRef(undefined, callback)}
|
||||
*
|
||||
* @param {ReactRef} ref
|
||||
* @returns {Function}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#reftocallback
|
||||
*
|
||||
* @example
|
||||
* const ref = useRef(0);
|
||||
* const setRef = useRefToCallback(ref);
|
||||
* 👉 setRef(10);
|
||||
* ✅ ref.current === 10
|
||||
*/
|
||||
export declare function useRefToCallback<T>(ref: ReactRef<T>): RefCallback<T>;
|
||||
53
node_modules/use-callback-ref/dist/es5/refToCallback.js
generated
vendored
Normal file
53
node_modules/use-callback-ref/dist/es5/refToCallback.js
generated
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.useRefToCallback = exports.refToCallback = void 0;
|
||||
/**
|
||||
* Unmemoized version of {@link useRefToCallback}
|
||||
* @see {@link useRefToCallback}
|
||||
* @param ref
|
||||
*/
|
||||
function refToCallback(ref) {
|
||||
return function (newValue) {
|
||||
if (typeof ref === 'function') {
|
||||
ref(newValue);
|
||||
}
|
||||
else if (ref) {
|
||||
ref.current = newValue;
|
||||
}
|
||||
};
|
||||
}
|
||||
exports.refToCallback = refToCallback;
|
||||
var nullCallback = function () { return null; };
|
||||
// lets maintain a weak ref to, well, ref :)
|
||||
// not using `kashe` to keep this package small
|
||||
var weakMem = new WeakMap();
|
||||
var weakMemoize = function (ref) {
|
||||
var usedRef = ref || nullCallback;
|
||||
var storedRef = weakMem.get(usedRef);
|
||||
if (storedRef) {
|
||||
return storedRef;
|
||||
}
|
||||
var cb = refToCallback(usedRef);
|
||||
weakMem.set(usedRef, cb);
|
||||
return cb;
|
||||
};
|
||||
/**
|
||||
* Transforms a given `ref` into `callback`.
|
||||
*
|
||||
* To transform `callback` into ref use {@link useCallbackRef|useCallbackRef(undefined, callback)}
|
||||
*
|
||||
* @param {ReactRef} ref
|
||||
* @returns {Function}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#reftocallback
|
||||
*
|
||||
* @example
|
||||
* const ref = useRef(0);
|
||||
* const setRef = useRefToCallback(ref);
|
||||
* 👉 setRef(10);
|
||||
* ✅ ref.current === 10
|
||||
*/
|
||||
function useRefToCallback(ref) {
|
||||
return weakMemoize(ref);
|
||||
}
|
||||
exports.useRefToCallback = useRefToCallback;
|
||||
11
node_modules/use-callback-ref/dist/es5/transformRef.d.ts
generated
vendored
Normal file
11
node_modules/use-callback-ref/dist/es5/transformRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
import { ReactRef, RefObject } from './types';
|
||||
/**
|
||||
* Transforms one ref to another
|
||||
* @example
|
||||
* ```tsx
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={transformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
* ```
|
||||
*/
|
||||
export declare function transformRef<T, K>(ref: ReactRef<K>, transformer: (original: T | null) => K): RefObject<T>;
|
||||
18
node_modules/use-callback-ref/dist/es5/transformRef.js
generated
vendored
Normal file
18
node_modules/use-callback-ref/dist/es5/transformRef.js
generated
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.transformRef = void 0;
|
||||
var assignRef_1 = require("./assignRef");
|
||||
var createRef_1 = require("./createRef");
|
||||
/**
|
||||
* Transforms one ref to another
|
||||
* @example
|
||||
* ```tsx
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={transformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
* ```
|
||||
*/
|
||||
function transformRef(ref, transformer) {
|
||||
return (0, createRef_1.createCallbackRef)(function (value) { return (0, assignRef_1.assignRef)(ref, transformer(value)); });
|
||||
}
|
||||
exports.transformRef = transformRef;
|
||||
5
node_modules/use-callback-ref/dist/es5/types.d.ts
generated
vendored
Normal file
5
node_modules/use-callback-ref/dist/es5/types.d.ts
generated
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
import * as React from 'react';
|
||||
export declare type RefCallback<T> = (newValue: T | null) => void;
|
||||
export declare type RefObject<T> = React.MutableRefObject<T | null>;
|
||||
export declare type DefinedReactRef<T> = RefCallback<T> | RefObject<T>;
|
||||
export declare type ReactRef<T> = DefinedReactRef<T> | null;
|
||||
2
node_modules/use-callback-ref/dist/es5/types.js
generated
vendored
Normal file
2
node_modules/use-callback-ref/dist/es5/types.js
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
17
node_modules/use-callback-ref/dist/es5/useMergeRef.d.ts
generated
vendored
Normal file
17
node_modules/use-callback-ref/dist/es5/useMergeRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
import * as React from 'react';
|
||||
import { ReactRef } from './types';
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link mergeRefs} a version without buit-in memoization
|
||||
* @see https://github.com/theKashey/use-callback-ref#usemergerefs
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
export declare function useMergeRefs<T>(refs: ReactRef<T>[], defaultValue?: T): React.MutableRefObject<T | null>;
|
||||
50
node_modules/use-callback-ref/dist/es5/useMergeRef.js
generated
vendored
Normal file
50
node_modules/use-callback-ref/dist/es5/useMergeRef.js
generated
vendored
Normal file
@@ -0,0 +1,50 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.useMergeRefs = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var assignRef_1 = require("./assignRef");
|
||||
var useRef_1 = require("./useRef");
|
||||
var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
||||
var currentValues = new WeakMap();
|
||||
/**
|
||||
* Merges two or more refs together providing a single interface to set their value
|
||||
* @param {RefObject|Ref} refs
|
||||
* @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
|
||||
*
|
||||
* @see {@link mergeRefs} a version without buit-in memoization
|
||||
* @see https://github.com/theKashey/use-callback-ref#usemergerefs
|
||||
* @example
|
||||
* const Component = React.forwardRef((props, ref) => {
|
||||
* const ownRef = useRef();
|
||||
* const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
|
||||
* return <div ref={domRef}>...</div>
|
||||
* }
|
||||
*/
|
||||
function useMergeRefs(refs, defaultValue) {
|
||||
var callbackRef = (0, useRef_1.useCallbackRef)(defaultValue || null, function (newValue) {
|
||||
return refs.forEach(function (ref) { return (0, assignRef_1.assignRef)(ref, newValue); });
|
||||
});
|
||||
// handle refs changes - added or removed
|
||||
useIsomorphicLayoutEffect(function () {
|
||||
var oldValue = currentValues.get(callbackRef);
|
||||
if (oldValue) {
|
||||
var prevRefs_1 = new Set(oldValue);
|
||||
var nextRefs_1 = new Set(refs);
|
||||
var current_1 = callbackRef.current;
|
||||
prevRefs_1.forEach(function (ref) {
|
||||
if (!nextRefs_1.has(ref)) {
|
||||
(0, assignRef_1.assignRef)(ref, null);
|
||||
}
|
||||
});
|
||||
nextRefs_1.forEach(function (ref) {
|
||||
if (!prevRefs_1.has(ref)) {
|
||||
(0, assignRef_1.assignRef)(ref, current_1);
|
||||
}
|
||||
});
|
||||
}
|
||||
currentValues.set(callbackRef, refs);
|
||||
}, [refs]);
|
||||
return callbackRef;
|
||||
}
|
||||
exports.useMergeRefs = useMergeRefs;
|
||||
16
node_modules/use-callback-ref/dist/es5/useRef.d.ts
generated
vendored
Normal file
16
node_modules/use-callback-ref/dist/es5/useRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
import { MutableRefObject } from 'react';
|
||||
/**
|
||||
* creates a MutableRef with ref change callback
|
||||
* @param initialValue - initial ref value
|
||||
* @param {Function} callback - a callback to run when value changes
|
||||
*
|
||||
* @example
|
||||
* const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
|
||||
* ref.current = 1;
|
||||
* // prints 0 -> 1
|
||||
*
|
||||
* @see https://reactjs.org/docs/hooks-reference.html#useref
|
||||
* @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
|
||||
* @returns {MutableRefObject}
|
||||
*/
|
||||
export declare function useCallbackRef<T>(initialValue: T | null, callback: (newValue: T | null, lastValue: T | null) => void): MutableRefObject<T | null>;
|
||||
43
node_modules/use-callback-ref/dist/es5/useRef.js
generated
vendored
Normal file
43
node_modules/use-callback-ref/dist/es5/useRef.js
generated
vendored
Normal file
@@ -0,0 +1,43 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.useCallbackRef = void 0;
|
||||
var react_1 = require("react");
|
||||
/**
|
||||
* creates a MutableRef with ref change callback
|
||||
* @param initialValue - initial ref value
|
||||
* @param {Function} callback - a callback to run when value changes
|
||||
*
|
||||
* @example
|
||||
* const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
|
||||
* ref.current = 1;
|
||||
* // prints 0 -> 1
|
||||
*
|
||||
* @see https://reactjs.org/docs/hooks-reference.html#useref
|
||||
* @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
|
||||
* @returns {MutableRefObject}
|
||||
*/
|
||||
function useCallbackRef(initialValue, callback) {
|
||||
var ref = (0, react_1.useState)(function () { return ({
|
||||
// value
|
||||
value: initialValue,
|
||||
// last callback
|
||||
callback: callback,
|
||||
// "memoized" public interface
|
||||
facade: {
|
||||
get current() {
|
||||
return ref.value;
|
||||
},
|
||||
set current(value) {
|
||||
var last = ref.value;
|
||||
if (last !== value) {
|
||||
ref.value = value;
|
||||
ref.callback(value, last);
|
||||
}
|
||||
},
|
||||
},
|
||||
}); })[0];
|
||||
// update callback
|
||||
ref.callback = callback;
|
||||
return ref.facade;
|
||||
}
|
||||
exports.useCallbackRef = useCallbackRef;
|
||||
15
node_modules/use-callback-ref/dist/es5/useTransformRef.d.ts
generated
vendored
Normal file
15
node_modules/use-callback-ref/dist/es5/useTransformRef.d.ts
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
import { ReactRef, RefObject } from './types';
|
||||
/**
|
||||
* Create a _lense_ on Ref, making it possible to transform ref value
|
||||
* @param {ReactRef} ref
|
||||
* @param {Function} transformer. 👉 Ref would be __NOT updated__ on `transformer` update.
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#usetransformref-to-replace-reactuseimperativehandle
|
||||
* @example
|
||||
*
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={useTransformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
*/
|
||||
export declare function useTransformRef<T, K>(ref: ReactRef<K>, transformer: (original: T | null) => K): RefObject<T>;
|
||||
22
node_modules/use-callback-ref/dist/es5/useTransformRef.js
generated
vendored
Normal file
22
node_modules/use-callback-ref/dist/es5/useTransformRef.js
generated
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.useTransformRef = void 0;
|
||||
var assignRef_1 = require("./assignRef");
|
||||
var useRef_1 = require("./useRef");
|
||||
/**
|
||||
* Create a _lense_ on Ref, making it possible to transform ref value
|
||||
* @param {ReactRef} ref
|
||||
* @param {Function} transformer. 👉 Ref would be __NOT updated__ on `transformer` update.
|
||||
* @returns {RefObject}
|
||||
*
|
||||
* @see https://github.com/theKashey/use-callback-ref#usetransformref-to-replace-reactuseimperativehandle
|
||||
* @example
|
||||
*
|
||||
* const ResizableWithRef = forwardRef((props, ref) =>
|
||||
* <Resizable {...props} ref={useTransformRef(ref, i => i ? i.resizable : null)}/>
|
||||
* );
|
||||
*/
|
||||
function useTransformRef(ref, transformer) {
|
||||
return (0, useRef_1.useCallbackRef)(null, function (value) { return (0, assignRef_1.assignRef)(ref, transformer(value)); });
|
||||
}
|
||||
exports.useTransformRef = useTransformRef;
|
||||
120
node_modules/use-callback-ref/package.json
generated
vendored
Normal file
120
node_modules/use-callback-ref/package.json
generated
vendored
Normal file
@@ -0,0 +1,120 @@
|
||||
{
|
||||
"_from": "use-callback-ref@^1.3.3",
|
||||
"_id": "use-callback-ref@1.3.3",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
|
||||
"_location": "/use-callback-ref",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "range",
|
||||
"registry": true,
|
||||
"raw": "use-callback-ref@^1.3.3",
|
||||
"name": "use-callback-ref",
|
||||
"escapedName": "use-callback-ref",
|
||||
"rawSpec": "^1.3.3",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "^1.3.3"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/react-remove-scroll"
|
||||
],
|
||||
"_resolved": "https://registry.npmmirror.com/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
|
||||
"_shasum": "98d9fab067075841c5b2c6852090d5d0feabe2bf",
|
||||
"_spec": "use-callback-ref@^1.3.3",
|
||||
"_where": "/Users/hongbin9/www/botgroup.chat/node_modules/react-remove-scroll",
|
||||
"author": {
|
||||
"name": "theKashey",
|
||||
"email": "thekashey@gmail.com"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/theKashey/use-callback-ref/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "The same useRef, but with callback",
|
||||
"devDependencies": {
|
||||
"@size-limit/preset-small-lib": "^11.0.2",
|
||||
"@testing-library/jest-dom": "^6.1.5",
|
||||
"@testing-library/react": "^14.1.2",
|
||||
"@theuiteam/lib-builder": "^0.3.0",
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"size-limit": "^11.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"homepage": "https://github.com/theKashey/use-callback-ref#readme",
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"jsnext:main": "dist/es2015/index.js",
|
||||
"keywords": [
|
||||
"react",
|
||||
"hook",
|
||||
"useRef",
|
||||
"createRef",
|
||||
"merge refs"
|
||||
],
|
||||
"license": "MIT",
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx}": [
|
||||
"prettier --write",
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{js,css,json,md}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"main": "dist/es5/index.js",
|
||||
"module": "dist/es2015/index.js",
|
||||
"module:es2019": "dist/es2019/index.js",
|
||||
"name": "use-callback-ref",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 120,
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"singleQuote": true
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/theKashey/use-callback-ref.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "lib-builder build && yarn size:report",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
|
||||
"changelog:rewrite": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
|
||||
"dev": "lib-builder dev",
|
||||
"format": "lib-builder format",
|
||||
"lint": "lib-builder lint",
|
||||
"prepublish": "yarn build && yarn changelog",
|
||||
"release": "yarn build && yarn test",
|
||||
"size": "npx size-limit",
|
||||
"size:report": "npx size-limit --json > .size.json",
|
||||
"test": "jest",
|
||||
"test:ci": "jest --runInBand --coverage",
|
||||
"update": "lib-builder update"
|
||||
},
|
||||
"sideEffects": false,
|
||||
"types": "dist/es5/index.d.ts",
|
||||
"version": "1.3.3"
|
||||
}
|
||||
Reference in New Issue
Block a user