From 8ee14b0943e445ea017c179ff20934e24fb16905 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Thu, 1 Jun 2023 17:32:03 +1000 Subject: [PATCH] Replace react-native-hr library (#51041) * Update native HorizontalRule primitive component * Remove react-native-hr package references --- package-lock.json | 5 -- .../block-library/src/more/edit.native.js | 23 ++++------ .../block-library/src/nextpage/edit.native.js | 4 +- .../src/horizontal-rule/index.native.js | 46 +++++++++++++++---- .../src/horizontal-rule/styles.native.scss | 15 ++++++ packages/react-native-editor/package.json | 1 - .../native/__mocks__/react-native-hr/index.js | 0 test/native/setup.js | 2 - 8 files changed, 63 insertions(+), 33 deletions(-) delete mode 100644 test/native/__mocks__/react-native-hr/index.js diff --git a/package-lock.json b/package-lock.json index 306653d04093f..e9c3db13b74ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18432,7 +18432,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", @@ -49733,10 +49732,6 @@ "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz", "integrity": "sha512-+4JpbIx42zGTONhBTIXSyfyHICHC29VTvhkkoUOJAh/XHPEixpuBduYgf6Y4y9wsN1ARlQhBBoptTvXvAFQf5g==" }, - "react-native-hr": { - "version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-hr/1.1.3-wp-1/react-native-hr-1.1.3.tgz", - "integrity": "sha512-iwKdUpLc7lGN0+yiVfKxvvouMEXJeR4sRmfXFKXNnWOaBRdcf412zPa5vK4yEGPh5s38GDR29jYMM/RRw5U4nw==" - }, "react-native-hsv-color-picker": { "version": "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", "integrity": "sha512-SEfIWIEJEtKFSs0stRaPGOUYBpmO9ZHznuVs4tg0ITyfNqtWXQ29LxtFBnZCb+UnuwtOnIJG1m3aE7jqP8zYCg==", diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js index c140bcdc48367..d05e9920ae457 100644 --- a/packages/block-library/src/more/edit.native.js +++ b/packages/block-library/src/more/edit.native.js @@ -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 ( - -
- + ); } } diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js index 8570b942fd60a..508ca7e10553a 100644 --- a/packages/block-library/src/nextpage/edit.native.js +++ b/packages/block-library/src/nextpage/edit.native.js @@ -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 } > -
{ - const lineStyle = getStylesFromColorScheme( styles.line, styles.lineDark ); +const HR = ( { + getStylesFromColorScheme, + lineStyle, + marginLeft, + marginRight, + textStyle, + text, + ...props +} ) => { + const renderLine = ( key ) => ( + + ); + + const renderText = ( key ) => ( + + { text } + + ); + + const renderInner = () => { + if ( ! text ) { + return renderLine(); + } + return [ renderLine( 1 ), renderText( 2 ), renderLine( 3 ) ]; + }; return ( -
+ > + { renderInner() } + ); }; diff --git a/packages/primitives/src/horizontal-rule/styles.native.scss b/packages/primitives/src/horizontal-rule/styles.native.scss index dabb62a833654..20959ab73042e 100644 --- a/packages/primitives/src/horizontal-rule/styles.native.scss +++ b/packages/primitives/src/horizontal-rule/styles.native.scss @@ -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; +} diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 8b996092e2e3a..ab7dd809666d9 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -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", diff --git a/test/native/__mocks__/react-native-hr/index.js b/test/native/__mocks__/react-native-hr/index.js deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/test/native/setup.js b/test/native/setup.js index 317a47499ddda..817eb93e0c439 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -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 {