feat(fuselage-ui-kit): allow dispatchment of actions from input elements (#747)

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
Co-authored-by: Douglas Gubert <douglas.gubert@gmail.com>

Author: 3 people

packages/fuselage-ui-kit/src/contexts/kitContext.ts

@@ -1,3 +1,4 @@
+import type { InputElementDispatchAction } from '@rocket.chat/ui-kit';
 import { createContext, useContext } from 'react';
 
 type ActionParams = {
@@ -6,6 +7,7 @@ type ActionParams = {
   actionId: string;
   value: unknown;
   viewId?: string;
+  dispatchActionConfig?: InputElementDispatchAction[];
 };
 
 type UiKitContext = {

packages/fuselage-ui-kit/src/hooks/useUiKitState.ts

@@ -35,7 +35,7 @@ export const useUiKitState: <TElement extends UiKit.ActionableElement>(
       | { target: { value: UiKit.ActionOf<TElement> } }
   ) => void
 ] = (rest, context) => {
-  const { blockId, actionId, appId } = rest;
+  const { blockId, actionId, appId, dispatchActionConfig } = rest;
   const {
     action,
     appId: appIdFromContext,
@@ -72,6 +72,27 @@ export const useUiKitState: <TElement extends UiKit.ActionableElement>(
     setLoading(false);
   });
 
+  // Used for triggering actions on text inputs. Removing the load state
+  // makes the text input field remain focused after running the action
+  const noLoadStateActionFunction = useMutableCallback(async (e) => {
+    const {
+      target: { value },
+    } = e;
+    setValue(value);
+    state && (await state({ blockId, appId, actionId, value, viewId }, e));
+    await action(
+      {
+        blockId,
+        appId: appId || appIdFromContext,
+        actionId,
+        value,
+        viewId,
+        dispatchActionConfig,
+      },
+      e
+    );
+  });
+
   const stateFunction = useMutableCallback(async (e) => {
     const {
       target: { value },
@@ -94,6 +115,23 @@ export const useUiKitState: <TElement extends UiKit.ActionableElement>(
     [loading, setLoading, error, value]
   );
 
+  if (context === UiKit.BlockContext.FORM) {
+    if (
+      rest.type === 'plain_text_input' &&
+      Array.isArray(rest?.dispatchActionConfig) &&
+      rest.dispatchActionConfig.includes('on_character_entered')
+    ) {
+      return [result, noLoadStateActionFunction];
+    }
+
+    if (
+      Array.isArray(rest?.dispatchActionConfig) &&
+      rest.dispatchActionConfig.includes('on_item_selected')
+    ) {
+      return [result, actionFunction];
+    }
+  }
+
   if (
     context &&
     [UiKit.BlockContext.SECTION, UiKit.BlockContext.ACTION].includes(context)

packages/ui-kit/src/blocks/Actionable.ts

@@ -1,8 +1,10 @@
 import type { ConfirmationDialog } from './ConfirmationDialog';
+import type { InputElementDispatchAction } from './InputElementDispatchAction';
 
 export type Actionable<Block> = Block & {
   appId: string;
   blockId: string;
   actionId: string;
   confirm?: ConfirmationDialog;
+  dispatchActionConfig?: InputElementDispatchAction[];
 };

packages/ui-kit/src/blocks/InputElementDispatchAction.ts

@@ -0,0 +1,3 @@
+export type InputElementDispatchAction =
+  | 'on_character_entered'
+  | 'on_item_selected';

packages/ui-kit/src/index.ts

@@ -34,6 +34,8 @@ export { InputBlock } from './blocks/layout/InputBlock';
 export { SectionBlock } from './blocks/layout/SectionBlock';
 export { LayoutBlock } from './blocks/LayoutBlock';
 
+export { InputElementDispatchAction } from './blocks/InputElementDispatchAction';
+
 export { Block } from './blocks/Block';
 export { RenderableBlock } from './blocks/RenderableBlock';