Skip to content

Commit

Permalink
Replace react-native-hr library (#51041)
Browse files Browse the repository at this point in the history
* Update native HorizontalRule primitive component
* Remove react-native-hr package references
  • Loading branch information
derekblank authored Jun 1, 2023
1 parent a993bfd commit 8ee14b0
Showing 8 changed files with 63 additions and 33 deletions.
5 changes: 0 additions & 5 deletions package-lock.json

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
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
@@ -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 }
/>
);
}
}
4 changes: 2 additions & 2 deletions packages/block-library/src/nextpage/edit.native.js
Original file line number Diff line number Diff line change
@@ -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
@@ -44,7 +44,7 @@ export function NextPageEdit( {
accessibilityStates={ accessibilityState }
onAccessibilityTap={ onFocus }
>
<Hr
<HorizontalRule
text={ customText }
marginLeft={ 0 }
marginRight={ 0 }
46 changes: 38 additions & 8 deletions packages/primitives/src/horizontal-rule/index.native.js
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
@@ -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() }
</View>
);
};

15 changes: 15 additions & 0 deletions packages/primitives/src/horizontal-rule/styles.native.scss
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
Original file line number Diff line number Diff line change
@@ -60,7 +60,6 @@
"react-native-fast-image": "8.5.11",
"react-native-gesture-handler": "https://raw.githubusercontent.com/wordpress-mobile/react-native-gesture-handler/2.3.2-wp-3/react-native-gesture-handler-2.3.2-wp-3.tgz",
"react-native-get-random-values": "1.4.0",
"react-native-hr": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hr/1.1.3-wp-1/react-native-hr-1.1.3.tgz",
"react-native-hsv-color-picker": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hsv-color-picker/v1.0.1-wp-4/react-native-hsv-color-picker-1.0.1-wp-4.tgz",
"react-native-linear-gradient": "https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/v2.5.6-wp-4/react-native-linear-gradient-2.5.6-wp-4.tgz",
"react-native-modal": "^11.10.0",
Empty file.
2 changes: 0 additions & 2 deletions test/native/setup.js
Original file line number Diff line number Diff line change
@@ -133,8 +133,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 {

1 comment on commit 8ee14b0

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 8ee14b0.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5141590042
📝 Reported issues:

Please sign in to comment.