form-craft-package 1.8.2-dev.1 → 1.8.2-dev.2

package/src/components/form/layout-renderer/3-element/2-field-element.tsx

@@ -1,4 +1,4 @@
-import { Key, ReactNode, Fragment } from 'react'
+import { Key, ReactNode, Fragment, memo } from 'react'
 import { FaCaretDown } from 'react-icons/fa'
 import dayjs, { Dayjs } from 'dayjs'
 import { CountryEnum, DataSanitizationTypeEnum, ElementTypeEnum } from '../../../../enums'
@@ -15,22 +15,24 @@ interface ILayoutRenderer_FieldElement {
   formRef?: FormInstance
 }
 
-export const LayoutRenderer_FieldElement = ({ children, formRef }: ILayoutRenderer_FieldElement): JSX.Element => {
-  if (Array.isArray(children()))
+export const LayoutRenderer_FieldElement = memo(({ children, formRef }: ILayoutRenderer_FieldElement): JSX.Element => {
+  const elems = children()
+  if (Array.isArray(elems)) {
     return (
       <>
-        {(children() as IMapperFieldObj[])
+        {elems
           .filter(({ isHidden = false }) => !isHidden)
-          .map((field: IMapperFieldObj, fieldIdx: Key) => (
-            <FieldFormItemWrapper field={field} fieldIdx={fieldIdx} formRef={formRef} />
+          .map((field: IMapperFieldObj, idx: Key) => (
+            <FieldFormItemWrapper key={idx} field={field} fieldIdx={idx} formRef={formRef} />
           ))}
       </>
     )
+  }
 
-  if ((children() as IMapperFieldObj).isHidden) return <></>
+  if (elems.isHidden) return <></>
 
-  return <FieldFormItemWrapper field={children() as IMapperFieldObj} fieldIdx={1} formRef={formRef} />
-}
+  return <FieldFormItemWrapper field={elems} fieldIdx={1} formRef={formRef} />
+})
 
 const FieldFormItemWrapper = ({
   field,
@@ -40,231 +42,204 @@ const FieldFormItemWrapper = ({
   field: IMapperFieldObj
   fieldIdx: Key
   formRef?: FormInstance
-}) => (
-  <Fragment key={fieldIdx}>
-    <Form.Item
-      key={fieldIdx}
-      name={field.name}
-      label={field.hasNoLabel ? '' : field.label}
-      labelAlign="left"
-      messageVariables={{ [field.name as string]: formRef?.getFieldValue(field.name) }}
-      valuePropName={
-        field.type && [ElementTypeEnum.Checkbox, ElementTypeEnum.Switch].includes(field.type) ? 'checked' : 'value'
-      }
-      rules={mapToFormItemRules(field.validations ?? [], field.name as string)}
-      normalize={(value) => {
-        const sanitizationRule = field.sanitization
-        if (!sanitizationRule || sanitizationRule.type === DataSanitizationTypeEnum.Default) return value
+}) => {
+  const { name, nameFullPath, label, hasNoLabel, type, validations, sanitization, disabled } = field
 
-        if (sanitizationRule.type === DataSanitizationTypeEnum.Predefined && sanitizationRule.pattern)
-          return formatByPattern(value, sanitizationRule.pattern)
+  return (
+    <Fragment key={fieldIdx}>
+      <Form.Item
+        name={name}
+        label={hasNoLabel ? '' : label}
+        labelAlign="left"
+        messageVariables={{ [String(name)]: formRef?.getFieldValue(name) }}
+        valuePropName={type && [ElementTypeEnum.Checkbox, ElementTypeEnum.Switch].includes(type) ? 'checked' : 'value'}
+        rules={mapToFormItemRules(validations ?? [], String(name))}
+        normalize={(value) => {
+          if (!sanitization || sanitization.type === DataSanitizationTypeEnum.Default) return value
 
-        if (sanitizationRule.type === DataSanitizationTypeEnum.Custom)
-          return formatByPattern(value, sanitizationRule.pattern)
-      }}
-    >
-      {field.type === ElementTypeEnum.ColorPicker ? (
-        <CustomColorField formRef={formRef} name={field.name} disabled={field.disabled} />
-      ) : (
-        getField(field)
-      )}
-    </Form.Item>
-    {field.disabled && field.type !== ElementTypeEnum.Checkbox && <DisabledFieldIndicator />}
-  </Fragment>
-)
+          // Predefined or Custom both use pattern
+          if (sanitization.pattern) {
+            return formatByPattern(value, sanitization.pattern)
+          }
 
-const getField = ({
-  disabled,
-  options = [],
-  type = ElementTypeEnum.ShortInput,
-  label,
-  allowClear = true,
-  isMultiValue = false,
-  placeholder,
-  minRows = 3,
-  numberFieldMin,
-  numberFieldMax,
-  isCustom,
-  country = CountryEnum.US,
-  decimalPoint = 0,
-  mode,
-  disabledDate,
-}: Partial<IMapperFieldObj>): JSX.Element => {
-  switch (type) {
-    case ElementTypeEnum.LongInput:
-      return (
-        <Input.TextArea
-          autoSize={{ minRows }}
-          placeholder={placeholder as string}
-          disabled={disabled}
-          autoComplete="off"
-          className={ELEMENTS_DEFAULT_CLASS.Input}
-        />
-      )
-    case ElementTypeEnum.Select:
-      return (
-        <Select
-          placeholder={placeholder}
-          suffixIcon={<FaCaretDown />}
-          options={options}
-          disabled={disabled}
-          showSearch
-          optionFilterProp="label"
-          filterOption={(input, option) => {
-            const noOtherField = !option?.field2 && !option?.field3 && !option?.field4
-            const text = option
-              ? typeof option.label === 'string' && noOtherField
-                ? option.label
-                : [option.label, option.field2 ?? '', option.field3 ?? '', option.field4 ?? ''].join(' ')
-              : ''
-
-            return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }}
-          optionRender={(option: any) => {
-            const opData = option.data || {}
-            const noOtherField = !opData.field2 && !opData.field3 && !opData.field4
+          return value
+        }}
+      >
+        {type === ElementTypeEnum.ColorPicker ? (
+          <CustomColorField formRef={formRef} name={nameFullPath} disabled={disabled} />
+        ) : (
+          getField(field)
+        )}
+      </Form.Item>
+      {disabled && type !== ElementTypeEnum.Checkbox && <DisabledFieldIndicator />}
+    </Fragment>
+  )
+}
 
-            if (noOtherField) return option.label
+// Map each ElementTypeEnum to a renderer function
+type FieldRenderer = (field: Partial<IMapperFieldObj>) => JSX.Element
 
-            return (
-              <div key={opData.value} className="flex flex-col gap-0.5">
-                <div className="space-x-2">
-                  <span className="text-primary font-bold">{opData.label}</span>
-                  {opData.field2 && (
-                    <span className="text-12 italic font-normal">
-                      ({opData.field2_RC ? renderData(opData.field2, opData.field2_RC) : opData.field2})
-                    </span>
-                  )}
-                </div>
-                {opData.field3 && (
-                  <div className="text-12">
-                    {opData.field3_RC ? renderData(opData.field3, opData.field3_RC) : opData.field3}
-                  </div>
-                )}
-                {opData.field4 && opData.field4_RC ? renderData(opData.field4, opData.field4_RC) : opData.field4}
-              </div>
-            )
-          }}
-          allowClear={allowClear}
-          className={`${ELEMENTS_DEFAULT_CLASS.Select} w-full`}
-          mode={mode}
-        />
-      )
-    case ElementTypeEnum.Checkbox:
-      return (
-        <Checkbox disabled={disabled} className={ElementTypeEnum.Checkbox}>
-          {label}
-        </Checkbox>
-      )
-    case ElementTypeEnum.Switch:
-      return (
-        <div className={`${ELEMENTS_DEFAULT_CLASS.SwitchContainer} flex items-center gap-2`}>
-          <Switch disabled={disabled} className={ELEMENTS_DEFAULT_CLASS.Switch} />
-          {label}
-        </div>
-      )
-    case ElementTypeEnum.Radio:
-      if (isMultiValue)
+const fieldRenderers: Partial<Record<ElementTypeEnum, FieldRenderer>> = {
+  [ElementTypeEnum.LongInput]: ({ placeholder, disabled, minRows }) => (
+    <Input.TextArea
+      autoSize={{ minRows: minRows! }}
+      placeholder={placeholder as string}
+      disabled={disabled}
+      autoComplete="off"
+      className={ELEMENTS_DEFAULT_CLASS.Input}
+    />
+  ),
+  [ElementTypeEnum.Select]: ({ placeholder, options = [], disabled, allowClear = true, mode }) => (
+    <Select
+      placeholder={placeholder}
+      suffixIcon={<FaCaretDown />}
+      options={options}
+      disabled={disabled}
+      showSearch
+      optionFilterProp="label"
+      filterOption={(input, option) => {
+        const noOther = !option?.field2 && !option?.field3 && !option?.field4
+        const text = option
+          ? typeof option.label === 'string' && noOther
+            ? option.label
+            : [option.label, option.field2 ?? '', option.field3 ?? '', option.field4 ?? ''].join(' ')
+          : ''
+        return text.toLowerCase().includes(input.toLowerCase())
+      }}
+      optionRender={(opt: any) => {
+        const data = opt.data || {}
+        const simple = !data.field2 && !data.field3 && !data.field4
+        if (simple) return opt.label
         return (
-          <Checkbox.Group disabled={disabled} className={ELEMENTS_DEFAULT_CLASS.CheckboxGroup}>
-            <div className="flex items-center gap-1">
-              {options?.map((o, oIdx) => (
-                <Checkbox key={oIdx} value={o.value}>
-                  {o.label}
-                </Checkbox>
-              ))}
+          <div className="flex flex-col gap-0.5" key={data.value}>
+            <div className="space-x-2">
+              <span className="text-primary font-bold">{data.label}</span>
+              {data.field2 && (
+                <span className="text-12 italic font-normal">
+                  ({data.field2_RC ? renderData(data.field2, data.field2_RC) : data.field2})
+                </span>
+              )}
             </div>
-          </Checkbox.Group>
+            {data.field3 && (
+              <div className="text-12">{data.field3_RC ? renderData(data.field3, data.field3_RC) : data.field3}</div>
+            )}
+            {data.field4 && (data.field4_RC ? renderData(data.field4, data.field4_RC) : data.field4)}
+          </div>
         )
+      }}
+      allowClear={allowClear}
+      className={`${ELEMENTS_DEFAULT_CLASS.Select} w-full`}
+      mode={mode}
+    />
+  ),
+  [ElementTypeEnum.Checkbox]: ({ label, disabled }) => (
+    <Checkbox disabled={disabled} className={ElementTypeEnum.Checkbox}>
+      {label}
+    </Checkbox>
+  ),
+  [ElementTypeEnum.Switch]: ({ label, disabled }) => (
+    <div className={`${ELEMENTS_DEFAULT_CLASS.SwitchContainer} flex items-center gap-2`}>
+      <Switch disabled={disabled} className={ELEMENTS_DEFAULT_CLASS.Switch} />
+      {label}
+    </div>
+  ),
+  [ElementTypeEnum.Radio]: ({ options = [], disabled, isMultiValue, isCustom }) =>
+    isMultiValue ? (
+      <Checkbox.Group disabled={disabled} className={ELEMENTS_DEFAULT_CLASS.CheckboxGroup}>
+        <div className="flex items-center gap-1">
+          {options.map((o, i) => (
+            <Checkbox key={i} value={o.value}>
+              {o.label}
+            </Checkbox>
+          ))}
+        </div>
+      </Checkbox.Group>
+    ) : (
+      <Radio.Group
+        disabled={disabled}
+        className={`${ELEMENTS_DEFAULT_CLASS.RadioGroup} w-full ${isCustom ? 'fc-custom' : ''}`}
+      >
+        <div className="flex items-center gap-1">
+          {options.map((o, i) => (
+            <Radio key={i} value={o.value}>
+              {o.label}
+            </Radio>
+          ))}
+        </div>
+      </Radio.Group>
+    ),
+  [ElementTypeEnum.NumberInput]: ({ placeholder, disabled, numberFieldMin, numberFieldMax }) => (
+    <InputNumber
+      placeholder={placeholder as string}
+      disabled={disabled}
+      className={`${ELEMENTS_DEFAULT_CLASS.NumberInput} w-full`}
+      min={numberFieldMin}
+      max={numberFieldMax}
+    />
+  ),
+  [ElementTypeEnum.CurrencyInput]: ({ placeholder, disabled, country, decimalPoint }) => (
+    <CurrencyField
+      placeholder={placeholder as string}
+      disabled={disabled}
+      country={country!}
+      decimalPoint={decimalPoint!}
+    />
+  ),
+  [ElementTypeEnum.Password]: ({ placeholder, disabled }) => (
+    <Input.Password
+      className={ELEMENTS_DEFAULT_CLASS.PasswordInput}
+      placeholder={placeholder as string}
+      disabled={disabled}
+    />
+  ),
+  [ElementTypeEnum.DatePicker]: ({ placeholder, disabled, disabledDate }) => (
+    <DatePicker
+      format={datepickerFormats}
+      placeholder={placeholder as string}
+      disabled={disabled}
+      disabledDate={(now) => (disabledDate ? disabledDate(now) : dayjs(now).isBefore(dayjs('1900-01-01')))}
+      allowClear
+      className={`${ELEMENTS_DEFAULT_CLASS.DatePicker} w-full`}
+      onChange={(e) => {
+        if (dayjs(e).isBefore(dayjs('1900-01-01')))
+          Modal.error({ title: 'Invalid Date!', content: 'The year cannot be less than 1900!', centered: true })
+      }}
+    />
+  ),
+  [ElementTypeEnum.RangePicker]: ({ placeholder, disabled, disabledDate }) => (
+    <DatePicker.RangePicker
+      format={datepickerFormats}
+      placeholder={placeholder as [string, string]}
+      disabled={disabled}
+      disabledDate={(now) => (disabledDate ? disabledDate(now) : dayjs(now).isBefore(dayjs('1900-01-01')))}
+      allowClear
+      className={`${ELEMENTS_DEFAULT_CLASS.RangePicker} w-full`}
+      allowEmpty
+    />
+  ),
+  [ElementTypeEnum.TimePicker]: ({ disabled }) => (
+    <DatePicker.TimePicker
+      format={datepickerFormats}
+      disabled={disabled}
+      className={`${ELEMENTS_DEFAULT_CLASS.TimePicker} w-full`}
+      allowClear
+    />
+  ),
+  [ElementTypeEnum.ShortInput]: ({ placeholder, disabled, name }) => (
+    <Input
+      id={name as string}
+      className={ELEMENTS_DEFAULT_CLASS.Input}
+      placeholder={placeholder as string}
+      disabled={disabled}
+      autoComplete="off"
+    />
+  ),
+}
 
-      return (
-        <Radio.Group
-          disabled={disabled}
-          className={`${ELEMENTS_DEFAULT_CLASS.RadioGroup} w-full ${isCustom ? 'fc-custom' : ''}`}
-        >
-          <div className="flex items-center gap-1">
-            {options?.map((o, oIdx) => (
-              <Radio key={oIdx} value={o.value}>
-                {o.label}
-              </Radio>
-            ))}
-          </div>
-        </Radio.Group>
-      )
-    case ElementTypeEnum.NumberInput:
-      return (
-        <InputNumber
-          placeholder={placeholder as string}
-          disabled={disabled}
-          className={`${ELEMENTS_DEFAULT_CLASS.NumberInput} w-full`}
-          min={numberFieldMin}
-          max={numberFieldMax}
-        />
-      )
-    case ElementTypeEnum.CurrencyInput:
-      return (
-        <CurrencyField
-          placeholder={placeholder as string}
-          disabled={disabled}
-          country={country}
-          decimalPoint={decimalPoint}
-        />
-      )
-    case ElementTypeEnum.Password:
-      return (
-        <Input.Password
-          className={ELEMENTS_DEFAULT_CLASS.PasswordInput}
-          placeholder={placeholder as string}
-          disabled={disabled}
-        />
-      )
-    case ElementTypeEnum.DatePicker:
-      return (
-        <DatePicker
-          format={datepickerFormats}
-          placeholder={placeholder as string}
-          disabled={disabled}
-          disabledDate={(now) => (disabledDate ? disabledDate(now) : dayjs(now) < dayjs('01/01/1900'))}
-          allowClear={allowClear}
-          className={`${ELEMENTS_DEFAULT_CLASS.DatePicker} w-full`}
-          onChange={(e) => {
-            if (dayjs(e) < dayjs('01/01/1900'))
-              Modal.error({ title: 'Invalid Date!', content: 'The year cannot be less than 1900!', centered: true })
-          }}
-        />
-      )
-    case ElementTypeEnum.RangePicker:
-      return (
-        <DatePicker.RangePicker
-          format={datepickerFormats}
-          placeholder={placeholder as [string, string] | undefined}
-          disabled={disabled}
-          disabledDate={(now) => (disabledDate ? disabledDate(now) : dayjs(now) < dayjs('01/01/1900'))}
-          allowClear={allowClear}
-          className={`${ELEMENTS_DEFAULT_CLASS.RangePicker} w-full`}
-          allowEmpty
-        />
-      )
-    case ElementTypeEnum.TimePicker:
-      return (
-        <DatePicker.TimePicker
-          format={datepickerFormats}
-          disabled={disabled}
-          className={`${ELEMENTS_DEFAULT_CLASS.TimePicker} w-full`}
-          allowClear={allowClear}
-        />
-      )
-    case ElementTypeEnum.ShortInput:
-    default:
-      return (
-        <Input
-          className={ELEMENTS_DEFAULT_CLASS.Input}
-          placeholder={placeholder as string}
-          disabled={disabled}
-          autoComplete="off"
-        />
-      )
-  }
+const getField = (field: Partial<IMapperFieldObj>): JSX.Element => {
+  const type = field.type ?? ElementTypeEnum.ShortInput
+  const renderer = fieldRenderers[type] || fieldRenderers[ElementTypeEnum.ShortInput]
+  return renderer!(field)
 }
 
 interface IMapperFieldObj {
@@ -272,6 +247,7 @@ interface IMapperFieldObj {
   validations?: IValidationRule[]
   isHidden?: boolean
   name: string | (string | number)[]
+  nameFullPath?: string | (string | number)[]
   label?: string | ReactNode
   description?: string
   placeholder?: string | [string, string]
@@ -290,11 +266,13 @@ interface IMapperFieldObj {
   mode?: 'multiple' | 'tags'
   disabledDate?: (date: Dayjs) => boolean
 }
+
 interface ISelectOption {
   value: number | boolean | string
   label: string | ReactNode
   [key: string]: any
 }
+
 const datepickerFormats = [
   'MM/DD/YYYY',
   'MM/DD/YY',

package/src/components/form/layout-renderer/3-element/3-read-field-data.tsx

@@ -1,18 +1,14 @@
 import { Form } from 'antd'
 import { renderData } from '../../../../functions/forms'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
-import { useMemo } from 'react'
+import { memo, useMemo } from 'react'
 import { DataRenderTypeEnum, ReadFieldDataValueTypeEnum } from '../../../../enums'
 import { IReadFieldDataElementProps } from '../../../../types'
 import { IFormContext } from '../1-row'
 import { evaluateValue } from '../../../../functions/forms/evaluate-value'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
 
-export default function LayoutRenderer_ReadFieldData({
-  formContext,
-  elementProps,
-  style = {},
-}: ILayoutRenderer_ReadFieldData) {
+function LayoutRenderer_ReadFieldData({ formContext, elementProps, style = {} }: ILayoutRenderer_ReadFieldData) {
   const { formRef, companyKey } = formContext
   const fieldValue =
     elementProps.valueType === ReadFieldDataValueTypeEnum.Evaluated
@@ -54,6 +50,8 @@ export default function LayoutRenderer_ReadFieldData({
   )
 }
 
+export default memo(LayoutRenderer_ReadFieldData)
+
 type ILayoutRenderer_ReadFieldData = {
   formContext: IFormContext
   elementProps: IReadFieldDataElementProps

package/src/components/form/layout-renderer/3-element/4-rich-text-editor.tsx

@@ -7,8 +7,9 @@ import { IFormContext } from '../1-row'
 import { mapToFormItemRules } from '../../../../functions'
 import { FieldValidationEnum } from '../../../../enums'
 import { ELEMENTS_DEFAULT_CLASS, REGEX_PATTERNS } from '../../../../constants'
+import { memo } from 'react'
 
-export default function LayoutRenderer_RichEditor({
+function LayoutRenderer_RichEditor({
   formContext,
   elementProps,
   formItem,
@@ -53,6 +54,8 @@ export default function LayoutRenderer_RichEditor({
   )
 }
 
+export default memo(LayoutRenderer_RichEditor)
+
 const formats = ['header', 'bold', 'italic', 'underline', 'align', 'list', 'indent', 'clean']
 const modules = {
   toolbar: [

package/src/components/form/layout-renderer/3-element/5-re-captcha.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import ReCAPTCHA from 'react-google-recaptcha'
 import { cancelableClient } from '../../../../api/client'
 import { IElementBaseProps } from '.'
@@ -6,12 +6,7 @@ import { IReCaptchaElementProps } from '../../../../types'
 import { IFormContext } from '../1-row'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
 
-export default function LayoutRenderer_ReCaptcha({
-  formContext,
-  elementProps,
-  formItem,
-  isDisabled,
-}: ILayoutRenderer_RichEditor) {
+function LayoutRenderer_ReCaptcha({ formContext, elementProps, formItem, isDisabled }: ILayoutRenderer_RichEditor) {
   const { formRef, formKey } = formContext
   const [tokenVerificationFailed, setTokenVerificationFailed] = useState(false)
   const verifyApiCancelFuncRef = useRef<() => void | undefined>()
@@ -57,6 +52,8 @@ export default function LayoutRenderer_ReCaptcha({
   )
 }
 
+export default memo(LayoutRenderer_ReCaptcha)
+
 type ILayoutRenderer_RichEditor = {
   elementProps: IReCaptchaElementProps
   formContext: IFormContext

package/src/components/form/layout-renderer/3-element/6-signature.tsx

@@ -1,5 +1,5 @@
 import { Form } from 'antd'
-import { useEffect, useMemo, useRef } from 'react'
+import { memo, useEffect, useMemo, useRef } from 'react'
 import SignatureCanvas from 'react-signature-canvas'
 import { FormPreservedItemKeys } from '../../../../enums'
 import { Button_FillerPortal } from '../../../common/button'
@@ -10,7 +10,7 @@ import { IFormContext } from '../1-row'
 import { isNewFormDataPage, mapToFormItemRules } from '../../../../functions'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
 
-export default function LayoutRenderer_Signature({
+function LayoutRenderer_Signature({
   formItem,
   elementProps,
   isDisabled,
@@ -81,6 +81,8 @@ export default function LayoutRenderer_Signature({
   )
 }
 
+export default memo(LayoutRenderer_Signature)
+
 type ILayoutRenderer_Signature = {
   elementProps: ISignatureElementProps
   formContext: IFormContext