feat: Add placeholder support for Windows (#386)

Author: christophpurrer

example/src/App.tsx

@@ -12,6 +12,7 @@ import {
 
 import * as PickerExamples from './PickerExample';
 import * as PickerIOSExamples from './PickerIOSExample';
+import * as PickerWindowsExamples from './PickerWindowsExamples';
 
 export default function App() {
   const [isRTL, setIsRTL] = React.useState(I18nManager.isRTL);
@@ -49,6 +50,16 @@ export default function App() {
                 {element.render()}
               </View>
             ))}
+          {Platform.OS === 'windows' && (
+            <Text style={styles.heading}>PickerWindows Examples</Text>
+          )}
+          {Platform.OS === 'windows' &&
+            PickerWindowsExamples.examples.map((element) => (
+              <View style={styles.elementContainer} key={element.title}>
+                <Text style={styles.title}> {element.title} </Text>
+                {element.render()}
+              </View>
+            ))}			
         </View>
       </ScrollView>
     </SafeAreaView>

example/src/PickerWindowsExamples.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {Text, View, StyleSheet, Button} from 'react-native';
+import {Picker} from '../../js';
+
+const Item: any = Picker.Item;
+
+function PlaceholderPickerExample() {
+  return (
+    <View>
+      <Picker placeholder="Select a value">
+        <Item label="hello" value="key0" />
+        <Item label="world" value="key1" />
+      </Picker>
+    </View>
+  );
+}
+
+export const examples = [
+  {
+    title: 'Picker with placeholder',
+    render: PlaceholderPickerExample,
+  },  
+];

js/Picker.js

@@ -103,6 +103,12 @@ type PickerProps = $ReadOnly<{|
    * @platform android
    */
   prompt?: ?string,
+  
+  /**
+   * Placeholder string for this picker, used on Windows if no item has been selected.
+   * @platform windows
+   */
+  placeholder?: ?string,
 
   /**
    * Used to locate this view in end-to-end tests.

js/PickerWindows.windows.js

@@ -31,6 +31,7 @@ type PickerWindowsProps = $ReadOnly<{|
   selectedValue?: any,
   enabled?: boolean,
   prompt?: string,
+  placeholder?: ?string,
   testID?: string,
   onChange?: (event: IPickerChangeEvent) => void,
   onValueChange?: (value: any, itemIndex: number, text: string) => void,
@@ -87,6 +88,7 @@ class PickerWindows extends React.Component<
       enabled: this.props.enabled,
       items: this.state.items,
       onChange: this._onChange,
+      placeholder: this.props.placeholder,
       selectedIndex: this.state.selectedIndex,
       testID: this.props.testID,
       style: [styles.pickerWindows, this.props.style, this.props.itemStyle],

typings/Picker.d.ts

@@ -98,6 +98,11 @@ export interface PickerProps<T = ItemValue> extends ViewProps {
    * The string used for the accessibility label. Will be read once focused on the picker but not on change.
    */
   accessibilityLabel?: string;
+  /**
+   * Placeholder string for this picker, used on Windows if no item has been selected.
+   * @platform windows
+   */
+  placeholder?: string;  
   /**
    * Called when picker is focused
    * @platform android

windows/ReactNativePicker/ReactPickerView.cpp

@@ -100,6 +100,14 @@ namespace winrt::ReactNativePicker::implementation {
             else if (propertyName == "items") {
                 RepopulateItems(propertyValue.AsArray());
             }
+            else if (propertyName == "placeholder") {
+                if (propertyValue.IsNull()) {
+                    this->ClearValue(winrt::ComboBox::PlaceholderTextProperty());
+                }
+                else {
+                    this->PlaceholderText(to_hstring(propertyValue.AsString()));
+                }
+            }
             else if (propertyName == "backgroundColor") {
                 auto const color = propertyValue.To<winrt::Brush>();
                 auto res = this->Resources();

windows/ReactNativePicker/ReactPickerView.h

@@ -20,7 +20,7 @@ namespace winrt::ReactNativePicker::implementation {
         Microsoft::ReactNative::IReactContext m_reactContext{ nullptr };
         bool m_updating{ false };
         // FUTURE: remove when we can require RS5+
-        int32_t m_selectedIndex{ 0 };
+        int32_t m_selectedIndex{ -1 };
         std::vector<winrt::hstring> m_itemValues;
         xaml::Media::Brush m_comboBoxColor{ nullptr };
         xaml::Controls::ComboBox::SelectionChanged_revoker m_selectionChangedRevoker{};

windows/ReactNativePicker/ReactPickerViewManager.cpp

@@ -40,6 +40,7 @@ namespace winrt::ReactNativePicker::implementation {
         nativeProps.Insert(L"editable", ViewManagerPropertyType::Boolean);
         nativeProps.Insert(L"enabled", ViewManagerPropertyType::Boolean);
         nativeProps.Insert(L"items", ViewManagerPropertyType::Array);
+        nativeProps.Insert(L"placeholder", ViewManagerPropertyType::String);
         nativeProps.Insert(L"selectedIndex", ViewManagerPropertyType::Number);
         nativeProps.Insert(L"text", ViewManagerPropertyType::String);
         return nativeProps.GetView();