feat: press enter will save the input

zakodium-oss · Jan 20, 2025 · 4d3f9c7 · 4d3f9c7
1 parent fd7ef58
commit 4d3f9c7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/src/components/inline_editable_renderer/inline_editable_renderer.tsx b/src/components/inline_editable_renderer/inline_editable_renderer.tsx
@@ -1,11 +1,12 @@
 import { Colors } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import type { ReactNode } from 'react';
+import type { KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
 export interface InlineRendererEditableProps<T extends HTMLElement> {
   ref: (node: T | null) => void;
-  toggle: () => void;
+  stopRendering: () => void;
+  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
 }
 
 export interface InlineEditableProps<T extends HTMLElement> {
@@ -50,13 +51,18 @@ export function InlineEditable<T extends HTMLElement>(
   const renderEditableProps = useMemo<InlineRendererEditableProps<T>>(() => {
     return {
       isRendered: isInputRendered,
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
+          setIsInputRendered(false);
+        }
+      },
       ref: (node) => {
         if (!node) return;
         node.focus();
       },
-      toggle,
+      stopRendering: () => setIsInputRendered(false),
     };
-  }, [isInputRendered, toggle]);
+  }, [isInputRendered]);
 
   return (
     <div style={{ position: 'relative' }}>

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