react-ui-animate 2.0.0 → 3.0.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.vscode/settings.json +3 -3
- package/LICENSE +21 -21
- package/README.md +115 -115
- package/dist/animation/animationType.d.ts +15 -15
- package/dist/animation/core/animation/Animation.d.ts +16 -0
- package/dist/animation/core/animation/FluidValue.d.ts +21 -0
- package/dist/animation/core/animation/RequestAnimationFrame.d.ts +8 -0
- package/dist/animation/core/animation/SpringAnimation.d.ts +41 -0
- package/dist/animation/core/animation/TimingAnimation.d.ts +35 -0
- package/dist/animation/core/animation/TransitionValue.d.ts +21 -0
- package/dist/animation/core/controllers/Animation.d.ts +16 -0
- package/dist/animation/core/controllers/FluidValue.d.ts +32 -0
- package/dist/animation/core/controllers/RequestAnimationFrame.d.ts +8 -0
- package/dist/animation/core/controllers/SpringAnimation.d.ts +41 -0
- package/dist/animation/core/controllers/TimingAnimation.d.ts +35 -0
- package/dist/animation/core/easing/Bezier.d.ts +8 -0
- package/dist/animation/core/easing/Easing.d.ts +40 -0
- package/dist/animation/core/helpers/camelCaseToKebabCase.d.ts +8 -0
- package/dist/animation/core/helpers/camelToDash.d.ts +7 -0
- package/dist/animation/core/helpers/canInterpolate.d.ts +11 -0
- package/dist/animation/core/helpers/getAnimatableObject.d.ts +22 -0
- package/dist/animation/core/helpers/getCleanProps.d.ts +10 -0
- package/dist/animation/core/helpers/getCssValue.d.ts +8 -0
- package/dist/animation/core/helpers/getNonAnimatableStyle.d.ts +6 -0
- package/dist/animation/core/helpers/index.d.ts +5 -0
- package/dist/animation/core/helpers/isDefined.d.ts +12 -0
- package/dist/animation/core/helpers/isFluidValue.d.ts +6 -0
- package/dist/animation/core/index.d.ts +11 -0
- package/dist/animation/core/interpolation/Colors.d.ts +25 -0
- package/dist/animation/core/interpolation/Interpolation.d.ts +80 -0
- package/dist/animation/core/interpolation/__tests__/Colors.test.d.ts +1 -0
- package/dist/animation/core/react/Tags.d.ts +3 -0
- package/dist/animation/core/react/TransformStyles.d.ts +8 -0
- package/dist/animation/core/react/animated.d.ts +29 -0
- package/dist/animation/core/react/combineRefs.d.ts +2 -0
- package/dist/animation/core/react/fluid.d.ts +6 -0
- package/dist/animation/core/react/functions/camelToDash.d.ts +7 -0
- package/dist/animation/core/react/functions/getAnimatableObject.d.ts +22 -0
- package/dist/animation/core/react/functions/getCleanProps.d.ts +4 -0
- package/dist/animation/core/react/functions/getCssValue.d.ts +8 -0
- package/dist/animation/core/react/functions/getNonAnimatableStyle.d.ts +6 -0
- package/dist/animation/core/react/functions/index.d.ts +7 -0
- package/dist/animation/core/react/functions/isDefined.d.ts +6 -0
- package/dist/animation/core/react/functions/isTransitionValue.d.ts +6 -0
- package/dist/animation/core/react/helpers/camelToDash.d.ts +7 -0
- package/dist/animation/core/react/helpers/canInterpolate.d.ts +7 -0
- package/dist/animation/core/react/helpers/getAnimatableObject.d.ts +22 -0
- package/dist/animation/core/react/helpers/getCleanProps.d.ts +4 -0
- package/dist/animation/core/react/helpers/getCssValue.d.ts +8 -0
- package/dist/animation/core/react/helpers/getNonAnimatableStyle.d.ts +6 -0
- package/dist/animation/core/react/helpers/index.d.ts +7 -0
- package/dist/animation/core/react/helpers/isDefined.d.ts +6 -0
- package/dist/animation/core/react/helpers/isFluidValue.d.ts +6 -0
- package/dist/animation/core/react/helpers/isTransitionValue.d.ts +6 -0
- package/dist/animation/core/react/makeFluid.d.ts +30 -0
- package/dist/animation/core/react/transforms.d.ts +6 -0
- package/dist/animation/core/react/useFluidValue.d.ts +9 -0
- package/dist/animation/core/react/useMount.d.ts +20 -0
- package/dist/animation/core/react/useMounts.d.ts +26 -0
- package/dist/animation/core/react/useTransition.d.ts +9 -0
- package/dist/animation/core/react/useTransitions.d.ts +11 -0
- package/dist/animation/core/types/animation.d.ts +54 -0
- package/dist/animation/core/types/common.d.ts +4 -0
- package/dist/animation/core/types/fluid.d.ts +19 -0
- package/dist/animation/core/types/index.d.ts +2 -0
- package/dist/animation/getInitialConfig.d.ts +3 -3
- package/dist/animation/index.d.ts +6 -6
- package/dist/animation/interpolation.d.ts +21 -21
- package/dist/animation/lib/animationType.d.ts +15 -0
- package/dist/animation/lib/getInitialConfig.d.ts +3 -0
- package/dist/animation/lib/index.d.ts +5 -0
- package/dist/animation/lib/interpolation.d.ts +20 -0
- package/dist/animation/lib/modules/AnimatedBlock.d.ts +8 -0
- package/dist/animation/lib/modules/AnimatedImage.d.ts +8 -0
- package/dist/animation/lib/modules/AnimatedInline.d.ts +8 -0
- package/dist/animation/lib/modules/MountedBlock.d.ts +29 -0
- package/dist/animation/lib/modules/ScrollableBlock.d.ts +22 -0
- package/dist/animation/lib/modules/TransitionBlock.d.ts +18 -0
- package/dist/animation/lib/modules/index.d.ts +6 -0
- package/dist/animation/lib/useAnimatedValue.d.ts +17 -0
- package/dist/animation/lib/useMountedValue.d.ts +14 -0
- package/dist/animation/modules/AnimatedBlock.d.ts +8 -8
- package/dist/animation/modules/AnimatedImage.d.ts +8 -8
- package/dist/animation/modules/AnimatedInline.d.ts +8 -8
- package/dist/animation/modules/MountedBlock.d.ts +29 -18
- package/dist/animation/modules/ScrollableBlock.d.ts +21 -21
- package/dist/animation/modules/TransitionBlock.d.ts +17 -17
- package/dist/animation/modules/index.d.ts +6 -6
- package/dist/animation/useAnimatedValue.d.ts +22 -22
- package/dist/animation/useMountedValue.d.ts +15 -15
- package/dist/gestures/controllers/DragGesture.d.ts +17 -17
- package/dist/gestures/controllers/Gesture.d.ts +20 -20
- package/dist/gestures/controllers/MouseMoveGesture.d.ts +13 -13
- package/dist/gestures/controllers/ScrollGesture.d.ts +14 -14
- package/dist/gestures/controllers/WheelGesture.d.ts +15 -15
- package/dist/gestures/controllers/index.d.ts +4 -4
- package/dist/gestures/eventAttacher.d.ts +11 -11
- package/dist/gestures/helpers/eventAttacher.d.ts +11 -0
- package/dist/gestures/helpers/index.d.ts +1 -0
- package/dist/gestures/helpers/math.d.ts +34 -0
- package/dist/gestures/helpers/withDefault.d.ts +4 -0
- package/dist/gestures/hooks/index.d.ts +5 -5
- package/dist/gestures/hooks/useDrag.d.ts +4 -4
- package/dist/gestures/hooks/useGesture.d.ts +9 -9
- package/dist/gestures/hooks/useMouseMove.d.ts +4 -4
- package/dist/gestures/hooks/useRecognizer.d.ts +10 -10
- package/dist/gestures/hooks/useScroll.d.ts +4 -4
- package/dist/gestures/hooks/useWheel.d.ts +4 -4
- package/dist/gestures/index.d.ts +2 -2
- package/dist/gestures/math.d.ts +34 -34
- package/dist/gestures/types.d.ts +51 -51
- package/dist/gestures/withDefault.d.ts +4 -4
- package/dist/hooks/index.d.ts +3 -3
- package/dist/hooks/useMeasure.d.ts +14 -14
- package/dist/hooks/useOutsideClick.d.ts +2 -2
- package/dist/hooks/useWindowDimension.d.ts +9 -9
- package/dist/index.d.ts +9 -5
- package/dist/index.js +2758 -1052
- package/dist/index.js.map +1 -1
- package/dist/utils/delay.d.ts +5 -5
- package/dist/utils/index.d.ts +1 -2
- package/dist/utils/isDefined.d.ts +1 -1
- package/ecosystem.config.js +12 -0
- package/example/README.md +46 -0
- package/example/package-lock.json +19597 -0
- package/example/package.json +45 -0
- package/example/public/favicon.ico +0 -0
- package/example/public/index.html +20 -0
- package/example/public/logo192.png +0 -0
- package/example/public/logo512.png +0 -0
- package/example/public/manifest.json +25 -0
- package/example/public/robots.txt +3 -0
- package/example/src/App.tsx +41 -0
- package/example/src/components/Draggable.tsx +46 -0
- package/example/src/components/Gestures.tsx +151 -0
- package/example/src/components/Interpolation.tsx +21 -0
- package/example/src/components/Loop.tsx +48 -0
- package/example/src/components/MountedBlock.tsx +25 -0
- package/example/src/components/MouseMove.tsx +59 -0
- package/example/src/components/MultistageTransition.tsx +34 -0
- package/example/src/components/Scroll.tsx +39 -0
- package/example/src/components/ScrollableBlock.tsx +27 -0
- package/example/src/components/SnapTo.tsx +55 -0
- package/example/src/components/TransitionBlock.tsx +37 -0
- package/example/src/components/Wheel.tsx +39 -0
- package/example/src/components/index.ts +18 -0
- package/example/src/components/svgLine.tsx +48 -0
- package/example/src/components/useAnimatedValue.tsx +57 -0
- package/example/src/components/useMountedValue.tsx +62 -0
- package/example/src/index.css +8 -0
- package/example/src/index.tsx +16 -0
- package/example/tsconfig.json +26 -0
- package/package.json +48 -48
- package/{rollup.config.js → rollup.config.mjs} +18 -18
- package/src/animation/core/controllers/Animation.ts +27 -0
- package/src/animation/core/controllers/FluidValue.ts +97 -0
- package/src/animation/core/controllers/RequestAnimationFrame.ts +13 -0
- package/src/animation/core/controllers/SpringAnimation.ts +218 -0
- package/src/animation/core/controllers/TimingAnimation.ts +152 -0
- package/src/animation/core/easing/Bezier.ts +146 -0
- package/src/animation/core/easing/Easing.ts +132 -0
- package/src/animation/core/helpers/camelCaseToKebabCase.ts +10 -0
- package/src/animation/core/helpers/getCleanProps.ts +16 -0
- package/src/animation/core/helpers/getCssValue.ts +60 -0
- package/src/animation/core/helpers/index.ts +5 -0
- package/src/animation/core/helpers/isDefined.ts +14 -0
- package/src/animation/core/helpers/isFluidValue.ts +11 -0
- package/src/animation/core/index.ts +16 -0
- package/src/animation/core/interpolation/Colors.ts +232 -0
- package/src/animation/core/interpolation/Interpolation.ts +395 -0
- package/src/animation/core/interpolation/__tests__/Colors.test.tsx +35 -0
- package/src/animation/core/react/fluid.ts +197 -0
- package/src/animation/core/react/makeFluid.ts +294 -0
- package/src/animation/core/react/transforms.ts +90 -0
- package/src/animation/core/react/useFluidValue.ts +43 -0
- package/src/animation/core/react/useMount.ts +58 -0
- package/src/animation/core/types/animation.d.ts +56 -0
- package/src/animation/core/types/common.d.ts +4 -0
- package/src/animation/core/types/fluid.d.ts +38 -0
- package/src/animation/{animationType.ts → lib/animationType.ts} +17 -17
- package/src/animation/{getInitialConfig.ts → lib/getInitialConfig.ts} +61 -61
- package/src/animation/lib/index.ts +12 -0
- package/src/animation/{interpolation.ts → lib/interpolation.ts} +47 -48
- package/src/animation/{modules → lib/modules}/AnimatedBlock.ts +8 -8
- package/src/animation/{modules → lib/modules}/AnimatedImage.ts +8 -8
- package/src/animation/{modules → lib/modules}/AnimatedInline.ts +8 -8
- package/src/animation/lib/modules/MountedBlock.tsx +51 -0
- package/src/animation/{modules → lib/modules}/ScrollableBlock.tsx +68 -69
- package/src/animation/{modules → lib/modules}/TransitionBlock.tsx +28 -29
- package/src/animation/{modules → lib/modules}/index.ts +6 -6
- package/src/animation/{useAnimatedValue.ts → lib/useAnimatedValue.ts} +60 -71
- package/src/animation/{useMountedValue.ts → lib/useMountedValue.ts} +18 -19
- package/src/gestures/controllers/DragGesture.ts +178 -177
- package/src/gestures/controllers/Gesture.ts +54 -54
- package/src/gestures/controllers/MouseMoveGesture.ts +111 -111
- package/src/gestures/controllers/ScrollGesture.ts +107 -107
- package/src/gestures/controllers/WheelGesture.ts +123 -123
- package/src/gestures/controllers/index.ts +4 -4
- package/src/gestures/{eventAttacher.ts → helpers/eventAttacher.ts} +67 -67
- package/src/gestures/helpers/index.ts +1 -0
- package/src/gestures/{math.ts → helpers/math.ts} +120 -120
- package/src/gestures/{withDefault.ts → helpers/withDefault.ts} +3 -3
- package/src/gestures/hooks/index.ts +5 -5
- package/src/gestures/hooks/useDrag.ts +14 -14
- package/src/gestures/hooks/useGesture.ts +38 -38
- package/src/gestures/hooks/useMouseMove.ts +11 -11
- package/src/gestures/hooks/useRecognizer.ts +59 -59
- package/src/gestures/hooks/useScroll.ts +11 -11
- package/src/gestures/hooks/useWheel.ts +11 -11
- package/src/gestures/{types.ts → types/index.d.ts} +49 -49
- package/src/hooks/index.ts +3 -3
- package/src/hooks/useMeasure.ts +132 -133
- package/src/hooks/useOutsideClick.ts +36 -36
- package/src/hooks/useWindowDimension.ts +58 -59
- package/src/index.ts +42 -5
- package/src/utils/delay.ts +9 -9
- package/src/utils/index.ts +1 -2
- package/tsconfig.json +24 -25
- package/src/animation/index.ts +0 -10
- package/src/animation/modules/MountedBlock.tsx +0 -25
- package/src/gestures/index.ts +0 -2
- package/src/utils/isDefined.ts +0 -4
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CSSProperties, HTMLAttributes, SVGAttributes, ComponentType } from 'react';
|
|
2
|
+
import { FluidValue } from '../controllers/FluidValue';
|
|
3
|
+
import { styleTrasformKeys } from '../react/transforms';
|
|
4
|
+
export type FluidTypes = 'spring' | 'timing';
|
|
5
|
+
export type FluidCSSProperties = {
|
|
6
|
+
[key in keyof CSSProperties]: CSSProperties[key];
|
|
7
|
+
} & {
|
|
8
|
+
[key in (typeof styleTrasformKeys)[number]]?: number | string | FluidValue;
|
|
9
|
+
};
|
|
10
|
+
export type FluidHTMLAttributes<T> = {
|
|
11
|
+
[property in keyof HTMLAttributes<T>]: HTMLAttributes<T>[property] | FluidValue;
|
|
12
|
+
};
|
|
13
|
+
export type FluidSVGAttributes<T> = {
|
|
14
|
+
[property in keyof SVGAttributes<T>]: SVGAttributes<T>[property] | FluidValue;
|
|
15
|
+
};
|
|
16
|
+
export type FluidProps<T> = Omit<FluidHTMLAttributes<T> & FluidSVGAttributes<T>, 'style'> & {
|
|
17
|
+
style?: FluidCSSProperties;
|
|
18
|
+
};
|
|
19
|
+
export type WrappedComponentOrTag = ComponentType<HTMLAttributes<HTMLElement>> | keyof JSX.IntrinsicElements;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export
|
|
3
|
-
export declare const getInitialConfig: (animationType?:
|
|
1
|
+
import { FluidValueConfig } from './core';
|
|
2
|
+
export type InitialConfigType = 'linear' | 'easein' | 'easeout' | 'easeinout' | 'ease' | 'power1' | 'power2' | 'power3' | 'power4' | 'elastic' | 'stiff' | 'wooble' | 'bounce';
|
|
3
|
+
export declare const getInitialConfig: (animationType?: InitialConfigType) => FluidValueConfig;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export * from './interpolation';
|
|
2
|
-
export * from './modules';
|
|
3
|
-
export { useAnimatedValue, ValueType, UseAnimatedValueConfig, } from './useAnimatedValue';
|
|
4
|
-
export { useMountedValue } from './useMountedValue';
|
|
5
|
-
export * from './animationType';
|
|
6
|
-
export * from './modules';
|
|
1
|
+
export * from './interpolation';
|
|
2
|
+
export * from './modules';
|
|
3
|
+
export { useAnimatedValue, ValueType, UseAnimatedValueConfig, } from './useAnimatedValue';
|
|
4
|
+
export { useMountedValue } from './useMountedValue';
|
|
5
|
+
export * from './animationType';
|
|
6
|
+
export * from './modules';
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { ExtrapolateConfig, FluidValue } from '
|
|
2
|
-
import { ValueType } from './useAnimatedValue';
|
|
3
|
-
/**
|
|
4
|
-
* interpolate functions maps input range to given output range
|
|
5
|
-
* @param value - number | TransitionValue
|
|
6
|
-
* @param inputRange - Array<number>
|
|
7
|
-
* @param outputRange - Array<number | string>
|
|
8
|
-
* @param extrapolateConfig - "clamp" | "identity" | "extend"
|
|
9
|
-
* @returns - number | TransitionValue
|
|
10
|
-
*/
|
|
11
|
-
export declare function interpolate(value: number | FluidValue | ValueType, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
|
|
12
|
-
/**
|
|
13
|
-
* bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
|
|
14
|
-
* sorthand function to interpolate input range [0, 1]
|
|
15
|
-
* @param value - number | TransitionValue
|
|
16
|
-
* @param minOutput - number | string
|
|
17
|
-
* @param maxOutput - number | string
|
|
18
|
-
* @param extrapolateConfig - "clamp" | "identity" | "extend"
|
|
19
|
-
* @returns - number | TransitionValue
|
|
20
|
-
*/
|
|
21
|
-
export declare function bInterpolate(value: number | FluidValue | ValueType, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig): any;
|
|
1
|
+
import { ExtrapolateConfig, FluidValue } from './core';
|
|
2
|
+
import { ValueType } from './useAnimatedValue';
|
|
3
|
+
/**
|
|
4
|
+
* interpolate functions maps input range to given output range
|
|
5
|
+
* @param value - number | TransitionValue
|
|
6
|
+
* @param inputRange - Array<number>
|
|
7
|
+
* @param outputRange - Array<number | string>
|
|
8
|
+
* @param extrapolateConfig - "clamp" | "identity" | "extend"
|
|
9
|
+
* @returns - number | TransitionValue
|
|
10
|
+
*/
|
|
11
|
+
export declare function interpolate(value: number | FluidValue | ValueType, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
|
|
12
|
+
/**
|
|
13
|
+
* bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
|
|
14
|
+
* sorthand function to interpolate input range [0, 1]
|
|
15
|
+
* @param value - number | TransitionValue
|
|
16
|
+
* @param minOutput - number | string
|
|
17
|
+
* @param maxOutput - number | string
|
|
18
|
+
* @param extrapolateConfig - "clamp" | "identity" | "extend"
|
|
19
|
+
* @returns - number | TransitionValue
|
|
20
|
+
*/
|
|
21
|
+
export declare function bInterpolate(value: number | FluidValue | ValueType, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig): any;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const AnimationConfigUtils: {
|
|
2
|
+
ELASTIC: import("../core").FluidValueConfig;
|
|
3
|
+
BOUNCE: import("../core").FluidValueConfig;
|
|
4
|
+
EASE: import("../core").FluidValueConfig;
|
|
5
|
+
STIFF: import("../core").FluidValueConfig;
|
|
6
|
+
WOOBLE: import("../core").FluidValueConfig;
|
|
7
|
+
EASE_IN: import("../core").FluidValueConfig;
|
|
8
|
+
EASE_OUT: import("../core").FluidValueConfig;
|
|
9
|
+
EASE_IN_OUT: import("../core").FluidValueConfig;
|
|
10
|
+
POWER1: import("../core").FluidValueConfig;
|
|
11
|
+
POWER2: import("../core").FluidValueConfig;
|
|
12
|
+
POWER3: import("../core").FluidValueConfig;
|
|
13
|
+
POWER4: import("../core").FluidValueConfig;
|
|
14
|
+
LINEAR: import("../core").FluidValueConfig;
|
|
15
|
+
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { FluidValueConfig } from '../core';
|
|
2
|
+
export type InitialConfigType = 'linear' | 'easein' | 'easeout' | 'easeinout' | 'ease' | 'power1' | 'power2' | 'power3' | 'power4' | 'elastic' | 'stiff' | 'wooble' | 'bounce';
|
|
3
|
+
export declare const getInitialConfig: (animationType?: InitialConfigType) => FluidValueConfig;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { interpolate, bInterpolate } from './interpolation';
|
|
2
|
+
export { AnimatedBlock, AnimatedImage, AnimatedInline, MountedBlock, ScrollableBlock, TransitionBlock, } from './modules';
|
|
3
|
+
export { useAnimatedValue, UseAnimatedValueConfig } from './useAnimatedValue';
|
|
4
|
+
export { useMountedValue } from './useMountedValue';
|
|
5
|
+
export { AnimationConfigUtils } from './animationType';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ExtrapolateConfig, FluidValue } from '../core';
|
|
2
|
+
/**
|
|
3
|
+
* interpolate functions maps input range to given output range
|
|
4
|
+
* @param value - number | TransitionValue
|
|
5
|
+
* @param inputRange - Array<number>
|
|
6
|
+
* @param outputRange - Array<number | string>
|
|
7
|
+
* @param extrapolateConfig - "clamp" | "identity" | "extend"
|
|
8
|
+
* @returns - number | TransitionValue
|
|
9
|
+
*/
|
|
10
|
+
export declare function interpolate(value: number | FluidValue, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
|
|
11
|
+
/**
|
|
12
|
+
* bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
|
|
13
|
+
* sorthand function to interpolate input range [0, 1]
|
|
14
|
+
* @param value - number | TransitionValue
|
|
15
|
+
* @param minOutput - number | string
|
|
16
|
+
* @param maxOutput - number | string
|
|
17
|
+
* @param extrapolateConfig - "clamp" | "identity" | "extend"
|
|
18
|
+
* @returns - number | TransitionValue
|
|
19
|
+
*/
|
|
20
|
+
export declare function bInterpolate(value: number | FluidValue, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig): any;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AnimatedBlock - A higher order component built upon `div` element
|
|
3
|
+
* which can accept `AnimatedValue`. It also exposes some extra style properties like
|
|
4
|
+
* translateX, translateY, rotateX, rotateY, scaleX, etc.
|
|
5
|
+
*/
|
|
6
|
+
export declare const AnimatedBlock: import("react").ForwardRefExoticComponent<Omit<import("../../core/types/fluid").FluidHTMLAttributes<"div"> & import("../../core/types/fluid").FluidSVGAttributes<"div">, "style"> & {
|
|
7
|
+
style?: import("../../core/types/fluid").FluidCSSProperties;
|
|
8
|
+
} & import("react").RefAttributes<unknown>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AnimatedImage - A higher order component built upon `img` element
|
|
3
|
+
* which can accept `AnimatedValue`. It also exposes some extra style properties like
|
|
4
|
+
* translateX, translateY, rotateX, rotateY, scaleX, etc.
|
|
5
|
+
*/
|
|
6
|
+
export declare const AnimatedImage: import("react").ForwardRefExoticComponent<Omit<import("../../core/types/fluid").FluidHTMLAttributes<"img"> & import("../../core/types/fluid").FluidSVGAttributes<"img">, "style"> & {
|
|
7
|
+
style?: import("../../core/types/fluid").FluidCSSProperties;
|
|
8
|
+
} & import("react").RefAttributes<unknown>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AnimatedInline - A higher order component built upon `span` element
|
|
3
|
+
* which can accept `AnimatedValue`. It also exposes some extra style properties like
|
|
4
|
+
* translateX, translateY, rotateX, rotateY, scaleX, etc.
|
|
5
|
+
*/
|
|
6
|
+
export declare const AnimatedInline: import("react").ForwardRefExoticComponent<Omit<import("../../core/types/fluid").FluidHTMLAttributes<"span"> & import("../../core/types/fluid").FluidSVGAttributes<"span">, "style"> & {
|
|
7
|
+
style?: import("../../core/types/fluid").FluidCSSProperties;
|
|
8
|
+
} & import("react").RefAttributes<unknown>>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { FluidValue, FluidValueConfig } from '../../core';
|
|
3
|
+
interface MountedValueConfig extends FluidValueConfig {
|
|
4
|
+
}
|
|
5
|
+
interface MountedBlockProps {
|
|
6
|
+
state: boolean;
|
|
7
|
+
children: (animation: {
|
|
8
|
+
value: FluidValue;
|
|
9
|
+
}) => React.ReactNode;
|
|
10
|
+
from?: number;
|
|
11
|
+
enter?: number;
|
|
12
|
+
exit?: number;
|
|
13
|
+
config?: MountedValueConfig;
|
|
14
|
+
enterConfig?: MountedValueConfig;
|
|
15
|
+
exitConfig?: MountedValueConfig;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* MountedBlock - Higher order component which handles mounting and unmounting of a component.
|
|
19
|
+
* @prop { boolean } state - Boolean indicating the component should mount or unmount.
|
|
20
|
+
* @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
|
|
21
|
+
* @prop { number } from - Number that dictates the beginning state for animation.
|
|
22
|
+
* @prop { number } enter - Number that dictates the entry state for animation.
|
|
23
|
+
* @prop { number } exit - Number that dictates the exit state for animation.
|
|
24
|
+
* @prop { MountedValueConfig } config - Animation configuration for overall animation.
|
|
25
|
+
* @prop { MountedValueConfig } enterConfig - Animation configuration for the entering state of animation.
|
|
26
|
+
* @prop { MountedValueConfig } exitConfig - Animation configuration for the entering state of animation.
|
|
27
|
+
*/
|
|
28
|
+
export declare const MountedBlock: ({ state, children, from, enter, exit, config, enterConfig, exitConfig, }: MountedBlockProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { UseAnimatedValueConfig } from '../useAnimatedValue';
|
|
3
|
+
import { FluidValue } from '../../core';
|
|
4
|
+
interface ScrollableBlockProps {
|
|
5
|
+
children?: (animation: {
|
|
6
|
+
value?: FluidValue | string | number;
|
|
7
|
+
}) => React.ReactNode;
|
|
8
|
+
direction?: 'single' | 'both';
|
|
9
|
+
threshold?: number;
|
|
10
|
+
animationConfig?: UseAnimatedValueConfig;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* ScrollableBlock - Higher order component to handle the entrance or exit animation
|
|
14
|
+
* of a component when it enters or exit the viewport. Accepts child as a function with
|
|
15
|
+
* `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
|
|
16
|
+
* @prop { function } children - child as a function with `AnimatedValue` as its first argument.
|
|
17
|
+
* @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
|
|
18
|
+
* @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
|
|
19
|
+
* @prop { UseAnimatedValueConfig } animationConfig - Animation config
|
|
20
|
+
*/
|
|
21
|
+
export declare const ScrollableBlock: (props: ScrollableBlockProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { UseAnimatedValueConfig } from '../useAnimatedValue';
|
|
3
|
+
import { FluidValue } from '../../core';
|
|
4
|
+
interface TransitionBlockProps {
|
|
5
|
+
state: boolean;
|
|
6
|
+
children: (animation: {
|
|
7
|
+
value?: FluidValue | string | number;
|
|
8
|
+
}) => React.ReactNode;
|
|
9
|
+
config?: UseAnimatedValueConfig;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* TransitionBlock - Higher order component which animates on state change.
|
|
13
|
+
* @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
|
|
14
|
+
* @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
|
|
15
|
+
* @prop { UseAnimatedValueConfig } config - Animation configuration.
|
|
16
|
+
*/
|
|
17
|
+
export declare const TransitionBlock: ({ state, children, config, }: TransitionBlockProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { FluidValueConfig, FluidValue } from '../core';
|
|
2
|
+
type Length = number | string;
|
|
3
|
+
export interface UseAnimatedValueConfig extends FluidValueConfig {
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* `useAnimatedValue` returns an animation value with `.value` and `.currentValue` property which is
|
|
7
|
+
* initialized when passed to argument (`initialValue`). The retured value persist until the lifetime of
|
|
8
|
+
* a component. It doesnot cast any re-renders which can is very good for performance optimization.
|
|
9
|
+
*
|
|
10
|
+
* @param { string | number } initialValue - Initial value
|
|
11
|
+
* @param { UseAnimatedValueConfig } config - Animation configuration object.
|
|
12
|
+
*/
|
|
13
|
+
export declare function useAnimatedValue(initialValue: Length, config?: UseAnimatedValueConfig): {
|
|
14
|
+
value: FluidValue | string | number | undefined;
|
|
15
|
+
currentValue: number | string;
|
|
16
|
+
};
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { UseMountConfig, FluidValue } from '../core';
|
|
2
|
+
export interface UseMountedValueConfig extends UseMountConfig {
|
|
3
|
+
}
|
|
4
|
+
/**
|
|
5
|
+
* `useMountedValue` handles mounting and unmounting of a component which captures current state
|
|
6
|
+
* passed as an arugment (`state`) and exposes the shadow state which handles the mount and unmount
|
|
7
|
+
* of a component.
|
|
8
|
+
*
|
|
9
|
+
* @param { boolean } state - Boolean indicating the component should mount or unmount.
|
|
10
|
+
* @param { UseMountedValueConfig } config - Animation configuration.
|
|
11
|
+
*/
|
|
12
|
+
export declare function useMountedValue(state: boolean, config: UseMountedValueConfig): (cb: (value: {
|
|
13
|
+
value: FluidValue;
|
|
14
|
+
}, mounted: boolean) => React.ReactNode) => import("react").ReactNode;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AnimatedBlock - A higher order component built upon `div` element
|
|
3
|
-
* which can accept `AnimatedValue`. It also exposes some extra style properties like
|
|
4
|
-
* translateX, translateY, rotateX, rotateY, scaleX, etc.
|
|
5
|
-
*/
|
|
6
|
-
export declare const AnimatedBlock: import("react").ForwardRefExoticComponent<
|
|
7
|
-
style?: import("
|
|
8
|
-
} & import("react").RefAttributes<unknown>>;
|
|
1
|
+
/**
|
|
2
|
+
* AnimatedBlock - A higher order component built upon `div` element
|
|
3
|
+
* which can accept `AnimatedValue`. It also exposes some extra style properties like
|
|
4
|
+
* translateX, translateY, rotateX, rotateY, scaleX, etc.
|
|
5
|
+
*/
|
|
6
|
+
export declare const AnimatedBlock: import("react").ForwardRefExoticComponent<Omit<import("../core").FluidHTMLAttributes<"div"> & import("../core").FluidSVGAttributes<"div">, "style"> & {
|
|
7
|
+
style?: import("../core").FluidCSSProperties;
|
|
8
|
+
} & import("react").RefAttributes<unknown>>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AnimatedImage - A higher order component built upon `img` element
|
|
3
|
-
* which can accept `AnimatedValue`. It also exposes some extra style properties like
|
|
4
|
-
* translateX, translateY, rotateX, rotateY, scaleX, etc.
|
|
5
|
-
*/
|
|
6
|
-
export declare const AnimatedImage: import("react").ForwardRefExoticComponent<
|
|
7
|
-
style?: import("
|
|
8
|
-
} & import("react").RefAttributes<unknown>>;
|
|
1
|
+
/**
|
|
2
|
+
* AnimatedImage - A higher order component built upon `img` element
|
|
3
|
+
* which can accept `AnimatedValue`. It also exposes some extra style properties like
|
|
4
|
+
* translateX, translateY, rotateX, rotateY, scaleX, etc.
|
|
5
|
+
*/
|
|
6
|
+
export declare const AnimatedImage: import("react").ForwardRefExoticComponent<Omit<import("../core").FluidHTMLAttributes<"img"> & import("../core").FluidSVGAttributes<"img">, "style"> & {
|
|
7
|
+
style?: import("../core").FluidCSSProperties;
|
|
8
|
+
} & import("react").RefAttributes<unknown>>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AnimatedInline - A higher order component built upon `span` element
|
|
3
|
-
* which can accept `AnimatedValue`. It also exposes some extra style properties like
|
|
4
|
-
* translateX, translateY, rotateX, rotateY, scaleX, etc.
|
|
5
|
-
*/
|
|
6
|
-
export declare const AnimatedInline: import("react").ForwardRefExoticComponent<
|
|
7
|
-
style?: import("
|
|
8
|
-
} & import("react").RefAttributes<unknown>>;
|
|
1
|
+
/**
|
|
2
|
+
* AnimatedInline - A higher order component built upon `span` element
|
|
3
|
+
* which can accept `AnimatedValue`. It also exposes some extra style properties like
|
|
4
|
+
* translateX, translateY, rotateX, rotateY, scaleX, etc.
|
|
5
|
+
*/
|
|
6
|
+
export declare const AnimatedInline: import("react").ForwardRefExoticComponent<Omit<import("../core").FluidHTMLAttributes<"span"> & import("../core").FluidSVGAttributes<"span">, "style"> & {
|
|
7
|
+
style?: import("../core").FluidCSSProperties;
|
|
8
|
+
} & import("react").RefAttributes<unknown>>;
|
|
@@ -1,18 +1,29 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { FluidValue } from '
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { FluidValue, FluidValueConfig } from '../core';
|
|
3
|
+
interface MountedValueConfig extends FluidValueConfig {
|
|
4
|
+
}
|
|
5
|
+
interface MountedBlockProps {
|
|
6
|
+
state: boolean;
|
|
7
|
+
children: (animation: {
|
|
8
|
+
value: FluidValue;
|
|
9
|
+
}) => React.ReactNode;
|
|
10
|
+
from?: number;
|
|
11
|
+
enter?: number;
|
|
12
|
+
exit?: number;
|
|
13
|
+
config?: MountedValueConfig;
|
|
14
|
+
enterConfig?: MountedValueConfig;
|
|
15
|
+
exitConfig?: MountedValueConfig;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* MountedBlock - Higher order component which handles mounting and unmounting of a component.
|
|
19
|
+
* @prop { boolean } state - Boolean indicating the component should mount or unmount.
|
|
20
|
+
* @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
|
|
21
|
+
* @prop { number } from - Number that dictates the beginning state for animation.
|
|
22
|
+
* @prop { number } enter - Number that dictates the entry state for animation.
|
|
23
|
+
* @prop { number } exit - Number that dictates the exit state for animation.
|
|
24
|
+
* @prop { MountedValueConfig } config - Animation configuration for overall animation.
|
|
25
|
+
* @prop { MountedValueConfig } enterConfig - Animation configuration for the entering state of animation.
|
|
26
|
+
* @prop { MountedValueConfig } exitConfig - Animation configuration for the entering state of animation.
|
|
27
|
+
*/
|
|
28
|
+
export declare const MountedBlock: ({ state, children, from, enter, exit, config, enterConfig, exitConfig, }: MountedBlockProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export {};
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { UseAnimatedValueConfig, ValueType } from '../useAnimatedValue';
|
|
3
|
-
interface ScrollableBlockProps {
|
|
4
|
-
children?: (animation: {
|
|
5
|
-
value: ValueType;
|
|
6
|
-
}) => React.ReactNode;
|
|
7
|
-
direction?: 'single' | 'both';
|
|
8
|
-
threshold?: number;
|
|
9
|
-
animationConfig?: UseAnimatedValueConfig;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* ScrollableBlock - Higher order component to handle the entrance or exit animation
|
|
13
|
-
* of a component when it enters or exit the viewport. Accepts child as a function with
|
|
14
|
-
* `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
|
|
15
|
-
* @prop { function } children - child as a function with `AnimatedValue` as its first argument.
|
|
16
|
-
* @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
|
|
17
|
-
* @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
|
|
18
|
-
* @prop { UseAnimatedValueConfig } animationConfig - Animation config
|
|
19
|
-
*/
|
|
20
|
-
export declare const ScrollableBlock: (props: ScrollableBlockProps) => JSX.Element;
|
|
21
|
-
export {};
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { UseAnimatedValueConfig, ValueType } from '../useAnimatedValue';
|
|
3
|
+
interface ScrollableBlockProps {
|
|
4
|
+
children?: (animation: {
|
|
5
|
+
value: ValueType;
|
|
6
|
+
}) => React.ReactNode;
|
|
7
|
+
direction?: 'single' | 'both';
|
|
8
|
+
threshold?: number;
|
|
9
|
+
animationConfig?: UseAnimatedValueConfig;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* ScrollableBlock - Higher order component to handle the entrance or exit animation
|
|
13
|
+
* of a component when it enters or exit the viewport. Accepts child as a function with
|
|
14
|
+
* `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
|
|
15
|
+
* @prop { function } children - child as a function with `AnimatedValue` as its first argument.
|
|
16
|
+
* @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
|
|
17
|
+
* @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
|
|
18
|
+
* @prop { UseAnimatedValueConfig } animationConfig - Animation config
|
|
19
|
+
*/
|
|
20
|
+
export declare const ScrollableBlock: (props: ScrollableBlockProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { UseAnimatedValueConfig, ValueType } from '../useAnimatedValue';
|
|
3
|
-
interface TransitionBlockProps {
|
|
4
|
-
state: boolean;
|
|
5
|
-
children: (animation: {
|
|
6
|
-
value: ValueType;
|
|
7
|
-
}) => React.ReactNode;
|
|
8
|
-
config?: UseAnimatedValueConfig;
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* TransitionBlock - Higher order component which animates on state change.
|
|
12
|
-
* @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
|
|
13
|
-
* @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
|
|
14
|
-
* @prop { UseAnimatedValueConfig } config - Animation configuration.
|
|
15
|
-
*/
|
|
16
|
-
export declare const TransitionBlock: ({ state, children, config, }: TransitionBlockProps) => JSX.Element;
|
|
17
|
-
export {};
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { UseAnimatedValueConfig, ValueType } from '../useAnimatedValue';
|
|
3
|
+
interface TransitionBlockProps {
|
|
4
|
+
state: boolean;
|
|
5
|
+
children: (animation: {
|
|
6
|
+
value: ValueType;
|
|
7
|
+
}) => React.ReactNode;
|
|
8
|
+
config?: UseAnimatedValueConfig;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* TransitionBlock - Higher order component which animates on state change.
|
|
12
|
+
* @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
|
|
13
|
+
* @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
|
|
14
|
+
* @prop { UseAnimatedValueConfig } config - Animation configuration.
|
|
15
|
+
*/
|
|
16
|
+
export declare const TransitionBlock: ({ state, children, config, }: TransitionBlockProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export * from './AnimatedBlock';
|
|
2
|
-
export * from './AnimatedInline';
|
|
3
|
-
export * from './AnimatedImage';
|
|
4
|
-
export * from './MountedBlock';
|
|
5
|
-
export * from './ScrollableBlock';
|
|
6
|
-
export * from './TransitionBlock';
|
|
1
|
+
export * from './AnimatedBlock';
|
|
2
|
+
export * from './AnimatedInline';
|
|
3
|
+
export * from './AnimatedImage';
|
|
4
|
+
export * from './MountedBlock';
|
|
5
|
+
export * from './ScrollableBlock';
|
|
6
|
+
export * from './TransitionBlock';
|