From 8c0e5ac91bd3ba76f63225f49e78a0b29c0fa5e1 Mon Sep 17 00:00:00 2001 From: heka Date: Mon, 12 Jun 2023 14:45:27 +0900 Subject: [PATCH] Fix typescript type errors about containers and remove unnecessary parentheses. --- examples/grid-gap.tsx | 2 +- examples/grid-header-footer.tsx | 3 +-- examples/grid-optimize-rendering.tsx | 3 +-- examples/grid-responsive-columns.tsx | 2 +- examples/grid-scroll-seek-placeholder.tsx | 2 +- examples/grid.tsx | 3 +-- examples/scroll-element-grid-scroller.tsx | 3 +-- examples/window-grid.tsx | 3 +-- src/interfaces.ts | 9 +++++---- 9 files changed, 13 insertions(+), 17 deletions(-) diff --git a/examples/grid-gap.tsx b/examples/grid-gap.tsx index 3a9633e1e..a432e9356 100644 --- a/examples/grid-gap.tsx +++ b/examples/grid-gap.tsx @@ -37,7 +37,7 @@ const ListContainer = styled.div` flex-wrap: wrap; row-gap: 20px; column-gap: 20px; -` as GridComponents['List'] +` export function Example() { const ref = React.createRef() diff --git a/examples/grid-header-footer.tsx b/examples/grid-header-footer.tsx index 754460a7c..a714f4df9 100644 --- a/examples/grid-header-footer.tsx +++ b/examples/grid-header-footer.tsx @@ -31,13 +31,12 @@ const ItemWrapper = styled.div` height: 30px; padding: 20px; background: white; - } ` const ListContainer = styled.div` display: flex; flex-wrap: wrap; -` as GridComponents['List'] +` export function Example() { return ( diff --git a/examples/grid-optimize-rendering.tsx b/examples/grid-optimize-rendering.tsx index cf4ce1c4b..6cacdf634 100644 --- a/examples/grid-optimize-rendering.tsx +++ b/examples/grid-optimize-rendering.tsx @@ -32,13 +32,12 @@ const ItemWrapper = styled.div` padding: 20px; box-shadow: 0 5px 6px -6px #777; background: white; - } ` const ListContainer = styled.div` display: flex; flex-wrap: wrap; -` as GridComponents['List'] +` const Item = React.memo(({ item }: { item: { index: number; selected: boolean } }) => { return
Item {item.index}
diff --git a/examples/grid-responsive-columns.tsx b/examples/grid-responsive-columns.tsx index df9d125f6..9db327a51 100644 --- a/examples/grid-responsive-columns.tsx +++ b/examples/grid-responsive-columns.tsx @@ -25,7 +25,7 @@ const ListContainer = styled.div` grid-template-rows: repeat(auto-fill, 100px); justify-content: space-evenly; margin: 10px; -` as GridComponents['List'] +` export function Example() { return ( diff --git a/examples/grid-scroll-seek-placeholder.tsx b/examples/grid-scroll-seek-placeholder.tsx index d31cccffd..fbf3b50e9 100644 --- a/examples/grid-scroll-seek-placeholder.tsx +++ b/examples/grid-scroll-seek-placeholder.tsx @@ -16,7 +16,7 @@ const ItemContainer = styled.div` const ListContainer = styled.div` display: flex; flex-wrap: wrap; -` as GridComponents['List'] +` export function Example() { return ( diff --git a/examples/grid.tsx b/examples/grid.tsx index deed604f3..61a2f35f2 100644 --- a/examples/grid.tsx +++ b/examples/grid.tsx @@ -31,13 +31,12 @@ const ItemWrapper = styled.div` height: 30px; padding: 20px; background: white; - } ` const ListContainer = styled.div` display: flex; flex-wrap: wrap; -` as GridComponents['List'] +` export function Example() { const ref = React.createRef() diff --git a/examples/scroll-element-grid-scroller.tsx b/examples/scroll-element-grid-scroller.tsx index 81697a77b..920b88466 100644 --- a/examples/scroll-element-grid-scroller.tsx +++ b/examples/scroll-element-grid-scroller.tsx @@ -30,12 +30,11 @@ const ItemWrapper = styled.div` padding: 20px; box-shadow: 0 5px 6px -6px #777; background: white; - } ` const ListContainer = styled.div` display: flex; flex-wrap: wrap; -` as GridComponents['List'] +` export function Example() { const [customScrollParent, setCustomScrollParent] = React.useState(null) diff --git a/examples/window-grid.tsx b/examples/window-grid.tsx index 7d245c364..281031820 100644 --- a/examples/window-grid.tsx +++ b/examples/window-grid.tsx @@ -30,13 +30,12 @@ const ItemWrapper = styled.div` padding: 20px; box-shadow: 0 5px 6px -6px #777; background: white; - } ` const ListContainer = styled.div` display: flex; flex-wrap: wrap; -` as GridComponents['List'] +` export function Example() { const ref = React.createRef() diff --git a/src/interfaces.ts b/src/interfaces.ts index 58c6555bf..b9fc25af5 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -39,26 +39,27 @@ export type TableProps = Pick, 'style' | 'c /** * Passed to the Components.TableBody custom component */ -export type TableBodyProps = Pick, 'style' | 'children' | 'ref' | 'className'> & { +export type TableBodyProps = Pick, 'style' | 'children' | 'className'> & { 'data-test-id': string } /** * Passed to the Components.List custom component */ -export type ListProps = Pick, 'style' | 'children' | 'ref'> & { 'data-test-id': string } +export type ListProps = Pick, 'style' | 'children'> & { 'data-test-id': string } /** * Passed to the Components.List custom component */ -export type GridListProps = Pick, 'style' | 'children' | 'ref' | 'className'> & { +export type GridListProps = Pick, 'style' | 'children' | 'className'> & { 'data-test-id': string + } /** * Passed to the Components.Scroller custom component */ -export type ScrollerProps = Pick, 'style' | 'children' | 'tabIndex' | 'ref'> & { +export type ScrollerProps = Pick, 'style' | 'children' | 'tabIndex'> & { 'data-test-id'?: string 'data-virtuoso-scroller'?: boolean }