[RNMobile] Add disabled style to Cell component

packages/components/src/mobile/bottom-sheet-select-control/index.native.js

@@ -22,6 +22,7 @@ const BottomSheetSelectControl = ( {
 	options: items,
 	onChange,
 	value: selectedValue,
+	disabled,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -68,6 +69,7 @@ const BottomSheetSelectControl = ( {
 						__( 'Navigates to select %s' ),
 						label
 					) }
+					disabled={ disabled }
 				>
 					<Icon icon={ chevronRight }></Icon>
 				</BottomSheet.Cell>

packages/components/src/mobile/bottom-sheet-text-control/index.native.js

@@ -29,6 +29,7 @@ const BottomSheetTextControl = ( {
 	icon,
 	footerNote,
 	cellPlaceholder,
+	disabled,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -62,6 +63,7 @@ const BottomSheetTextControl = ( {
 					onPress={ openSubSheet }
 					value={ initialValue || '' }
 					placeholder={ cellPlaceholder || placeholder || '' }
+					disabled={ disabled }
 				>
 					<Icon icon={ chevronRight }></Icon>
 				</BottomSheet.Cell>

packages/components/src/mobile/bottom-sheet/cell.native.js

@@ -92,6 +92,7 @@ class BottomSheetCell extends Component {
 			accessibilityHint,
 			accessibilityRole,
 			disabled = false,
+			disabledStyle = styles.cellDisabled,
 			activeOpacity,
 			onPress,
 			onLongPress,
@@ -223,11 +224,22 @@ class BottomSheetCell extends Component {
 				styles.cellValue,
 				styles.cellTextDark
 			);
-			const finalStyle = {
+			const textInputStyle = {
 				...cellValueStyle,
 				...valueStyle,
 				...styleRTL,
 			};
+			const placeholderTextColor = disabled
+				? this.props.getStylesFromColorScheme(
+						styles.placeholderColorDisabled,
+						styles.placeholderColorDisabledDark
+				  ).color
+				: styles.placeholderColor.color;
+			const textStyle = {
+				...( disabled && styles.cellDisabled ),
+				...cellValueStyle,
+				...valueStyle,
+			};
 
 			// To be able to show the `middle` ellipsizeMode on editable cells
 			// we show the TextInput just when the user wants to edit the value,
@@ -238,10 +250,10 @@ class BottomSheetCell extends Component {
 				<TextInput
 					ref={ ( c ) => ( this._valueTextInput = c ) }
 					numberOfLines={ 1 }
-					style={ finalStyle }
+					style={ textInputStyle }
 					value={ value }
 					placeholder={ valuePlaceholder }
-					placeholderTextColor={ '#87a6bc' }
+					placeholderTextColor={ placeholderTextColor }
 					onChangeText={ onChangeValue }
 					editable={ isValueEditable }
 					pointerEvents={
@@ -251,11 +263,12 @@ class BottomSheetCell extends Component {
 					onBlur={ finishEditing }
 					onSubmitEditing={ onSubmit }
 					keyboardType={ this.typeToKeyboardType( type, step ) }
+					disabled={ disabled }
 					{ ...valueProps }
 				/>
 			) : (
 				<Text
-					style={ { ...cellValueStyle, ...valueStyle } }
+					style={ textStyle }
 					numberOfLines={ 1 }
 					ellipsizeMode={ 'middle' }
 				>
@@ -418,7 +431,15 @@ class BottomSheetCell extends Component {
 						/>
 					) }
 					{ showValue && getValueComponent() }
-					{ children }
+					<View
+						style={ [
+							disabled && disabledStyle,
+							styles.cellRowContainer,
+						] }
+						pointerEvents={ disabled ? 'none' : 'auto' }
+					>
+						{ children }
+					</View>
 				</View>
 				{ help && (
 					<Text style={ [ cellHelpStyle, styles.placeholderColor ] }>

packages/components/src/mobile/bottom-sheet/range-cell.native.js

@@ -218,14 +218,15 @@ class BottomSheetRangeCell extends Component {
 						activeOpacity={ 1 }
 						accessible={ false }
 						valueStyle={ styles.valueStyle }
+						disabled={ disabled }
 					>
 						<View style={ containerStyle }>
 							{ preview }
 							<Slider
 								testID={ `Slider ${ cellProps.label }` }
 								value={ sliderValue }
 								defaultValue={ defaultValue }
-								disabled={ disabled }
+								disabled={ disabled && ! isIOS }
 								step={ step }
 								minimumValue={ minimumValue }
 								maximumValue={ maximumValue }

packages/components/src/mobile/bottom-sheet/stepper-cell/index.native.js

@@ -144,6 +144,7 @@ class BottomSheetStepperCell extends Component {
 			openUnitPicker,
 			decimalNum,
 			cellContainerStyle,
+			disabled,
 		} = this.props;
 		const { inputValue } = this.state;
 		const isMinValue = value === min;
@@ -215,6 +216,7 @@ class BottomSheetStepperCell extends Component {
 						labelStyle={ labelStyle }
 						leftAlign={ true }
 						separatorType={ separatorType }
+						disabled={ disabled }
 					>
 						<View style={ preview && containerStyle }>
 							{ preview }

packages/components/src/mobile/bottom-sheet/styles.native.scss

@@ -284,7 +284,15 @@
 
 // used in both light and dark modes
 .placeholderColor {
-	color: #87a6bc;
+	color: $gray;
+}
+
+.placeholderColorDisabled {
+	color: lighten($gray, 20%);
+}
+
+.placeholderColorDisabledDark {
+	color: lighten($gray-dark, 10%);
 }
 
 .applyButton {
@@ -317,3 +325,7 @@
 .cellSubLabelTextDark {
 	color: $sub-heading-dark;
 }
+
+.cellDisabled {
+	opacity: 0.3;
+}

packages/components/src/mobile/bottom-sheet/switch-cell.native.js

@@ -12,6 +12,8 @@ import { __, _x, sprintf } from '@wordpress/i18n';
  */
 import Cell from './cell';
 
+const EMPTY_STYLE = {};
+
 export default function BottomSheetSwitchCell( props ) {
 	const { value, onValueChange, disabled, ...cellProps } = props;
 
@@ -61,6 +63,7 @@ export default function BottomSheetSwitchCell( props ) {
 			editable={ false }
 			value={ '' }
 			disabled={ disabled }
+			disabledStyle={ EMPTY_STYLE }
 		>
 			<Switch
 				value={ value }

packages/components/src/range-control/index.native.js

@@ -25,6 +25,7 @@ const RangeControl = memo(
 		max,
 		type,
 		separatorType,
+		disabled,
 		...props
 	} ) => {
 		if ( type === 'stepper' ) {
@@ -36,6 +37,7 @@ const RangeControl = memo(
 					onChange={ onChange }
 					separatorType={ separatorType }
 					value={ value }
+					disabled={ disabled }
 				/>
 			);
 		}
@@ -61,6 +63,7 @@ const RangeControl = memo(
 				allowReset={ allowReset }
 				defaultValue={ initialSliderValue }
 				separatorType={ separatorType }
+				disabled={ disabled }
 				{ ...props }
 			/>
 		);

packages/react-native-editor/CHANGELOG.md

@@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 -   [**] Tapping on all nested blocks gets focus directly instead of having to tap multiple times depending on the nesting levels. [#50672]
+-   [*] Add disabled style to `Cell` component [#50665]
 
 ## 1.95.0
 -   [*] Fix crash when trying to convert to regular blocks an undefined/deleted reusable block [#50475]

test/native/__mocks__/styleMock.js

@@ -184,4 +184,7 @@ module.exports = {
 	'components-picker__button-title': {
 		color: 'white',
 	},
+	placeholderColor: {
+		color: 'gray',
+	},
 };