Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fabric] Enable ShadowProps for all Fabric Components #12108

Merged
merged 3 commits into from
Sep 6, 2023
Merged

[Fabric] Enable ShadowProps for all Fabric Components #12108

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bbfa5bb
extract shadow properties to baseComponentView
TatianaKapos Sep 5, 2023
a092e89
Change files
TatianaKapos Sep 5, 2023
a886a1b
Change to updateShadowProps
TatianaKapos Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-cc839d12-f772-4086-889e-cea33545830b.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "extract shadow properties to baseComponentView",
"packageName": "react-native-windows",
"email": "tatianakapos@microsoft.com",
"dependentChangeType": "patch"
}
32 changes: 19 additions & 13 deletions vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1060,6 +1060,24 @@ void CompositionBaseComponentView::updateBorderProps(
}
}

void CompositionBaseComponentView::updateStyleProps(
TatianaKapos marked this conversation as resolved.
Show resolved Hide resolved
const facebook::react::ViewProps &oldViewProps,
const facebook::react::ViewProps &newViewProps,
winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual) noexcept {
// Shadow Properties
if (oldViewProps.shadowOffset != newViewProps.shadowOffset || oldViewProps.shadowColor != newViewProps.shadowColor ||
oldViewProps.shadowOpacity != newViewProps.shadowOpacity ||
oldViewProps.shadowRadius != newViewProps.shadowRadius) {
auto shadow = m_compContext.CreateDropShadow();
shadow.Offset({newViewProps.shadowOffset.width, newViewProps.shadowOffset.height, 0});
shadow.Opacity(newViewProps.shadowOpacity);
shadow.BlurRadius(newViewProps.shadowRadius);
if (newViewProps.shadowColor)
shadow.Color(newViewProps.shadowColor.AsWindowsColor());
m_visual.Shadow(shadow);
}
}

void CompositionBaseComponentView::updateAccessibilityProps(
const facebook::react::ViewProps &oldViewProps,
const facebook::react::ViewProps &newViewProps) noexcept {
Expand Down Expand Up @@ -1288,19 +1306,7 @@ void CompositionViewComponentView::updateProps(

updateAccessibilityProps(oldViewProps, newViewProps);
updateBorderProps(oldViewProps, newViewProps);

// Shadow
if (oldViewProps.shadowOffset != newViewProps.shadowOffset || oldViewProps.shadowColor != newViewProps.shadowColor ||
oldViewProps.shadowOpacity != newViewProps.shadowOpacity ||
oldViewProps.shadowRadius != newViewProps.shadowRadius) {
auto shadow = m_compContext.CreateDropShadow();
shadow.Offset({newViewProps.shadowOffset.width, newViewProps.shadowOffset.height, 0});
shadow.Opacity(newViewProps.shadowOpacity);
shadow.BlurRadius(newViewProps.shadowRadius);
if (newViewProps.shadowColor)
shadow.Color(newViewProps.shadowColor.AsWindowsColor());
m_visual.Shadow(shadow);
}
updateStyleProps(oldViewProps, newViewProps, m_visual);
TatianaKapos marked this conversation as resolved.
Show resolved Hide resolved

if (oldViewProps.backfaceVisibility != newViewProps.backfaceVisibility) {
static_assert(
Expand Down
4 changes: 4 additions & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ struct CompositionBaseComponentView : public IComponentView,
void updateBorderProps(
const facebook::react::ViewProps &oldViewProps,
const facebook::react::ViewProps &newViewProps) noexcept;
void updateStyleProps(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this should be called updateShadowProps, since that what it seems to handle. -- There are a lot of style props.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, best to keep them in groupings so we have view components can be more granular about opting-in.

TatianaKapos marked this conversation as resolved.
Show resolved Hide resolved
const facebook::react::ViewProps &oldViewProps,
const facebook::react::ViewProps &newViewProps,
winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual) noexcept;
void updateAccessibilityProps(
const facebook::react::ViewProps &oldView,
const facebook::react::ViewProps &newViewProps) noexcept;
Expand Down
1 change: 1 addition & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ void ImageComponentView::updateProps(

ensureVisual();

updateStyleProps(oldImageProps, newImageProps, m_visual);
TatianaKapos marked this conversation as resolved.
Show resolved Hide resolved
updateBorderProps(oldImageProps, newImageProps);

if (oldImageProps.backgroundColor != newImageProps.backgroundColor ||
Expand Down
1 change: 1 addition & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ void ParagraphComponentView::updateProps(
updateTextAlignment(newViewProps.textAttributes.alignment);
}

updateStyleProps(oldViewProps, newViewProps, m_visual);
TatianaKapos marked this conversation as resolved.
Show resolved Hide resolved
updateAccessibilityProps(oldViewProps, newViewProps);
updateBorderProps(oldViewProps, newViewProps);

Expand Down
1 change: 1 addition & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ void ScrollViewComponentView::updateProps(
}
*/

updateStyleProps(oldViewProps, newViewProps, m_visual);
TatianaKapos marked this conversation as resolved.
Show resolved Hide resolved
updateBorderProps(oldViewProps, newViewProps);
m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
}
Expand Down
2 changes: 1 addition & 1 deletion vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
void updateContentVisualSize() noexcept;

facebook::react::Size m_contentSize;
winrt::Microsoft::ReactNative::Composition::IVisual m_visual{nullptr};
winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@acoates-ms Every other component m_visual was a ISpriteVisual, so changed ScrollView's to match and it seemed to not affect anything on rnTester. Let me know if there was a reason for having this as a IVisual though and I can change it back!

winrt::Microsoft::ReactNative::Composition::IScrollVisual m_scrollVisual{nullptr};
winrt::Microsoft::ReactNative::Composition::IScrollVisual::ScrollPositionChanged_revoker
m_scrollPositionChangedRevoker{};
Expand Down
1 change: 1 addition & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ void SwitchComponentView::updateProps(
m_drawingSurface = nullptr;
}

updateStyleProps(oldViewProps, newViewProps, m_visual);
TatianaKapos marked this conversation as resolved.
Show resolved Hide resolved
updateBorderProps(oldViewProps, newViewProps);
m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
}
Expand Down
1 change: 1 addition & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -608,6 +608,7 @@ void WindowsTextInputComponentView::updateProps(

ensureVisual();

updateStyleProps(oldTextInputProps, newTextInputProps, m_visual);
TatianaKapos marked this conversation as resolved.
Show resolved Hide resolved
updateBorderProps(oldTextInputProps, newTextInputProps);

if (!facebook::react::floatEquality(
Expand Down