Add dropdown settings UI element

src/common/settings_objects.cpp

@@ -117,6 +117,7 @@ namespace PowerToysSettings {
     }
     add_choice_group(name, get_resource(description_resource_id), value, keys_and_texts);
   }
+
   void Settings::add_choice_group(const std::wstring& name, const std::wstring& description, const std::wstring& value, const std::vector<std::pair<std::wstring, std::wstring>>& keys_and_texts) {
     web::json::value item = web::json::value::object();
     item.as_object()[L"display_name"] = web::json::value::string(description);
@@ -135,6 +136,33 @@ namespace PowerToysSettings {
     m_json.as_object()[L"properties"].as_object()[name] = item;
   }
 
+  void Settings::add_dropdown(const std::wstring& name, UINT description_resource_id, const std::wstring& value, const std::vector<std::pair<std::wstring, UINT>>& keys_and_text_ids) {
+    std::vector<std::pair<std::wstring, std::wstring>> keys_and_texts;
+    keys_and_texts.reserve(keys_and_text_ids.size());
+    for (const auto& kv : keys_and_text_ids) {
+      keys_and_texts.emplace_back(kv.first, get_resource(kv.second));
+    }
+    add_dropdown(name, get_resource(description_resource_id), value, keys_and_texts);
+  }
+
+  void Settings::add_dropdown(const std::wstring& name, const std::wstring& description, const std::wstring& value, const std::vector<std::pair<std::wstring, std::wstring>>& keys_and_texts) {
+    web::json::value item = web::json::value::object();
+    item.as_object()[L"display_name"] = web::json::value::string(description);
+    item.as_object()[L"editor_type"] = web::json::value::string(L"dropdown");
+    auto options = web::json::value::array(keys_and_texts.size());
+    for (std::size_t i = 0; i < keys_and_texts.size(); ++i) {
+      auto entry = web::json::value::object();
+      entry.as_object()[L"key"] = web::json::value::string(keys_and_texts[i].first);
+      entry.as_object()[L"text"] = web::json::value::string(keys_and_texts[i].second);
+      options.as_array()[i] = entry;
+    }
+    item.as_object()[L"options"] = options;
+    item.as_object()[L"value"] = web::json::value::string(value);
+    item.as_object()[L"order"] = web::json::value::number(++m_curr_priority);
+
+    m_json.as_object()[L"properties"].as_object()[name] = item;
+  }
+
   // add_custom_action overloads.
   void Settings::add_custom_action(const std::wstring& name, UINT description_resource_id, UINT button_text_resource_id, UINT ext_description_resource_id) {
     add_custom_action(name, get_resource(description_resource_id), get_resource(button_text_resource_id), get_resource(ext_description_resource_id));

src/common/settings_objects.h

@@ -40,6 +40,9 @@ namespace PowerToysSettings {
     void add_choice_group(const std::wstring& name, UINT description_resource_id, const std::wstring& value, const std::vector<std::pair<std::wstring, UINT>>& keys_and_text_ids);
     void add_choice_group(const std::wstring& name, const std::wstring& description, const std::wstring& value, const std::vector<std::pair<std::wstring, std::wstring>>& keys_and_texts);
 
+    void add_dropdown(const std::wstring& name, UINT description_resource_id, const std::wstring& value, const std::vector<std::pair<std::wstring, UINT>>& keys_and_text_ids);
+    void add_dropdown(const std::wstring& name, const std::wstring& description, const std::wstring& value, const std::vector<std::pair<std::wstring, std::wstring>>& keys_and_texts);
+
     void add_custom_action(const std::wstring& name, UINT description_resource_id, UINT button_text_resource_id, UINT ext_description_resource_id);
     void add_custom_action(const std::wstring& name, UINT description_resource_id, UINT button_text_resource_id, const std::wstring& value);
     void add_custom_action(const std::wstring& name, const std::wstring& description, const std::wstring& button_text, const std::wstring& value);

src/settings-web/src/components/CustomSettingsScreen.tsx

@@ -7,6 +7,7 @@ import {ColorPickerSettingsControl} from './ColorPickerSettingsControl';
 import {CustomActionSettingsControl} from './CustomActionSettingsControl';
 import {HotkeySettingsControl} from './HotkeySettingsControl';
 import {ChoiceGroupSettingsControl} from './ChoiceGroupSettingsControl';
+import {DropdownSettingsControl} from './DropdownSettingsControl';
 
 export class CustomSettingsScreen extends React.Component <any, any> {
   references: any;
@@ -154,6 +155,13 @@ export class CustomSettingsScreen extends React.Component <any, any> {
                   on_change={this.parent_on_change}
                   ref={(input) => {this.references[key]=input;}}
                 />;
+              case 'dropdown':
+                return <DropdownSettingsControl
+                  setting = {power_toys_properties[key]}
+                  key={key}
+                  on_change={this.parent_on_change}
+                  ref={(input) => {this.references[key]=input;}}
+                />;
               default:
                 return null;
             }

src/settings-web/src/components/DropdownSettingsControl.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { BaseSettingsControl } from './BaseSettingsControl';
+import { Dropdown } from 'office-ui-fabric-react';
+
+export class DropdownSettingsControl extends BaseSettingsControl {
+  dropref:any = null; // Keeps a reference to the corresponding item in the DOM.
+
+  constructor(props:any) {
+    super(props);
+    this.dropref = null;
+    this.state = {
+      property_values: props.setting
+    }
+  }
+
+  componentWillReceiveProps(props: any) {
+    // Fully controlled component.
+    // Reacting to a property change so that the control is redrawn properly.
+    this.setState({ property_values: props.setting })
+  }
+
+  public get_value() : any {
+    if (this.dropref.selectedOptions.length === 0) {
+      return null;
+    } else {
+      return {'value': this.dropref.selectedOptions[0].key};
+    }
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Dropdown
+        styles={{
+          root:{
+            width: '350px',
+            alignSelf: 'start'
+          }}}
+        defaultSelectedKey={this.state.property_values.value}
+        options={this.state.property_values.options}
+        label={this.state.property_values.display_name}
+        componentRef={(element) => {this.dropref=element;}}
+        onChange={()=>{
+          this.parent_on_change();
+        }}
+      />
+    );
+  }
+}