| 1 | "use strict";
|
|---|
| 2 |
|
|---|
| 3 | Object.defineProperty(exports, "__esModule", {
|
|---|
| 4 | value: true
|
|---|
| 5 | });
|
|---|
| 6 | exports.useAnimationId = useAnimationId;
|
|---|
| 7 | var _react = require("react");
|
|---|
| 8 | var _DataUtils = require("./DataUtils");
|
|---|
| 9 | /**
|
|---|
| 10 | * This hook returns a unique animation id for the object input.
|
|---|
| 11 | * If input changes (as in, reference equality is different), the animation id will change.
|
|---|
| 12 | * If input does not change, the animation id will not change.
|
|---|
| 13 | *
|
|---|
| 14 | * This is useful for animations. The Animate component
|
|---|
| 15 | * does have a `shouldReAnimate` prop but that doesn't seem to be doing what the name implies.
|
|---|
| 16 | * Also, we don't always want to re-animate on every render;
|
|---|
| 17 | * we only want to re-animate when the input changes. Not the internal state (e.g. `isAnimating`).
|
|---|
| 18 | *
|
|---|
| 19 | * @param input The object to check for changes. Uses reference equality (=== operator)
|
|---|
| 20 | * @param prefix Optional prefix to use for the animation id
|
|---|
| 21 | * @returns A unique animation id
|
|---|
| 22 | */
|
|---|
| 23 | function useAnimationId(input) {
|
|---|
| 24 | var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'animation-';
|
|---|
| 25 | var animationId = (0, _react.useRef)((0, _DataUtils.uniqueId)(prefix));
|
|---|
| 26 | var prevProps = (0, _react.useRef)(input);
|
|---|
| 27 | if (prevProps.current !== input) {
|
|---|
| 28 | animationId.current = (0, _DataUtils.uniqueId)(prefix);
|
|---|
| 29 | prevProps.current = input;
|
|---|
| 30 | }
|
|---|
| 31 | return animationId.current;
|
|---|
| 32 | } |
|---|