|
| 1 | +import {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer'; |
| 2 | +import {LayoutNode, ListLayout, ListLayoutOptions} from '@react-stately/layout'; |
| 3 | +import {Node} from '@react-types/shared'; |
| 4 | + |
| 5 | +interface ListBoxLayoutProps { |
| 6 | + isLoading?: boolean |
| 7 | +} |
| 8 | + |
| 9 | +interface ListBoxLayoutOptions extends ListLayoutOptions { |
| 10 | + placeholderHeight: number, |
| 11 | + padding: number |
| 12 | +} |
| 13 | + |
| 14 | +export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> { |
| 15 | + private isLoading: boolean = false; |
| 16 | + private placeholderHeight: number; |
| 17 | + private padding: number; |
| 18 | + |
| 19 | + constructor(opts: ListBoxLayoutOptions) { |
| 20 | + super(opts); |
| 21 | + this.placeholderHeight = opts.placeholderHeight; |
| 22 | + this.padding = opts.padding; |
| 23 | + } |
| 24 | + |
| 25 | + validate(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void { |
| 26 | + this.isLoading = invalidationContext.layoutOptions?.isLoading || false; |
| 27 | + super.validate(invalidationContext); |
| 28 | + } |
| 29 | + |
| 30 | + protected buildCollection(): LayoutNode[] { |
| 31 | + let nodes = super.buildCollection(this.padding); |
| 32 | + let y = this.contentSize.height; |
| 33 | + |
| 34 | + if (this.isLoading) { |
| 35 | + let rect = new Rect(0, y, this.virtualizer.visibleRect.width, 40); |
| 36 | + let loader = new LayoutInfo('loader', 'loader', rect); |
| 37 | + let node = { |
| 38 | + layoutInfo: loader, |
| 39 | + validRect: loader.rect |
| 40 | + }; |
| 41 | + nodes.push(node); |
| 42 | + this.layoutNodes.set(loader.key, node); |
| 43 | + y = loader.rect.maxY; |
| 44 | + } |
| 45 | + |
| 46 | + if (nodes.length === 0) { |
| 47 | + let rect = new Rect(0, y, this.virtualizer.visibleRect.width, this.placeholderHeight ?? this.virtualizer.visibleRect.height); |
| 48 | + let placeholder = new LayoutInfo('placeholder', 'placeholder', rect); |
| 49 | + let node = { |
| 50 | + layoutInfo: placeholder, |
| 51 | + validRect: placeholder.rect |
| 52 | + }; |
| 53 | + nodes.push(node); |
| 54 | + this.layoutNodes.set(placeholder.key, node); |
| 55 | + y = placeholder.rect.maxY; |
| 56 | + } |
| 57 | + |
| 58 | + this.contentSize.height = y + this.padding; |
| 59 | + return nodes; |
| 60 | + } |
| 61 | + |
| 62 | + protected buildSection(node: Node<T>, x: number, y: number): LayoutNode { |
| 63 | + // Synthesize a collection node for the header. |
| 64 | + let headerNode = { |
| 65 | + type: 'header', |
| 66 | + key: node.key + ':header', |
| 67 | + parentKey: node.key, |
| 68 | + value: null, |
| 69 | + level: node.level, |
| 70 | + hasChildNodes: false, |
| 71 | + childNodes: [], |
| 72 | + rendered: node.rendered, |
| 73 | + textValue: node.textValue |
| 74 | + }; |
| 75 | + |
| 76 | + // Build layout node for it and adjust y offset of section children. |
| 77 | + let header = this.buildSectionHeader(headerNode, x, y); |
| 78 | + header.node = headerNode; |
| 79 | + header.layoutInfo.parentKey = node.key; |
| 80 | + this.layoutNodes.set(headerNode.key, header); |
| 81 | + y += header.layoutInfo.rect.height; |
| 82 | + |
| 83 | + let section = super.buildSection(node, x, y); |
| 84 | + section.children.unshift(header); |
| 85 | + return section; |
| 86 | + } |
| 87 | +} |
0 commit comments