refactor: change stopRendering props to be exit

zakodium-oss · Jan 21, 2025 · 6488396 · 6488396
1 parent 4d3f9c7
commit 6488396
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/components/inline_editable_renderer/inline_editable_renderer.tsx b/src/components/inline_editable_renderer/inline_editable_renderer.tsx
@@ -5,7 +5,10 @@ import { useCallback, useMemo, useState } from 'react';
 
 export interface InlineRendererEditableProps<T extends HTMLElement> {
   ref: (node: T | null) => void;
-  stopRendering: () => void;
+  /**
+   * Function to exit the editable state and display the children content.
+   */
+  exit: () => void;
   onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
 }
 
@@ -60,7 +63,7 @@ export function InlineEditable<T extends HTMLElement>(
         if (!node) return;
         node.focus();
       },
-      stopRendering: () => setIsInputRendered(false),
+      exit: () => setIsInputRendered(false),
     };
   }, [isInputRendered]);
 

diff --git a/stories/components/editable.stories.tsx b/stories/components/editable.stories.tsx
@@ -79,13 +79,13 @@ export function InsideTable() {
         header: 'Label',
         cell: ({ getValue, row: { index } }) => (
           <InlineEditableComponent
-            renderEditable={({ ref, stopRendering, onKeyDown }) => (
+            renderEditable={({ ref, exit, onKeyDown }) => (
               <InlineEditableInput
                 ref={ref}
                 onKeyDown={onKeyDown}
                 defaultValue={getValue()}
                 onBlur={(event) => {
-                  stopRendering();
+                  exit();
                   changeValue(index, 'label', event.currentTarget.value);
                 }}
               />
@@ -99,13 +99,13 @@ export function InsideTable() {
         header: 'Field',
         cell: ({ getValue, row: { index } }) => (
           <InlineEditableComponent
-            renderEditable={({ ref, stopRendering, onKeyDown }) => (
+            renderEditable={({ ref, exit, onKeyDown }) => (
               <InlineEditableInput
                 ref={ref}
                 onKeyDown={onKeyDown}
                 defaultValue={getValue()}
                 onBlur={(event) => {
-                  stopRendering();
+                  exit();
                   changeValue(index, 'field', event.currentTarget.value);
                 }}
               />
@@ -119,13 +119,13 @@ export function InsideTable() {
         header: 'Format',
         cell: ({ getValue, row: { index } }) => (
           <InlineEditableComponent
-            renderEditable={({ ref, stopRendering, onKeyDown }) => (
+            renderEditable={({ ref, exit, onKeyDown }) => (
               <InlineEditableInput
                 ref={ref}
                 onKeyDown={onKeyDown}
                 defaultValue={getValue()}
                 onBlur={(event) => {
-                  stopRendering();
+                  exit();
                   changeValue(index, 'format', event.currentTarget.value);
                 }}
               />
@@ -182,13 +182,13 @@ export const InlineEditable = {
       <div style={{ width: 100 }}>
         <span>State: {state}</span>
         <InlineEditableComponent
-          renderEditable={({ ref, stopRendering, onKeyDown }) => (
+          renderEditable={({ ref, exit, onKeyDown }) => (
             <InlineEditableInput
               ref={ref}
               onKeyDown={onKeyDown}
               defaultValue={state}
               onBlur={(event) => {
-                stopRendering();
+                exit();
 
                 setState(event.currentTarget.value);
               }}