Skip to content

Commit

Permalink
7.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
ftzi committed May 26, 2024
1 parent d56aac0 commit f634f52
Show file tree
Hide file tree
Showing 6 changed files with 53 additions and 73 deletions.
3 changes: 1 addition & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
node_modules
/lib
.vscode
docs
docs
5 changes: 5 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
### 7.1.0 - 2024-05-26

- Fixed pixel gap from top and bottom in rtl mode [#73](https://github.com/SrBrahma/react-native-shadow-2/pull/73). Thanks, [numandev1](https://github.com/numandev1)!

### 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).
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-shadow-2",
"version": "7.0.8",
"version": "7.1.0",
"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",
Expand Down
108 changes: 40 additions & 68 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -318,27 +318,23 @@ function ShadowInner(props: ShadowProps): JSX.Element {
}

/** We make some effort for this to be likely memoized */
function sanitizeRadii({
width,
height,
radii,
}: {
function sanitizeRadii(props: {
width: string | number;
height: string | number;
/** Not yet treated. May be negative / undefined */
radii: Partial<CornerRadius>;
}): CornerRadius {
/** Round and zero negative radius values */
let radiiSanitized = objFromKeys(cornersArray, (k) => R(Math.max(radii[k] ?? 0, 0)));
let radiiSanitized = objFromKeys(cornersArray, (k) => R(Math.max(props.radii[k] ?? 0, 0)));

if (typeof width === 'number' && typeof height === 'number') {
if (typeof props.width === 'number' && typeof props.height === 'number') {
// https://css-tricks.com/what-happens-when-border-radii-overlap/
// Note that the tutorial above doesn't mention the specification of minRatio < 1 but it's required as said on spec and will malfunction without it.
const minRatio = Math.min(
divDps(width, sumDps(radiiSanitized.topStart, radiiSanitized.topEnd)),
divDps(height, sumDps(radiiSanitized.topEnd, radiiSanitized.bottomEnd)),
divDps(width, sumDps(radiiSanitized.bottomStart, radiiSanitized.bottomEnd)),
divDps(height, sumDps(radiiSanitized.topStart, radiiSanitized.bottomStart)),
divDps(props.width, sumDps(radiiSanitized.topStart, radiiSanitized.topEnd)),
divDps(props.height, sumDps(radiiSanitized.topEnd, radiiSanitized.bottomEnd)),
divDps(props.width, sumDps(radiiSanitized.bottomStart, radiiSanitized.bottomEnd)),
divDps(props.height, sumDps(radiiSanitized.topStart, radiiSanitized.bottomStart)),
);

if (minRatio < 1)
Expand All @@ -363,7 +359,7 @@ function getShadow({
isRTL,
distanceProp = 10,
startColorProp = '#00000020',
endColorProp = colord(startColorProp).alpha(0).toHex(),
endColorProp,
topStart,
topEnd,
bottomStart,
Expand Down Expand Up @@ -405,7 +401,7 @@ function getShadow({
const heightWithAdditional = typeof height === 'string' ? height : height + additional;

const startColord = colord(startColorProp);
const endColord = colord(endColorProp);
const endColord = endColorProp ? colord(endColorProp) : startColord.alpha(0);

// [*1]: Seems that SVG in web accepts opacity in hex color, but in mobile gradient doesn't.
// So we remove the opacity from the color, and only apply the opacity in stopOpacity, so in web
Expand Down Expand Up @@ -507,7 +503,7 @@ function getShadow({
style={{
position: 'absolute',
top: -distance,
start: topStart,
start: topStart + (isRTL ? 1 : 0),
...(isRTL && rtlScaleX),
}}
>
Expand All @@ -532,7 +528,7 @@ function getShadow({
style={{
position: 'absolute',
top: height,
start: bottomStart,
start: bottomStart + (isRTL ? 1 : 0),
...(isRTL && rtlScaleX),
}}
>
Expand Down Expand Up @@ -677,11 +673,9 @@ function getShadow({
<Path
fill={startColorWoOpacity}
fillOpacity={startColorOpacity}
d={`M0,${topStart} v${height - bottomStart - topStart} h${bottomStart} v${bottomStart} h${
width - bottomStart - bottomEnd
} v${-bottomEnd} h${bottomEnd} v${
-height + bottomEnd + topEnd
} h${-topEnd} v${-topEnd} h${-width + topStart + topEnd} v${topStart} Z`}
d={`M0,${topStart} v${height - bottomStart - topStart} h${bottomStart} v${bottomStart} h${width - bottomStart - bottomEnd
} v${-bottomEnd} h${bottomEnd} v${-height + bottomEnd + topEnd
} h${-topEnd} v${-topEnd} h${-width + topStart + topEnd} v${topStart} Z`}
/>
) : (
<>
Expand Down Expand Up @@ -736,22 +730,7 @@ function getShadow({
);
}

function getResult({
shadow,
stretch,
containerStyle,
children,
style,
radii,
offset,
containerViewProps,
shadowViewProps,
childrenViewProps,
styleWidth,
styleHeight,
childLayout,
setChildLayout,
}: {
function getResult(props: {
radii: CornerRadius;
containerStyle: StyleProp<ViewStyle>;
shadow: JSX.Element | null;
Expand All @@ -773,34 +752,34 @@ function getResult({

return (
// pointerEvents: https://github.com/SrBrahma/react-native-shadow-2/issues/24
<View style={containerStyle} pointerEvents='box-none' {...containerViewProps}>
<View style={props.containerStyle} pointerEvents='box-none' {...props.containerViewProps}>
<View
pointerEvents='none'
{...shadowViewProps}
{...props.shadowViewProps}
style={[
rtlAbsoluteFillObject,
shadowViewProps?.style,
{ start: offset[0], top: offset[1] },
props.shadowViewProps?.style,
{ start: props.offset[0], top: props.offset[1] },
]}
>
{shadow}
{props.shadow}
</View>
<View
pointerEvents='box-none'
style={[
{
// We are defining here the radii so when using radius props it also affects the backgroundColor and Pressable ripples are properly contained.
// Note that topStart/etc has priority over topLeft/etc. We use topLeft so the user may overwrite it with topLeft or topStart styles.
borderTopLeftRadius: radii.topStart,
borderTopRightRadius: radii.topEnd,
borderBottomLeftRadius: radii.bottomStart,
borderBottomRightRadius: radii.bottomEnd,
borderTopLeftRadius: props.radii.topStart,
borderTopRightRadius: props.radii.topEnd,
borderBottomLeftRadius: props.radii.bottomStart,
borderBottomRightRadius: props.radii.bottomEnd,
alignSelf: 'flex-start', // Default to 'flex-start' instead of 'stretch'.
},
style,
props.style,
// Without alignSelf: 'flex-start', if your Shadow component had a sibling under the same View, the shadow would try to have the same size of the sibling,
// being it for example a text below the shadowed component. https://imgur.com/a/V6ZV0lI, https://github.com/SrBrahma/react-native-shadow-2/issues/7#issuecomment-899764882
{ ...(stretch && { alignSelf: 'stretch' }) },
{ ...(props.stretch && { alignSelf: 'stretch' }) },
]}
onLayout={(e) => {
// For some reason, conditionally setting the onLayout wasn't working on condition change.
Expand All @@ -809,31 +788,24 @@ function getResult({
const eventLayout = e.nativeEvent.layout;
// Change layout state if the style width/height is undefined or 'x%', or the sizes in pixels are different.
if (
(typeof styleWidth !== 'number' &&
(childLayout?.width === undefined ||
P(eventLayout.width) !== P(childLayout.width))) ||
(typeof styleHeight !== 'number' &&
(childLayout?.height === undefined ||
P(eventLayout.height) !== P(childLayout.height)))
(typeof props.styleWidth !== 'number' &&
(props.childLayout?.width === undefined ||
P(eventLayout.width) !== P(props.childLayout.width))) ||
(typeof props.styleHeight !== 'number' &&
(props.childLayout?.height === undefined ||
P(eventLayout.height) !== P(props.childLayout.height)))
)
setChildLayout({ width: eventLayout.width, height: eventLayout.height });
props.setChildLayout({ width: eventLayout.width, height: eventLayout.height });
}}
{...childrenViewProps}
{...props.childrenViewProps}
>
{children}
{props.children}
</View>
</View>
);
}

function DisabledShadow({
stretch,
containerStyle,
children,
style,
childrenViewProps,
containerViewProps,
}: {
function DisabledShadow(props: {
containerStyle?: StyleProp<ViewStyle>;
children?: any;
style?: StyleProp<ViewStyle>;
Expand All @@ -842,13 +814,13 @@ function DisabledShadow({
childrenViewProps?: ViewProps;
}): JSX.Element {
return (
<View style={containerStyle} pointerEvents='box-none' {...containerViewProps}>
<View style={props.containerStyle} pointerEvents='box-none' {...props.containerViewProps}>
<View
pointerEvents='box-none'
{...childrenViewProps}
style={[style, { ...(stretch && { alignSelf: 'stretch' }) }]}
{...props.childrenViewProps}
style={[props.style, { ...(props.stretch && { alignSelf: 'stretch' }) }]}
>
{children}
{props.children}
</View>
</View>
);
Expand Down

0 comments on commit f634f52

Please sign in to comment.