CE-1727 Updates to processes rendering block-widgets, to get up to compatible with the android app

src/qqq/components/widgets/blocks/ButtonBlock.tsx

@@ -29,30 +29,56 @@ import React from "react";
 
 
 /*******************************************************************************
- ** Block that renders ... an action button...
+ ** Block that renders ... a button...
  **
  *******************************************************************************/
-export default function ActionButtonBlock({widgetMetaData, data, actionCallback}: StandardBlockComponentProps): JSX.Element
+export default function ButtonBlock({widgetMetaData, data, actionCallback}: StandardBlockComponentProps): JSX.Element
 {
-   const icon = data.values.iconName ? <Icon>{data.values.iconName}</Icon> : null;
+   const startIcon = data.values.startIcon?.name ? <Icon>{data.values.startIcon.name}</Icon> : null;
+   const endIcon = data.values.endIcon?.name ? <Icon>{data.values.endIcon.name}</Icon> : null;
 
    function onClick()
    {
-      if(actionCallback)
+      if (actionCallback)
       {
-         actionCallback(data, {actionCode: data.values?.actionCode})
+         actionCallback(data, data.values);
       }
       else
       {
-         console.log("ActionButtonBlock onClick with no actionCallback present, so, noop");
+         console.log("ButtonBlock onClick with no actionCallback present, so, noop");
       }
    }
 
+   let buttonVariant: "gradient" | "outlined" | "text" = "gradient";
+   if (data.styles?.format == "outlined")
+   {
+      buttonVariant = "outlined";
+   }
+   else if (data.styles?.format == "text")
+   {
+      buttonVariant = "text";
+   }
+   else if (data.styles?.format == "filled")
+   {
+      buttonVariant = "gradient";
+   }
+
+   // todo - button colors... but to do RGB's, might need to move away from MDButton?
+
    return (
       <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
          <Box mx={1} my={1} minWidth={standardWidth}>
-            <MDButton type="button" variant="gradient" color="dark" size="small" fullWidth startIcon={icon} onClick={onClick}>
-               {data.values.label ?? "Action"}
+            <MDButton
+               type="button"
+               variant={buttonVariant}
+               color="dark"
+               size="small"
+               fullWidth
+               startIcon={startIcon}
+               endIcon={endIcon}
+               onClick={onClick}
+            >
+               {data.values.label ?? "Button"}
             </MDButton>
          </Box>
       </BlockElementWrapper>

src/qqq/components/widgets/blocks/InputFieldBlock.tsx

@@ -52,10 +52,10 @@ export default function InputFieldBlock({widgetMetaData, data, actionCallback}:
    // so let us remove the default blur handler, for the first (auto) focus/blur //
    // cycle, and we seem to have a better time.                                  //
    ////////////////////////////////////////////////////////////////////////////////
-   let onBlurRest: {onBlur?: any} = {}
+   let dynamicFormFieldRest: {onBlur?: any, sx?: any} = {}
    if(autoFocus && blurCount == 0)
    {
-      onBlurRest.onBlur = (event: React.SyntheticEvent) =>
+      dynamicFormFieldRest.onBlur = (event: React.SyntheticEvent) =>
       {
          event.stopPropagation();
          event.preventDefault();
@@ -120,7 +120,18 @@ export default function InputFieldBlock({widgetMetaData, data, actionCallback}:
          <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
             <>
                {labelElement}
-               <QDynamicFormField name={fieldMetaData.name} displayFormat={null} label="" formFieldObject={dynamicField} type={fieldMetaData.type} value={value} autoFocus={autoFocus} onKeyUp={eventHandler} {...onBlurRest} />
+               <QDynamicFormField
+                  name={fieldMetaData.name}
+                  displayFormat={null}
+                  label=""
+                  placeholder={data.values?.placeholder}
+                  backgroundColor="#FFFFFF"
+                  formFieldObject={dynamicField}
+                  type={fieldMetaData.type}
+                  value={value}
+                  autoFocus={autoFocus}
+                  onKeyUp={eventHandler}
+                  {...dynamicFormFieldRest} />
             </>
          </BlockElementWrapper>
       </Box>

src/qqq/components/widgets/blocks/TextBlock.tsx

@@ -20,9 +20,11 @@
  */
 
 import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
 import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
 import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-import DumpJsonBox from "qqq/utils/DumpJsonBox";
+import ProcessWidgetBlockUtils from "qqq/pages/processes/ProcessWidgetBlockUtils";
+import React from "react";
 
 /*******************************************************************************
  ** Block that renders ... just some text.
@@ -32,30 +34,13 @@ import DumpJsonBox from "qqq/utils/DumpJsonBox";
 export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
 {
    let color = "rgba(0, 0, 0, 0.87)";
-   if (data.styles?.standardColor)
+   if (data.styles?.color)
    {
-      switch (data.styles?.standardColor)
-      {
-         case "SUCCESS":
-            color = "#2BA83F";
-            break;
-         case "WARNING":
-            color = "#FBA132";
-            break;
-         case "ERROR":
-            color = "#FB4141";
-            break;
-         case "INFO":
-            color = "#458CFF";
-            break;
-         case "MUTED":
-            color = "#7b809a";
-            break;
-      }
+      color = ProcessWidgetBlockUtils.processColorFromStyleMap(data.styles.color);
    }
 
    let boxStyle = {};
-   if (data.styles?.isAlert)
+   if (data.styles?.format == "alert")
    {
       boxStyle =
          {
@@ -65,17 +50,112 @@ export default function TextBlock({widgetMetaData, data}: StandardBlockComponent
             borderRadius: "0.5rem",
          };
    }
+   else if (data.styles?.format == "banner")
+   {
+      boxStyle =
+         {
+            background: `${color}40`,
+            padding: "0.5rem",
+         };
+   }
+
+   let fontSize = "1rem";
+   if (data.styles?.size)
+   {
+      switch (data.styles.size.toLowerCase())
+      {
+         case "largest":
+            fontSize = "3rem";
+            break;
+         case "headline":
+            fontSize = "2rem";
+            break;
+         case "title":
+            fontSize = "1.5rem";
+            break;
+         case "body":
+            fontSize = "1rem";
+            break;
+         case "smallest":
+            fontSize = "0.75rem";
+            break;
+         default:
+         {
+            if (data.styles.size.match(/^\d+$/))
+            {
+               fontSize = `${data.styles.size}px`;
+            }
+            else
+            {
+               fontSize = "1rem";
+            }
+         }
+      }
+   }
+
+   let fontWeight = "400";
+   if (data.styles?.weight)
+   {
+      switch (data.styles.weight.toLowerCase())
+      {
+         case "thin":
+         case "100":
+            fontWeight = "100";
+            break;
+         case "extralight":
+         case "200":
+            fontWeight = "200";
+            break;
+         case "light":
+         case "300":
+            fontWeight = "300";
+            break;
+         case "normal":
+         case "400":
+            fontWeight = "400";
+            break;
+         case "medium":
+         case "500":
+            fontWeight = "500";
+            break;
+         case "semibold":
+         case "600":
+            fontWeight = "600";
+            break;
+         case "bold":
+         case "700":
+            fontWeight = "700";
+            break;
+         case "extrabold":
+         case "800":
+            fontWeight = "800";
+            break;
+         case "black":
+         case "900":
+            fontWeight = "900";
+            break;
+      }
+   }
 
    const text = data.values.interpolatedText ?? data.values.text;
    const lines = text.split("\n");
 
+   const startIcon = data.values.startIcon?.name ? <Icon>{data.values.startIcon.name}</Icon> : null;
+   const endIcon = data.values.endIcon?.name ? <Icon>{data.values.endIcon.name}</Icon> : null;
+
    return (
       <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
          <Box display="inline-block" lineHeight="1.2" sx={boxStyle}>
-            <span style={{fontSize: "1rem", color: color}}>
+            <span style={{fontSize: fontSize, color: color, fontWeight: fontWeight}}>
                {lines.map((line: string, index: number) =>
                   (
-                     <div key={index}>{line}</div>
+                     <div key={index}>
+                        <>
+                           {index == 0 && startIcon ? {startIcon} : null}
+                           {line}
+                           {index == lines.length - 1 && endIcon ? {endIcon} : null}
+                        </>
+                     </div>
                   ))
                }</span>
          </Box>