vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-15 16:04:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor list internal state to target rerenders on change

Browse Source
This commit is contained in:
jeffvli
2025-11-26 15:46:17 -08:00
parent 10c9bec2cf
commit a238927749
8 changed files with 421 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
+21 -9
View File
@@ -17,6 +17,10 @@ import styles from './item-table-list-column.module.css';
import i18n from '/@/i18n/i18n';
import { getDraggedItems } from '/@/renderer/components/item-list/helpers/get-dragged-items';
import {
useItemDraggingState,
useItemSelectionState,
} from '/@/renderer/components/item-list/helpers/item-list-state';
import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column';
import { AlbumColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-column';
@@ -294,10 +298,16 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
isEnabled: shouldEnableDrag,
});
const isDragging =
const itemRowId =
item && typeof item === 'object' && 'id' in item && props.internalState
? props.internalState.isDragging((item as any).id)
: isDraggingLocal;
? props.internalState.extractRowId(item)
: undefined;
const isDraggingState = useItemDraggingState(
props.internalState,
itemRowId ||
(item && typeof item === 'object' && 'id' in item ? (item as any).id : undefined),
);
const isDragging = props.internalState ? isDraggingState : isDraggingLocal;
const controls = props.controls;
@@ -452,10 +462,11 @@ export const TableColumnTextContainer = (
const isDataRow = props.enableHeader ? props.rowIndex > 0 : true;
const dataIndex = props.enableHeader ? props.rowIndex - 1 : props.rowIndex;
const item = isDataRow ? props.data[props.rowIndex] : null;
const isSelected =
const itemRowId =
item && typeof item === 'object' && 'id' in item
? props.internalState.isSelected(props.internalState.extractRowId(item) || '')
: false;
? props.internalState.extractRowId(item)
: undefined;
const isSelected = useItemSelectionState(props.internalState, itemRowId || undefined);
const isDragging = props.isDragging ?? false;
const mergedRef = useMergedRef(containerRef, props.dragRef ?? null);
@@ -664,10 +675,11 @@ export const TableColumnContainer = (
const isDataRow = props.enableHeader ? props.rowIndex > 0 : true;
const dataIndex = props.enableHeader ? props.rowIndex - 1 : props.rowIndex;
const item = isDataRow ? props.data[props.rowIndex] : null;
const isSelected =
const itemRowId =
item && typeof item === 'object' && 'id' in item
? props.internalState.isSelected(props.internalState.extractRowId(item) || '')
: false;
? props.internalState.extractRowId(item)
: undefined;
const isSelected = useItemSelectionState(props.internalState, itemRowId || undefined);
const isDragging = props.isDragging ?? false;
const mergedRef = useMergedRef(containerRef, props.dragRef ?? null);
src/renderer/components/item-list/item-table-list/item-table-list.tsx
+24 -9
View File
@@ -29,6 +29,7 @@ import {
ItemListStateActions,
ItemListStateItemWithRequiredProperties,
useItemListState,
useItemListStateSubscription,
} from '/@/renderer/components/item-list/helpers/item-list-state';
import { parseTableColumns } from '/@/renderer/components/item-list/helpers/parse-table-columns';
import { useStickyTableGroupRows } from '/@/renderer/components/item-list/item-table-list/hooks/use-sticky-table-group-rows';
@@ -1583,8 +1584,6 @@ const BaseItemTableList = ({
const internalState = useItemListState(getDataFn, extractRowId);
const hasExpanded = internalState.hasExpanded();
// Helper function to get ItemListStateItemWithRequiredProperties (rowId is separate, not part of item)
const getStateItem = useCallback(
(item: any): ItemListStateItemWithRequiredProperties | null => {
@@ -2169,17 +2168,33 @@ const BaseItemTableList = ({
totalColumnCount={totalColumnCount}
totalRowCount={totalRowCount}
/>
<AnimatePresence initial={false}>
{hasExpanded && (
<ExpandedListContainer>
<ExpandedListItem internalState={internalState} itemType={itemType} />
</ExpandedListContainer>
)}
</AnimatePresence>
<ExpandedContainer internalState={internalState} itemType={itemType} />
</motion.div>
);
};
export const ItemTableList = memo(BaseItemTableList);
const ExpandedContainer = ({
internalState,
itemType,
}: {
internalState: ItemListStateActions;
itemType: LibraryItem;
}) => {
const hasExpanded = useItemListStateSubscription(internalState, (state) =>
state ? state.expanded.size > 0 : false,
);
return (
<AnimatePresence initial={false}>
{hasExpanded && (
<ExpandedListContainer>
<ExpandedListItem internalState={internalState} itemType={itemType} />
</ExpandedListContainer>
)}
</AnimatePresence>
);
};
ItemTableList.displayName = 'ItemTableList';