Stack control added

client/src/controls/Button.js

@@ -8,11 +8,17 @@ const button = React.memo(({control}) => {
 
   const ws = useContext(WebSocketContext);
 
+  let ButtonType = (control.primary) ? PrimaryButton : DefaultButton;
+
+  let buttonProps = {
+    text: control.text ? control.text : control.i
+  };
+
   const handleClick = e => {
     ws.pageEventFromWeb(control.i, 'click', control.event)
   }
 
-  return <PrimaryButton onClick={handleClick} text={control.text} />;
+  return <ButtonType onClick={handleClick} {...buttonProps} />;
 })
 
 export default button

client/src/controls/ControlsList.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import Row from './Row'
 import Col from './Col'
+import MyStack from './Stack'
 import { Textbox } from './Textbox'
 import Button from './Button'
 import Text from './Text'
@@ -14,7 +15,8 @@ const ControlsList = ({ controls }) => {
         'col': Col,
         'textbox': Textbox,
         'text': Text,
-        'button': Button
+        'button': Button,
+        'stack': MyStack,
     }
 
     const renderChild = control => {

client/src/controls/Stack.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { shallowEqual, useSelector } from 'react-redux'
+import ControlsList from './ControlsList'
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+
+const MyStack = React.memo(({ control }) => {
+
+  console.log(`render stack: ${control.i}`);
+
+  // stack props
+  const stackProps = {
+      horizontal: true,
+      gap: control.gap ? control.gap : 10
+    // verticalFill: true,
+    // horizontalAlign: control.horizontalalign ? control.horizontalalign : "start",
+    // verticalAlign: control.verticalalign ? control.verticalalign : "start",
+    // gap: control.gap ? control.gap : 10,
+    // styles: {
+    //   root: {
+    //     width: control.width ? control.width : "100%",
+    //     padding: control.padding ? control.padding : "10px"
+    //   }
+    // },
+  };
+
+  const childControls = useSelector(state => control.c.map(childId => state.page.controls[childId]), shallowEqual);
+
+  return <Stack {...stackProps}>
+    <ControlsList controls={childControls} />
+  </Stack>
+})
+
+export default MyStack

tests/test-add-command.ps1

@@ -74,7 +74,9 @@ try {
     pglet_send "set page title='Hello, world!' gap=20 horizontalAlign=start"
     pglet_send "add text value='Enter your name:'"
     pglet_send "add textbox id=fullName value='someone'"
-    pglet_send "add button id=submit text=Submit event=btn_event"
+    $footerId = pglet_send "add stack"
+    pglet_send "add button id=submit text=Submit primary=yes event=btn_event to=$footerId"
+    pglet_send "add button id=cancel event=btn_event2 to=$footerId"
 
     pglet_send "set fullName value='John Smith'"