| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- import { useState, useLayoutEffect } from 'react';
- import { useConstant } from '../../utils/use-constant.mjs';
- import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
- import { createBox } from '../../projection/geometry/models.mjs';
- import { VisualElement } from '../../render/VisualElement.mjs';
- import { animateVisualElement } from '../interfaces/visual-element.mjs';
- const createObject = () => ({});
- class StateVisualElement extends VisualElement {
- constructor() {
- super(...arguments);
- this.measureInstanceViewportBox = createBox;
- }
- build() { }
- resetTransform() { }
- restoreTransform() { }
- removeValueFromRenderState() { }
- renderInstance() { }
- scrapeMotionValuesFromProps() {
- return createObject();
- }
- getBaseTargetFromProps() {
- return undefined;
- }
- readValueFromInstance(_state, key, options) {
- return options.initialState[key] || 0;
- }
- sortInstanceNodePosition() {
- return 0;
- }
- }
- const useVisualState = makeUseVisualState({
- scrapeMotionValuesFromProps: createObject,
- createRenderState: createObject,
- });
- /**
- * This is not an officially supported API and may be removed
- * on any version.
- */
- function useAnimatedState(initialState) {
- const [animationState, setAnimationState] = useState(initialState);
- const visualState = useVisualState({}, false);
- const element = useConstant(() => {
- return new StateVisualElement({
- props: {
- onUpdate: (v) => {
- setAnimationState({ ...v });
- },
- },
- visualState,
- presenceContext: null,
- }, { initialState });
- });
- useLayoutEffect(() => {
- element.mount({});
- return () => element.unmount();
- }, [element]);
- const startAnimation = useConstant(() => (animationDefinition) => {
- return animateVisualElement(element, animationDefinition);
- });
- return [animationState, startAnimation];
- }
- export { useAnimatedState };
|