Add NumberElementBlock

Fixes: AFORM-3557

src/@optimizely/forms-react/src/components/RenderElement.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { TextareaElementBlock, TextboxElementBlock } from './elements';
+import { TextareaElementBlock, TextboxElementBlock, NumberElementBlock } from './elements';
 import { FormElementBase } from '@optimizely/forms-sdk';
 
 const components: Record<string, any> = {
-    TextboxElementBlock,
-    TextareaElementBlock
+	TextboxElementBlock,
+	TextareaElementBlock,
+	NumberElementBlock
 };
 
 export interface ElementProps {

src/@optimizely/forms-react/src/components/elements/NumberElementBlock.tsx

@@ -0,0 +1,56 @@
+import { Number, extractParams } from "@optimizely/forms-sdk"
+import { ValidatorType } from "../../models";
+import React, { useRef } from "react";
+import ElementWrapper from "../ElementWrapper";
+import { useElement } from "../../hooks/useElement";
+
+export interface NumberElementBlockProps {
+    element: Number
+}
+
+export const NumberElementBlock = (props: NumberElementBlockProps) => {
+    const { element } = props;
+    const { elementContext, handleChange, handleBlur, checkVisible } = useElement(element);
+    const { relativePath, language } = extractParams(window.location.pathname)
+
+    const isRequire = element.properties.validators?.some(v => v.type === ValidatorType.RequiredValidator);
+    const validatorClasses = element.properties.validators?.reduce((acc, obj) => `${acc} ${obj.model.validationCssClass}`, "");
+
+    const extraAttr = useRef<any>({});
+    if (isRequire) {
+        extraAttr.current = { ...extraAttr.current, required: isRequire, "aria-required": isRequire };
+    }
+
+    return (
+        <ElementWrapper className={`FormTextbox FormTextbox--Textarea ${validatorClasses ?? ""}`} isVisible={checkVisible()}>
+            <div lang={language}>
+                <label htmlFor={element.key} className="Form__Element__Caption">
+                    {element.properties.label}
+                </label>
+                <input
+                    name={element.key}
+                    id={element.key}
+                    type="number"
+                    step="any"
+                    placeholder={element.properties.placeHolder}
+                    {...extraAttr.current}
+                    value={elementContext.value}
+                    aria-describedby={`${element.key}_desc`}
+                    autoComplete={element.properties.autoComplete}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                />
+                {element.properties.validators?.map((v) => {
+                    let validationResult = elementContext.validationResults;
+                    let valid = !validationResult || validationResult?.length == 0 || validationResult[0].valid;
+                    return (
+                        <span key={v.type} className="Form__Element__ValidationError" id={`${element.key}_desc`} role="alert"
+                            style={{ display: valid ? "none" : "" }}>
+                            {v.model.message}
+                        </span>
+                    );
+                })}
+            </div>
+        </ElementWrapper>
+    );
+}

src/@optimizely/forms-react/src/components/elements/index.ts

@@ -1,2 +1,3 @@
 export * from "./TextboxElementBlock";
-export * from "./TextareaElementBlock";
+export * from "./TextareaElementBlock";
+export * from "./NumberElementBlock";

src/@optimizely/forms-sdk/src/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from "./generateId"
+export * from "./urlHelper"

src/@optimizely/forms-sdk/src/helpers/urlHelper.ts

@@ -0,0 +1,34 @@
+export const extractParams = (urlPath: string) => {
+    let relativePath = (urlPath.length > 1 && urlPath !== "/search") ? urlPath : '/en'
+    let contentId
+    let workId = undefined
+
+    const epiContentPrefix = "/EPiServer/CMS/Content/";
+    if (relativePath.startsWith(epiContentPrefix)) {
+        relativePath = relativePath.substring(epiContentPrefix.length - 1);
+    }
+
+    if (relativePath.endsWith('/')) {
+        relativePath = relativePath.slice(0, -1)
+    }
+
+    if (relativePath.includes(",")) {
+        const [, , idString] = relativePath.split(",")
+        if (idString.includes("_")) {
+            [contentId, workId] = idString.split("_").map(x => parseInt(x));
+
+        } else {
+            contentId = parseInt(idString)
+        }
+        relativePath = relativePath.substring(0, relativePath.indexOf(','));
+    }
+
+    if (relativePath.endsWith('/')) {
+        relativePath = relativePath.slice(0, -1)
+    }
+
+    const urlSegments = relativePath.split('/')
+    const language = urlSegments.length ? urlSegments.find(s => s.length === 2) : "en"
+
+    return { relativePath, locales: language, language, contentId, workId }
+}

src/@optimizely/forms-sdk/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./form-loader";
 export * from "./models";
-export * from "./form-step";
+export * from "./form-step";
+export * from "./helpers"

src/@optimizely/forms-sdk/src/models/elements/Number.ts

@@ -1,11 +1,11 @@
-import { InputElementBaseProperties, FormElementBase } from "./base";
+import { InputElementBaseProperties, InputElementBase } from "./base";
 /**
  * Only allows users to input numeric values
  */
-export interface Number extends FormElementBase {
-
+export interface Number extends InputElementBase {
+    properties: NumberProperties
 }
 
 export interface NumberProperties extends InputElementBaseProperties {
-
+    autoComplete: string;
 }