Skip to content

[RNMobile] Set tintColor for ActionSheetIOS #42996

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

Merged
dcalhoun merged 6 commits into from
Aug 8, 2022
Merged

[RNMobile] Set tintColor for ActionSheetIOS #42996

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b54def6
Set tintColor on action sheets for iOS
SiobhyB Aug 4, 2022
5cedf9b
[Code quality] Replace hex codes with CSS
SiobhyB Aug 5, 2022
de203bf
[Code quality] Refine 'buttonTitleColor' const
SiobhyB Aug 5, 2022
413c198
Refactor code to use 'usePreferredColorScheme'
SiobhyB Aug 5, 2022
f4610d1
Refactor to workaround test failures
SiobhyB Aug 5, 2022
d69a8ec
Merge branch 'trunk' of github.com:WordPress/gutenberg into rnmobile/…
dcalhoun Aug 8, 2022
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
Prev Previous commit
Next Next commit
Refactor to workaround test failures 
The UI tests in Gutenberg Mobile were failing as 'styles' returns 'undefined' (in the tests) when called from the 'PickerComponent' function. Example: https://app.circleci.com/pipelines/github/wordpress-mobile/gutenberg-mobile/18255/workflows/16df0260-7972-465b-b400-ec37603dfd9e/jobs/100060

This commit seeks to workaround that error by only calling the internal styles from the main Picker class.
  • Loading branch information
@SiobhyB
SiobhyB committed Aug 5, 2022
commit f4610d164a24e9882495ea9d86faea5d23971356
15 changes: 8 additions & 7 deletions packages/components/src/mobile/picker/index.ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,16 @@ class Picker extends Component {
isBottomSheetOpened,
closeBottomSheet,
onHandleClosingBottomSheet,
tintColor,
colorScheme,
} = this.props;
const labels = options.map( ( { label } ) => label );
const fullOptions = [ __( 'Cancel' ) ].concat( labels );

const buttonTitleColor =
colorScheme === 'light'
? styles[ 'components-picker__button-title' ].color
: styles[ 'components-picker__button-title--dark' ].color;

ActionSheetIOS.showActionSheetWithOptions(
{
title,
Expand All @@ -42,7 +47,7 @@ class Picker extends Component {
destructiveButtonIndex,
disabledButtonIndices,
anchor: getAnchor && getAnchor(),
tintColor,
tintColor: buttonTitleColor,
},
( buttonIndex ) => {
if ( buttonIndex === 0 ) {
Expand Down Expand Up @@ -75,10 +80,6 @@ const PickerComponent = forwardRef( ( props, ref ) => {
const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );

const colorScheme = usePreferredColorScheme();
const buttonTitleColor =
colorScheme === 'light'
? styles[ 'components-picker__button-title' ].color
: styles[ 'components-picker__button-title--dark' ].color;

return (
<Picker
Expand All @@ -87,7 +88,7 @@ const PickerComponent = forwardRef( ( props, ref ) => {
isBottomSheetOpened={ isBottomSheetOpened }
closeBottomSheet={ closeGeneralSidebar }
onHandleClosingBottomSheet={ onHandleClosingBottomSheet }
tintColor={ buttonTitleColor }
colorScheme={ colorScheme }
/>
);
} );
Expand Down