add ConfirmationInput widget

Author: anserwaseem

apps/starter/src/ensemble/askEmbrace.yaml

@@ -22,6 +22,32 @@ View:
         # - Text:
         #     id: he
         #     text: hehe
+        - ConfirmationInput:
+            id: myConfirmationInput
+            length: 4
+            styles:
+              inputType: "number"
+              fieldWidth: 30
+              fieldHeight: 30
+              defaultFieldBorderColor: "green"
+              defaultFieldBackgroundColor: "grey"
+              activeFieldBorderColor: "black"
+              activeFieldBackgroundColor: "yellow"
+              filledFieldBorderColor: "blue"
+              filledFieldBackgroundColor: "aqua"
+              gap: 30px
+              backgroundColor: "lightblue"
+              padding: 20
+              textStyle:
+                fontSize: 15
+            onChange:
+              executeCode:
+                body: |
+                  console.log(myConfirmationInput.text)
+            onComplete:
+              executeCode:
+                body: |
+                  console.log("completed: "+myConfirmationInput.text)
         - Form:
             styles:
               labelPosition: start

packages/runtime/package.json

@@ -33,6 +33,7 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.0",
     "antd": "^5.9.0",
+    "antd-input-otp": "^2.0.4",
     "chart.js": "^4.4.0",
     "eslint-config-custom": "workspace:*",
     "jest": "27.5.1",

packages/runtime/src/runtime/hooks/useEnsembleAction.tsx

@@ -339,7 +339,7 @@ export const useEnsembleAction = (
     (action.navigateScreen && navigateScreen) ||
     (action.showToast && showToast) ||
     (action.navigateModalScreen && navigateModalScreen) ||
-    ("closeAllDialogs" in action && closeAllDialogs) ||
+    (!isString(action) && "closeAllDialogs" in action && closeAllDialogs) ||
     (action.pickFiles && pickFiles) ||
     (action.uploadFiles && uploadFiles)
   );

packages/runtime/src/util/types.ts

@@ -1,9 +1,9 @@
 import type { EnsembleWidget, Expression } from "@ensembleui/react-framework";
 
-export interface EnsembleWidgetProps {
+export interface EnsembleWidgetProps<T = Record<string, string | number>> {
   id?: string;
+  styles?: T;
   [key: string]: unknown;
-  styles?: Record<string, string | number>;
 }
 
 export type BaseTextProps = {

packages/runtime/src/widgets/ConfirmationInput.tsx

@@ -0,0 +1,174 @@
+import {
+  type EnsembleAction,
+  useRegisterBindings,
+} from "@ensembleui/react-framework";
+import { InputOTP } from "antd-input-otp";
+import { useState } from "react";
+import { Form } from "antd";
+import { useEnsembleAction } from "../runtime/hooks/useEnsembleAction";
+import { WidgetRegistry } from "../registry";
+import type { EnsembleWidgetProps } from "../util/utils";
+import type { TextStyles } from "./Text";
+
+interface ConfirmationInputStyles {
+  inputType?: "number" | "text";
+  fieldWidth?: number | string;
+  fieldHeight?: number | string;
+  gap?: number;
+  spaceEvenly?: boolean;
+  defaultFieldBorderColor?: string;
+  activeFieldBorderColor?: string;
+  filledFieldBorderColor?: string;
+  defaultFieldBackgroundColor?: string;
+  activeFieldBackgroundColor?: string;
+  filledFieldBackgroundColor?: string;
+  textStyle?: TextStyles;
+
+  backgroundColor?: string;
+  margin?: number | string;
+  padding?: number | string;
+
+  [key: string]: unknown;
+}
+
+const defaultStyles: ConfirmationInputStyles = {
+  inputType: "number",
+  fieldWidth: 50,
+  fieldHeight: 50,
+  gap: 10,
+  spaceEvenly: true,
+  defaultFieldBorderColor: "rgba(0, 0, 0, 0.451)",
+  activeFieldBorderColor: "black",
+  filledFieldBorderColor: "transparent",
+  defaultFieldBackgroundColor: "transparent",
+  activeFieldBackgroundColor: "transparent",
+  filledFieldBackgroundColor: "transparent",
+  textStyle: {
+    color: "black",
+    fontFamily: "inherit",
+    fontSize: 25,
+    fontWeight: "bold",
+    backgroundColor: "transparent",
+  },
+
+  backgroundColor: "transparent",
+  margin: 0,
+  padding: 0,
+};
+
+type ConfirmationInputProps = {
+  length?: number;
+  onChange?: EnsembleAction;
+  onComplete?: EnsembleAction;
+} & EnsembleWidgetProps<ConfirmationInputStyles>;
+
+export const ConfirmationInput: React.FC<ConfirmationInputProps> = (props) => {
+  const { id, length, onChange, onComplete, styles, ...otherProps } = props;
+
+  const [form] = Form.useForm();
+
+  const [text, setText] = useState("");
+
+  const onChangeAction = useEnsembleAction(onChange);
+  const onCompleteAction = useEnsembleAction(onComplete);
+
+  useRegisterBindings({ text }, id, { setText });
+
+  const handleChange = (value: string[]): void => {
+    setText(value.join(""));
+
+    onChangeAction?.callback({
+      [id as string]: {
+        text: value.join(""),
+        setText,
+      },
+    });
+  };
+
+  const handleComplete = (values: Record<string, string[]>): unknown =>
+    onCompleteAction?.callback({
+      [id as string]: {
+        text: values["confirmationItem"].join(""),
+        setText,
+      },
+    });
+
+  const customStyles = `
+      .confirmationInput:focus {
+        border-color: ${
+          styles?.activeFieldBorderColor || defaultStyles.activeFieldBorderColor
+        } !important;
+        background-color: ${
+          styles?.activeFieldBackgroundColor ||
+          defaultStyles.activeFieldBackgroundColor
+        } !important;
+      }
+
+      .confirmationinput[value]:not([value=""]):not(.confirmationinput:where(.ant-input:focus), .confirmationinput:where(.ant-input-focused)) {
+        border-color: ${
+          styles?.filledFieldBorderColor || defaultStyles.filledFieldBorderColor
+        } !important;
+        background-color: ${
+          styles?.filledFieldBackgroundColor ||
+          defaultStyles.filledFieldBackgroundColor
+        } !important;
+      }
+    `;
+
+  return (
+    <>
+      <style>{customStyles}</style>
+      <Form form={form} onFinish={handleComplete}>
+        <Form.Item name="confirmationItem">
+          <InputOTP
+            length={length || 4}
+            onChange={handleChange}
+            autoSubmit={form}
+            inputType={styles?.inputType === "text" ? "all" : "numeric"}
+            inputClassName="confirmationInput"
+            wrapperStyle={{
+              backgroundColor:
+                styles?.backgroundColor || defaultStyles.backgroundColor,
+              margin: styles?.margin || defaultStyles.margin,
+              padding: styles?.padding || defaultStyles.padding,
+              gap:
+                styles?.gap && !styles?.spaceEvenly
+                  ? styles?.gap
+                  : defaultStyles.gap,
+              ...(styles?.spaceEvenly && {
+                flex: 1,
+                alignItems: "center",
+                justifyContent: "space-evenly",
+              }),
+            }}
+            inputStyle={{
+              padding: 0,
+              margin: 0,
+              width: styles?.fieldWidth || defaultStyles.fieldWidth,
+              height: styles?.fieldHeight || defaultStyles.fieldHeight,
+              borderColor:
+                styles?.defaultFieldBorderColor ||
+                defaultStyles.defaultFieldBorderColor,
+              backgroundColor:
+                styles?.defaultFieldBackgroundColor ||
+                defaultStyles.defaultFieldBackgroundColor,
+              fontFamily:
+                styles?.textStyle?.fontFamily ||
+                defaultStyles.textStyle?.fontFamily,
+              fontSize:
+                styles?.textStyle?.fontSize ||
+                defaultStyles.textStyle?.fontSize,
+              fontWeight:
+                styles?.textStyle?.fontWeight ||
+                defaultStyles.textStyle?.fontWeight,
+              color: styles?.textStyle?.color || defaultStyles.textStyle?.color,
+            }}
+            {...otherProps}
+          />
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
+
+WidgetRegistry.register("ConfirmationInput", ConfirmationInput);

packages/runtime/src/widgets/index.ts

@@ -23,3 +23,4 @@ export * from "./Tag";
 export * from "./Carousel";
 export * from "./PopupMenu";
 export * from "./Dropdown";
+export * from "./ConfirmationInput";