[RNMobile] Display lock icon in disabled state of Cell component (#…

…50907)

* Add lock icon component

* Display lock icon in `Cell` component

* Update bottom sheet cell components to display lock icon properly

* Update `Cell` component placeholder color for disabled state

* Update component name of radio cell

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

@@ -71,7 +71,7 @@ const BottomSheetSelectControl = ( {
 					) }
 					disabled={ disabled }
 				>
-					<Icon icon={ chevronRight }></Icon>
+					{ disabled ? null : <Icon icon={ chevronRight } /> }
 				</BottomSheet.Cell>
 			}
 			showSheet={ showSubSheet }

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

@@ -65,7 +65,7 @@ const BottomSheetTextControl = ( {
 					placeholder={ cellPlaceholder || placeholder || '' }
 					disabled={ disabled }
 				>
-					<Icon icon={ chevronRight }></Icon>
+					{ disabled ? null : <Icon icon={ chevronRight } /> }
 				</BottomSheet.Cell>
 			}
 			showSheet={ showSubSheet }

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

@@ -26,6 +26,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
 import TouchableRipple from './ripple';
+import LockIcon from './lock-icon';
 
 const isIOS = Platform.OS === 'ios';
 class BottomSheetCell extends Component {
@@ -93,6 +94,7 @@ class BottomSheetCell extends Component {
 			accessibilityRole,
 			disabled = false,
 			disabledStyle = styles.cellDisabled,
+			showLockIcon = true,
 			activeOpacity,
 			onPress,
 			onLongPress,
@@ -374,6 +376,7 @@ class BottomSheetCell extends Component {
 									] }
 								>
 									<Icon
+										lock
 										icon={ icon }
 										size={ 24 }
 										fill={
@@ -440,6 +443,11 @@ class BottomSheetCell extends Component {
 					>
 						{ children }
 					</View>
+					{ disabled && showLockIcon && (
+						<View style={ styles.cellDisabled }>
+							<LockIcon />
+						</View>
+					) }
 				</View>
 				{ help && (
 					<Text style={ [ cellHelpStyle, styles.placeholderColor ] }>

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

@@ -11,7 +11,7 @@ import Cell from './cell';
 import styles from './styles.scss';
 
 export default function BottomSheetColorCell( props ) {
-	const { color, withColorIndicator = true, ...cellProps } = props;
+	const { color, withColorIndicator = true, disabled, ...cellProps } = props;
 
 	return (
 		<Cell
@@ -22,12 +22,13 @@ export default function BottomSheetColorCell( props ) {
 				__( 'Double tap to go to color settings' )
 			}
 			editable={ false }
+			disabled={ disabled }
 			value={ withColorIndicator && ! color && __( 'Default' ) }
 		>
 			{ withColorIndicator && color && (
 				<ColorIndicator color={ color } style={ styles.colorCircle } />
 			) }
-			<Icon icon={ chevronRight }></Icon>
+			{ disabled ? null : <Icon icon={ chevronRight }></Icon> }
 		</Cell>
 	);
 }

packages/components/src/mobile/bottom-sheet/lock-icon/index.native.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, lock } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+export default function LockIcon() {
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles.icon,
+		styles[ 'icon--dark' ]
+	);
+
+	return <Icon icon={ lock } color={ iconStyle.color } style={ iconStyle } />;
+}

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

@@ -0,0 +1,8 @@
+.icon {
+	color: $gray-dark;
+	margin-left: 6px;
+}
+
+.icon--dark {
+	color: $gray-light;
+}

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

@@ -10,7 +10,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import Cell from './cell';
 import styles from './styles.scss';
 
-export default function BottomSheetColorCell( props ) {
+export default function BottomSheetRadioCell( props ) {
 	const { selected, ...cellProps } = props;
 
 	const selectedIconStyle = usePreferredColorSchemeStyle(
@@ -29,6 +29,7 @@ export default function BottomSheetColorCell( props ) {
 			}
 			editable={ false }
 			value={ '' }
+			showLockIcon={ selected }
 		>
 			{ selected && (
 				<Icon icon={ check } style={ selectedIconStyle }></Icon>

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

@@ -15,6 +15,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  * Internal dependencies
  */
 import Cell from './cell';
+import LockIcon from './lock-icon';
 import styles from './range-cell.scss';
 import RangeTextInput from './range-text-input';
 import { toFixed } from '../utils';
@@ -219,6 +220,7 @@ class BottomSheetRangeCell extends Component {
 						accessible={ false }
 						valueStyle={ styles.valueStyle }
 						disabled={ disabled }
+						showLockIcon={ false }
 					>
 						<View style={ containerStyle }>
 							{ preview }
@@ -260,6 +262,7 @@ class BottomSheetRangeCell extends Component {
 									{ children }
 								</RangeTextInput>
 							) }
+							{ disabled && <LockIcon /> }
 						</View>
 					</Cell>
 				</View>

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

@@ -1,5 +1,7 @@
 //Bottom Sheet
 
+$cell-disable-opacity: 0.38;
+
 .bottomModal {
 	justify-content: flex-end;
 	margin: 0;
@@ -288,11 +290,11 @@
 }
 
 .placeholderColorDisabled {
-	color: lighten($gray, 20%);
+	color: rgba($gray-dark, $cell-disable-opacity);
 }
 
 .placeholderColorDisabledDark {
-	color: lighten($gray-dark, 10%);
+	color: rgba($white, $cell-disable-opacity);
 }
 
 .applyButton {
@@ -327,5 +329,5 @@
 }
 
 .cellDisabled {
-	opacity: 0.3;
+	opacity: $cell-disable-opacity;
 }