fix(Table): default prefixをselectedRow, selectedRows に付与 (#1500)

* Fix to add prefix * Fix story * Add change log
4-design · Jan 9, 2024 · df44075 · df44075
1 parent 7584d05
commit df44075
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/.changeset/lucky-gifts-cover.md b/.changeset/lucky-gifts-cover.md
@@ -0,0 +1,5 @@
+---
+"@4design/for-ui": patch
+---
+
+Fix/selectable table add default prefix@1499
diff --git a/packages/for-ui/src/table/Table.stories.tsx b/packages/for-ui/src/table/Table.stories.tsx
@@ -49,7 +49,7 @@ export const WithSelect: Story = () => (
     columns={columns}
     data={StaticPersonData}
     getRowId={(row) => row.id.toString()}
-    selectedRow="2"
+    defaultSelectedRow="2"
     onSelectRow={(row) => console.info('Selected row: ', row)}
   />
 );
@@ -59,7 +59,7 @@ export const WithSelectMultiple: Story = () => (
     columns={columns}
     data={StaticPersonData}
     getRowId={(row) => row.id.toString()}
-    selectedRows={['2', '3', '4']}
+    defaultSelectedRows={['2', '3', '4']}
     onSelectRows={(rows) => console.info('Selected rows: ', rows)}
   />
 );

diff --git a/packages/for-ui/src/table/Table.tsx b/packages/for-ui/src/table/Table.tsx
@@ -49,26 +49,26 @@ export type TableProps<T extends RowData> = Pick<TableOptions<T>, 'data' | 'colu
 } & (
     | {
         /** If wanting to use selectable table, specify _onSelectRow_ or _onSelectRows_ exclusively */
-        selectedRow?: string;
-        selectedRows?: never;
         onSelectRow?: ((id: string | undefined) => void) | undefined;
+        defaultSelectedRow?: string;
         onSelectRows?: never;
+        defaultSelectedRows?: never;
       }
     | {
-        selectedRow?: never;
-        selectedRows?: string[];
         onSelectRow?: never;
+        defaultSelectedRow?: never;
         /** If wanting to use selectable table, specify _onSelectRow_ or _onSelectRows_ exclusively */
         onSelectRows?: ((ids: string[]) => void) | undefined;
+        defaultSelectedRows?: string[];
       }
   );
 
 export const Table = <T extends RowData>({
   data,
   disablePagination,
   defaultSortColumn,
-  selectedRow,
-  selectedRows,
+  defaultSelectedRow,
+  defaultSelectedRows,
   onSelectRow,
   onSelectRows,
   onRowClick,
@@ -82,25 +82,25 @@ export const Table = <T extends RowData>({
   defaultPage = 1,
   onChangePage,
 }: TableProps<T>) => {
-  const defaultSelectedRows = selectedRow
-    ? { [selectedRow]: true }
-    : selectedRows?.reduce((acc, id) => ({ ...acc, [id]: true }), {}) ?? {};
+  const tableId = useId();
   const [sorting, setSorting] = useState<SortingState>(defaultSortColumn ? [defaultSortColumn] : []);
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>(defaultSelectedRows);
+
+  const defaultRowSelection = defaultSelectedRow
+    ? { [defaultSelectedRow]: true }
+    : (defaultSelectedRows || []).reduce((acc, id) => ({ ...acc, [id]: true }), {});
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>(defaultRowSelection);
   const prevRowSelection = useRef<RowSelectionState>({});
-  const tableId = useId();
 
   const onRowSelectionChange: OnChangeFn<RowSelectionState> = useCallback(
     (updater) => {
       // updater is designed to be passed to setState like `setState((prev) => updater(prev))`
       // However, due to the React "state is snapshot" design, it is hard to get current selection without using rowSelection.
       // This may lead to some bugs if setting state several times in 1 rendering.
       const row: RowSelectionState = typeof updater === 'function' ? updater(rowSelection) : updater;
-      // If selected the same row (when single selectable table), skip it
+      // If the same row is selected (when single selectable table), skip it
       if (prevRowSelection.current === row) {
         return;
       }
-      console.info(row);
       setRowSelection(row);
       prevRowSelection.current = row;
       const selectedIds = Object.keys(row);
@@ -112,7 +112,7 @@ export const Table = <T extends RowData>({
 
   const selectRow = useCallback(
     (row: RowType<T>) => {
-      // If multiply seletable table, using toggle. Or if singly selectable table, not using toggle.
+      // If multiple seletable table, using toggle. Otherwise (singly selectable table) not using toggle.
       row.toggleSelected(onSelectRows ? undefined : true);
     },
     [onSelectRows],