use-transform.mjs
2.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
"use client";
import { transform } from 'motion-dom';
import { useConstant } from '../utils/use-constant.mjs';
import { useCombineMotionValues } from './use-combine-values.mjs';
import { useComputed } from './use-computed.mjs';
function useTransform(input, inputRangeOrTransformer, outputRangeOrMap, options) {
if (typeof input === "function") {
return useComputed(input);
}
/**
* Detect if outputRangeOrMap is an output map (object with keys)
* rather than an output range (array).
*/
const isOutputMap = outputRangeOrMap !== undefined &&
!Array.isArray(outputRangeOrMap) &&
typeof inputRangeOrTransformer !== "function";
if (isOutputMap) {
return useMapTransform(input, inputRangeOrTransformer, outputRangeOrMap, options);
}
const outputRange = outputRangeOrMap;
const transformer = typeof inputRangeOrTransformer === "function"
? inputRangeOrTransformer
: transform(inputRangeOrTransformer, outputRange, options);
const result = Array.isArray(input)
? useListTransform(input, transformer)
: useListTransform([input], ([latest]) => transformer(latest));
const inputAccelerate = !Array.isArray(input)
? input.accelerate
: undefined;
if (inputAccelerate &&
!inputAccelerate.isTransformed &&
typeof inputRangeOrTransformer !== "function" &&
Array.isArray(outputRangeOrMap) &&
options?.clamp !== false) {
result.accelerate = {
...inputAccelerate,
times: inputRangeOrTransformer,
keyframes: outputRangeOrMap,
isTransformed: true,
...(options?.ease ? { ease: options.ease } : {}),
};
}
return result;
}
function useListTransform(values, transformer) {
const latest = useConstant(() => []);
return useCombineMotionValues(values, () => {
latest.length = 0;
const numValues = values.length;
for (let i = 0; i < numValues; i++) {
latest[i] = values[i].get();
}
return transformer(latest);
});
}
function useMapTransform(inputValue, inputRange, outputMap, options) {
/**
* Capture keys once to ensure hooks are called in consistent order.
*/
const keys = useConstant(() => Object.keys(outputMap));
const output = useConstant(() => ({}));
for (const key of keys) {
output[key] = useTransform(inputValue, inputRange, outputMap[key], options);
}
return output;
}
export { useTransform };
//# sourceMappingURL=use-transform.mjs.map