From 0aa77685aa50c816e1715673b7fa758b025c9dc0 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 19 Oct 2020 15:50:02 -0700
Subject: [PATCH] [fix] Add matrix transform style

Remove the deprecated 'transformMatrix' style prop and support 'matrix' and
'matrix3d' in the 'transform' prop.

Fix #1771
---
 .../__tests__/createReactDOMStyle-test.js     | 21 +++++++++----------
 .../exports/StyleSheet/createReactDOMStyle.js | 18 +++++++---------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
index 6c596e4a..c2d3d3c0 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
@@ -148,21 +148,20 @@ describe('StyleSheet/createReactDOMStyle', () => {
 
     test('array', () => {
       const style = {
-        transform: [{ perspective: 50 }, { scaleX: 20 }, { translateX: 20 }, { rotate: '20deg' }]
+        transform: [
+          { perspective: 50 },
+          { scaleX: 20 },
+          { translateX: 20 },
+          { rotate: '20deg' },
+          { matrix: [1, 2, 3, 4, 5, 6] },
+          { matrix3d: [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4] }
+        ]
       };
       const resolved = createReactDOMStyle(style);
 
       expect(resolved).toEqual({
-        transform: 'perspective(50px) scaleX(20) translateX(20px) rotate(20deg)'
-      });
-    });
-
-    test('transformMatrix', () => {
-      const style = { transformMatrix: [1, 2, 3, 4, 5, 6] };
-      const resolved = createReactDOMStyle(style);
-
-      expect(resolved).toEqual({
-        transform: 'matrix3d(1,2,3,4,5,6)'
+        transform:
+          'perspective(50px) scaleX(20) translateX(20px) rotate(20deg) matrix(1,2,3,4,5,6) matrix3d(1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4)'
       });
     });
   });
diff --git a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
index 36f2e613..0e955e38 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
@@ -37,24 +37,22 @@ const supportsCSS3TextDecoration =
 
 // { scale: 2 } => 'scale(2)'
 // { translateX: 20 } => 'translateX(20px)'
+// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
 const mapTransform = transform => {
   const type = Object.keys(transform)[0];
-  const value = normalizeValueWithProperty(transform[type], type);
-  return `${type}(${value})`;
-};
-
-// [1,2,3,4,5,6] => 'matrix3d(1,2,3,4,5,6)'
-const convertTransformMatrix = transformMatrix => {
-  const matrix = transformMatrix.join(',');
-  return `matrix3d(${matrix})`;
+  const value = transform[type];
+  if (type === 'matrix' || type === 'matrix3d') {
+    return `${type}(${value.join(',')})`;
+  } else {
+    const normalizedValue = normalizeValueWithProperty(value, type);
+    return `${type}(${normalizedValue})`;
+  }
 };
 
 const resolveTransform = (resolvedStyle, style) => {
   let transform = style.transform;
   if (Array.isArray(style.transform)) {
     transform = style.transform.map(mapTransform).join(' ');
-  } else if (style.transformMatrix) {
-    transform = convertTransformMatrix(style.transformMatrix);
   }
   resolvedStyle.transform = transform;
 };