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.

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

Mobile Release v1.75.0 #40630

Merged
merged 20 commits into from
Apr 29, 2022
Merged
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
7473046
Release script: Update react-native-editor version to 1.74.0
Apr 14, 2022
6f89f35
Release script: Update with changes from 'npm run core preios'
Apr 14, 2022
f04c036
Update CHANGELOG
Apr 14, 2022
8787a69
Release script: Update react-native-editor version to 1.75.0
Apr 26, 2022
5651a1e
Commit changes from "npm run core preios"
Apr 26, 2022
cc03315
[RNMobile] Prevent unnecessary re-renders of RichText component due t…
fluiddot Apr 26, 2022
18483c0
Mobile - RichText - Set a default value for selectionStart / selectio…
Apr 26, 2022
68bf03d
Embed block: Fix inline preview cut-off when editing URL (#35326)
fluiddot Apr 19, 2022
b97f8d5
[RNMobile] Upgrade to AztecAndroid 1.5.7 (#40099)
mchowning Apr 15, 2022
7746f8c
Add constants file to Spacer block (#40446)
fluiddot Apr 20, 2022
1d6e193
Use CSS to transform text into title case (#40550)
Apr 25, 2022
fcb9abf
Mobile - Notice list - Updates the code with the following: (#40415)
Apr 20, 2022
4a11173
Mobile - Layout - Set a background color for the toolbar (#40266)
Apr 18, 2022
79c5553
[RNMobile] - Update tests with paragraph blocks to work on both envir…
jostnes Apr 27, 2022
ca3e18f
Mobile - HTML View - Add a top margin to avoid the tooltip overlappin…
Apr 27, 2022
4d91a1a
[RNMobile] Add featured image settings to the Latest Posts block (#39…
Apr 27, 2022
f7626e5
Update CHANGELOG with user-facing changes
Apr 28, 2022
72a45b9
Merge commit '04d733dd911874bc6aea5a01a437d0c136fa2137' into rnmobile…
mchowning Apr 28, 2022
a462c7e
Merge remote-tracking branch 'origin/trunk' into rnmobile/release_1.75.0
mchowning Apr 28, 2022
8aa2c93
Merge remote-tracking branch 'origin/trunk' into rnmobile/release_1.75.0
mchowning Apr 28, 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
Mobile - Notice list - Updates the code with the following: (#40415)
- Removes the shouldStack prop which is not used
- Stack all notices in the same position if there's more than one
- Refactor List component to functional component
- Fixes bug where the notices weren't getting removed
- Replace dimension listener with windowDimensions hook
  • Loading branch information
Gerardo Pacheco authored and Siobhan committed Apr 26, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit fcb9abfb6387ef59c36be1f8f92843ef7d4e8f41
98 changes: 44 additions & 54 deletions packages/components/src/notice/index.native.js
Original file line number Diff line number Diff line change
@@ -7,73 +7,63 @@ import {
Text,
TouchableWithoutFeedback,
View,
Dimensions,
Platform,
useWindowDimensions,
} from 'react-native';
import { BlurView } from '@react-native-community/blur';

/**
* WordPress dependencies
*/
import { useEffect, useRef, useState } from '@wordpress/element';
import { useEffect, useRef, Platform } from '@wordpress/element';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';

/**
* Internal dependencies
*/
import styles from './style.scss';

const Notice = ( { onNoticeHidden, content, id, status } ) => {
const [ width, setWidth ] = useState( Dimensions.get( 'window' ).width );
const [ visible, setVisible ] = useState( true );
const HIDE_TIMER = 3000;

const Notice = ( { onNoticeHidden, content, id, status } ) => {
const { width } = useWindowDimensions();
const animationValue = useRef( new Animated.Value( 0 ) ).current;
const timer = useRef( null );
const isIOS = Platform.OS === 'ios';

const onDimensionsChange = () => {
setWidth( Dimensions.get( 'window' ).width );
};

useEffect( () => {
const dimensionsChangeSubscription = Dimensions.addEventListener(
'change',
onDimensionsChange
);
return () => {
dimensionsChangeSubscription.remove();
};
}, [] );

useEffect( () => {
startAnimation();

return () => {
clearTimeout( timer?.current );
};
}, [ visible, id ] );
}, [] );

const onHide = () => {
setVisible( false );
};
function onHide() {
Animated.timing( animationValue, {
toValue: 0,
duration: 150,
useNativeDriver: true,
easing: Easing.out( Easing.quad ),
} ).start( ( { finished } ) => {
if ( finished && onNoticeHidden ) {
onNoticeHidden( id );
}
} );
}

const startAnimation = () => {
function startAnimation() {
Animated.timing( animationValue, {
toValue: visible ? 1 : 0,
duration: visible ? 300 : 150,
toValue: 1,
duration: 300,
useNativeDriver: true,
easing: Easing.out( Easing.quad ),
} ).start( () => {
if ( visible && onNoticeHidden ) {
} ).start( ( { finished } ) => {
if ( finished && onNoticeHidden ) {
timer.current = setTimeout( () => {
onHide();
}, 3000 );
}

if ( ! visible && onNoticeHidden ) {
onNoticeHidden( id );
}, HIDE_TIMER );
}
} );
};
}

const noticeSolidStyles = usePreferredColorSchemeStyle(
styles.noticeSolid,
@@ -95,33 +85,33 @@ const Notice = ( { onNoticeHidden, content, id, status } ) => {
status === 'error' && errorTextStyles,
];

const containerStyles = [
styles.notice,
! Platform.isIOS && noticeSolidStyles,
{
width,
transform: [
{
translateY: animationValue.interpolate( {
inputRange: [ 0, 1 ],
outputRange: [ -24, 0 ],
} ),
},
],
},
];

return (
<>
<Animated.View
style={ [
styles.notice,
! isIOS && noticeSolidStyles,
{
width,
transform: [
{
translateY: animationValue.interpolate( {
inputRange: [ 0, 1 ],
outputRange: [ -24, 0 ],
} ),
},
],
},
] }
>
<Animated.View style={ containerStyles }>
<TouchableWithoutFeedback onPress={ onHide }>
<View style={ styles.noticeContent }>
<Text numberOfLines={ 3 } style={ textStyles }>
{ content }
</Text>
</View>
</TouchableWithoutFeedback>
{ isIOS && (
{ Platform.isIOS && (
<BlurView
style={ styles.blurBackground }
blurType="prominent"
78 changes: 27 additions & 51 deletions packages/components/src/notice/list.native.js
Original file line number Diff line number Diff line change
@@ -6,70 +6,46 @@ import { View } from 'react-native';
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';

/**
* Internal dependencies
*/
import Notice from './';
import styles from './style.scss';

class NoticeList extends Component {
constructor() {
super( ...arguments );
this.removeNotice = this.removeNotice.bind( this );
}
function NoticeList() {
const { notices } = useSelect( ( select ) => {
const { getNotices } = select( noticesStore );
return {
notices: getNotices(),
};
}, [] );

removeNotice( id ) {
const { removeNotice } = this.props;
const { removeNotice } = useDispatch( noticesStore );

function onRemoveNotice( id ) {
removeNotice( id );
}

render() {
const { notices, shouldStack } = this.props;

if ( ! notices.length ) {
return null;
}
if ( ! notices.length ) {
return null;
}

return (
<View style={ styles.list } key={ notices.length }>
{ shouldStack ? (
notices
.reverse()
.map( ( notice ) => (
<Notice
{ ...notice }
key={ notice.id }
onNoticeHidden={ this.removeNotice }
></Notice>
) )
) : (
return (
<View style={ styles.list }>
{ notices.map( ( notice ) => {
return (
<Notice
{ ...notices[ notices.length - 1 ] }
onNoticeHidden={ this.removeNotice }
{ ...notice }
key={ notice.id }
onNoticeHidden={ onRemoveNotice }
></Notice>
) }
</View>
);
}
);
} ) }
</View>
);
}

export default compose( [
withSelect( ( select ) => {
const { getNotices } = select( 'core/notices' );

return {
notices: getNotices(),
};
} ),
withDispatch( ( dispatch ) => {
const { removeNotice } = dispatch( 'core/notices' );

return {
removeNotice,
};
} ),
] )( NoticeList );
export default NoticeList;
1 change: 1 addition & 0 deletions packages/components/src/notice/style.native.scss
Original file line number Diff line number Diff line change
@@ -33,6 +33,7 @@

.notice {
justify-content: center;
position: absolute;
}

.noticeContent {