object style radial gradient js

Author: intergalacticspacehighway

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

@@ -734,12 +734,23 @@ type LinearGradientValue = {
 };
 
 type RadialExtent =
-  'closest-corner | closest-side | farthest-corner | farthest-side';
+  | 'closest-corner'
+  | 'closest-side'
+  | 'farthest-corner'
+  | 'farthest-side';
 type RadialGradientValue = {
   type: 'radialGradient',
   shape: 'circle' | 'ellipse',
-  size: RadialExtent | [number, number] | [string, string],
-  position: [number, number] | [string, string],
+  size:
+    | RadialExtent
+    | {
+        x: number | string,
+        y: number | string,
+      },
+  position: {
+    x: number | string,
+    y: number | string,
+  },
   direction?: string,
   colorStops: $ReadOnlyArray<{
     color: ____ColorValue_Internal,

packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-test.js

@@ -891,4 +891,49 @@ describe('processBackgroundImage', () => {
       {color: processColor('blue'), position: 40},
     ]);
   });
+
+  it('should process radial gradient object syntax', () => {
+    const input = [
+      {
+        type: 'radialGradient',
+        shape: 'circle',
+        colorStops: [
+          {color: 'red', positions: ['10%', 20]},
+          {color: 'blue', positions: ['30%', 40]},
+        ],
+        position: {x: '50%', y: 50},
+        size: 'closest-side',
+      },
+      {
+        type: 'radialGradient',
+        shape: 'circle',
+        colorStops: [
+          {color: 'red', positions: ['10%', 20]},
+          {color: 'blue', positions: ['30%', 40]},
+        ],
+        position: {x: '50%', y: 50},
+        size: {
+          x: 100,
+          y: 100,
+        },
+      },
+    ];
+    const result = processBackgroundImage(input);
+    expect(result[0].colorStops).toEqual([
+      {color: processColor('red'), position: '10%'},
+      {color: processColor('red'), position: 20},
+      {color: processColor('blue'), position: '30%'},
+      {color: processColor('blue'), position: 40},
+    ]);
+    expect(result[0].position).toEqual({x: '50%', y: 50});
+    expect(result[0].size).toEqual({type: 'keyword', value: 'closest-side'});
+    expect(result[0].shape).toEqual('circle');
+    expect(result[0].type).toEqual('radialGradient');
+
+    expect(result[1].size).toEqual({
+      type: 'dimensions',
+      x: 100,
+      y: 100,
+    });
+  });
 });

packages/react-native/Libraries/StyleSheet/processBackgroundImage.js

@@ -39,17 +39,40 @@ type LinearGradientBackgroundImage = {
 
 // Radial Gradient
 const RADIAL_SHAPE_REGEX = /^(circle|ellipse)(?:\s|$)/i;
-const RADIAL_SIZE_REGEX =
-  /^(closest-side|closest-corner|farthest-side|farthest-corner|([+-]?\d*\.?\d+)(px|%)?)/i;
-const RADIAL_POSITION_REGEX =
-  /^(?:at\s+)?(center|top|right|bottom|left|([+-]?\d*\.?\d+)(px|%)?)(?:\s+(center|top|right|bottom|left|([+-]?\d*\.?\d+)(px|%)?))?/i;
+const DEFAULT_RADIAL_SHAPE = 'ellipse';
+const DEFAULT_RADIAL_SIZE = {
+  type: 'keyword',
+  value: 'farthest-corner',
+};
+const DEFAULT_RADIAL_POSITION = {
+  x: '50%',
+  y: '50%',
+};
 type RadialExtent =
-  'closest-corner | closest-side | farthest-corner | farthest-side';
+  | 'closest-corner'
+  | 'closest-side'
+  | 'farthest-corner'
+  | 'farthest-side';
+type RadialGradientSize =
+  | {
+      type: 'keyword',
+      value: RadialExtent,
+    }
+  | {
+      type: 'dimensions',
+      x: string | number,
+      y: string | number,
+    };
+type RadialGradientShape = 'circle' | 'ellipse';
+type RadialGradientPosition = {
+  x: number | string,
+  y: number | string,
+};
 type RadialGradientBackgroundImage = {
   type: 'radialGradient',
-  shape: 'circle' | 'ellipse',
-  size: RadialExtent | number | string,
-  position: string,
+  shape: RadialGradientShape,
+  size: RadialGradientSize,
+  position: RadialGradientPosition,
   colorStops: $ReadOnlyArray<{
     color: ColorStopColor,
     position: ColorStopPosition,
@@ -121,11 +144,57 @@ export default function processBackgroundImage(
           colorStops: processedColorStops,
         });
       } else if (bgImage.type === 'radialGradient') {
+        let shape: RadialGradientShape = DEFAULT_RADIAL_SHAPE;
+        let size: RadialGradientSize = DEFAULT_RADIAL_SIZE;
+        let position: RadialGradientPosition = DEFAULT_RADIAL_POSITION;
+
+        if (
+          bgImage.shape != null &&
+          (bgImage.shape === 'circle' || bgImage.shape === 'ellipse')
+        ) {
+          shape = bgImage.shape;
+        } else {
+          // If the shape is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
+        }
+
+        if (bgImage.size != null) {
+          if (
+            typeof bgImage.size === 'string' &&
+            (bgImage.size === 'closest-side' ||
+              bgImage.size === 'closest-corner' ||
+              bgImage.size === 'farthest-side' ||
+              bgImage.size === 'farthest-corner')
+          ) {
+            size = {
+              type: 'keyword',
+              value: bgImage.size,
+            };
+          } else if (
+            typeof bgImage.size === 'object' &&
+            bgImage.size.x != null &&
+            bgImage.size.y != null
+          ) {
+            size = {
+              type: 'dimensions',
+              x: bgImage.size.x,
+              y: bgImage.size.y,
+            };
+          } else {
+            // If the size is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+        }
+
+        if (bgImage.position != null) {
+          position = bgImage.position;
+        }
+
         result = result.concat({
           type: 'radialGradient',
-          shape: 'circle',
-          size: 'closest-corner',
-          position: 'center',
+          shape,
+          size,
+          position,
           colorStops: processedColorStops,
         });
       }
@@ -225,14 +294,21 @@ function parseBackgroundImageCSSString(
 }
 
 function parseRadialGradientCSSString(
-  cssString: string,
-): RadialGradientBackgroundImage {
+  gradientContent: string,
+): RadialGradientBackgroundImage | null {
+  let shape = DEFAULT_RADIAL_SHAPE;
+  let size: RadialGradientSize = DEFAULT_RADIAL_SIZE;
+  let position: RadialGradientPosition = DEFAULT_RADIAL_POSITION;
+  const colorStops: Array<{
+    color: ColorStopColor,
+    position: ColorStopPosition,
+  }> = [];
   return {
     type: 'radialGradient',
-    shape: 'circle',
-    size: 'closest-corner',
-    position: 'center',
-    colorStops: [],
+    shape,
+    size,
+    position,
+    colorStops,
   };
 }