1 | import { View, Template, KeyedTemplate } from '../core/view';
|
2 | import { Color } from '../../color';
|
3 | import { CoreTypes } from '../../core-types';
|
4 | import { EventData } from '../../data/observable';
|
5 | import { Length } from '../styling/style-properties';
|
6 | import { Style } from '../styling/style';
|
7 | import { Property, CssProperty } from '../core/properties';
|
8 |
|
9 | /**
|
10 | * Represents a view that shows items in a vertically scrolling list.
|
11 | */
|
12 | export class ListView extends View {
|
13 | /**
|
14 | * String value used when hooking to itemLoading event.
|
15 | */
|
16 | public static itemLoadingEvent: string;
|
17 | /**
|
18 | * String value used when hooking to itemTap event.
|
19 | */
|
20 | public static itemTapEvent: string;
|
21 | /**
|
22 | * String value used when hooking to loadMoreItems event.
|
23 | */
|
24 | public static loadMoreItemsEvent: string;
|
25 |
|
26 | /**
|
27 | * Gets the native [android widget](http://developer.android.com/reference/android/widget/ListView.html) that represents the user interface for this component. Valid only when running on Android OS.
|
28 | */
|
29 | android: any /* android.widget.ListView */;
|
30 |
|
31 | /**
|
32 | * Gets the native [iOS view](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableView_Class/) that represents the user interface for this component. Valid only when running on iOS.
|
33 | */
|
34 | ios: any /* UITableView */;
|
35 |
|
36 | /**
|
37 | * Gets or set the items collection of the ListView.
|
38 | * The items property can be set to an array or an object defining length and getItem(index) method.
|
39 | */
|
40 | items: any[] | ItemsSource;
|
41 |
|
42 | /**
|
43 | * Gets or set the item template of the ListView.
|
44 | */
|
45 | itemTemplate: string | Template;
|
46 |
|
47 | /**
|
48 | * Gets or set the list of item templates for the item template selector
|
49 | */
|
50 | itemTemplates: string | Array<KeyedTemplate>;
|
51 |
|
52 | /**
|
53 | * A function that returns the appropriate ket template based on the data item.
|
54 | */
|
55 | itemTemplateSelector: string | ((item: any, index: number, items: any) => string);
|
56 |
|
57 | /**
|
58 | * Item id generator
|
59 | */
|
60 | itemIdGenerator: (item: any, index: number, items: any) => number;
|
61 |
|
62 | /**
|
63 | * Gets or set the items separator line color of the ListView.
|
64 | */
|
65 | separatorColor: Color;
|
66 |
|
67 | /**
|
68 | * Gets or set row height of the ListView.
|
69 | */
|
70 | rowHeight: CoreTypes.LengthType;
|
71 |
|
72 | /**
|
73 | * Gets or set the estimated height of rows in the ListView.
|
74 | * The default value is 44px.
|
75 | */
|
76 | iosEstimatedRowHeight: CoreTypes.LengthType;
|
77 |
|
78 | /**
|
79 | * Forces the ListView to reload all its items.
|
80 | */
|
81 | refresh();
|
82 |
|
83 | /**
|
84 | * Scrolls the specified item with index into view.
|
85 | * [iOS](https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UITableView_Class/#//apple_ref/occ/instm/UITableView/scrollToRowAtIndexPath:atScrollPosition:animated:)
|
86 | * [Android](http://developer.android.com/reference/android/widget/ListView.html#setSelection(int))
|
87 | * @param index - Item index.
|
88 | */
|
89 | scrollToIndex(index: number);
|
90 |
|
91 | /**
|
92 | * Scrolls the specified item with index into view with animation.
|
93 | * [iOS](https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UITableView_Class/#//apple_ref/occ/instm/UITableView/scrollToRowAtIndexPath:atScrollPosition:animated:)
|
94 | * [Android](https://developer.android.com/reference/android/widget/ListView.html#smoothScrollToPosition(int))
|
95 | * @param index - Item index.
|
96 | */
|
97 | scrollToIndexAnimated(index: number);
|
98 |
|
99 | /**
|
100 | * Checks if Specified item with index is visible.
|
101 | * @param index - Item index.
|
102 | */
|
103 | isItemAtIndexVisible(index: number): boolean;
|
104 |
|
105 | /**
|
106 | * Adds a listener for the specified event name.
|
107 | *
|
108 | * @param eventName The name of the event.
|
109 | * @param callback The event listener to add. Will be called when an event of
|
110 | * the given name is raised.
|
111 | * @param thisArg An optional parameter which, when set, will be bound as the
|
112 | * `this` context when the callback is called. Falsy values will be not be
|
113 | * bound.
|
114 | */
|
115 | on(eventName: string, callback: (data: EventData) => void, thisArg?: any): void;
|
116 |
|
117 | /**
|
118 | * Raised when a View for the data at the specified index should be created.
|
119 | * The result should be returned trough the view property of the event data.
|
120 | * Note, that the view property of the event data can be pre-initialized with
|
121 | * an old instance of a view, so that it can be reused.
|
122 | */
|
123 | on(event: 'itemLoading', callback: (args: ItemEventData) => void, thisArg?: any): void;
|
124 |
|
125 | /**
|
126 | * Raised when an item inside the ListView is tapped.
|
127 | */
|
128 | on(event: 'itemTap', callback: (args: ItemEventData) => void, thisArg?: any): void;
|
129 |
|
130 | /**
|
131 | * Raised when the ListView is scrolled so that its last item is visible.
|
132 | */
|
133 | on(event: 'loadMoreItems', callback: (args: EventData) => void, thisArg?: any): void;
|
134 | }
|
135 |
|
136 | /**
|
137 | * Event data containing information for the index and the view associated to a list view item.
|
138 | */
|
139 | export interface ItemEventData extends EventData {
|
140 | /**
|
141 | * The index of the item, for which the event is raised.
|
142 | */
|
143 | index: number;
|
144 |
|
145 | /**
|
146 | * The view that is associated to the item, for which the event is raised.
|
147 | */
|
148 | view: View;
|
149 |
|
150 | /**
|
151 | * Gets the native [iOS view](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableViewCell_Class/) that represents the user interface where the view is hosted. Valid only when running on iOS.
|
152 | */
|
153 | ios: any /* UITableViewCell */;
|
154 |
|
155 | /**
|
156 | * Gets the native [android widget](http://developer.android.com/reference/android/view/ViewGroup.html) that represents the user interface where the view is hosted. Valid only when running on Android OS.
|
157 | */
|
158 | android: any /* android.view.ViewGroup */;
|
159 | }
|
160 |
|
161 | export interface ItemsSource {
|
162 | length: number;
|
163 | getItem(index: number): any;
|
164 | }
|
165 |
|
166 | export interface TemplatedItemsView {
|
167 | items: any[] | ItemsSource;
|
168 | itemTemplate: string | Template;
|
169 | itemTemplates?: string | Array<KeyedTemplate>;
|
170 | refresh(): void;
|
171 | on(event: 'itemLoading', callback: (args: ItemEventData) => void, thisArg?: any): void;
|
172 | off(event: 'itemLoading', callback: (args: EventData) => void, thisArg?: any): void;
|
173 | }
|
174 |
|
175 | /**
|
176 | * Represents the property backing the items property of each ListView instance.
|
177 | */
|
178 | export const itemsProperty: Property<ListView, any[] | ItemsSource>;
|
179 |
|
180 | /**
|
181 | * Represents the item template property of each ListView instance.
|
182 | */
|
183 | export const itemTemplateProperty: Property<ListView, string | Template>;
|
184 |
|
185 | /**
|
186 | * Represents the items template property of each ListView instance.
|
187 | */
|
188 | export const itemTemplatesProperty: Property<ListView, string | Array<KeyedTemplate>>;
|
189 |
|
190 | /**
|
191 | * Represents the separator color backing property.
|
192 | */
|
193 | export const separatorColor: Property<ListView, Color>;
|
194 |
|
195 | /**
|
196 | * Represents the observable property backing the rowHeight property of each ListView instance.
|
197 | */
|
198 | export const rowHeightProperty: Property<ListView, CoreTypes.LengthType>;
|
199 |
|
200 | /**
|
201 | * Represents the observable property backing the iosEstimatedRowHeight property of each ListView instance.
|
202 | */
|
203 | export const iosEstimatedRowHeightProperty: Property<ListView, CoreTypes.LengthType>;
|
204 |
|
205 | /**
|
206 | * Backing property for separator color property.
|
207 | */
|
208 | export const separatorColorProperty: CssProperty<Style, Color>;
|