Dropdown control added

client/src/controls/ControlsList.js

@@ -3,6 +3,7 @@ import Row from './Row'
 import Col from './Col'
 import MyStack from './Stack'
 import { Textbox } from './Textbox'
+import { MyDropdown } from './Dropdown'
 import Button from './Button'
 import Text from './Text'
 
@@ -14,6 +15,7 @@ const ControlsList = ({ controls }) => {
         'row': Row,
         'col': Col,
         'textbox': Textbox,
+        'dropdown': MyDropdown,
         'text': Text,
         'button': Button,
         'stack': MyStack,

client/src/controls/Dropdown.tsx

@@ -0,0 +1,48 @@
+import React, { useContext } from 'react';
+import { WebSocketContext } from '../WebSocket';
+import { useDispatch, shallowEqual, useSelector } from 'react-redux'
+import { changeProps } from '../slices/pageSlice'
+import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react';
+import { IControlProps } from './IControlProps'
+
+export const MyDropdown = React.memo<IControlProps>(({control}) => {
+
+  console.log(`render Dropdown: ${control.i}`);
+
+  const ws = useContext(WebSocketContext);
+
+  const dispatch = useDispatch();
+
+  const handleChange = (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => {
+
+    console.log("DROPDOWN:", option);
+
+    const payload = [
+      {
+        i: control.i,
+        "value": option!.key
+      }
+    ];
+
+    dispatch(changeProps(payload));
+    ws.updateControlProps(payload);
+  }
+
+  const dropdownProps: IDropdownProps = {
+    label: control.label ? control.label : null,
+    placeholder: control.placeholder ? control.placeholder : null,
+    errorMessage: control.errormessage ? control.errormessage : null,
+    options: []
+  };
+
+  dropdownProps.options = useSelector<any, IDropdownOption[]>((state: any) => control.c.map((childId: any) =>
+    state.page.controls[childId])
+      .filter((oc: any) => oc.t === 'option')
+      .map((oc: any) => ({ key: oc.key, text: oc.text})), shallowEqual);  
+
+  if (control.value) {
+    dropdownProps.defaultSelectedKey = control.value;
+  }
+
+  return <Dropdown {...dropdownProps} onChange={handleChange} />;
+})

tests/test-add-command.ps1

@@ -91,7 +91,11 @@ try {
     pglet_send "add to=page at=0
         stack width=600px horizontalAlign=stretch
           textbox id=fullName value='someone' label=Name placeholder='Your name, please' description='That\'s your name'
-          textbox id=bio label='Bio' description='A few words about yourself' value='Line1\nLine2' multiline=true"
+          textbox id=bio label='Bio' description='A few words about yourself' value='Line1\nLine2' multiline=true
+          dropdown id=color label='Your favorite color' placeholder='Select color'
+            option key=red text=Red
+            option key=green text=Green
+            option key=blue text=Blue"
 
     pglet_send "add stack at=0 id=buttons horizontal=true
             button id=submit text=Submit primary=yes event=btn_event