@integry/sdk 4.7.39 → 4.7.41

package/src/components/form/ObjectField/index.ts

@@ -1,593 +0,0 @@
-import { html } from 'htm/preact';
-import { useState, useEffect } from 'preact/hooks';
-import { Input } from '@/components/Input';
-import { TextArea } from '@/components/TextArea';
-import { CheckboxGroup } from '@/components/CheckboxGroup';
-import ConfigureFieldWrapper from '@/components/ConfigureFieldWrapper';
-import { ListBox } from '@/components/MultipurposeField/Dropdown';
-import { MultipurposeField } from '@/components/MultipurposeField';
-import styles from './styles.module.scss';
-
-interface ObjectFieldProps {
-  field: any;
-  functionArguments: any;
-  connectedAccount: string;
-  appName: string;
-  onChange: (
-    fieldId: string,
-    value: any,
-    type: string,
-    required: boolean,
-    parentFieldId?: string,
-    index?: number,
-  ) => void;
-  onChangeInFlow?: (val: any) => void;
-  apiHandler: any;
-  isArray?: boolean; // New prop to check if the input is an array
-  activityOutputData: any;
-  activityOutputDataRaw: any;
-  objectValue?: any;
-  isDisabled?: boolean;
-  tagsTree?: any; // Optional prop for tags tree
-  showMenuOnLeft?: boolean; // Optional prop to show menu on the left
-}
-
-type Option = {
-  id: any;
-  value: string;
-};
-interface FieldDetails {
-  meta: {
-    title: string;
-    description_for_users: string;
-    is_required: boolean;
-    machine_name?: string;
-    ui: {
-      placeholder: string;
-      regex?: string;
-      regex_error_message?: string;
-      ui_field: {
-        type?: string;
-        options?: Option[];
-        data_source?: any; // If needed, define this more specifically
-        endpointURL?: string; // Add endpointURL here
-        option_key_path?: string;
-        value_key_path?: string;
-      };
-    };
-  };
-  properties?: any; // If there are nested fields for objects
-  type: string;
-}
-
-// Define the structure of each object in the array
-type FieldObject = {
-  [key: string]: any; // Allow any string key with any value
-};
-
-const transformTemplateFieldsToProperties = (templateFields: any[]) => {
-  const properties: { [key: string]: FieldDetails } = {};
-
-  templateFields.forEach((tf) => {
-    properties[tf.id || tf.machine_name] = {
-      meta: {
-        title: tf.title,
-        description_for_users: tf.description,
-        is_required: tf.is_required,
-        machine_name:
-          tf?.activity_field?.machine_name || tf?.machine_name || '',
-        ui: {
-          placeholder: tf.placeholder,
-          regex: tf.regex || '',
-          regex_error_message: tf.regex_msg || 'Invalid input.',
-          ui_field: tf?.ui_field || {
-            type: tf.type || 'TEXTFIELD',
-            options: [], // Populate if needed
-            data_source: null, // Adjust if needed
-            endpointURL: '', // Adjust if needed
-          },
-        },
-      },
-      properties: tf.template_fields?.length
-        ? transformTemplateFieldsToProperties(tf.template_fields)
-        : undefined,
-      type: tf.data_type || 'string',
-    };
-  });
-
-  return properties;
-};
-
-const ObjectField = (props: ObjectFieldProps) => {
-  const {
-    field,
-    functionArguments,
-    connectedAccount,
-    appName,
-    onChange,
-    onChangeInFlow,
-    apiHandler,
-    isArray = false, // Default to false
-    activityOutputData,
-    activityOutputDataRaw,
-    objectValue,
-    isDisabled = false,
-    tagsTree = null,
-    showMenuOnLeft = false, // Default to false
-  } = props;
-
-  // Calculate initial state based on field properties
-  const calculateInitialObjectHasFields = (f: any) => {
-    // Special case for the Blocks field or similar fields
-    if (
-      field.type === 'TEXTAREA' &&
-      (field.data_type === 'OBJECT[]' || field.data_type === 'OBJECT') &&
-      (!field.template_fields || field.template_fields.length === 0)
-    ) {
-      return false;
-    }
-
-    // For other cases, use the original logic
-    if (Array.isArray(field.template_fields)) {
-      if (field.template_fields.length > 0) {
-        return true;
-      }
-      if (field.type === 'TEXTAREA' || field.type === 'DYNAMIC') {
-        return false;
-      }
-    } else if (field.properties && Object.keys(field.properties).length === 0) {
-      return false;
-    }
-
-    return true;
-  };
-
-  const calculateInitialShowAddMoreOption = (f: any) => {
-    // Special case for the Blocks field or similar fields
-    if (
-      field.type === 'TEXTAREA' &&
-      (field.data_type === 'OBJECT[]' || field.data_type === 'OBJECT') &&
-      (!field.template_fields || field.template_fields.length === 0)
-    ) {
-      return false;
-    }
-
-    // For other cases, use the original logic
-    if (Array.isArray(field.template_fields)) {
-      if (field.template_fields.length > 0) {
-        return true;
-      }
-      if (field.type === 'TEXTAREA' || field.type === 'DYNAMIC') {
-        return false;
-      }
-    } else if (field.properties && Object.keys(field.properties).length === 0) {
-      return false;
-    }
-
-    return true;
-  };
-
-  const [objectArray, setObjectArray] = useState<FieldObject[]>(
-    Array.isArray(objectValue) ? objectValue : [{}],
-  ); // Start with one empty object in the array
-  const [showAddMoreOption, setShowAddMoreOption] = useState(() =>
-    calculateInitialShowAddMoreOption(field),
-  );
-  const [objectHasFields, setObjectHasFields] = useState(() =>
-    calculateInitialObjectHasFields(field),
-  );
-
-  let templateFields = [];
-
-  if (Array.isArray(field.template_fields)) {
-    if (field.template_fields.length > 0) {
-      templateFields = field.template_fields;
-    } else if (field.type === 'TEXTAREA' || field.type === 'DYNAMIC') {
-      if (field.data_type === 'OBJECT[]' || field.data_type === 'OBJECT') {
-        field.type = 'TEXTAREA';
-        setShowAddMoreOption(false);
-        setObjectHasFields(false);
-      }
-
-      templateFields = [field];
-    }
-  } else if (field.properties && Object.keys(field.properties).length === 0) {
-    field.type = 'TEXTAREA';
-    field.template_fields = [];
-    field.properties = null;
-    templateFields = [field];
-    setShowAddMoreOption(false);
-    setObjectHasFields(false);
-  }
-  const normalizedField = {
-    ...field,
-    properties:
-      field.properties ||
-      (field.template_fields
-        ? transformTemplateFieldsToProperties(templateFields)
-        : {}),
-  };
-
-  const isFlow = !field.properties && !!field.template_fields;
-
-  if (isFlow) {
-    setObjectHasFields(
-      !!Object.keys(normalizedField?.template_fields || []).length,
-    );
-    setShowAddMoreOption(
-      !!Object.keys(normalizedField?.template_fields || []).length,
-    );
-  } else {
-    setObjectHasFields(!!Object.keys(normalizedField?.properties || []).length);
-    setShowAddMoreOption(
-      !!Object.keys(normalizedField?.properties || []).length,
-    );
-  }
-
-  useEffect(() => {
-    let objectValueCopy = objectValue;
-    if (
-      typeof objectValue === 'string' &&
-      objectValue.length > 0 &&
-      field.type !== 'TEXTAREA'
-    ) {
-      // if default value was sent as a strinfiyed object
-      objectValueCopy = JSON.parse(objectValue);
-    }
-    if (objectValueCopy) {
-      if (Array.isArray(objectValueCopy)) {
-        setObjectArray(objectValueCopy);
-      } else {
-        setObjectArray([objectValueCopy]);
-      }
-    }
-  }, [objectValue]);
-
-  // Method to handle field changes for each object in the array
-  const handleFieldChange = (
-    index: number,
-    fieldId: string,
-    value: any,
-    dataType: string,
-    machine_name?: string,
-  ) => {
-    const updatedObjectArray =
-      field.type === 'TEXTAREA' ? value : [...objectArray];
-    const updatedObjectArrayKey = (isFlow && machine_name) || fieldId;
-    if (field.type !== 'TEXTAREA') {
-      updatedObjectArray[index][updatedObjectArrayKey] = value;
-    }
-
-    // Update the state with the modified object array
-    if (field.type === 'TEXTAREA') {
-      setObjectArray([updatedObjectArray]);
-    } else {
-      setObjectArray(updatedObjectArray);
-    }
-
-    // Optionally trigger the parent change handler
-    if (isArray) {
-      if (isFlow && onChangeInFlow) {
-        if (normalizedField.template_fields?.length > 0) {
-          onChangeInFlow(JSON.stringify(updatedObjectArray));
-        } else {
-          onChangeInFlow(value);
-        }
-      } else {
-        onChange(
-          fieldId,
-          updatedObjectArray,
-          dataType,
-          field.is_required,
-          field.id,
-          index,
-        );
-      }
-    } else if (isFlow && onChangeInFlow) {
-      if (normalizedField.template_fields?.length > 0) {
-        onChangeInFlow(
-          JSON.stringify({
-            [machine_name || '']: value,
-          }),
-        );
-      } else {
-        onChangeInFlow(value);
-      }
-    } else {
-      onChange(fieldId, value, dataType, field.is_required, field.id);
-    }
-  };
-
-  // Method to handle the 'Add More' button click
-  const handleAddMore = () => {
-    setObjectArray([...objectArray, {}]); // Add another empty object to the array
-  };
-
-  const getRegex: any = (f: any) => {
-    if (f.type === 'boolean') {
-      return '^(true|false)$'; // Matches "true" or "false" as strings
-    }
-    if (f.type === 'number') {
-      return '^\\d+$'; // Matches numeric values only
-    }
-    if (f.type === 'array' && f.items && f.items.type === 'number') {
-      return '^\\d+$'; // Matches numeric values only
-    }
-
-    return ''; // Default to empty string
-  };
-
-  const getRegexErrorMessage: any = (f: any) => {
-    if (f.type === 'boolean') {
-      return 'Please enter "true" or "false".'; // Error message for boolean fields
-    }
-    if (f.type === 'number') {
-      return 'Please enter a valid number.'; // Error message for number fields
-    }
-    if (f.type === 'array' && f.items && f.items.type === 'number') {
-      return 'Please enter a valid number.'; // Error message for number fields
-    }
-
-    return 'Invalid input.'; // Default error message
-  };
-
-  const handleDeleteIconClick = (index: number) => {
-    setObjectArray((prevValues) => {
-      const newValues = prevValues.filter((_, i) => i !== index);
-      return newValues;
-    });
-  };
-
-  const formatValueForTextarea = (value: any): string => {
-    if (typeof value === 'object' && value !== null) {
-      return JSON.stringify(value, null, 2); // Pretty-print with 2-space indentation
-    }
-    return String(value || ''); // Convert other values to string
-  };
-
-  // Render fields for each object in the array
-  const renderFields = (
-    properties: { [key: string]: FieldDetails },
-    objectIndex: number,
-  ) =>
-    Object.entries(properties).map(([fieldName, fieldDetails], index) => {
-      const fieldType = fieldDetails.meta.ui.ui_field?.type || 'TEXTFIELD';
-      let options: Option[] = fieldDetails.meta.ui.ui_field?.options || [];
-      if (fieldType === 'CHECKBOX') {
-        options = [
-          {
-            id: '0',
-            value: 'No',
-          },
-          {
-            id: '1',
-            value: 'Yes',
-          },
-        ];
-      }
-      const placeholder =
-        fieldDetails.meta.ui.placeholder ||
-        (['DYNAMIC_DROPDOWN', 'STATIC_DROPDOWN'].includes(
-          fieldDetails.meta.ui.ui_field?.type || '',
-        )
-          ? `Select or enter a value here...`
-          : `Enter value here...`);
-
-      const fieldElement = html`
-        <div
-          id=${[
-            'integry-action-field-wrap',
-            field?.activity_field?.machine_name !==
-            fieldDetails?.meta?.machine_name
-              ? field?.activity_field?.machine_name
-              : null,
-            fieldDetails?.meta?.machine_name,
-            isArray ? objectIndex : null,
-          ]
-            .filter(Boolean)
-            .join('-')}
-          class="${styles.functionFieldWrap
-            ? styles.functionFieldWrap
-            : ''} integry-action-field-wrap"
-        >
-          <${ConfigureFieldWrapper} field=${fieldDetails}>
-            ${fieldType === 'TEXTFIELD' &&
-            html`
-              <${MultipurposeField}
-                id="${fieldName}"
-                title="${fieldDetails.meta.title}"
-                activityOutputData=${activityOutputData}
-                activityOutputDataRaw=${activityOutputDataRaw}
-                description="${fieldDetails.meta.description_for_users}"
-                value=${(objectArray[objectIndex] || {})[
-                  fieldDetails?.meta?.machine_name || ''
-                ] || ''}
-                placeholder="${placeholder}"
-                onChange=${(val: any) => {
-                  const valueReceived =
-                    fieldDetails.type === 'number' ? Number(val) : val;
-                  handleFieldChange(
-                    objectIndex,
-                    fieldName,
-                    valueReceived,
-                    fieldDetails.meta.ui.ui_field?.type || 'TEXTFIELD',
-                    fieldDetails.meta.machine_name,
-                  );
-                }}
-                regex=${fieldDetails.meta.ui.regex || getRegex(fieldDetails)}
-                regexErrorMessage=${fieldDetails.meta.ui.regex_error_message ||
-                getRegexErrorMessage(fieldDetails)}
-                isRequired="${fieldDetails.meta.is_required}"
-                type=${fieldType}
-                isMappable=${activityOutputDataRaw &&
-                Object.entries(activityOutputDataRaw).length > 0}
-                isEditable=${true}
-                allowTagsInText=${activityOutputDataRaw}
-                fieldId=${`${field.id}_${fieldName}`}
-                isDisabled=${isDisabled}
-              ><//>
-            `}
-            ${fieldType === 'TEXTAREA' &&
-            html`
-              <${MultipurposeField}
-                id="${fieldName}"
-                title="${fieldDetails.meta.title}"
-                description="${fieldDetails.meta.description_for_users}"
-                activityOutputData=${activityOutputData}
-                activityOutputDataRaw=${activityOutputDataRaw}
-                value=${(objectArray[objectIndex] || {})[fieldName] || ''}
-                onChange=${(val: any) =>
-                  handleFieldChange(
-                    objectIndex,
-                    fieldName,
-                    val,
-                    fieldDetails.meta.ui.ui_field?.type || 'TEXTAREA',
-                    fieldDetails.meta.machine_name,
-                  )}
-                placeholder="${placeholder}"
-                isRequired="${fieldDetails.meta.is_required}"
-                regex=${fieldDetails.meta.ui.regex || getRegex(fieldDetails)}
-                regexErrorMessage=${fieldDetails.meta.ui.regex_error_message ||
-                getRegexErrorMessage(fieldDetails)}
-                isEditable=${true}
-                fieldId=${`${field.id}_${fieldName}`}
-                type=${fieldType}
-                isMappable=${tagsTree
-                  ? true
-                  : activityOutputDataRaw &&
-                    Object.entries(activityOutputDataRaw).length > 0}
-                allowTagsInText=${activityOutputDataRaw || tagsTree}
-                value=${objectHasFields
-                  ? (objectArray[objectIndex] || {})[
-                      fieldDetails?.meta?.machine_name || ''
-                    ] || ''
-                  : formatValueForTextarea(objectValue)}
-                isDisabled=${isDisabled}
-                tagsTree=${tagsTree}
-                showMenuOnLeft=${showMenuOnLeft}
-              ><//>
-            `}
-            ${fieldType === 'DYNAMIC_DROPDOWN' &&
-            html`
-              <${ListBox}
-                key=${fieldName}
-                fieldId=${fieldName}
-                apiHandler=${apiHandler}
-                title=${fieldDetails.meta.title}
-                description=${fieldDetails.meta.description_for_users}
-                placeholder="${placeholder}"
-                isRequired="${fieldDetails.meta.is_required}"
-                isDynamic=${true}
-                isDisabled=${isDisabled}
-                endpointUrl=${fieldDetails.meta.ui.ui_field?.data_source?.url ||
-                ''}
-                options=${options}
-                value=${(objectArray[objectIndex] || {})[fieldName] || ''}
-                onChange=${(val: any) =>
-                  handleFieldChange(
-                    objectIndex,
-                    fieldName,
-                    val,
-                    fieldDetails.meta.ui.ui_field?.type || 'DYNAMIC_DROPDOWN',
-                    fieldDetails.meta.machine_name,
-                  )}
-                optionKeyPath=${fieldDetails.meta.ui.ui_field?.value_key_path ||
-                ''}
-                valueKeyPath=${fieldDetails.meta.ui.ui_field?.option_key_path ||
-                ''}
-              />
-            `}
-            ${(fieldType === 'STATIC_DROPDOWN' || fieldType === 'CHECKBOX') &&
-            html`
-              <${ListBox}
-                key=${`${fieldName}_${objectIndex}`}
-                fieldId=${`${fieldName}_${objectIndex}`}
-                apiHandler=${apiHandler}
-                title=${fieldDetails.meta.title}
-                description=${fieldDetails.meta.description_for_users}
-                placeholder="${placeholder}"
-                isRequired="${fieldDetails.meta.is_required}"
-                isDynamic=${false}
-                isDisabled=${isDisabled}
-                endpointUrl=${JSON.stringify(options) || ''}
-                options=${options}
-                type=${fieldType}
-                value=${(objectArray[objectIndex] || {})[fieldName] || ''}
-                onChange=${(val: any) =>
-                  handleFieldChange(
-                    objectIndex,
-                    fieldName,
-                    val,
-                    fieldDetails.meta.ui.ui_field?.type || 'DYNAMIC_DROPDOWN',
-                    fieldDetails.meta.machine_name,
-                  )}
-              />
-            `}
-          <//>
-        </div>
-      `;
-
-      return fieldElement;
-    });
-  return html`
-    <div class="${styles.objectContainer}">
-      ${objectArray.map(
-        (_, index) =>
-          html`
-            <div class="${objectHasFields ? styles.objectFieldWrap : ''}">
-              ${objectHasFields &&
-              html`<div class="${styles.label}">
-                <label class="${styles.subLabel}">
-                  <div>
-                    ${field.title}${isArray ? ` ${index + 1}` : ''}
-                    ${isArray &&
-                    objectArray.length > 1 &&
-                    index !== objectArray.length - 1 &&
-                    html`
-                      <div class=${styles.removeButton}>
-                        <button
-                          class="${styles.removeButton}"
-                          onClick=${() => {
-                            if (handleDeleteIconClick) {
-                              handleDeleteIconClick(index);
-                            }
-                          }}
-                          tabindex="-1"
-                        >
-                          <svg
-                            width="15"
-                            height="15"
-                            viewBox="0 0 15 15"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path d="M1.5 4.1999H13.65" stroke="#999999" />
-                            <path
-                              d="M11.6254 5.5498V6.2248L10.9504 13.6498H4.20039L3.52539 6.2248V5.5498"
-                              stroke="#999999"
-                              stroke-linejoin="round"
-                            />
-                            <path
-                              d="M5.55078 3.525V2.175C5.55078 1.80221 5.85299 1.5 6.22578 1.5H8.92578C9.29857 1.5 9.60078 1.80221 9.60078 2.175V3.525"
-                              stroke="#999999"
-                            />
-                          </svg>
-                        </button>
-                      </div>
-                    `}
-                  </div>
-                  <div>${field.description}</div>
-                </label>
-              </div>`}
-              ${renderFields(normalizedField.properties, index)}
-            </div>
-          `,
-      )}
-      ${isArray &&
-      showAddMoreOption &&
-      html` <a onClick=${handleAddMore}>+ Add another ${field.title}</a> `}
-    </div>
-  `;
-};
-
-export { ObjectField, ObjectFieldProps };