chore: update map
This commit is contained in:
+59
-19
@@ -1,12 +1,14 @@
|
||||
'use strict';
|
||||
import { logger } from './common';
|
||||
import type {
|
||||
ILayoutAnimationBuilder,
|
||||
LayoutAnimationFunction,
|
||||
LayoutAnimationsValues,
|
||||
} from './reanimated2/layoutReanimation';
|
||||
import type { StyleProps } from './reanimated2/commonTypes';
|
||||
LayoutAnimationValues,
|
||||
StyleProps,
|
||||
} from './commonTypes';
|
||||
import type { NestedArray } from './createAnimatedComponent/commonTypes';
|
||||
|
||||
const mockTargetValues: LayoutAnimationsValues = {
|
||||
const mockTargetValues: LayoutAnimationValues = {
|
||||
targetOriginX: 0,
|
||||
targetOriginY: 0,
|
||||
targetWidth: 0,
|
||||
@@ -25,12 +27,57 @@ const mockTargetValues: LayoutAnimationsValues = {
|
||||
currentBorderRadius: 0,
|
||||
};
|
||||
|
||||
function getCommonProperties(
|
||||
layoutStyle: StyleProps,
|
||||
componentStyle: NestedArray<StyleProps>
|
||||
) {
|
||||
let componentStyleFlat = Array.isArray(componentStyle)
|
||||
? componentStyle.flat()
|
||||
: [componentStyle];
|
||||
|
||||
componentStyleFlat = componentStyleFlat.filter(Boolean);
|
||||
|
||||
componentStyleFlat = componentStyleFlat.map((style) =>
|
||||
'initial' in style
|
||||
? style.initial.value // Include properties of animated style
|
||||
: style
|
||||
);
|
||||
|
||||
const componentStylesKeys = componentStyleFlat.flatMap((style) =>
|
||||
Object.keys(style)
|
||||
);
|
||||
|
||||
const commonKeys = Object.keys(layoutStyle).filter((key) =>
|
||||
componentStylesKeys.includes(key)
|
||||
);
|
||||
|
||||
return commonKeys;
|
||||
}
|
||||
|
||||
function maybeReportOverwrittenProperties(
|
||||
layoutAnimationStyle: StyleProps,
|
||||
style: NestedArray<StyleProps>,
|
||||
displayName: string
|
||||
) {
|
||||
const commonProperties = getCommonProperties(layoutAnimationStyle, style);
|
||||
|
||||
if (commonProperties.length > 0) {
|
||||
logger.warn(
|
||||
`${
|
||||
commonProperties.length === 1 ? 'Property' : 'Properties'
|
||||
} "${commonProperties.join(
|
||||
', '
|
||||
)}" of ${displayName} may be overwritten by a layout animation. Please wrap your component with an animated view and apply the layout animation on the wrapper.`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function maybeBuild(
|
||||
layoutAnimationOrBuilder:
|
||||
| ILayoutAnimationBuilder
|
||||
| LayoutAnimationFunction
|
||||
| Keyframe,
|
||||
style: StyleProps | undefined,
|
||||
style: NestedArray<StyleProps> | undefined,
|
||||
displayName: string
|
||||
): LayoutAnimationFunction | Keyframe {
|
||||
const isAnimationBuilder = (
|
||||
@@ -41,24 +88,17 @@ export function maybeBuild(
|
||||
|
||||
if (isAnimationBuilder(layoutAnimationOrBuilder)) {
|
||||
const animationFactory = layoutAnimationOrBuilder.build();
|
||||
const layoutAnimation = animationFactory(mockTargetValues);
|
||||
const animatedStyle = layoutAnimation.animations;
|
||||
|
||||
const getCommonProperties = (obj1: object, obj2: object) =>
|
||||
Object.keys(obj1).filter((key) =>
|
||||
Object.prototype.hasOwnProperty.call(obj2, key)
|
||||
);
|
||||
|
||||
const commonProperties = getCommonProperties(animatedStyle, style || {});
|
||||
if (commonProperties.length > 0) {
|
||||
console.warn(
|
||||
`[Reanimated] ${
|
||||
commonProperties.length === 1 ? 'Property' : 'Properties: '
|
||||
} "${commonProperties}" of ${displayName} may be overwritten with layout animation. Please create a wrapper with the layout animation you want to apply.`
|
||||
if (__DEV__ && style) {
|
||||
const layoutAnimation = animationFactory(mockTargetValues);
|
||||
maybeReportOverwrittenProperties(
|
||||
layoutAnimation.animations,
|
||||
style,
|
||||
displayName
|
||||
);
|
||||
}
|
||||
|
||||
return layoutAnimationOrBuilder.build();
|
||||
return animationFactory;
|
||||
} else {
|
||||
return layoutAnimationOrBuilder;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user