Skip to content

Commit

Permalink
Rename element props to components
Browse files Browse the repository at this point in the history
  • Loading branch information
inokawa committed Aug 1, 2023
1 parent e8f0bdf commit d2f287f
Show file tree
Hide file tree
Showing 14 changed files with 152 additions and 105 deletions.
22 changes: 16 additions & 6 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
export type { CacheSnapshot } from "./core/types";
export { VList } from "./react/VList";
export type { VListProps, VListHandle, ScrollMode } from "./react/VList";
export type {
VListProps,
VListHandle,
VListComponentsConfig,
ScrollMode,
} from "./react/VList";
export { VGrid } from "./react/VGrid";
export type {
VGridProps,
VGridHandle,
VGridComponentsConfig,
CustomCellComponent,
CustomCellComponentProps,
} from "./react/VGrid";
export { WVList } from "./react/WVList";
export type { WVListProps, WVListHandle } from "./react/WVList";
export type {
WindowComponentAttributes,
CustomWindowComponent,
CustomWindowComponentProps,
} from "./react/Window";
WVListProps,
WVListHandle,
WVListComponentsConfig,
} from "./react/WVList";
export type {
ViewportComponentAttributes,
CustomViewportComponent,
CustomViewportComponentProps,
} from "./react/Viewport";
export type {
CustomItemComponent,
CustomItemComponentProps,
Expand Down
4 changes: 2 additions & 2 deletions src/react/VGrid.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ it("should pass attributes to element", async () => {
});

// it("should change components", async () => {
// const UlList = forwardRef<HTMLDivElement, CustomWindowComponentProps>(
// const UlList = forwardRef<HTMLDivElement, CustomViewportComponentProps>(
// ({ children, attrs, scrollSize }, ref) => {
// return (
// <div ref={ref} {...attrs}>
Expand All @@ -116,7 +116,7 @@ it("should pass attributes to element", async () => {
// }
// );
// const { asFragment } = render(
// <VList element={UlList} itemElement="li">
// <VList components={{ Root: UlList, Item: "li" }}>
// <div>0</div>
// <div>1</div>
// <div>2</div>
Expand Down
55 changes: 32 additions & 23 deletions src/react/VGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ import {
} from "./useSelector";
import { max, min, values } from "../core/utils";
import { createScroller } from "../core/scroller";
import { refKey } from "./utils";
import { defaultComponents, refKey } from "./utils";
import { useStatic } from "./useStatic";
import {
CustomWindowComponent,
CustomWindowComponentProps,
WindowComponentAttributes,
CustomViewportComponent,
CustomViewportComponentProps,
ViewportComponentAttributes,
} from "..";
import { createGridResizer, GridResizer } from "../core/resizer";
import { Window as DefaultWindow } from "./Window";
import { Viewport as DefaultViewport } from "./Viewport";

const genKey = (i: number, j: number) => `${i}-${j}`;

Expand All @@ -48,6 +48,19 @@ type CustomCellComponentOrElement =
| keyof JSX.IntrinsicElements
| CustomCellComponent;

export interface VGridComponentsConfig {
/**
* Component for scrollable element. This component will get {@link CustomViewportComponentProps} as props.
* @defaultValue {@link DefaultViewport}
*/
Root?: CustomViewportComponent;
/**
* Component or element type for cell element. This component will get {@link CustomCellComponentProps} as props.
* @defaultValue "div"
*/
Cell?: CustomCellComponentOrElement;
}

type CellProps = {
_children: ReactNode;
_resizer: GridResizer;
Expand Down Expand Up @@ -178,7 +191,7 @@ export interface VGridHandle {
/**
* Props of {@link VGrid}.
*/
export interface VGridProps extends WindowComponentAttributes {
export interface VGridProps extends ViewportComponentAttributes {
/**
* A function to create elements rendered by this component.
*/
Expand Down Expand Up @@ -228,15 +241,9 @@ export interface VGridProps extends WindowComponentAttributes {
*/
rtl?: boolean;
/**
* Customized element type for scrollable element. This element will get {@link CustomWindowComponentProps} as props.
* @defaultValue {@link Window}
*/
element?: CustomWindowComponent;
/**
* Customized element type for cell element. This element will get {@link CustomCellComponentProps} as props.
* @defaultValue "div"
* Customized components for advanced usage.
*/
cellElement?: CustomCellComponentOrElement;
components?: VGridComponentsConfig;
}

/**
Expand All @@ -254,9 +261,11 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
initialRowCount,
initialColCount,
rtl: rtlProp,
element: Window = DefaultWindow,
cellElement: itemElement = "div",
...windowAttrs
components: {
Root: Viewport = DefaultViewport,
Cell: ItemElement = "div",
} = defaultComponents as VGridComponentsConfig,
...viewportAttrs
},
ref
): ReactElement => {
Expand Down Expand Up @@ -421,7 +430,7 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
_hStore={hStore}
_rowIndex={i}
_colIndex={j}
_element={itemElement as "div"}
_element={ItemElement as "div"}
_children={render(i, j)}
_isRtl={isRtl}
/>
Expand All @@ -439,14 +448,14 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
]);

return (
<Window
<Viewport
ref={rootRef}
width={width}
height={height}
scrolling={verticalScrolling || horizontalScrolling}
attrs={useMemo(
() => ({
...windowAttrs,
...viewportAttrs,
style: {
overflow: "auto",
contain: "strict",
Expand All @@ -457,14 +466,14 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
height: "100%",
padding: 0,
margin: 0,
...windowAttrs.style,
...viewportAttrs.style,
},
}),
values(windowAttrs)
values(viewportAttrs)

Check warning on line 472 in src/react/VGrid.tsx

View workflow job for this annotation

GitHub Actions / check

React Hook useMemo was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies

Check warning on line 472 in src/react/VGrid.tsx

View workflow job for this annotation

GitHub Actions / check

React Hook useMemo has a missing dependency: 'viewportAttrs'. Either include it or remove the dependency array
)}
>
{items}
</Window>
</Viewport>
);
}
);
6 changes: 3 additions & 3 deletions src/react/VList.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
useRef,
useState,
} from "react";
import { CustomWindowComponentProps } from "..";
import { CustomViewportComponentProps } from "..";

const ITEM_HEIGHT = 50;
const ITEM_WIDTH = 100;
Expand Down Expand Up @@ -107,7 +107,7 @@ it("should pass attributes to element", async () => {
});

it("should change components", async () => {
const UlList = forwardRef<HTMLDivElement, CustomWindowComponentProps>(
const UlList = forwardRef<HTMLDivElement, CustomViewportComponentProps>(
({ children, attrs, height }, ref) => {
return (
<div ref={ref} {...attrs}>
Expand All @@ -119,7 +119,7 @@ it("should change components", async () => {
}
);
const { asFragment } = render(
<VList element={UlList} itemElement="li">
<VList components={{ Root: UlList, Item: "li" }}>
<div>0</div>
<div>1</div>
<div>2</div>
Expand Down
62 changes: 38 additions & 24 deletions src/react/VList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,21 @@ import {
} from "./useSelector";
import { exists, max, min, values } from "../core/utils";
import { createScroller } from "../core/scroller";
import { MayHaveKey, flattenChildren, refKey } from "./utils";
import {
MayHaveKey,
defaultComponents,
flattenChildren,
refKey,
} from "./utils";
import { useStatic } from "./useStatic";
import { useRefWithUpdate } from "./useRefWithUpdate";
import { createResizer } from "../core/resizer";
import { WindowComponentAttributes } from "..";
import { ViewportComponentAttributes } from "..";
import {
CustomWindowComponent,
CustomWindowComponentProps,
Window as DefaultWindow,
} from "./Window";
CustomViewportComponent,
CustomViewportComponentProps,
Viewport as DefaultViewport,
} from "./Viewport";
import { CustomItemComponent, ListItem } from "./ListItem";
import { CacheSnapshot } from "../core/types";

Expand All @@ -37,6 +42,19 @@ type CustomItemComponentOrElement =
| keyof JSX.IntrinsicElements
| CustomItemComponent;

export interface VListComponentsConfig {
/**
* Component for scrollable element. This component will get {@link CustomViewportComponentProps} as props.
* @defaultValue {@link DefaultViewport}
*/
Root?: CustomViewportComponent;
/**
* Component or element type for item element. This component will get {@link CustomItemComponentProps} as props.
* @defaultValue "div"
*/
Item?: CustomItemComponentOrElement;
}

/**
* Methods of {@link VList}.
*/
Expand Down Expand Up @@ -77,7 +95,7 @@ export interface VListHandle {
/**
* Props of {@link VList}.
*/
export interface VListProps extends WindowComponentAttributes {
export interface VListProps extends ViewportComponentAttributes {
/**
* Elements rendered by this component.
*/
Expand Down Expand Up @@ -114,15 +132,9 @@ export interface VListProps extends WindowComponentAttributes {
*/
cache?: CacheSnapshot;
/**
* Customized element type for scrollable element. This element will get {@link CustomWindowComponentProps} as props.
* @defaultValue {@link Window}
*/
element?: CustomWindowComponent;
/**
* Customized element type for item element. This element will get {@link CustomItemComponentProps} as props.
* @defaultValue "div"
* Customized components for advanced usage.
*/
itemElement?: CustomItemComponentOrElement;
components?: VListComponentsConfig;
/**
* Callback invoked whenever scroll offset changes.
* @param offset Current scrollTop or scrollLeft.
Expand Down Expand Up @@ -160,12 +172,14 @@ export const VList = forwardRef<VListHandle, VListProps>(
horizontal: horizontalProp,
mode,
cache,
element: Window = DefaultWindow,
itemElement = "div",
components: {
Root: Viewport = DefaultViewport,
Item: ItemElement = "div",
} = defaultComponents as VListComponentsConfig,
onScroll: onScrollProp,
onScrollStop: onScrollStopProp,
onRangeChange: onRangeChangeProp,
...windowAttrs
...viewportAttrs
},
ref
): ReactElement => {
Expand Down Expand Up @@ -293,7 +307,7 @@ export const VList = forwardRef<VListHandle, VListProps>(
_resizer={resizer}
_store={store}
_index={i}
_element={itemElement as "div"}
_element={ItemElement as "div"}
_children={e}
_isHorizontal={isHorizontal}
_isRtl={isRtl}
Expand All @@ -305,14 +319,14 @@ export const VList = forwardRef<VListHandle, VListProps>(
}, [elements, overscanedStartIndex, overscanedEndIndex]);

Check warning on line 319 in src/react/VList.tsx

View workflow job for this annotation

GitHub Actions / check

React Hook useMemo has missing dependencies: 'ItemElement', 'isHorizontal', 'isRtl', 'resizer', and 'store'. Either include them or remove the dependency array

return (
<Window
<Viewport
ref={rootRef}
width={isHorizontal ? scrollSize : undefined}
height={isHorizontal ? undefined : scrollSize}
scrolling={scrolling}
attrs={useMemo(
() => ({
...windowAttrs,
...viewportAttrs,
style: {
overflow: isHorizontal ? "auto hidden" : "hidden auto",
display: isHorizontal ? "inline-block" : "block",
Expand All @@ -326,14 +340,14 @@ export const VList = forwardRef<VListHandle, VListProps>(
height: "100%",
padding: 0,
margin: 0,
...windowAttrs.style,
...viewportAttrs.style,
},
}),
values(windowAttrs)
values(viewportAttrs)
)}
>
{items}
</Window>
</Viewport>
);
}
);
10 changes: 5 additions & 5 deletions src/react/Window.tsx → src/react/Viewport.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
useMemo,
} from "react";

export type WindowComponentAttributes = Pick<
export type ViewportComponentAttributes = Pick<
React.HTMLAttributes<HTMLElement>,
"className" | "style" | "id" | "role" | "tabIndex"
> &
Expand All @@ -15,15 +15,15 @@ export type WindowComponentAttributes = Pick<
/**
* Props of customized scrollable component.
*/
export interface CustomWindowComponentProps {
export interface CustomViewportComponentProps {
/**
* Renderable item elements.
*/
children: ReactNode;
/**
* Attributes that should be passed to the scrollable element.
*/
attrs: WindowComponentAttributes;
attrs: ViewportComponentAttributes;
/**
* Total height of items. It's undefined if component is not vertically scrollable.
*/
Expand All @@ -38,7 +38,7 @@ export interface CustomWindowComponentProps {
scrolling: boolean;
}

export const Window = forwardRef<any, CustomWindowComponentProps>(
export const Viewport = forwardRef<any, CustomViewportComponentProps>(
({ children, attrs, width, height, scrolling }, ref): ReactElement => {
return (
<div ref={ref} {...attrs}>
Expand All @@ -60,4 +60,4 @@ export const Window = forwardRef<any, CustomWindowComponentProps>(
}
);

export type CustomWindowComponent = typeof Window;
export type CustomViewportComponent = typeof Viewport;
Loading

0 comments on commit d2f287f

Please sign in to comment.