+
{group.title(groupKey, groupItems)}
);
}
+
+const GroupHeaderWithRef = React.forwardRef(GroupHeader) as <
+ T,
+ K extends React.Key = React.Key,
+>(
+ props: GroupHeaderProps
& { ref?: React.Ref },
+) => React.ReactElement;
+
+export default GroupHeaderWithRef;
diff --git a/src/List.tsx b/src/List.tsx
index 0f70d18..3224400 100644
--- a/src/List.tsx
+++ b/src/List.tsx
@@ -1,29 +1,35 @@
import * as React from 'react';
-import VirtualList, {
- type ListRef,
- type ScrollTo,
-} from '@rc-component/virtual-list';
-import { useImperativeHandle, forwardRef } from 'react';
-import useGroupSegments from './hooks/useGroupSegments';
+import { forwardRef } from 'react';
+import RawList from './RawList';
+import VirtualList from './VirtualList';
import type { Group } from './hooks/useGroupSegments';
-import useFlattenRows from './hooks/useFlattenRows';
-import type { Row } from './hooks/useFlattenRows';
-import useStickyGroupHeader from './hooks/useStickyGroupHeader';
-import GroupHeader from './GroupHeader';
-import { useEvent } from '@rc-component/util';
-type RowKey = keyof T | ((item: T) => React.Key);
+export type RowKey = keyof T | ((item: T) => React.Key);
export type ScrollAlign = 'top' | 'bottom' | 'auto';
export interface GroupScrollToConfig {
- groupKey: string;
+ groupKey: React.Key;
align?: ScrollAlign;
offset?: number;
}
+export interface KeyScrollToConfig {
+ key: React.Key;
+ align?: ScrollAlign;
+ offset?: number;
+}
+
+export interface PositionScrollToConfig {
+ left?: number;
+ top?: number;
+}
+
export type ListyScrollToConfig =
- | Parameters[0]
+ | number
+ | null
+ | KeyScrollToConfig
+ | PositionScrollToConfig
| GroupScrollToConfig;
export interface ListyRef {
@@ -43,120 +49,51 @@ export interface ListyProps {
itemRender: (item: T, index: number) => React.ReactNode;
}
+export interface ListComponentProps {
+ data: T[];
+ sticky?: boolean;
+ itemHeight?: number;
+ height?: number;
+ group?: Group;
+ prefixCls: string;
+ rowKey: RowKey;
+ onScroll?: React.UIEventHandler;
+ itemRender: (item: T, index: number) => React.ReactNode;
+}
+
function Listy(
props: ListyProps,
ref: React.Ref,
) {
// ============================== Props ==============================
- const {
- items,
- itemRender,
- group,
- onScroll,
- rowKey,
- height,
- itemHeight,
- sticky,
- virtual = true,
- prefixCls = 'rc-listy',
- } = props;
+ const { items, virtual = true, prefixCls = 'rc-listy', ...restProps } = props;
// =============================== Data ===============================
const data = React.useMemo(() => items || [], [items]);
- // =============================== Refs ===============================
- const listRef = React.useRef(null);
-
- // ========================== Imperative API ==========================
- useImperativeHandle(ref, () => ({
- scrollTo: (config) => {
- if (config && typeof config === 'object' && 'groupKey' in config) {
- const { groupKey, align, offset } = config;
- listRef.current?.scrollTo({
- key: groupKey,
- align,
- offset,
- });
- return;
- }
- listRef.current?.scrollTo(config as Parameters[0]);
- },
- }));
-
- // ============================= Grouping =============================
- const groupData = useGroupSegments(data, group);
-
- // ============================= Row Keys =============================
- const getKey = useEvent((row: Row): React.Key => {
- if (row.type === 'header') {
- return row.groupKey;
- }
-
- if (typeof rowKey === 'function') {
- return rowKey(row.item);
- }
- return row.item[rowKey] as React.Key;
- });
-
- // ============================= Flat Rows =============================
- const { rows, headerRows, groupKeyToItems } = useFlattenRows(
+ // ============================== Render ===============================
+ const sharedListProps = {
+ ...restProps,
data,
- groupData,
- group,
- );
-
- // =========================== Sticky Header ===========================
- const extraRender = useStickyGroupHeader({
- enabled: !!(sticky && group && virtual),
- group,
- headerRows,
- groupKeyToItems,
prefixCls,
- });
-
- // ============================= Row Render ============================
- const renderHeaderRow = React.useCallback(
- (groupKey: K) => {
- if (!group) {
- return null;
- }
-
- const groupItems = groupKeyToItems.get(groupKey) || [];
-
- return (
-
- );
- },
- [group, groupKeyToItems, prefixCls, sticky, virtual],
- );
+ };
+
+ const listNode =
+ virtual === false ? (
+
+ ) : (
+
+ );
- // ============================== Render ===============================
return (
-
- {(row: Row) =>
- row.type === 'header'
- ? renderHeaderRow(row.groupKey)
- : itemRender(row.item, row.index)
- }
-
+ {listNode}
);
}
diff --git a/src/RawList/index.tsx b/src/RawList/index.tsx
new file mode 100644
index 0000000..8e11d44
--- /dev/null
+++ b/src/RawList/index.tsx
@@ -0,0 +1,144 @@
+import * as React from 'react';
+import ResizeObserver from '@rc-component/resize-observer';
+import { useEvent } from '@rc-component/util';
+import GroupHeader from '../GroupHeader';
+import useGroupSegments from '../hooks/useGroupSegments';
+import useRawListScroll from './useRawListScroll';
+import type { ListComponentProps, ListyRef } from '../List';
+
+export type RawListProps =
+ ListComponentProps;
+
+function RawList(
+ props: RawListProps,
+ ref: React.Ref,
+) {
+ const {
+ data,
+ group,
+ height,
+ itemRender,
+ onScroll,
+ prefixCls,
+ rowKey,
+ sticky,
+ } = props;
+
+ const holderRef = useRawListScroll(ref);
+ const groupData = useGroupSegments(data, group);
+ const [headerHeights, setHeaderHeights] = React.useState<
+ Map
+ >(() => new Map());
+
+ const getItemKey = useEvent((item: T): React.Key => {
+ if (typeof rowKey === 'function') {
+ return rowKey(item);
+ }
+ return item[rowKey] as React.Key;
+ });
+
+ const getScrollTargetProps = React.useCallback(
+ (key: React.Key) => ({
+ 'data-key': String(key),
+ }),
+ [],
+ );
+
+ const setGroupHeaderHeight = React.useCallback(
+ (groupKey: K, headerHeight: number) => {
+ setHeaderHeights((prev) => {
+ const next = new Map(prev);
+ next.set(groupKey, headerHeight);
+ return next;
+ });
+ },
+ [],
+ );
+
+ const renderItem = React.useCallback(
+ (item: T, index: number, groupKey?: K) => {
+ const key = getItemKey(item);
+ const scrollTargetProps = getScrollTargetProps(key);
+ const headerHeight =
+ sticky && groupKey !== undefined ? headerHeights.get(groupKey) : 0;
+
+ return (
+
+ {itemRender(item, index)}
+
+ );
+ },
+ [
+ getItemKey,
+ getScrollTargetProps,
+ headerHeights,
+ itemRender,
+ prefixCls,
+ sticky,
+ ],
+ );
+
+ const rawContent = group
+ ? Array.from(groupData, ([groupKey, groupItems]) => {
+ const currentGroupItems = groupItems.map(({ item }) => item);
+
+ return (
+
+ {
+ setGroupHeaderHeight(groupKey, offsetHeight);
+ }}
+ >
+
+
+ {groupItems.map(({ item, index }) => {
+ return renderItem(item, index, groupKey);
+ })}
+
+ );
+ })
+ : data.map((item, index) => {
+ return renderItem(item, index);
+ });
+
+ return (
+
+ );
+}
+
+const RawListWithRef = React.forwardRef(RawList as any) as any;
+
+export default RawListWithRef;
diff --git a/src/RawList/useRawListScroll.ts b/src/RawList/useRawListScroll.ts
new file mode 100644
index 0000000..04519e3
--- /dev/null
+++ b/src/RawList/useRawListScroll.ts
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { ListyRef, PositionScrollToConfig } from '../List';
+
+export default function useRawListScroll(ref: React.Ref) {
+ const holderRef = React.useRef(null);
+
+ const scrollTo: ListyRef['scrollTo'] = React.useCallback(
+ (config) => {
+ const holder = holderRef.current;
+ if (!holder || config == null) {
+ return;
+ }
+
+ if (typeof config === 'number') {
+ holder.scrollTop = config;
+ return;
+ }
+
+ if ('key' in config || 'groupKey' in config) {
+ const targetKey = 'groupKey' in config ? config.groupKey : config.key;
+ const targetElement = holder.querySelector(
+ `[data-key="${CSS.escape(String(targetKey))}"]`,
+ );
+
+ if (targetElement) {
+ const { align = 'top' } = config;
+ targetElement.scrollIntoView({
+ block:
+ align === 'bottom'
+ ? 'end'
+ : align === 'auto'
+ ? 'nearest'
+ : 'start',
+ inline: 'nearest',
+ });
+ }
+ return;
+ }
+
+ const { left, top } = config as PositionScrollToConfig;
+ if (left !== undefined) {
+ holder.scrollLeft = left;
+ }
+ if (top !== undefined) {
+ holder.scrollTop = top;
+ }
+ },
+ [],
+ );
+
+ React.useImperativeHandle(
+ ref,
+ () => ({
+ scrollTo,
+ }),
+ [scrollTo],
+ );
+
+ return holderRef;
+}
diff --git a/src/VirtualList/index.tsx b/src/VirtualList/index.tsx
new file mode 100644
index 0000000..7fa6d6a
--- /dev/null
+++ b/src/VirtualList/index.tsx
@@ -0,0 +1,174 @@
+import * as React from 'react';
+import RcVirtualList, {
+ type ListRef as RcVirtualListRef,
+ type ScrollConfig,
+ type ScrollOffsetInfo,
+} from '@rc-component/virtual-list';
+import { useEvent } from '@rc-component/util';
+import GroupHeader from '../GroupHeader';
+import type { ListComponentProps, ListyRef } from '../List';
+import useFlattenRows from '../hooks/useFlattenRows';
+import type { Row } from '../hooks/useFlattenRows';
+import useGroupSegments from '../hooks/useGroupSegments';
+import useStickyGroupHeader from './useStickyGroupHeader';
+
+export type VirtualListProps<
+ T,
+ K extends React.Key = React.Key,
+> = ListComponentProps;
+
+function VirtualList(
+ props: VirtualListProps,
+ ref: React.Ref,
+) {
+ const {
+ data,
+ group,
+ height,
+ itemHeight,
+ itemRender,
+ onScroll,
+ prefixCls,
+ rowKey,
+ sticky,
+ } = props;
+
+ const listRef = React.useRef(null);
+
+ const groupData = useGroupSegments(data, group);
+
+ const getItemKey = useEvent((item: T): React.Key => {
+ if (typeof rowKey === 'function') {
+ return rowKey(item);
+ }
+ return item[rowKey] as React.Key;
+ });
+
+ const getKey = useEvent((row: Row): React.Key => {
+ if (row.type === 'header') {
+ return row.groupKey;
+ }
+
+ return getItemKey(row.item);
+ });
+
+ const { rows, headerRows, groupKeyToItems } = useFlattenRows(
+ data,
+ groupData,
+ group,
+ );
+
+ const itemKeyToGroupKey = React.useMemo(() => {
+ const itemGroupMap = new Map();
+
+ groupData.forEach((groupItems, groupKey) => {
+ groupItems.forEach(({ item }) => {
+ itemGroupMap.set(getItemKey(item), groupKey);
+ });
+ });
+
+ return itemGroupMap;
+ }, [getItemKey, groupData]);
+
+ const scrollTo = useEvent((config) => {
+ if (config && typeof config === 'object' && 'groupKey' in config) {
+ const { groupKey, align, offset } = config;
+ listRef.current?.scrollTo({
+ key: groupKey,
+ align,
+ offset,
+ });
+ return;
+ }
+
+ if (
+ config &&
+ typeof config === 'object' &&
+ 'key' in config &&
+ sticky &&
+ group &&
+ config.align === 'top'
+ ) {
+ const groupKey = itemKeyToGroupKey.get(config.key);
+
+ if (groupKey !== undefined) {
+ const { offset = 0 } = config;
+
+ listRef.current?.scrollTo({
+ ...config,
+ // Use the measured header height so top-aligned items stay below it.
+ offset: ({ getSize }: ScrollOffsetInfo) => {
+ const headerSize = getSize(groupKey);
+ const headerHeight = headerSize.bottom - headerSize.top;
+
+ return offset + (Number.isFinite(headerHeight) ? headerHeight : 0);
+ },
+ });
+ return;
+ }
+ }
+
+ listRef.current?.scrollTo(config as number | ScrollConfig | null);
+ });
+
+ React.useImperativeHandle(
+ ref,
+ () => ({
+ scrollTo,
+ }),
+ [scrollTo],
+ );
+
+ const extraRender = useStickyGroupHeader({
+ enabled: !!(sticky && group),
+ group,
+ headerRows,
+ groupKeyToItems,
+ prefixCls,
+ });
+
+ const renderHeaderRow = React.useCallback(
+ (groupKey: K) => {
+ const groupItems = groupKeyToItems.get(groupKey) || [];
+
+ return (
+
+ );
+ },
+ [group, groupKeyToItems, prefixCls],
+ );
+
+ return (
+
+ {(row: Row) =>
+ row.type === 'header'
+ ? renderHeaderRow(row.groupKey)
+ : (
+
+ {itemRender(row.item, row.index)}
+
+ )
+ }
+
+ );
+}
+
+const VirtualListWithRef = React.forwardRef(VirtualList as any) as any;
+
+export default VirtualListWithRef;
diff --git a/src/hooks/useStickyGroupHeader.tsx b/src/VirtualList/useStickyGroupHeader.tsx
similarity index 68%
rename from src/hooks/useStickyGroupHeader.tsx
rename to src/VirtualList/useStickyGroupHeader.tsx
index d225983..16a27ca 100644
--- a/src/hooks/useStickyGroupHeader.tsx
+++ b/src/VirtualList/useStickyGroupHeader.tsx
@@ -1,16 +1,41 @@
import * as React from 'react';
import type { ListProps as VirtualListProps } from '@rc-component/virtual-list';
-import type { Group } from './useGroupSegments';
+import type { Group } from '../hooks/useGroupSegments';
import GroupHeader from '../GroupHeader';
type ExtraRenderInfo = Parameters<
NonNullable['extraRender']>
>[0];
+type HeaderRow = { groupKey: K; rowIndex: number };
+
+// `headerRows` is sorted by rowIndex. Find the last header not after `start`.
+function findActiveHeaderIndex(
+ headerRows: HeaderRow[],
+ start: number,
+) {
+ let left = 0;
+ let right = headerRows.length - 1;
+ let activeIndex = 0;
+
+ while (left <= right) {
+ const mid = Math.floor((left + right) / 2);
+
+ if (headerRows[mid].rowIndex <= start) {
+ activeIndex = mid;
+ left = mid + 1;
+ } else {
+ right = mid - 1;
+ }
+ }
+
+ return activeIndex;
+}
+
export interface StickyHeaderParams {
enabled: boolean;
group: Group | undefined;
- headerRows: { groupKey: K; rowIndex: number }[];
+ headerRows: HeaderRow[];
groupKeyToItems: Map;
prefixCls: string;
}
@@ -35,15 +60,8 @@ export default function useStickyGroupHeader<
return null;
}
- let activeHeaderIdx = 0;
- let currHeader = headerRows[0];
- for (let i = headerRows.length - 1; i >= 0; i -= 1) {
- if (headerRows[i].rowIndex <= start) {
- activeHeaderIdx = i;
- currHeader = headerRows[i];
- break;
- }
- }
+ const activeHeaderIdx = findActiveHeaderIndex(headerRows, start);
+ const currHeader = headerRows[activeHeaderIdx];
const groupItems = groupKeyToItems.get(currHeader.groupKey) || [];
const currentSize = getSize(currHeader.groupKey);
diff --git a/tests/__snapshots__/listy.test.tsx.snap b/tests/__snapshots__/listy.test.tsx.snap
index a3e1692..5a17816 100644
--- a/tests/__snapshots__/listy.test.tsx.snap
+++ b/tests/__snapshots__/listy.test.tsx.snap
@@ -17,8 +17,12 @@ exports[`Listy should match snapshot 1`] = `
class="rc-listy-holder-inner"
style="display: flex; flex-direction: column;"
>
-