[RNMobile] Performance improvements in File related controls (#28224)

WordPress · Jan 28, 2021 · ccc1e86 · ccc1e86
1 parent 6119ad9
commit ccc1e86
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 18 deletions.
diff --git a/packages/block-library/src/file/edit.native.js b/packages/block-library/src/file/edit.native.js
@@ -27,7 +27,7 @@ import {
 	ToolbarGroup,
 	PanelBody,
 	ToggleControl,
-	BottomSheet,
+	TextControl,
 	SelectControl,
 	Icon,
 } from '@wordpress/components';
@@ -263,13 +263,16 @@ export class FileEdit extends Component {
 		);
 
 		const isCopyUrlDisabled = isUploadFailed || isUploadInProgress;
-		const dimmedStyle = isCopyUrlDisabled && styles.disabledButton;
-		const finalButtonStyle = Object.assign(
-			{},
-			actionButtonStyle,
-			dimmedStyle
+
+		const dimmedActionButtonStyle = this.props.getStylesFromColorScheme(
+			styles.dimmedActionButton,
+			styles.dimmedActionButtonDark
 		);
 
+		const finalButtonStyle = isCopyUrlDisabled
+			? dimmedActionButtonStyle
+			: actionButtonStyle;
+
 		return (
 			<InspectorControls>
 				{ isSidebarLinkSettings || (
@@ -297,7 +300,7 @@ export class FileEdit extends Component {
 							onChange={ this.onChangeDownloadButtonVisibility }
 						/>
 					) }
-					<BottomSheet.Cell
+					<TextControl
 						disabled={ isCopyUrlDisabled }
 						label={
 							this.state.isUrlCopied
@@ -455,12 +458,13 @@ export class FileEdit extends Component {
 										openMediaOptions
 									) }
 								{ getMediaOptions() }
-								{ this.getInspectorControls(
-									attributes,
-									media,
-									isUploadInProgress,
-									isUploadFailed
-								) }
+								{ isSelected &&
+									this.getInspectorControls(
+										attributes,
+										media,
+										isUploadInProgress,
+										isUploadFailed
+									) }
 								<View style={ styles.container }>
 									<RichText
 										withoutInteractiveFormatting

diff --git a/packages/block-library/src/file/style.native.scss b/packages/block-library/src/file/style.native.scss
@@ -18,10 +18,6 @@
 	padding-right: $grid-unit-20;
 }
 
-.disabledButton {
-	opacity: 0.45;
-}
-
 .uploadFailedText {
 	color: #fff;
 	font-size: 14;
@@ -41,6 +37,16 @@
 	color: $blue-30;
 }
 
+.dimmedActionButton {
+	color: $blue-50;
+	opacity: 0.45;
+}
+
+.dimmedActionButtonDark {
+	opacity: 0.45;
+	color: $blue-30;
+}
+
 .errorContainer {
 	flex-direction: row;
 	align-items: center;

diff --git a/packages/components/src/text-control/index.native.js b/packages/components/src/text-control/index.native.js
@@ -1,3 +1,7 @@
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -32,4 +36,4 @@ function TextControl( {
 	);
 }
 
-export default TextControl;
+export default memo( TextControl );