fix: Correct types for transformsArrayToProps (#2193)

# Summary

Type TransformsStyle['transform'] has `string` added as option from
React Native 0.71.9 onward. This breaks the logic of
`transformsArrayToProps`.

This PR fixes this by scoping down the type, and removing a no-op usage
of `transformsArrayToProps`

This has been broken for a while, but not immediately visible to users
compiling using Metro and Babel.
This commit is contained in:
Frank Oppervoll-Larsen
2024-01-03 12:41:03 +01:00
committed by GitHub
parent 068820b3fa
commit 3939e2059e
+15 -16
View File
@@ -8,6 +8,8 @@ import type {
TransformProps, TransformProps,
} from './types'; } from './types';
type TransformsStyleArray = Exclude<TransformsStyle['transform'], string>;
function appendTransformProps(props: TransformedProps) { function appendTransformProps(props: TransformedProps) {
const { x, y, originX, originY, scaleX, scaleY, rotation, skewX, skewY } = const { x, y, originX, originY, scaleX, scaleY, rotation, skewX, skewY } =
props; props;
@@ -20,7 +22,7 @@ function appendTransformProps(props: TransformedProps) {
skewX, skewX,
skewY, skewY,
originX, originX,
originY, originY
); );
} }
@@ -28,7 +30,7 @@ function universal2axis(
universal: NumberProp | NumberProp[] | undefined, universal: NumberProp | NumberProp[] | undefined,
axisX: NumberProp | void, axisX: NumberProp | void,
axisY: NumberProp | void, axisY: NumberProp | void,
defaultValue?: number, defaultValue?: number
): [number, number] { ): [number, number] {
let x; let x;
let y; let y;
@@ -65,14 +67,14 @@ function universal2axis(
} }
export function transformsArrayToProps( export function transformsArrayToProps(
transformObjectsArray: TransformsStyle['transform'], transformObjectsArray: TransformsStyleArray
) { ) {
const props: TransformProps = {}; const props: TransformProps = {};
transformObjectsArray?.forEach((transformObject) => { transformObjectsArray?.forEach((transformObject) => {
const keys = Object.keys(transformObject); const keys = Object.keys(transformObject);
if (keys.length !== 1) { if (keys.length !== 1) {
console.error( console.error(
'You must specify exactly one property per transform object.', 'You must specify exactly one property per transform object.'
); );
} }
const key = keys[0] as keyof TransformProps; const key = keys[0] as keyof TransformProps;
@@ -83,14 +85,11 @@ export function transformsArrayToProps(
} }
export function props2transform( export function props2transform(
props: TransformProps | undefined, props: TransformProps | undefined
): TransformedProps | null { ): TransformedProps | null {
if (!props) { if (!props) {
return null; return null;
} }
const extractedProps = Array.isArray(props)
? transformsArrayToProps(props)
: props;
const { const {
rotation, rotation,
translate, translate,
@@ -107,7 +106,7 @@ export function props2transform(
skewY, skewY,
x, x,
y, y,
} = extractedProps; } = props;
if ( if (
rotation == null && rotation == null &&
translate == null && translate == null &&
@@ -130,13 +129,13 @@ export function props2transform(
if (Array.isArray(x) || Array.isArray(y)) { if (Array.isArray(x) || Array.isArray(y)) {
console.warn( console.warn(
'Passing SvgLengthList to x or y attribute where SvgLength expected', 'Passing SvgLengthList to x or y attribute where SvgLength expected'
); );
} }
const tr = universal2axis( const tr = universal2axis(
translate, translate,
translateX || (Array.isArray(x) ? x[0] : x), translateX || (Array.isArray(x) ? x[0] : x),
translateY || (Array.isArray(y) ? y[0] : y), translateY || (Array.isArray(y) ? y[0] : y)
); );
const or = universal2axis(origin, originX, originY); const or = universal2axis(origin, originX, originY);
const sc = universal2axis(scale, scaleX, scaleY, 1); const sc = universal2axis(scale, scaleX, scaleY, 1);
@@ -157,7 +156,7 @@ export function props2transform(
export function transformToMatrix( export function transformToMatrix(
props: TransformedProps | null, props: TransformedProps | null,
transform: TransformProps['transform'], transform: TransformProps['transform']
): ColumnMajorTransformMatrix | null { ): ColumnMajorTransformMatrix | null {
if (!props && !transform) { if (!props && !transform) {
return null; return null;
@@ -175,11 +174,11 @@ export function transformToMatrix(
columnMatrix[2], columnMatrix[2],
columnMatrix[3], columnMatrix[3],
columnMatrix[4], columnMatrix[4],
columnMatrix[5], columnMatrix[5]
); );
} else { } else {
const transformProps = props2transform( const transformProps = props2transform(
transformsArrayToProps(transform as TransformsStyle['transform']), transformsArrayToProps(transform as TransformsStyleArray)
); );
transformProps && appendTransformProps(transformProps); transformProps && appendTransformProps(transformProps);
} }
@@ -200,7 +199,7 @@ export function transformToMatrix(
} }
export default function extractTransform( export default function extractTransform(
props: TransformProps | TransformProps['transform'], props: TransformProps | TransformProps['transform']
): ColumnMajorTransformMatrix | null { ): ColumnMajorTransformMatrix | null {
if (Array.isArray(props) && typeof props[0] === 'number') { if (Array.isArray(props) && typeof props[0] === 'number') {
return props as ColumnMajorTransformMatrix; return props as ColumnMajorTransformMatrix;
@@ -219,6 +218,6 @@ export default function extractTransform(
const transformProps = props as TransformProps; const transformProps = props as TransformProps;
return transformToMatrix( return transformToMatrix(
props2transform(transformProps), props2transform(transformProps),
transformProps?.transform, transformProps?.transform
); );
} }