@integry/sdk 4.5.2 → 4.5.4

package/src/components/MultipurposeField/index.tsx

@@ -0,0 +1,687 @@
+/* eslint-disable no-nested-ternary */
+import { html } from 'htm/preact';
+import { useState, useRef, useEffect } from 'preact/hooks';
+import { Input } from '@/components/Input';
+import { TextArea } from '@/components/TextArea';
+import { useOnClickOutside } from '@/hooks/useOnClickOutside';
+import { FieldDropdown } from '@/components/MultipurposeField/TagMenu';
+import { NestedObject } from '@/interfaces';
+import { TagProps } from '@/components/Tag';
+// @ts-ignore
+import Tagify from '@yaireo/tagify';
+import '@yaireo/tagify/dist/tagify.css'; // Tagify CSS
+import styles from './styles.module.scss';
+
+interface MultipurposeFieldProps {
+  activityOutputData: NestedObject;
+  title: string;
+  description: string;
+  placeholder: string;
+  value?: string;
+  regex: string | null;
+  regexErrorMessage: string | null;
+  isRequired?: boolean;
+  isHidden?: boolean;
+  showStepValidation?: boolean;
+  onChange?: (val: string, passesRegexTest?: boolean) => void;
+  isChanged?: boolean;
+  className?: string;
+  containerClass: string;
+  type: string;
+  key: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  apiHandler: any;
+  isSearchable: boolean;
+  endpointUrl: string;
+  isDynamic: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  endpointData: any;
+  skipOptionFetch: boolean;
+  isMappable?: boolean;
+  isEditable?: boolean;
+  allowTagsInText?: boolean;
+  accountConnected?: boolean;
+  isConfigMode?: boolean;
+  fieldId?: string;
+  labelTags: TagProps[];
+  activityOutputDataRaw: any;
+  enableTagify?: boolean;
+  refreshRootStepData?: (callback?: any) => void;
+  isArray?: boolean;
+  isButtonEnabled?: boolean;
+  buttonText?: string;
+  onButtonClickScript?: string;
+  buttonScriptRequiresAuthToken?: boolean;
+}
+
+const MultipurposeField = (props: MultipurposeFieldProps) => {
+  const {
+    activityOutputData = {},
+    title,
+    description,
+    placeholder,
+    value,
+    regex,
+    regexErrorMessage,
+    isRequired,
+    showStepValidation,
+    onChange,
+    isChanged,
+    className,
+    type,
+    isMappable,
+    isEditable,
+    allowTagsInText,
+    isHidden,
+    isConfigMode = false,
+    fieldId = 'dropdown-field',
+    labelTags = [],
+    activityOutputDataRaw = [],
+    enableTagify = true,
+    refreshRootStepData,
+    isArray = false,
+    isButtonEnabled = false,
+    buttonText = 'Add',
+    onButtonClickScript = '',
+    buttonScriptRequiresAuthToken = false,
+  } = props;
+  const [showTagMenu, setShowTagMenu] = useState(false);
+  const [currentValue, setCurrentValue] = useState(value);
+  const [newValue, setNewValue] = useState(value);
+  const [tempPlaceholder, setTempPlaceholder] = useState('');
+  const [searchValue, setSearchValue] = useState('');
+  const [tagify, setTagify] = useState<Tagify | null>(null);
+  const [defaultTagifyValue, setDefaultTagifyValue] = useState('');
+
+  const menuRef = useRef<HTMLDivElement>();
+  const inputRef = useRef<HTMLInputElement>();
+
+  const handleTabKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      setShowTagMenu(false);
+    }
+  };
+
+  const getFieldValFromActivityOutputRaw = (array: any, val: any) => {
+    const valueToUse = Array.isArray(val) ? val[val.length - 1] : val;
+    const results = valueToUse.toString().match(/{([^}]+)}/g);
+    let valSubstituded = valueToUse;
+    (results || []).forEach((tag: string) => {
+      const tagCheck = tag.replace(/{|}/g, '');
+      (array || []).forEach((arr: any) => {
+        if (arr.value === tagCheck) {
+          valSubstituded = valSubstituded.replace(tag, `{${arr.text}}`);
+        }
+      });
+    });
+    return valSubstituded;
+  };
+
+  useEffect(() => {
+    const clrearTag = (e: KeyboardEvent) => {
+      if (e.key === 'Backspace' && searchValue === '' && !isEditable) {
+        setCurrentValue('');
+        setNewValue('');
+        if (onChange) onChange('', true);
+      }
+    };
+    inputRef.current?.addEventListener('keydown', clrearTag);
+    // cleanup function
+    return () => {
+      inputRef.current?.removeEventListener('keydown', clrearTag);
+    };
+  }, [inputRef.current, searchValue]);
+
+  // useEffect to update the current value when the value prop changes
+  useEffect(() => {
+    setCurrentValue(value);
+    setNewValue(getFieldValFromActivityOutputRaw(activityOutputDataRaw, value));
+
+    // Attach the event listener when the component mounts
+    document.addEventListener('keydown', handleTabKeyDown);
+
+    // Clean up the event listener when the component unmounts
+    return () => {
+      document.removeEventListener('keydown', handleTabKeyDown);
+    };
+  }, [value, title]);
+
+  useEffect(() => {
+    const textfield = inputRef.current;
+    if (textfield && activityOutputDataRaw.length) {
+      const el: any = document.getElementById(`tagify_${fieldId}`);
+      if (el && el.dataset.tagifyFieldId !== fieldId) {
+        el.value = getDefaultTagifyValue(value || '');
+        el.dataset.tagifyFieldId = fieldId;
+      }
+      if (el && !el.__tagify) {
+        var tagify = new Tagify(el, {
+          mode: 'mix',
+          duplicates: true,
+          editTags: false,
+          trim: false,
+          tagTextProp: 'text',
+          templates: {
+            tag: tagTemplate,
+          },
+          userInput: allowTagsInText || !isMappable ? true : false,
+        });
+        tagify
+          .on('focus', handleFieldFocus)
+          .on('remove', handleOnTagRemove)
+          .on('change', handleOnTagRemove);
+        setTagify(tagify);
+      }
+    } else if (
+      textfield &&
+      !activityOutputDataRaw.length &&
+      !value?.startsWith('{') &&
+      !value?.endsWith('}')
+    ) {
+      const el: any = document.getElementById(`tagify_${fieldId}`);
+      if (el && el.dataset.tagifyFieldId !== fieldId) {
+        el.value = getDefaultTagifyValue(value || '');
+        el.dataset.tagifyFieldId = fieldId;
+      }
+    }
+  }, [activityOutputDataRaw]);
+
+  const handleTagInputChanged = (e: any) => {
+    const textField = inputRef.current;
+    if (textField) {
+      const oldValue = textField.value;
+      let newValue = oldValue;
+      if (removeWhitespace(oldValue).length === 0) {
+        newValue = '';
+      }
+      if (e.detail.textContent.length === 0) {
+        newValue = '';
+      }
+      setCurrentValue(newValue);
+      setNewValue(newValue);
+      if (onChange) onChange(newValue, true);
+    }
+  };
+  const handleOnTagRemove = (e: any) => {
+    const el: any = document.getElementById(`tagify_${fieldId}`);
+    let newValue = el.__tagify.DOM.input.innerText;
+    el.__tagify.value.forEach((tag: any) => {
+      newValue = newValue.replace(tag.text, `{${tag.value}}`);
+    });
+    newValue = newValue.trim();
+    if (removeWhitespace(newValue).length === 0) {
+      el.value = '';
+      newValue = '';
+    }
+    // newValue = newValue.replace(/^\n+|\n+$/g, ''); // remove leading and trailing newlines
+    newValue = newValue.replace(/<br>/g, '\n'); // replace <br> with newlines
+    newValue = newValue.replace(/\n{/g, '{').replace(/}\n/g, '}'); // remove \n before and after tags
+
+    setCurrentValue(newValue);
+    if (onChange) onChange(newValue, true);
+  };
+  //write a function that removes all whitespaces including \s, \u200b, \u00A0
+  const removeWhitespace = (str: string) => {
+    return str
+      .replace(/\s/g, '')
+      .replace(/\u200b/g, '')
+      .replace(/\u00A0/g, '');
+  };
+
+  const tagTemplate = (tagData: any) => {
+    return `
+        <tag
+                contenteditable='false'
+                spellcheck='false'
+                tabIndex="-1"
+                class="tagify__tag ${tagData.class ? tagData.class : ''}"
+            >
+            <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
+            <div>
+              <span data-hint="${
+                typeof tagData.title === 'string' ? tagData.title : ''
+              }" class='tagify__tag-text'>${tagData.text}</span>
+            </div>
+        </tag>`;
+  };
+
+  useEffect(() => {
+    if (value) {
+      handleOnChange(value, true);
+    }
+  }, [fieldId]);
+
+  // Returns all those strings which are enclosed in curly braces {}
+  const getTags = (str: string) => {
+    const regex = /\{([^{}]+)}/g;
+    const matches = str.match(regex);
+    return matches;
+  };
+
+  const checkIfTagExists = (AOUElement: string, tagValue: string) => {
+    if (tagValue.includes('out.')) {
+      const tagValuePart = tagValue.split('out.')[1];
+
+      return AOUElement.endsWith(tagValuePart);
+    }
+    return false;
+  };
+
+  const getDefaultTagifyValue = (value: any) => {
+    const tags = getTags(value || '');
+    if (tags && tags.length > 0) {
+      let newValue = value;
+      if (type === 'TEXTAREA') {
+        newValue = newValue.replace(/\n/g, '<br>');
+      }
+      tags.forEach((tag) => {
+        const tagValue = tag.replace(/{|}/g, '');
+        const tagData = (activityOutputDataRaw || []).find((element: any) => {
+          return (
+            element.value === tagValue ||
+            checkIfTagExists(element.value, tagValue)
+          );
+        }) || {
+          value: tagValue,
+          text: tagValue,
+          title: tagValue,
+        };
+        if (tagData) {
+          newValue = newValue?.replace(
+            tag,
+            `[[{"value":"${tagData.value}","text":"${
+              tagData.text
+            }","title":"${getTagData(tagData.text)}"}]]`,
+          );
+        }
+      });
+      return newValue;
+    }
+    return value;
+  };
+
+  useOnClickOutside(menuRef, (e) => {
+    const clickedElement = e.target as HTMLElement;
+
+    if (
+      (clickedElement.tagName === 'INPUT' ||
+        clickedElement.tagName === 'TEXTAREA') &&
+      inputRef.current &&
+      inputRef.current.contains(e.target as Node)
+    )
+      return;
+    setTempPlaceholder('');
+    setSearchValue('');
+    setShowTagMenu(false);
+  });
+
+  const removeSpecificString = (
+    str: string,
+    specificString: string,
+  ): string => {
+    let tempStr = str;
+    if (tempStr.endsWith(specificString)) {
+      tempStr = tempStr.slice(0, -specificString.length);
+    }
+
+    return tempStr;
+  };
+
+  const getTagData = (tag: string) => {
+    if (tag.includes('.')) {
+      const tagParts = tag.split('.');
+      let tagValue: any = activityOutputData;
+      tagParts.forEach((tagPart) => {
+        if (tagValue[tagPart]) {
+          tagValue = tagValue[tagPart];
+        }
+      });
+      return tagValue;
+    }
+    return activityOutputData[tag];
+  };
+
+  const insertTag = (tag: string) => {
+    const result = activityOutputDataRaw.find((element: any) => {
+      return element.text === tag;
+    });
+    if (tagify) {
+      var tagElm = tagify.createTagElem({
+        value: result.value,
+        text: result.text,
+        title: getTagData(tag),
+        editable: false,
+      });
+      tagify.injectAtCaret(tagElm);
+      if (allowTagsInText) {
+        var elm = tagify.insertAfterTag(tagElm, ''); //  <- adds space after the tag
+        tagify.placeCaretAfterNode(elm);
+      }
+    }
+  };
+
+  const onTagClick = (tag: string) => {
+    if (tagify) {
+      if (!allowTagsInText) {
+        tagify.removeAllTags();
+      }
+      insertTag(tag);
+      let newValue = tagify.DOM.input.textContent;
+      tagify.value.forEach((tag: any) => {
+        newValue = (newValue || '').replace(tag.text, `{${tag.value}}`);
+      });
+      newValue = (newValue || '').trim();
+    }
+
+    setCurrentValue(newValue);
+    if (onChange) onChange(newValue || '', true);
+  };
+
+  const onSelect = (option: string) => {
+    const textField = inputRef.current;
+    let newValue = `{${option}}`;
+    setTempPlaceholder('');
+
+    // if the field is editable only, then EU can only eneter text, no tags and tags menu wont show up, so this function wont be called
+    if (textField) {
+      if (allowTagsInText) {
+        // allowTagsInText will be true only if the field is editable
+        // if the fields is editable and allowTagsInText, then EU can enter text or select muliple tags within the text
+        const { selectionStart = 0, selectionEnd = 0 } = textField;
+        const oldValue =
+          searchValue !== ''
+            ? removeSpecificString(textField.value || '', searchValue)
+            : textField.value;
+        const textBeforeCursor = oldValue.substring(0, selectionStart || 0);
+        const textAfterCursor = oldValue.substring(selectionEnd || 0);
+        const insertedText = `{${option}}`;
+        newValue = textBeforeCursor + insertedText + textAfterCursor;
+        textField.selectionStart = (selectionStart || 0) + insertedText.length;
+        textField.selectionEnd = textField.selectionStart;
+        textField.focus();
+      }
+    }
+    // if the field is editable and mappable, then EU can enter text or select a tag
+    // if the fields in mappable only, then select only one tag
+    setCurrentValue(newValue);
+    if (showTagMenu && !isEditable) {
+      setShowTagMenu(false);
+    }
+    setSearchValue('');
+    if (onChange) onChange(newValue, true);
+  };
+
+  const handleFieldFocus = (e: any) => {
+    // open tag menu
+    if (isMappable) {
+      setShowTagMenu(true);
+    }
+    // if allowTagsInText is false, then make current value as temp placeholder to fade it out when user starts typing
+    // current valus is tag when it starts with { and ends with }
+    const vallueToUse = Array.isArray(currentValue)
+      ? currentValue[0]
+      : currentValue;
+    const isTag = vallueToUse?.startsWith('{') && vallueToUse?.endsWith('}');
+    if (isEditable && !allowTagsInText && isMappable && isTag) {
+      setTempPlaceholder(vallueToUse || '');
+    }
+  };
+
+  const getStringFromEnd = (str: string): string => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const regex = /\{([^{}]+)$/;
+    const matches = str.match(regex);
+
+    if (matches && matches.length > 1) {
+      const capturedString = matches[0];
+      return capturedString;
+    }
+    return '';
+  };
+  const handleOnSearch = (val: string) => {
+    setTempPlaceholder(``);
+    const tempSearchValue =
+      showTagMenu && !isEditable ? val.trim() : getStringFromEnd(val);
+    if (val !== '') {
+      setSearchValue(tempSearchValue);
+    } else {
+      setSearchValue('');
+    }
+  };
+  const handleOnChange = (val: string, passedReg: boolean, index?: number) => {
+    setTempPlaceholder('');
+    setCurrentValue(val);
+    if (onChange) onChange(val, passedReg);
+    let valueToUse = index !== undefined ? val[index] : val;
+    if (index === undefined && Array.isArray(valueToUse)) {
+      valueToUse = valueToUse[valueToUse.length - 1];
+    }
+    const tempSearchValue = getStringFromEnd(valueToUse);
+    if (valueToUse !== '') {
+      setSearchValue(tempSearchValue);
+    } else {
+      setSearchValue('');
+    }
+  };
+
+  return html`
+    <div class="${styles.multipurposeFieldContainer}">
+      <div class="${styles.multipurposeField}">
+        ${type === 'TEXTAREA'
+          ? html`
+              ${enableTagify && isMappable
+                ? html`
+                    <${TextArea}
+                      id="tagify_${fieldId}"
+                      title=${title}
+                      description=${description}
+                      placeholder="${showTagMenu && !isEditable
+                        ? currentValue
+                        : tempPlaceholder || placeholder}"
+                      regex=${regex}
+                      regexErrorMessage=${regexErrorMessage}
+                      showStepValidation="${showStepValidation && !showTagMenu}"
+                      isRequired=${isRequired}
+                      onFocus=${handleFieldFocus}
+                      onChange="${showTagMenu && !isEditable
+                        ? handleOnSearch
+                        : handleOnChange}"
+                      isChanged="${isChanged}"
+                      ref=${inputRef}
+                      isEditable="${isEditable || showTagMenu}"
+                      isHidden=${isHidden}
+                      fieldId=${fieldId}
+                      labelTags=${labelTags}
+                    />
+                    <div style="display:none">
+                      <${TextArea}
+                        id="${fieldId}"
+                        title=${title}
+                        description=${description}
+                        placeholder="${showTagMenu && !isEditable
+                          ? currentValue
+                          : tempPlaceholder || placeholder}"
+                        value="${showTagMenu && !isEditable
+                          ? searchValue
+                          : tempPlaceholder
+                          ? ''
+                          : currentValue}"
+                        regex=${regex}
+                        regexErrorMessage=${regexErrorMessage}
+                        showStepValidation="${showStepValidation &&
+                        !showTagMenu}"
+                        isRequired=${isRequired}
+                        onFocus=${handleFieldFocus}
+                        onChange="${showTagMenu && !isEditable
+                          ? handleOnSearch
+                          : handleOnChange}"
+                        isChanged="${isChanged}"
+                        ref=${inputRef}
+                        isEditable="${isEditable || showTagMenu}"
+                        isHidden=${isHidden}
+                        fieldId=${fieldId}
+                        labelTags=${labelTags}
+                      />
+                    </div>
+                  `
+                : html`
+                    <${TextArea}
+                      id="${fieldId}"
+                      title=${title}
+                      description=${description}
+                      placeholder="${showTagMenu && !isEditable
+                        ? currentValue
+                        : tempPlaceholder || placeholder}"
+                      value="${showTagMenu && !isEditable
+                        ? searchValue
+                        : tempPlaceholder
+                        ? ''
+                        : currentValue}"
+                      regex=${regex}
+                      regexErrorMessage=${regexErrorMessage}
+                      showStepValidation="${showStepValidation && !showTagMenu}"
+                      isRequired=${isRequired}
+                      onFocus=${handleFieldFocus}
+                      onChange="${showTagMenu && !isEditable
+                        ? handleOnSearch
+                        : handleOnChange}"
+                      isChanged="${isChanged}"
+                      ref=${inputRef}
+                      isEditable="${isEditable || showTagMenu}"
+                      isHidden=${isHidden}
+                      fieldId=${fieldId}
+                      labelTags=${labelTags}
+                    />
+                  `}
+            `
+          : html`
+              ${enableTagify && isMappable
+                ? html`
+                    <${Input}
+                      id="tagify_${fieldId}"
+                      title="${title}"
+                      description="${description}"
+                      placeholder="${showTagMenu && !isEditable
+                        ? currentValue
+                        : tempPlaceholder || placeholder}"
+                      regex="${regex}"
+                      regexErrorMessage="${regexErrorMessage}"
+                      isRequired="${isRequired}"
+                      showStepValidation="${showStepValidation && !showTagMenu}"
+                      handleFocus=${handleFieldFocus}
+                      onChange="${showTagMenu && !isEditable
+                        ? handleOnSearch
+                        : handleOnChange}"
+                      isEditable="${isEditable || showTagMenu}"
+                      isHidden="${isHidden}"
+                      isChanged=${isChanged}
+                      className="${className}"
+                      ref=${inputRef}
+                      fieldId=${fieldId}
+                      labelTags=${labelTags}
+                      hideError=${false}
+                      isArray=${isArray}
+                      isButtonEnabled=${isButtonEnabled}
+                      buttonText=${buttonText}
+                      onButtonClickScript=${onButtonClickScript}
+                      buttonScriptRequiresAuthToken=${buttonScriptRequiresAuthToken}
+                      apiHandler=${props.apiHandler}
+                    />
+                    <div style="display:none">
+                      <${Input}
+                        id="${fieldId}"
+                        title="${title}"
+                        description="${description}"
+                        placeholder="${showTagMenu && !isEditable
+                          ? currentValue
+                          : tempPlaceholder || placeholder}"
+                        value="${showTagMenu && !isEditable
+                          ? searchValue
+                          : tempPlaceholder
+                          ? ''
+                          : currentValue}"
+                        regex="${regex}"
+                        regexErrorMessage="${regexErrorMessage}"
+                        isRequired="${isRequired}"
+                        showStepValidation="${showStepValidation &&
+                        !showTagMenu}"
+                        handleFocus=${handleFieldFocus}
+                        onChange="${showTagMenu && !isEditable
+                          ? handleOnSearch
+                          : handleOnChange}"
+                        isEditable="${isEditable || showTagMenu}"
+                        isHidden="${isHidden}"
+                        isChanged=${isChanged}
+                        className="${className}"
+                        ref=${inputRef}
+                        fieldId=${fieldId}
+                        labelTags=${labelTags}
+                        hideError=${false}
+                        isArray=${isArray}
+                      />
+                    </div>
+                  `
+                : html`
+                    <${Input}
+                      id="${fieldId}"
+                      title="${title}"
+                      description="${description}"
+                      placeholder="${showTagMenu && !isEditable
+                        ? currentValue
+                        : tempPlaceholder || placeholder}"
+                      value="${showTagMenu && !isEditable
+                        ? searchValue
+                        : tempPlaceholder
+                        ? ''
+                        : currentValue}"
+                      regex="${regex}"
+                      regexErrorMessage="${regexErrorMessage}"
+                      isRequired="${isRequired}"
+                      showStepValidation="${showStepValidation && !showTagMenu}"
+                      handleFocus=${handleFieldFocus}
+                      onChange="${showTagMenu && !isEditable
+                        ? handleOnSearch
+                        : handleOnChange}"
+                      isEditable="${isEditable || showTagMenu}"
+                      isHidden="${isHidden}"
+                      isChanged=${isChanged}
+                      className="${className}"
+                      ref=${inputRef}
+                      fieldId=${fieldId}
+                      labelTags=${labelTags}
+                      hideError=${false}
+                      isArray=${isArray}
+                      isButtonEnabled=${isButtonEnabled}
+                      buttonText=${buttonText}
+                      onButtonClickScript=${onButtonClickScript}
+                      buttonScriptRequiresAuthToken=${buttonScriptRequiresAuthToken}
+                      apiHandler=${props.apiHandler}
+                    />
+                  `}
+            `}
+      </div>
+      <div>
+        ${showTagMenu &&
+        (isMappable || allowTagsInText) &&
+        html` <div
+          ref=${menuRef}
+          className=${`${type.toLocaleLowerCase()}_tags_dropdown`}
+        >
+          <${FieldDropdown}
+            tags=${activityOutputData}
+            onTagClick=${enableTagify && isMappable ? onTagClick : onSelect}
+            hideTabs=${true}
+            fieldId=${fieldId}
+            value=${currentValue}
+            enableSearch=${Object.keys(activityOutputData).length > 0
+              ? true
+              : false}
+            refreshRootStepData=${refreshRootStepData}
+          />
+        </div>`}
+      </div>
+    </div>
+  `;
+};
+
+export { MultipurposeField, MultipurposeFieldProps };