zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-14 19:49:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

[change] Deprecate 'transform' style array syntax

Browse Source 
Use space-separated values per W3C standard.

Ref #2379
This commit is contained in:
Nicolas Gallagher
2022-11-28 12:38:17 -08:00
committed by Nicolas Gallagher
parent 5bc51420a8
commit 831f59e003
7 changed files with 37 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap
View File

@@ -2,7 +2,7 @@
exports[`components/ScrollView prop "centerContent" with 1`] = `
<div
class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx"
style="background-color: rgb(0, 0, 255);"
>
<div
@@ -13,7 +13,7 @@ exports[`components/ScrollView prop "centerContent" with 1`] = `
exports[`components/ScrollView prop "centerContent" without 1`] = `
<div
class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx"
style="background-color: rgb(0, 0, 255);"
>
<div
@@ -27,7 +27,7 @@ exports[`components/ScrollView prop "refreshControl" with 1`] = `
id="refresh-control"
>
<div
class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx"
style="background-color: rgb(255, 0, 0);"
>
<div
@@ -39,7 +39,7 @@ exports[`components/ScrollView prop "refreshControl" with 1`] = `
exports[`components/ScrollView prop "refreshControl" without 1`] = `
<div
class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx"
style="background-color: rgb(255, 0, 0);"
>
<div

2
packages/react-native-web/src/exports/ScrollView/index.js vendored
View File

@@ -729,7 +729,7 @@ const commonStyle = {
// Enable hardware compositing in modern browsers.
// Creates a new layer with its own backing surface that can significantly
// improve scroll performance.
transform: [{ translateZ: 0 }],
transform: 'translateZ(0)',
// iOS native scrolling
WebkitOverflowScrolling: 'touch'
};

20
packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js vendored
View File

@@ -25,12 +25,7 @@ describe('StyleSheet/compile', () => {
pointerEvents: 'box-only',
start: '12.34%',
textAlign: 'start',
transform: [
{
translateX: 50,
scale: -1
}
]
transform: 'translateX(50px) scale(-1)'
});
expect(result).toMatchInlineSnapshot(`
@@ -61,7 +56,7 @@ describe('StyleSheet/compile', () => {
"r-textAlign-fdjqy7",
"r-textAlign-1ff274t",
],
"transform": "r-transform-1ehiua4",
"transform": "r-transform-d7xd9i",
},
[
[
@@ -165,7 +160,7 @@ describe('StyleSheet/compile', () => {
],
[
[
".r-transform-1ehiua4{transform:translateX(50px);}",
".r-transform-d7xd9i{transform:translateX(50px) scale(-1);}",
],
2.2,
],
@@ -179,19 +174,14 @@ describe('StyleSheet/compile', () => {
test('converts style to classic CSS', () => {
const result = classic(
{
animationDirection: ['alternate', 'alternate-reverse'],
animationDirection: 'alternate,alternate-reverse',
animationKeyframes: [
{ '0%': { top: 0 }, '50%': { top: 5 }, '100%': { top: 10 } },
{ from: { left: 0 }, to: { left: 10 } }
],
marginHorizontal: 10,
font: '14px System',
transform: [
{
translateX: 50,
scale: -1
}
]
transform: 'translateX(50px) scale(-1)'
},
'text'
);

4
packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js vendored
View File

@@ -99,6 +99,10 @@ const mapTransform = (transform: Object): string => {
export const createTransformValue = (style: Style): string => {
let transform = style.transform;
if (Array.isArray(style.transform)) {
warnOnce(
'transform',
'"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".'
);
transform = style.transform.map(mapTransform).join(' ');
}
return transform;

4
packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap
View File

@@ -9,7 +9,7 @@ exports[`components/Switch disabled when "true" and value="false", a disabled ch
exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided thumbColor 1`] = `
<div
class="css-view-175oi2r r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-left-1fe0xdi r-transform-1sncvnh r-transitionDuration-13tjlyg"
class="css-view-175oi2r r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-left-1fe0xdi r-transform-agouwx r-transitionDuration-13tjlyg"
style="background-color: rgb(255, 255, 255); height: 20px; margin-left: 0px; width: 20px;"
/>
`;
@@ -23,7 +23,7 @@ exports[`components/Switch disabled when "true" and value="false", a disabled ch
exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor 1`] = `
<div
class="css-view-175oi2r r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-transform-1sncvnh r-transitionDuration-13tjlyg r-left-7b7h2f"
class="css-view-175oi2r r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-transform-agouwx r-transitionDuration-13tjlyg r-left-7b7h2f"
style="background-color: rgb(255, 255, 255); height: 20px; margin-left: -20px; width: 20px;"
/>
`;

2
packages/react-native-web/src/exports/Switch/index.js vendored
View File

@@ -214,7 +214,7 @@ const styles = StyleSheet.create({
borderRadius: '100%',
boxShadow: thumbDefaultBoxShadow,
start: '0%',
transform: [{ translateZ: 0 }],
transform: 'translateZ(0)',
transitionDuration: '0.1s'
},
thumbActive: {

38
packages/react-native-web/src/types/styles.js vendored
View File

@@ -270,24 +270,26 @@ export type ShadowStyles = {|
export type TransformStyles = {|
perspective?: ?NumberOrString,
perspectiveOrigin?: ?string,
transform?: Array<
| {| +perspective: NumberOrString |}
| {| +rotate: string |}
| {| +rotateX: string |}
| {| +rotateY: string |}
| {| +rotateZ: string |}
| {| +scale: number |}
| {| +scaleX: number |}
| {| +scaleY: number |}
| {| +scaleZ: number |}
| {| +scale3d: string |}
| {| +skewX: string |}
| {| +skewY: string |}
| {| +translateX: NumberOrString |}
| {| +translateY: NumberOrString |}
| {| +translateZ: NumberOrString |}
| {| +translate3d: string |}
>,
transform?:
| ?string
| Array<
| {| +perspective: NumberOrString |}
| {| +rotate: string |}
| {| +rotateX: string |}
| {| +rotateY: string |}
| {| +rotateZ: string |}
| {| +scale: number |}
| {| +scaleX: number |}
| {| +scaleY: number |}
| {| +scaleZ: number |}
| {| +scale3d: string |}
| {| +skewX: string |}
| {| +skewY: string |}
| {| +translateX: NumberOrString |}
| {| +translateY: NumberOrString |}
| {| +translateZ: NumberOrString |}
| {| +translate3d: string |}
>,
transformOrigin?: ?string,
transformStyle?: ?('flat' | 'preserve-3d')
|};