From 518b151b113f7100760f3256d330cfae0f5c2935 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Mon, 29 May 2023 16:28:07 +1000 Subject: [PATCH 1/2] Update native HorizontalRule primitive component --- .../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 ++++++ 4 files changed, 63 insertions(+), 25 deletions(-) diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js index c140bcdc483674..d05e9920ae4571 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 8570b942fd60a6..508ca7e10553a3 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 dabb62a8336542..20959ab73042e9 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; +} From a3aa8f6ca198114c930e49cddc5e5d56a1dd66b6 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Mon, 29 May 2023 16:30:47 +1000 Subject: [PATCH 2/2] Remove react-native-hr package references --- package-lock.json | 5 ----- packages/react-native-editor/package.json | 1 - test/native/__mocks__/react-native-hr/index.js | 0 test/native/setup.js | 2 -- 4 files changed, 8 deletions(-) delete mode 100644 test/native/__mocks__/react-native-hr/index.js diff --git a/package-lock.json b/package-lock.json index 8067c573107d55..d7114deae72c54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18431,7 +18431,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-2/react-native-gesture-handler-2.3.2-wp-2.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-3/react-native-hsv-color-picker-1.0.1-wp-3.tgz", "react-native-linear-gradient": "https://raw.githubusercontent.com/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", @@ -49732,10 +49731,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-3/react-native-hsv-color-picker-1.0.1-wp-3.tgz", "integrity": "sha512-p8wQ5R9CG6uVJMu8BkRRUsIhPgJnc05TjLA+y5R/RxNE+OvT4VczIjPAeQ78w41YBba9zawGTiPIDOaGwZN0nw==", diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 358f4833cf20ab..563cf5be510645 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-2/react-native-gesture-handler-2.3.2-wp-2.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-3/react-native-hsv-color-picker-1.0.1-wp-3.tgz", "react-native-linear-gradient": "https://raw.githubusercontent.com/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", 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 e69de29bb2d1d6..00000000000000 diff --git a/test/native/setup.js b/test/native/setup.js index be643a1fb90175..2deb1f8802abc9 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -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 {