mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-06-05 07:59:28 +00:00
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:
committed by
GitHub
parent
068820b3fa
commit
3939e2059e
@@ -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
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user