Added dynamic value field between

- input
- textarea

apps/acf-options-page/src/app/configs/action/action-table.tsx

@@ -90,7 +90,6 @@ const ActionTable = ({ actions }: ActionProps) => {
         accessorKey: 'value',
         meta: {
           list: 'value',
-          as: 'textarea',
         },
       },
       {
@@ -131,6 +130,9 @@ const ActionTable = ({ actions }: ActionProps) => {
       updateData: (selectedActionId: RANDOM_UUID, columnId: string, value: any) => {
         dispatch(updateAction({ selectedActionId, name: columnId, value }));
       },
+      updateValueFieldTypes: (selectedActionId: RANDOM_UUID, valueFieldType: 'input' | 'textarea') => {
+        dispatch(updateAction({ selectedActionId, name: 'valueFieldType', value: valueFieldType }));
+      },
     },
   });
 

apps/acf-options-page/src/app/configs/action/editable-cell.tsx

@@ -2,7 +2,7 @@ import { getFieldNameValue } from '@apps/acf-options-page/src/util/element';
 import { Action } from '@dhruv-techapps/acf-common';
 import { ColumnDef } from '@tanstack/react-table';
 import { useEffect, useRef, useState } from 'react';
-import { Form } from 'react-bootstrap';
+import { Button, Form, InputGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 export const defaultColumn: Partial<ColumnDef<Action>> = {
   cell: Cell,
@@ -14,6 +14,7 @@ function Cell({ getValue, row: { original }, column: { id, columnDef }, table })
   const [value, setValue] = useState(initialValue);
   const [isInvalid, setIsInvalid] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
+  const [valueFieldType, setValueFieldType] = useState<'input' | 'textarea'>(original.valueFieldType || 'input');
 
   const onBlur = (e) => {
     const update = getFieldNameValue(e, { [id]: initialValue });
@@ -33,14 +34,14 @@ function Cell({ getValue, row: { original }, column: { id, columnDef }, table })
     setValue(initialValue);
   }, [initialValue, id, original.error]);
 
-  return (
+  const getInput = (as: any) => (
     <Form.Control
       ref={inputRef}
       aria-label={meta?.ariaLabel}
       type={meta?.type}
       value={value || ''}
       name={id}
-      as={meta?.as}
+      as={as}
       rows={1}
       onChange={onChange}
       onBlur={onBlur}
@@ -51,4 +52,24 @@ function Cell({ getValue, row: { original }, column: { id, columnDef }, table })
       autoComplete='off'
     />
   );
+
+  const onValueFieldTypeChange = () => {
+    const newFieldType = valueFieldType === 'input' ? 'textarea' : 'input';
+    setValueFieldType(newFieldType);
+    table.options.meta?.updateValueFieldTypes(original.id, newFieldType);
+  };
+
+  if (id === 'value') {
+    return (
+      <InputGroup>
+        <OverlayTrigger overlay={<Tooltip id={id}>{valueFieldType === 'input' ? `Switch to Textarea` : 'Switch to Input'}</Tooltip>}>
+          <Button type='button' variant='outline-secondary' id='action-field-type' onClick={onValueFieldTypeChange}>
+            {valueFieldType === 'input' ? 'I' : 'T'}
+          </Button>
+        </OverlayTrigger>
+        {getInput(valueFieldType)}
+      </InputGroup>
+    );
+  }
+  return <>{getInput(meta?.as)}</>;
 }

libs/acf/common/src/lib/model/action-model.ts

@@ -1,5 +1,5 @@
-import { Addon } from './addon-model';
 import { RANDOM_UUID } from '../common';
+import { Addon } from './addon-model';
 import { RETRY_OPTIONS } from './setting-model';
 
 // Action Condition
@@ -73,6 +73,7 @@ export type Action = {
   settings?: ActionSettings;
   status?: string;
   error?: string[];
+  valueFieldType?: 'text' | 'textarea';
 };
 
 export const getDefaultAction = (): Action => ({