Skip to content

Commit 1a34b97

Browse files
intergalacticspacehighwayintergalacticspacehighway
committed
more cleanup
1 parent 929af3c commit 1a34b97

File tree

2 files changed

+108
-83
lines changed

2 files changed

+108
-83
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -733,7 +733,8 @@ type LinearGradientValue = {
733733
}>,
734734
};
735735

736-
type RadialExtent = 'closest-corner | closest-side | farthest-corner | farthest-side'
736+
type RadialExtent =
737+
'closest-corner | closest-side | farthest-corner | farthest-side';
737738
type RadialGradientValue = {
738739
type: 'radialGradient',
739740
shape: 'circle' | 'ellipse',

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

Lines changed: 106 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -77,102 +77,126 @@ export default function processBackgroundImage(
7777
result = parseBackgroundImageCSSString(backgroundImage.replace(/\n/g, ' '));
7878
} else if (Array.isArray(backgroundImage)) {
7979
for (const bgImage of backgroundImage) {
80-
const processedColorStops: Array<{
81-
color: ColorStopColor,
82-
position: ColorStopPosition,
83-
}> = [];
84-
for (let index = 0; index < bgImage.colorStops.length; index++) {
85-
const colorStop = bgImage.colorStops[index];
86-
const positions = colorStop.positions;
87-
// Color transition hint syntax (red, 20%, blue)
88-
if (
89-
colorStop.color == null &&
90-
Array.isArray(positions) &&
91-
positions.length === 1
92-
) {
93-
const position = positions[0];
80+
const processedColorStops = processColorStops(bgImage);
81+
if (processedColorStops == null) {
82+
// If a color stop is invalid, return an empty array and do not apply any gradient. Same as web.
83+
return [];
84+
}
85+
86+
if (bgImage.type === 'linearGradient') {
87+
let direction: LinearGradientDirection =
88+
LINEAR_GRADIENT_DEFAULT_DIRECTION;
89+
const bgDirection =
90+
bgImage.direction != null ? bgImage.direction.toLowerCase() : null;
91+
92+
if (bgDirection != null) {
93+
if (LINEAR_GRADIENT_ANGLE_UNIT_REGEX.test(bgDirection)) {
94+
const parsedAngle = getAngleInDegrees(bgDirection);
95+
if (parsedAngle != null) {
96+
direction = {
97+
type: 'angle',
98+
value: parsedAngle,
99+
};
100+
} else {
101+
// If an angle is invalid, return an empty array and do not apply any gradient. Same as web.
102+
return [];
103+
}
104+
} else if (LINEAR_GRADIENT_DIRECTION_REGEX.test(bgDirection)) {
105+
const parsedDirection = getDirectionForKeyword(bgDirection);
106+
if (parsedDirection != null) {
107+
direction = parsedDirection;
108+
} else {
109+
// If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
110+
return [];
111+
}
112+
} else {
113+
// If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
114+
return [];
115+
}
116+
}
117+
118+
result = result.concat({
119+
type: 'linearGradient',
120+
direction,
121+
colorStops: processedColorStops,
122+
});
123+
} else if (bgImage.type === 'radialGradient') {
124+
result = result.concat({
125+
type: 'radialGradient',
126+
shape: 'circle',
127+
size: 'closest-corner',
128+
position: 'center',
129+
colorStops: processedColorStops,
130+
});
131+
}
132+
}
133+
}
134+
135+
return result;
136+
}
137+
138+
function processColorStops(bgImage: BackgroundImageValue): $ReadOnlyArray<{
139+
color: ColorStopColor,
140+
position: ColorStopPosition,
141+
}> | null {
142+
const processedColorStops: Array<{
143+
color: ColorStopColor,
144+
position: ColorStopPosition,
145+
}> = [];
146+
147+
for (let index = 0; index < bgImage.colorStops.length; index++) {
148+
const colorStop = bgImage.colorStops[index];
149+
const positions = colorStop.positions;
150+
// Color transition hint syntax (red, 20%, blue)
151+
if (
152+
colorStop.color == null &&
153+
Array.isArray(positions) &&
154+
positions.length === 1
155+
) {
156+
const position = positions[0];
157+
if (
158+
typeof position === 'number' ||
159+
(typeof position === 'string' && position.endsWith('%'))
160+
) {
161+
processedColorStops.push({
162+
color: null,
163+
position,
164+
});
165+
} else {
166+
// If a position is invalid, return null and do not apply gradient. Same as web.
167+
return null;
168+
}
169+
} else {
170+
const processedColor = processColor(colorStop.color);
171+
if (processedColor == null) {
172+
// If a color is invalid, return null and do not apply gradient. Same as web.
173+
return null;
174+
}
175+
if (positions != null && positions.length > 0) {
176+
for (const position of positions) {
94177
if (
95178
typeof position === 'number' ||
96179
(typeof position === 'string' && position.endsWith('%'))
97180
) {
98-
processedColorStops.push({
99-
color: null,
100-
position,
101-
});
102-
} else {
103-
// If a position is invalid, return an empty array and do not apply gradient. Same as web.
104-
return [];
105-
}
106-
} else {
107-
const processedColor = processColor(colorStop.color);
108-
if (processedColor == null) {
109-
// If a color is invalid, return an empty array and do not apply gradient. Same as web.
110-
return [];
111-
}
112-
if (positions != null && positions.length > 0) {
113-
for (const position of positions) {
114-
if (
115-
typeof position === 'number' ||
116-
(typeof position === 'string' && position.endsWith('%'))
117-
) {
118-
processedColorStops.push({
119-
color: processedColor,
120-
position,
121-
});
122-
} else {
123-
// If a position is invalid, return an empty array and do not apply gradient. Same as web.
124-
return [];
125-
}
126-
}
127-
} else {
128181
processedColorStops.push({
129182
color: processedColor,
130-
position: null,
183+
position,
131184
});
132-
}
133-
}
134-
}
135-
136-
let direction: LinearGradientDirection =
137-
LINEAR_GRADIENT_DEFAULT_DIRECTION;
138-
const bgDirection =
139-
bgImage.direction != null ? bgImage.direction.toLowerCase() : null;
140-
141-
if (bgDirection != null) {
142-
if (LINEAR_GRADIENT_ANGLE_UNIT_REGEX.test(bgDirection)) {
143-
const parsedAngle = getAngleInDegrees(bgDirection);
144-
if (parsedAngle != null) {
145-
direction = {
146-
type: 'angle',
147-
value: parsedAngle,
148-
};
149-
} else {
150-
// If an angle is invalid, return an empty array and do not apply any gradient. Same as web.
151-
return [];
152-
}
153-
} else if (LINEAR_GRADIENT_DIRECTION_REGEX.test(bgDirection)) {
154-
const parsedDirection = getDirectionForKeyword(bgDirection);
155-
if (parsedDirection != null) {
156-
direction = parsedDirection;
157185
} else {
158-
// If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
159-
return [];
186+
// If a position is invalid, return null and do not apply gradient. Same as web.
187+
return null;
160188
}
161-
} else {
162-
// If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
163-
return [];
164189
}
190+
} else {
191+
processedColorStops.push({
192+
color: processedColor,
193+
position: null,
194+
});
165195
}
166-
167-
result = result.concat({
168-
type: 'linearGradient',
169-
direction,
170-
colorStops: processedColorStops,
171-
});
172196
}
173197
}
174198

175-
return result;
199+
return processedColorStops;
176200
}
177201

178202
function parseBackgroundImageCSSString(

0 commit comments

Comments
 (0)