Przeglądaj źródła

Add pull-to-refresh functionality

master
zbettenbuk 7 lat temu
rodzic
commit
4b17c6f015

+ 26
- 0
react/features/base/react/components/native/NavigateSectionList.js Wyświetl plik

22
      */
22
      */
23
     onPress: Function,
23
     onPress: Function,
24
 
24
 
25
+    /**
26
+     * Function to be invoked when pull-to-refresh is performed.
27
+     */
28
+    onRefresh: Function,
29
+
25
     /**
30
     /**
26
      * Sections to be rendered in the following format:
31
      * Sections to be rendered in the following format:
27
      *
32
      *
60
         this._getAvatarColor = this._getAvatarColor.bind(this);
65
         this._getAvatarColor = this._getAvatarColor.bind(this);
61
         this._getItemKey = this._getItemKey.bind(this);
66
         this._getItemKey = this._getItemKey.bind(this);
62
         this._onPress = this._onPress.bind(this);
67
         this._onPress = this._onPress.bind(this);
68
+        this._onRefresh = this._onRefresh.bind(this);
63
         this._renderItem = this._renderItem.bind(this);
69
         this._renderItem = this._renderItem.bind(this);
64
         this._renderItemLine = this._renderItemLine.bind(this);
70
         this._renderItemLine = this._renderItemLine.bind(this);
65
         this._renderItemLines = this._renderItemLines.bind(this);
71
         this._renderItemLines = this._renderItemLines.bind(this);
68
 
74
 
69
     /**
75
     /**
70
      * Implements React's Component.render function.
76
      * Implements React's Component.render function.
77
+     * Note: we don't use the refreshing value yet, because refreshing of these
78
+     * lists is super quick, no need to complicate the code - yet.
71
      *
79
      *
72
      * @inheritdoc
80
      * @inheritdoc
73
      */
81
      */
79
                 style = { styles.container } >
87
                 style = { styles.container } >
80
                 <SectionList
88
                 <SectionList
81
                     keyExtractor = { this._getItemKey }
89
                     keyExtractor = { this._getItemKey }
90
+                    onRefresh = { this._onRefresh }
91
+                    refreshing = { false }
82
                     renderItem = { this._renderItem }
92
                     renderItem = { this._renderItem }
83
                     renderSectionHeader = { this._renderSection }
93
                     renderSectionHeader = { this._renderSection }
84
                     sections = { sections }
94
                     sections = { sections }
158
         };
168
         };
159
     }
169
     }
160
 
170
 
171
+    _onRefresh: () => void
172
+
173
+    /**
174
+     * Invokes the onRefresh callback if present.
175
+     *
176
+     * @private
177
+     * @returns {void}
178
+     */
179
+    _onRefresh() {
180
+        const { onRefresh } = this.props;
181
+
182
+        if (typeof onRefresh === 'function') {
183
+            onRefresh();
184
+        }
185
+    }
186
+
161
     _renderItem: Object => Object;
187
     _renderItem: Object => Object;
162
 
188
 
163
     /**
189
     /**

+ 2
- 2
react/features/base/react/components/native/styles.js Wyświetl plik

71
     }
71
     }
72
 };
72
 };
73
 
73
 
74
-const SECTIONLIST_STYLES = {
74
+const SECTION_LIST_STYLES = {
75
     /**
75
     /**
76
      * The style of the actual avatar.
76
      * The style of the actual avatar.
77
      */
77
      */
229
  */
229
  */
230
 export default createStyleSheet({
230
 export default createStyleSheet({
231
     ...HEADER_STYLES,
231
     ...HEADER_STYLES,
232
-    ...SECTIONLIST_STYLES,
232
+    ...SECTION_LIST_STYLES,
233
     ...SIDEBAR_STYLES
233
     ...SIDEBAR_STYLES
234
 });
234
 });

+ 6
- 0
react/features/calendar-sync/actionTypes.js Wyświetl plik

9
  * Action to add a new known domain to the list.
9
  * Action to add a new known domain to the list.
10
  */
10
  */
11
 export const NEW_KNOWN_DOMAIN = Symbol('NEW_KNOWN_DOMAIN');
11
 export const NEW_KNOWN_DOMAIN = Symbol('NEW_KNOWN_DOMAIN');
12
+
13
+/**
14
+ * Action to refresh (re-fetch) the entry list.
15
+ */
16
+export const REFRESH_CALENDAR_ENTRY_LIST
17
+    = Symbol('REFRESH_CALENDAR_ENTRY_LIST');

+ 32
- 15
react/features/calendar-sync/actions.js Wyświetl plik

1
 // @flow
1
 // @flow
2
-import { NEW_CALENDAR_ENTRY_LIST, NEW_KNOWN_DOMAIN } from './actionTypes';
2
+import {
3
+    NEW_CALENDAR_ENTRY_LIST,
4
+    NEW_KNOWN_DOMAIN,
5
+    REFRESH_CALENDAR_ENTRY_LIST
6
+} from './actionTypes';
3
 
7
 
4
 /**
8
 /**
5
- * Sends an action to update the current calendar list in redux.
9
+ * Sends an action to add a new known domain if not present yet.
6
  *
10
  *
7
- * @param {Array<Object>} events - The new list.
11
+ * @param {string} domainName - The new domain.
8
  * @returns {{
12
  * @returns {{
9
- *   type: NEW_CALENDAR_ENTRY_LIST,
10
- *   events: Array<Object>
13
+ *   type: NEW_KNOWN_DOMAIN,
14
+ *   domainName: string
11
  * }}
15
  * }}
12
  */
16
  */
13
-export function updateCalendarEntryList(events: Array<Object>) {
17
+export function maybeAddNewKnownDomain(domainName: string) {
14
     return {
18
     return {
15
-        type: NEW_CALENDAR_ENTRY_LIST,
16
-        events
19
+        type: NEW_KNOWN_DOMAIN,
20
+        domainName
17
     };
21
     };
18
 }
22
 }
19
 
23
 
20
 /**
24
 /**
21
- * Sends an action to add a new known domain if not present yet.
25
+ * Sends an action to refresh the entry list (fetches new data).
22
  *
26
  *
23
- * @param {string} domainName - The new domain.
24
  * @returns {{
27
  * @returns {{
25
- *   type: NEW_KNOWN_DOMAIN,
26
- *   domainName: string
28
+ *   type: REFRESH_CALENDAR_ENTRY_LIST
27
  * }}
29
  * }}
28
  */
30
  */
29
-export function maybeAddNewKnownDomain(domainName: string) {
31
+export function refreshCalendarEntryList() {
30
     return {
32
     return {
31
-        type: NEW_KNOWN_DOMAIN,
32
-        domainName
33
+        type: REFRESH_CALENDAR_ENTRY_LIST
34
+    };
35
+}
36
+
37
+/**
38
+ * Sends an action to update the current calendar list in redux.
39
+ *
40
+ * @param {Array<Object>} events - The new list.
41
+ * @returns {{
42
+ *   type: NEW_CALENDAR_ENTRY_LIST,
43
+ *   events: Array<Object>
44
+ * }}
45
+ */
46
+export function updateCalendarEntryList(events: Array<Object>) {
47
+    return {
48
+        type: NEW_CALENDAR_ENTRY_LIST,
49
+        events
33
     };
50
     };
34
 }
51
 }

+ 18
- 0
react/features/calendar-sync/components/MeetingList.native.js Wyświetl plik

2
 import React, { Component } from 'react';
2
 import React, { Component } from 'react';
3
 import { connect } from 'react-redux';
3
 import { connect } from 'react-redux';
4
 
4
 
5
+import { refreshCalendarEntryList } from '../actions';
6
+
5
 import { appNavigate } from '../../app';
7
 import { appNavigate } from '../../app';
6
 import { translate } from '../../base/i18n';
8
 import { translate } from '../../base/i18n';
7
 import { NavigateSectionList } from '../../base/react';
9
 import { NavigateSectionList } from '../../base/react';
51
         super(props);
53
         super(props);
52
 
54
 
53
         this._onPress = this._onPress.bind(this);
55
         this._onPress = this._onPress.bind(this);
56
+        this._onRefresh = this._onRefresh.bind(this);
54
         this._toDisplayableItem = this._toDisplayableItem.bind(this);
57
         this._toDisplayableItem = this._toDisplayableItem.bind(this);
55
         this._toDisplayableList = this._toDisplayableList.bind(this);
58
         this._toDisplayableList = this._toDisplayableList.bind(this);
56
         this._toDateString = this._toDateString.bind(this);
59
         this._toDateString = this._toDateString.bind(this);
68
             <NavigateSectionList
71
             <NavigateSectionList
69
                 disabled = { disabled }
72
                 disabled = { disabled }
70
                 onPress = { this._onPress }
73
                 onPress = { this._onPress }
74
+                onRefresh = { this._onRefresh }
71
                 sections = { this._toDisplayableList() } />
75
                 sections = { this._toDisplayableList() } />
72
         );
76
         );
73
     }
77
     }
87
         dispatch(appNavigate(url));
91
         dispatch(appNavigate(url));
88
     }
92
     }
89
 
93
 
94
+    _onRefresh: () => void
95
+
96
+    /**
97
+     * Callback to execute when the list is doing a pull-to-refresh.
98
+     *
99
+     * @private
100
+     * @returns {void}
101
+     */
102
+    _onRefresh() {
103
+        const { dispatch } = this.props;
104
+
105
+        dispatch(refreshCalendarEntryList());
106
+    }
107
+
90
     _toDisplayableItem: Object => Object
108
     _toDisplayableItem: Object => Object
91
 
109
 
92
     /**
110
     /**

+ 4
- 0
react/features/calendar-sync/middleware.js Wyświetl plik

9
 import { APP_WILL_MOUNT } from '../app';
9
 import { APP_WILL_MOUNT } from '../app';
10
 
10
 
11
 import { maybeAddNewKnownDomain, updateCalendarEntryList } from './actions';
11
 import { maybeAddNewKnownDomain, updateCalendarEntryList } from './actions';
12
+import { REFRESH_CALENDAR_ENTRY_LIST } from './actionTypes';
12
 
13
 
13
 const FETCH_END_DAYS = 10;
14
 const FETCH_END_DAYS = 10;
14
 const FETCH_START_DAYS = -1;
15
 const FETCH_START_DAYS = -1;
23
         _ensureDefaultServer(store);
24
         _ensureDefaultServer(store);
24
         _fetchCalendarEntries(store);
25
         _fetchCalendarEntries(store);
25
         break;
26
         break;
27
+    case REFRESH_CALENDAR_ENTRY_LIST:
28
+        _fetchCalendarEntries(store);
29
+        break;
26
     case SET_ROOM:
30
     case SET_ROOM:
27
         _parseAndAddDomain(store);
31
         _parseAndAddDomain(store);
28
     }
32
     }

Ładowanie…
Anuluj
Zapisz