@@ -14,7 +14,7 @@ import {action} from '@storybook/addon-actions';
14
14
import { ActionButton } from '@react-spectrum/button' ;
15
15
import { Cell , Column , Row , SpectrumTableProps , TableBody , TableHeader , TableView } from '../' ;
16
16
import { chain } from '@react-aria/utils' ;
17
- import { ComponentMeta } from '@storybook/react' ;
17
+ import { ComponentMeta , ComponentStoryObj } from '@storybook/react' ;
18
18
import defaultConfig , { columns , EmptyStateTable , TableStory } from './Table.stories' ;
19
19
import { enableTableNestedRows } from '@react-stately/flags' ;
20
20
import { Flex } from '@react-spectrum/layout' ;
@@ -162,7 +162,6 @@ export const UserSetRowHeader: TableStory = {
162
162
}
163
163
} ;
164
164
165
- let manyRows : Record < typeof columns [ number ] [ 'key' ] , string > [ ] = [ ] ;
166
165
function generateRow ( lvlIndex , lvlLimit , rowIndex ) {
167
166
let row = { key : `Row ${ rowIndex } Lvl ${ lvlIndex } ` } ;
168
167
for ( let col of columns ) {
@@ -175,19 +174,25 @@ function generateRow(lvlIndex, lvlLimit, rowIndex) {
175
174
return row ;
176
175
}
177
176
178
- for ( let i = 1 ; i < 20 ; i ++ ) {
179
- let row = generateRow ( 1 , 3 , i ) ;
180
- manyRows . push ( row ) ;
177
+ function generateRows ( count = 5 ) {
178
+ let manyRows : Record < typeof columns [ number ] [ 'key' ] , string > [ ] = [ ] ;
179
+ for ( let i = 1 ; i <= count ; i ++ ) {
180
+ let row = generateRow ( 1 , 3 , i ) ;
181
+ manyRows . push ( row ) ;
182
+ }
183
+ return manyRows ;
181
184
}
182
185
183
186
interface ManyExpandableRowsProps extends SpectrumTableProps < unknown > {
184
187
allowsResizing ?: boolean ,
185
- showDivider ?: boolean
188
+ showDivider ?: boolean ,
189
+ rowCount ?: number
186
190
}
187
191
188
192
function ManyExpandableRows ( props : ManyExpandableRowsProps ) {
189
193
let { allowsResizing, showDivider, ...otherProps } = props ;
190
194
let [ expandedKeys , setExpandedKeys ] = useState < 'all' | Set < Key > > ( 'all' ) ;
195
+ let manyRows = generateRows ( props . rowCount ?? 5 ) ;
191
196
192
197
return (
193
198
< Flex direction = "column" >
@@ -211,11 +216,12 @@ function ManyExpandableRows(props: ManyExpandableRowsProps) {
211
216
) ;
212
217
}
213
218
214
- export const ManyExpandableRowsStory : TableStory = {
219
+ export const ManyExpandableRowsStory : ComponentStoryObj < typeof ManyExpandableRows > = {
215
220
args : {
216
221
'aria-label' : 'TableView with many dynamic expandable rows' ,
217
222
width : 500 ,
218
- height : 400
223
+ height : 400 ,
224
+ rowCount : 5
219
225
} ,
220
226
render : ( args ) => (
221
227
< ManyExpandableRows { ...args } />
@@ -230,7 +236,7 @@ export const EmptyTreeGridStory: TableStory = {
230
236
height : 400
231
237
} ,
232
238
render : ( args ) => (
233
- < EmptyStateTable UNSTABLE_allowsExpandableRows selectionMode = "none" columns = { columns } items = { manyRows } allowsSorting = { false } onSortChange = { null } sortDescriptor = { null } { ...args } />
239
+ < EmptyStateTable UNSTABLE_allowsExpandableRows selectionMode = "none" columns = { columns } items = { generateRows ( ) } allowsSorting = { false } onSortChange = { null } sortDescriptor = { null } { ...args } />
234
240
) ,
235
241
name : 'empty state'
236
242
} ;
@@ -245,7 +251,7 @@ function LoadingStateTable(props) {
245
251
< TableHeader columns = { columns } >
246
252
{ column => < Column > { column . name } </ Column > }
247
253
</ TableHeader >
248
- < TableBody items = { show ? manyRows : [ ] } loadingState = "loadingMore" >
254
+ < TableBody items = { show ? generateRows ( ) : [ ] } loadingState = "loadingMore" >
249
255
{ item =>
250
256
( < Row key = { item . key } UNSTABLE_childItems = { item . childRows } >
251
257
{ key => < Cell > { item [ key ] } </ Cell > }
0 commit comments