refactor: move the table cell content to different folder

Author: invisal

src/renderer/components/ResizableTable/TableCellInput.module.scss

@@ -0,0 +1,29 @@
+.container {
+  width: 100%;
+  height: 34px;
+  border: 1px solid var(--color-surface);
+  font-size: 1rem;
+  box-sizing: border-box;
+}
+
+.changed {
+  border: 1px solid var(--color-table-change);
+  background: var(--color-table-change);
+  color: #000;
+}
+
+.focused {
+  border: 1px solid var(--color-critical);
+}
+
+.input {
+  padding: 5px 10px;
+  border: 1px solid var(--color-surface);
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  font-size: 1rem;
+}

src/renderer/components/ResizableTable/TableCellInput.tsx

@@ -0,0 +1,40 @@
+import styles from './TableCellInput.module.scss';
+
+interface TableCellInputProps {
+  onLostFocus?: () => void;
+  readOnly?: boolean;
+  value?: string | null;
+  alignRight?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export default function TableCellInput({
+  onLostFocus,
+  readOnly,
+  value,
+  onChange,
+  alignRight,
+}: TableCellInputProps) {
+  return (
+    <input
+      onKeyPress={(e) => {
+        if (e.key === 'Enter') {
+          if (onLostFocus) {
+            onLostFocus();
+          }
+        }
+      }}
+      spellCheck="false"
+      autoFocus
+      type="text"
+      readOnly={readOnly}
+      className={styles.input}
+      style={alignRight ? { textAlign: 'right' } : undefined}
+      onBlur={onLostFocus}
+      onChange={(e) => {
+        if (onChange) onChange(e.currentTarget.value);
+      }}
+      value={value || ''}
+    />
+  );
+}

src/renderer/components/ResizableTable/index.tsx

@@ -75,7 +75,7 @@ export default function ResizableTable({
         headers.map(() => '150px').join(' ') || '';
       setGridCSSPrepared(true);
     }
-  }, [headers, tableRef, setGridCSSPrepared]);
+  }, [tableRef, setGridCSSPrepared]);
 
   return (
     <table ref={tableRef} className={styles.table}>

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/TableCellDecimal.tsx

@@ -1,19 +1,19 @@
-import styles from './styles.module.css';
 import { useState, useCallback } from 'react';
 import {
   TableEditableEditorProps,
   TableEditableContentProps,
 } from './TableEditableCell';
 import createTableCellType from './createTableCellType';
 import { Decimal } from 'decimal.js';
-import TableCellContent from './TableCellContent';
+import TableCellContent from 'renderer/components/ResizableTable/TableCellContent';
+import TableCellInput from 'renderer/components/ResizableTable/TableCellInput';
 
 function TableCellDecimalEditor({
   value,
   onExit,
   readOnly,
 }: TableEditableEditorProps) {
-  const [editValue, setEditValue] = useState(value);
+  const [editValue, setEditValue] = useState(value as string);
 
   const onLostFocus = useCallback(() => {
     if (onExit) {
@@ -22,20 +22,12 @@ function TableCellDecimalEditor({
   }, [onExit, editValue]);
 
   return (
-    <input
-      onKeyPress={(e) => {
-        if (e.key === 'Enter') {
-          onLostFocus();
-        }
-      }}
+    <TableCellInput
       readOnly={readOnly}
-      autoFocus
-      type="text"
-      className={`${styles.input} ${styles.number}`}
-      style={{ textAlign: 'right' }}
-      onBlur={onLostFocus}
-      onChange={(e) => setEditValue(e.currentTarget.value)}
-      value={editValue as string}
+      alignRight
+      onChange={setEditValue}
+      onLostFocus={onLostFocus}
+      value={editValue}
     />
   );
 }

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/TableCellJson.tsx

@@ -9,8 +9,8 @@ import createTableCellType from './createTableCellType';
 import deepEqual from 'deep-equal';
 import Button from 'renderer/components/Button';
 import Modal from 'renderer/components/Modal';
-import TableCellContent from './TableCellContent';
 import useCodeEditorTheme from 'renderer/components/CodeEditor/useCodeEditorTheme';
+import TableCellContent from 'renderer/components/ResizableTable/TableCellContent';
 
 function TableCellJsonEditor({
   value,

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/TableCellNumber.tsx

@@ -1,11 +1,11 @@
-import styles from './styles.module.css';
 import { useState, useCallback } from 'react';
 import {
   TableEditableEditorProps,
   TableEditableContentProps,
 } from './TableEditableCell';
 import createTableCellType from './createTableCellType';
-import TableCellContent from './TableCellContent';
+import TableCellContent from 'renderer/components/ResizableTable/TableCellContent';
+import TableCellInput from 'renderer/components/ResizableTable/TableCellInput';
 
 function TableCellNumberEditor({
   value,
@@ -23,21 +23,12 @@ function TableCellNumberEditor({
   }, [onExit, editValue]);
 
   return (
-    <input
-      onKeyPress={(e) => {
-        if (e.key === 'Enter') {
-          onLostFocus();
-        }
-      }}
-      autoFocus
+    <TableCellInput
       readOnly={readOnly}
-      type="text"
-      className={`${styles.input} ${styles.number}`}
-      onBlur={onLostFocus}
-      style={{ textAlign: 'right' }}
-      placeholder={editValue === null ? 'NULL' : ''}
-      onChange={(e) => setEditValue(e.currentTarget.value)}
-      value={editValue || ''}
+      alignRight
+      onChange={setEditValue}
+      onLostFocus={onLostFocus}
+      value={editValue}
     />
   );
 }

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/TableCellString.tsx

@@ -1,18 +1,18 @@
-import styles from './styles.module.css';
 import { useState, useCallback } from 'react';
 import {
   TableEditableEditorProps,
   TableEditableContentProps,
 } from './TableEditableCell';
 import createTableCellType from './createTableCellType';
 import TableCellContent from 'renderer/components/ResizableTable/TableCellContent';
+import TableCellInput from 'renderer/components/ResizableTable/TableCellInput';
 
 function TableCellStringEditor({
   value,
   onExit,
   readOnly,
 }: TableEditableEditorProps) {
-  const [editValue, setEditValue] = useState(value);
+  const [editValue, setEditValue] = useState(value as string);
 
   const onLostFocus = useCallback(() => {
     if (onExit) {
@@ -21,20 +21,11 @@ function TableCellStringEditor({
   }, [onExit, editValue]);
 
   return (
-    <input
-      onKeyPress={(e) => {
-        if (e.key === 'Enter') {
-          onLostFocus();
-        }
-      }}
-      spellCheck="false"
-      autoFocus
-      type="text"
+    <TableCellInput
       readOnly={readOnly}
-      className={styles.input}
-      onBlur={onLostFocus}
-      onChange={(e) => setEditValue(e.currentTarget.value)}
-      value={editValue as string}
+      onChange={setEditValue}
+      onLostFocus={onLostFocus}
+      value={editValue}
     />
   );
 }

src/renderer/screens/DatabaseScreen/SqlTableSchemaTab/index.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import ResizableTable from 'renderer/components/ResizableTable';
+import TableCellContent from 'renderer/components/ResizableTable/TableCellContent';
 import { useSqlExecute } from 'renderer/contexts/SqlExecuteProvider';
 import { useWindowTab } from 'renderer/contexts/WindowTabProvider';
 import { TableDefinitionSchema } from 'types/SqlSchema';
-import TableCellContent from '../QueryResultViewer/TableCell/TableCellContent';
 
 interface SqlTableSchemaProps {
   name: string;