From c9b373a4f46472a73f728c10a85d44aedba79793 Mon Sep 17 00:00:00 2001 From: Henrique Almeida Date: Mon, 15 May 2023 13:40:33 +0200 Subject: [PATCH] 7.0.8 --- CHANGELOG.md | 5 + package.json | 2 +- sandbox/src/shadow/index.tsx | 362 ++++++++++++++++++----------------- src/index.tsx | 362 ++++++++++++++++++----------------- 4 files changed, 372 insertions(+), 359 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2997e94..e0b28b2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +### 7.0.8 - 2023-05-15 + +- Fixed issue when the child size would change only one of its axis. [#72](https://github.com/SrBrahma/react-native-shadow-2/issues/72). +- As a minor performance improvement, now sides will only be rendered if they are known to be visible. Before, if your height was X and the topStart and bottomStart radii were each X/2, the left side would still be rendered even it having the size 0. + ### 7.0.7 - 2023-04-14 - Fixed X offset not working in iOS. [#65](https://github.com/SrBrahma/react-native-shadow-2/issues/65), [#67](https://github.com/SrBrahma/react-native-shadow-2/issues/67). Many thanks, [dmdmd](https://github.com/dmdmd) and [Youssef Henna](https://github.com/YoussefHenna)! diff --git a/package.json b/package.json index 968acf0..b01800b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-shadow-2", - "version": "7.0.7", + "version": "7.0.8", "description": "Cross-platform shadow for React Native. Improved version of the abandoned react-native-shadow package", "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/sandbox/src/shadow/index.tsx b/sandbox/src/shadow/index.tsx index 5671c5b..1e43917 100644 --- a/sandbox/src/shadow/index.tsx +++ b/sandbox/src/shadow/index.tsx @@ -326,12 +326,7 @@ function sanitizeRadii({ width: string | number; height: string | number; /** Not yet treated. May be negative / undefined */ - radii: { - topStart: number | undefined; - topEnd: number | undefined; - bottomStart: number | undefined; - bottomEnd: number | undefined; - }; + radii: Partial; }): CornerRadius { /** Round and zero negative radius values */ let radiiSanitized = objFromKeys(cornersArray, (k) => R(Math.max(radii[k] ?? 0, 0))); @@ -448,119 +443,120 @@ function getShadow({ const { topStartShadow, topEndShadow, bottomStartShadow, bottomEndShadow } = cornerShadowRadius; - return ( + /* Skip sides if we don't have a distance. */ + const sides = distance > 0 && ( <> - {/* Skip sides if we don't have a distance. */} - {distance > 0 && ( - <> - {/* Sides */} - {activeSides.start && ( - - - - {linearGradient} - - - {/* I was using a Mask here to remove part of each side (same size as now, sum of related corners), but, - just moving the rectangle outside its viewbox is already a mask!! -> svg overflow is cutten away. <- */} - - - )} - {activeSides.end && ( - - - - {linearGradient} - - - - - )} - {activeSides.top && ( - - - - {linearGradient} - - - - - )} - {activeSides.bottom && ( - topStart + bottomStart : true) && ( + + + + {linearGradient} + + + {/* I was using a Mask here to remove part of each side (same size as now, sum of related corners), but, + just moving the rectangle outside its viewbox is already a mask!! -> svg overflow is cutten away. <- */} + + + )} + {activeSides.end && (typeof height === 'number' ? height > topEnd + bottomEnd : true) && ( + + + - - - {linearGradient} - - - - - )} - + {linearGradient} + + + + )} + {activeSides.top && (typeof width === 'number' ? width > topStart + topEnd : true) && ( + + + + {linearGradient} + + + + + )} + {activeSides.bottom && + (typeof width === 'number' ? width > bottomStart + bottomEnd : true) && ( + + + + {linearGradient} + + + + + )} + + ); - {/* Corners */} - {/* The anchor for the svgs path is the top left point in the corner square. - The starting point is the clockwise external arc init point. */} - {/* Checking topLeftShadowEtc > 0 due to https://github.com/SrBrahma/react-native-shadow-2/issues/47. */} + /* The anchor for the svgs path is the top left point in the corner square. + The starting point is the clockwise external arc init point. */ + /* Checking topLeftShadowEtc > 0 due to https://github.com/SrBrahma/react-native-shadow-2/issues/47. */ + const corners = ( + <> {activeCorners.topStart && topStartShadow > 0 && ( )} + + ); - {/* Paint the inner area, so we can offset it. - [*2]: I tried redrawing the inner corner arc, but there would always be a small gap between the external shadows - and this internal shadow along the curve. So, instead we dont specify the inner arc on the corners when - paintBelow, but just use a square inner corner. And here we will just mask those squares in each corner. */} - {paintInside && ( - - {typeof width === 'number' && typeof height === 'number' ? ( - // Maybe due to how react-native-svg handles masks in iOS, the paintInside would have gaps: https://github.com/SrBrahma/react-native-shadow-2/issues/36 - // We use Path as workaround to it. - - ) : ( - <> - - - {/* Paint all white, then black on border external areas to erase them */} - - {/* Remove the corners */} - - - - - - + /** + * Paint the inner area, so we can offset it. + * [*2]: I tried redrawing the inner corner arc, but there would always be a small gap between the external shadows + * and this internal shadow along the curve. So, instead we dont specify the inner arc on the corners when + * paintBelow, but just use a square inner corner. And here we will just mask those squares in each corner. + */ + const inner = paintInside && ( + + {typeof width === 'number' && typeof height === 'number' ? ( + // Maybe due to how react-native-svg handles masks in iOS, the paintInside would have gaps: https://github.com/SrBrahma/react-native-shadow-2/issues/36 + // We use Path as workaround to it. + + ) : ( + <> + + + {/* Paint all white, then black on border external areas to erase them */} + + {/* Remove the corners */} + - - )} - + + + + + + )} + + ); + + return ( + <> + {sides} + {corners} + {inner} ); } diff --git a/src/index.tsx b/src/index.tsx index 5671c5b..1e43917 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -326,12 +326,7 @@ function sanitizeRadii({ width: string | number; height: string | number; /** Not yet treated. May be negative / undefined */ - radii: { - topStart: number | undefined; - topEnd: number | undefined; - bottomStart: number | undefined; - bottomEnd: number | undefined; - }; + radii: Partial; }): CornerRadius { /** Round and zero negative radius values */ let radiiSanitized = objFromKeys(cornersArray, (k) => R(Math.max(radii[k] ?? 0, 0))); @@ -448,119 +443,120 @@ function getShadow({ const { topStartShadow, topEndShadow, bottomStartShadow, bottomEndShadow } = cornerShadowRadius; - return ( + /* Skip sides if we don't have a distance. */ + const sides = distance > 0 && ( <> - {/* Skip sides if we don't have a distance. */} - {distance > 0 && ( - <> - {/* Sides */} - {activeSides.start && ( - - - - {linearGradient} - - - {/* I was using a Mask here to remove part of each side (same size as now, sum of related corners), but, - just moving the rectangle outside its viewbox is already a mask!! -> svg overflow is cutten away. <- */} - - - )} - {activeSides.end && ( - - - - {linearGradient} - - - - - )} - {activeSides.top && ( - - - - {linearGradient} - - - - - )} - {activeSides.bottom && ( - topStart + bottomStart : true) && ( + + + + {linearGradient} + + + {/* I was using a Mask here to remove part of each side (same size as now, sum of related corners), but, + just moving the rectangle outside its viewbox is already a mask!! -> svg overflow is cutten away. <- */} + + + )} + {activeSides.end && (typeof height === 'number' ? height > topEnd + bottomEnd : true) && ( + + + - - - {linearGradient} - - - - - )} - + {linearGradient} + + + + )} + {activeSides.top && (typeof width === 'number' ? width > topStart + topEnd : true) && ( + + + + {linearGradient} + + + + + )} + {activeSides.bottom && + (typeof width === 'number' ? width > bottomStart + bottomEnd : true) && ( + + + + {linearGradient} + + + + + )} + + ); - {/* Corners */} - {/* The anchor for the svgs path is the top left point in the corner square. - The starting point is the clockwise external arc init point. */} - {/* Checking topLeftShadowEtc > 0 due to https://github.com/SrBrahma/react-native-shadow-2/issues/47. */} + /* The anchor for the svgs path is the top left point in the corner square. + The starting point is the clockwise external arc init point. */ + /* Checking topLeftShadowEtc > 0 due to https://github.com/SrBrahma/react-native-shadow-2/issues/47. */ + const corners = ( + <> {activeCorners.topStart && topStartShadow > 0 && ( )} + + ); - {/* Paint the inner area, so we can offset it. - [*2]: I tried redrawing the inner corner arc, but there would always be a small gap between the external shadows - and this internal shadow along the curve. So, instead we dont specify the inner arc on the corners when - paintBelow, but just use a square inner corner. And here we will just mask those squares in each corner. */} - {paintInside && ( - - {typeof width === 'number' && typeof height === 'number' ? ( - // Maybe due to how react-native-svg handles masks in iOS, the paintInside would have gaps: https://github.com/SrBrahma/react-native-shadow-2/issues/36 - // We use Path as workaround to it. - - ) : ( - <> - - - {/* Paint all white, then black on border external areas to erase them */} - - {/* Remove the corners */} - - - - - - + /** + * Paint the inner area, so we can offset it. + * [*2]: I tried redrawing the inner corner arc, but there would always be a small gap between the external shadows + * and this internal shadow along the curve. So, instead we dont specify the inner arc on the corners when + * paintBelow, but just use a square inner corner. And here we will just mask those squares in each corner. + */ + const inner = paintInside && ( + + {typeof width === 'number' && typeof height === 'number' ? ( + // Maybe due to how react-native-svg handles masks in iOS, the paintInside would have gaps: https://github.com/SrBrahma/react-native-shadow-2/issues/36 + // We use Path as workaround to it. + + ) : ( + <> + + + {/* Paint all white, then black on border external areas to erase them */} + + {/* Remove the corners */} + - - )} - + + + + + + )} + + ); + + return ( + <> + {sides} + {corners} + {inner} ); }