Changed the showsVerticalScrollIndicator and showsHorizontalScrollInd…

…icator default values on macOS to match iOS and Android. (facebook#77) Updated RNTesters filter text field to use mac semantic colors.
acoates-ms · May 23, 2019 · 0804147 · 0804147
1 parent 46afff8
commit 0804147
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/RNTester/js/RNTesterExampleFilter.js b/RNTester/js/RNTesterExampleFilter.js
@@ -10,6 +10,7 @@
 
 'use strict';
 
+const Platform = require('Platform'); // TODO(macOS ISS#2323203)
 const React = require('react');
 const StyleSheet = require('StyleSheet');
 const TextInput = require('TextInput');
@@ -77,6 +78,11 @@ class RNTesterExampleFilter extends React.Component<Props, State> {
             this.setState(() => ({filter: text}));
           }}
           placeholder="Search..."
+          placeholderTextColor={
+            Platform.OS === 'macos'
+              ? {semantic: 'placeholderTextColor'}
+              : undefined /*TODO(macOS ISS#2323203)*/
+          }
           underlineColorAndroid="transparent"
           style={styles.searchTextInput}
           testID="explorer_search"
@@ -89,12 +95,32 @@ class RNTesterExampleFilter extends React.Component<Props, State> {
 
 const styles = StyleSheet.create({
   searchRow: {
-    backgroundColor: '#eeeeee',
+    // [TODO(macOS ISS#2323203)
+    ...Platform.select({
+      macos: {
+        backgroundColor: {semantic: 'windowBackgroundColor'},
+      },
+      default: {
+        // ]TODO(macOS ISS#2323203)
+        backgroundColor: '#eeeeee',
+      }, // [TODO(macOS ISS#2323203)
+    }), // ]TODO(macOS ISS#2323203)
     padding: 10,
   },
   searchTextInput: {
-    backgroundColor: 'white',
-    borderColor: '#cccccc',
+    // [TODO(macOS ISS#2323203)
+    ...Platform.select({
+      macos: {
+        color: {semantic: 'textColor'},
+        backgroundColor: {semantic: 'textBackgroundColor'},
+        borderColor: {semantic: 'quaternaryLabelColor'},
+      },
+      default: {
+        // ]TODO(macOS ISS#2323203)
+        backgroundColor: 'white',
+        borderColor: '#cccccc',
+      }, // [TODO(macOS ISS#2323203)
+    }), // ]TODO(macOS ISS#2323203)
     borderRadius: 3,
     borderWidth: 1,
     paddingLeft: 8,

diff --git a/React/Views/ScrollView/RCTScrollView.m b/React/Views/ScrollView/RCTScrollView.m
@@ -185,6 +185,8 @@ - (instancetype)initWithFrame:(CGRect)frame
   if ((self = [super initWithFrame:frame])) {
 #if TARGET_OS_OSX // [TODO(macOS ISS#2323203)
     self.scrollEnabled = YES;
+    self.hasHorizontalScroller = YES;
+    self.hasVerticalScroller = YES;
     self.panGestureRecognizer = [[NSPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleCustomPan:)];
 #else // ]TODO(macOS ISS#2323203)
     [self.panGestureRecognizer addTarget:self action:@selector(handleCustomPan:)];