[inspector] Table actions

Author: jamesgpearce

src/ui-react-inspector/TableView.tsx

@@ -17,8 +17,7 @@ import {
 } from '../ui-react/index.ts';
 import {Details} from './Details.tsx';
 import {CellActions} from './actions/cell.tsx';
-import {ConfirmableActions} from './actions/common.tsx';
-import {rowActions, RowAdd} from './actions/row.tsx';
+import {rowActions, TableActions1, TableActions2} from './actions/tables.tsx';
 import {getUniqueId, SORT_CELL, STATE_TABLE, useEditable} from './common.ts';
 import type {StoreProp} from './types.ts';
 
@@ -79,13 +78,14 @@ export const TableView = ({
         )}
       />
       {editable ? (
-        <p>
-          <ConfirmableActions
-            actions={[['add', 'Add Row', RowAdd]]}
-            store={store}
-            tableId={tableId}
-          />
-        </p>
+        <div className="actions">
+          <div>
+            <TableActions1 tableId={tableId} store={store} />
+          </div>
+          <div>
+            <TableActions2 tableId={tableId} store={store} />
+          </div>
+        </div>
       ) : null}
     </Details>
   );

src/ui-react-inspector/ValuesView.tsx

@@ -33,12 +33,12 @@ export const ValuesView = ({
         />
       )}
       {editable ? (
-        <p>
+        <div className="actions">
           <ConfirmableActions
             actions={[['add', 'Add Value', AddValue]]}
             store={store}
           />
-        </p>
+        </div>
       ) : null}
     </Details>
   );

src/ui-react-inspector/actions/tables.tsx

@@ -9,8 +9,10 @@ import {objNew} from '../../common/obj.ts';
 import {useCallback} from '../../common/react.ts';
 import {
   useDelRowCallback,
+  useDelTableCallback,
   useSetCellCallback,
   useSetRowCallback,
+  useSetTableCallback,
   useStoreOrStoreById,
 } from '../../ui-react/index.ts';
 import {
@@ -20,6 +22,83 @@ import {
   NewId,
 } from './common.tsx';
 
+const useHasTableCallback = (storeOrStoreId: StoreOrStoreId | undefined) => {
+  const store = useStoreOrStoreById(storeOrStoreId);
+  return useCallback(
+    (tableId: Id) => store?.hasTable(tableId) ?? false,
+    [store],
+  );
+};
+
+const AddRow = ({
+  onDone,
+  tableId,
+  store,
+}: {onDone: () => void} & TableProps) => {
+  const has = useHasRowCallback(store, tableId);
+  return (
+    <NewId
+      onDone={onDone}
+      suggestedId={getNewIdFromSuggestedId('row', has)}
+      has={has}
+      set={useSetRowCallback(
+        tableId,
+        (newId) => newId,
+        (_, store) =>
+          objNew(
+            arrayMap(store.getTableCellIds(tableId), (cellId) => [cellId, '']),
+          ),
+      )}
+    />
+  );
+};
+
+export const CloneTable = ({
+  onDone,
+  tableId,
+  store: storeOrStoreId,
+}: {onDone: () => void} & TableProps) => {
+  const store = useStoreOrStoreById(storeOrStoreId)!;
+  const has = useHasTableCallback(store);
+  return (
+    <NewId
+      onDone={onDone}
+      suggestedId={getNewIdFromSuggestedId(tableId, has)}
+      has={has}
+      set={useSetTableCallback(
+        (tableId) => tableId,
+        (_, store) => store.getTable(tableId),
+      )}
+    />
+  );
+};
+
+const DeleteTable = ({
+  onDone,
+  tableId,
+  store,
+}: {onDone: () => void} & TableProps) => (
+  <Delete onClick={useDelTableCallback(tableId, store, onDone)} />
+);
+
+export const TableActions1 = ({tableId, store}: TableProps) => (
+  <ConfirmableActions
+    actions={[['add', 'Add Row', AddRow]]}
+    store={store}
+    tableId={tableId}
+  />
+);
+export const TableActions2 = ({tableId, store}: TableProps) => (
+  <ConfirmableActions
+    actions={[
+      ['clone', 'Clone Table', CloneTable],
+      ['delete', 'Delete Table', DeleteTable],
+    ]}
+    store={store}
+    tableId={tableId}
+  />
+);
+
 const useHasRowCallback = (
   storeOrStoreId: StoreOrStoreId | undefined,
   tableId: Id,
@@ -59,29 +138,6 @@ const AddCell = ({
   );
 };
 
-export const AddRow = ({
-  onDone,
-  tableId,
-  store,
-}: {onDone: () => void} & TableProps) => {
-  const has = useHasRowCallback(store, tableId);
-  return (
-    <NewId
-      onDone={onDone}
-      suggestedId={getNewIdFromSuggestedId('row', has)}
-      has={has}
-      set={useSetRowCallback(
-        tableId,
-        (newId) => newId,
-        (_, store) =>
-          objNew(
-            arrayMap(store.getTableCellIds(tableId), (cellId) => [cellId, '']),
-          ),
-      )}
-    />
-  );
-};
-
 const CloneRow = ({
   onDone,
   tableId,

src/ui-react-inspector/style.ts

@@ -195,7 +195,6 @@ export const APP_STYLESHEET = arrayJoin(
       'img.edit': EDIT_SVG,
       'img.done': DONE_SVG,
 
-      p: {padding: '.25rem .5rem', margin: 0},
       caption: {
         color: 'var(--foreground2)',
         'text-align': 'left',
@@ -211,6 +210,12 @@ export const APP_STYLESHEET = arrayJoin(
         cursor: 'pointer',
       },
       'caption button[disabled]': {color: 'var(--foreground2)'},
+      '.actions': {
+        padding: '.75rem .5rem',
+        margin: 0,
+        display: 'flex',
+        'justify-content': 'space-between',
+      },
 
       // tables
       table: {