@fto-consult/expo-ui 8.74.2 → 8.75.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/package.json +108 -108
  2. package/src/components/Datagrid/Accordion/index.js +529 -545
  3. package/src/components/Datagrid/Common/Common.js +45 -8
  4. package/src/components/Datagrid/Common/index.js +0 -4
  5. package/src/components/Datagrid/Dashboard/index.js +3 -4
  6. package/src/components/Datagrid/IndexComponent.js +8 -9
  7. package/src/components/Datagrid/Table/index.js +311 -327
  8. package/src/components/Dropdown/index.js +20 -10
  9. package/src/screens/Help/openLibraries.js +1 -1
  10. package/src/components/Datagrid/Common/TableData.js +0 -66
  11. package/src/components/Datagrid/Common/factory.js +0 -9
  12. package/src/components/Datagrid/factory.js +0 -12
package/src/components/Datagrid/Table/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import CommonDatagrid,{TableData as CommonDatagridTableData} from "../Common";
1
+ import Datagrid from "../Common";
2
2
  import {defaultObj,defaultArray,defaultStr,defaultDecimal,isNonNullString} from "$cutils";
3
3
  import View from "$ecomponents/View";
4
4
  import { StyleSheet,Dimensions,Pressable ,ScrollView} from "react-native";
@@ -16,350 +16,334 @@ import theme from "$theme";
16
16
  import Table,{styles as tableStyles} from "$ecomponents/Table";
17
17
  import DatagridProvider from "../hooks/Provider";
18
18
 
19
-
20
- const DatagridFactory = (Factory)=>{
21
- Factory = Factory || CommonDatagrid;
22
- const clx = class DGridAccordionRenderingCls extends Factory {
23
- constructor(props){
24
- super(props);
25
- this.listRef = React.createRef(null);
26
- }
27
- canHandleColumnResize(){
28
- return true;
29
- }
30
- renderRowCell(args){
31
- if(args.renderRowCell === false || args.isSectionListHeader === true) return super.renderRowCell(args);
32
- const {render} = super.renderRowCell(args);
33
- return render;
34
- }
35
- canHandleSelectableColumn(){
36
- return this.props.selectable !==false ? true : false;
37
- }
38
- isDatagrid(){
39
- return true;
40
- }
41
- canPaginateData(){
42
- return false;
43
- }
44
- bindResizeEvents(){
45
- return true;
46
- }
47
- renderFilter(props,headerFilters){
48
- headerFilters.push(props);
49
- }
50
- renderFooterCell(props){
51
- const {columnField,style} = props;
52
- const footersValues = this.getFooterValues();
53
- const footerFields = this.getFootersFields();
54
- if(isObj(footerFields[columnField])){
55
- return <Footer
56
- {...defaultObj(footersValues[columnField])}
57
- abreviate = {this.state.abreviateValues}
58
- displayLabel = {false}
59
- style = {[style]}
60
- aggregatorFunction = {this.getActiveAggregatorFunction().code}
61
- aggregatorFunctions = {this.aggregatorFunctions}
62
- isFooterCell
63
- />
64
- }
65
- return null;
66
- }
67
- renderFilterCell(props){
68
- const {columnField,style,...rest} = props;
69
- const filterC = this.currentFilteringColumns[columnField];
70
- const rest2 = {};
71
- ["defaultValue","action","operator"].map((i)=>{
72
- if(i in rest){
73
- rest2[i] = rest[i];
74
- }
75
- });
76
- if(isObj(filterC)){
77
- return <Filter
78
- {...rest}
79
- {...filterC}
80
- {...rest2}
81
- withLabel = {false}
82
- style = {[styles.filter,tableStyles.filter,theme.styles.pv0,theme.styles.mv0]}
83
- anchorProps ={{size:20}}
84
- mode = "flat"
85
- inputProps = {{
86
- style : [styles.filter,tableStyles.filter],
87
- mode : "flat",
88
- }}
89
- />
90
- }
91
- return null;
19
+ export default class DatagridTableComponent extends Datagrid {
20
+ constructor(props){
21
+ super(props);
22
+ this.listRef = React.createRef(null);
23
+ }
24
+ canHandleColumnResize(){
25
+ return true;
26
+ }
27
+ renderRowCell(args){
28
+ if(args.renderRowCell === false || args.isSectionListHeader === true) return super.renderRowCell(args);
29
+ const {render} = super.renderRowCell(args);
30
+ return render;
31
+ }
32
+ canHandleSelectableColumn(){
33
+ return this.props.selectable !==false ? true : false;
34
+ }
35
+ isDatagrid(){
36
+ return true;
37
+ }
38
+ canPaginateData(){
39
+ return false;
40
+ }
41
+ bindResizeEvents(){
42
+ return true;
43
+ }
44
+ renderFilter(props,headerFilters){
45
+ headerFilters.push(props);
46
+ }
47
+ renderFooterCell(props){
48
+ const {columnField,style} = props;
49
+ const footersValues = this.getFooterValues();
50
+ const footerFields = this.getFootersFields();
51
+ if(isObj(footerFields[columnField])){
52
+ return <Footer
53
+ {...defaultObj(footersValues[columnField])}
54
+ abreviate = {this.state.abreviateValues}
55
+ displayLabel = {false}
56
+ style = {[style]}
57
+ aggregatorFunction = {this.getActiveAggregatorFunction().code}
58
+ aggregatorFunctions = {this.aggregatorFunctions}
59
+ isFooterCell
60
+ />
92
61
  }
93
- scrollToEnd(){
94
- if(!this.canScrollTo()) return;
95
- if(this.listRef.current && this.listRef.current.scrollToEnd){
96
- return this.listRef.current.scrollToEnd();
97
- }
62
+ return null;
63
+ }
64
+ renderFilterCell(props){
65
+ const {columnField,style,...rest} = props;
66
+ const filterC = this.currentFilteringColumns[columnField];
67
+ const rest2 = {};
68
+ ["defaultValue","action","operator"].map((i)=>{
69
+ if(i in rest){
70
+ rest2[i] = rest[i];
71
+ }
72
+ });
73
+ if(isObj(filterC)){
74
+ return <Filter
75
+ {...rest}
76
+ {...filterC}
77
+ {...rest2}
78
+ withLabel = {false}
79
+ style = {[styles.filter,tableStyles.filter,theme.styles.pv0,theme.styles.mv0]}
80
+ anchorProps ={{size:20}}
81
+ mode = "flat"
82
+ inputProps = {{
83
+ style : [styles.filter,tableStyles.filter],
84
+ mode : "flat",
85
+ }}
86
+ />
98
87
  }
99
- scrollToLeft(){
100
- if(!this.canScrollTo()) return;
101
- if(this.listRef.current && this.listRef.current.scrollToLeft){
102
- return this.listRef.current.scrollToLeft();
103
- }
88
+ return null;
89
+ }
90
+ scrollToEnd(){
91
+ if(!this.canScrollTo()) return;
92
+ if(this.listRef.current && this.listRef.current.scrollToEnd){
93
+ return this.listRef.current.scrollToEnd();
104
94
  }
105
- scrollToTop(opts){
106
- if(!this.canScrollTo()) return;
107
- if(this.listRef.current && this.listRef.current.scrollToTop){
108
- return this.listRef.current.scrollToTop(opts);
109
- }
95
+ }
96
+ scrollToLeft(){
97
+ if(!this.canScrollTo()) return;
98
+ if(this.listRef.current && this.listRef.current.scrollToLeft){
99
+ return this.listRef.current.scrollToLeft();
110
100
  }
111
- scrollToIndex(index){
112
- if(!this.canScrollTo()) return;
113
- index = typeof index =='number'? index : 0;
114
- if(this.listRef.current && this.listRef.current.scrollToIndex){
115
- this.listRef.current.scrollToIndex({index});
116
- }
101
+ }
102
+ scrollToTop(opts){
103
+ if(!this.canScrollTo()) return;
104
+ if(this.listRef.current && this.listRef.current.scrollToTop){
105
+ return this.listRef.current.scrollToTop(opts);
117
106
  }
118
-
119
- getTestID(){
120
- return defaultStr(this.props.testID,"RN_DatagridTable");
107
+ }
108
+ scrollToIndex(index){
109
+ if(!this.canScrollTo()) return;
110
+ index = typeof index =='number'? index : 0;
111
+ if(this.listRef.current && this.listRef.current.scrollToIndex){
112
+ this.listRef.current.scrollToIndex({index});
121
113
  }
122
- render(){
123
- let {title,testID,actions,
124
- selectableMultiple,
125
- sortable,
126
- autoSort,
127
- exportable,
128
- selectable,pagin,showPagination,
129
- sessionName,onMount,onUnmount,onFetchData,dataSourceSelector,
130
- queryLimit,
131
- filters,
132
- chartContainerProps,
133
- accordion, //pour le rendu du header en accordion
134
- ...rest
135
- } = this.props;
136
- const canRenderChart = this.canRenderChart();
137
- chartContainerProps = defaultObj(chartContainerProps);
138
- testID = this.getTestID();
139
- rest = defaultObj(rest);
140
- exportable = defaultBool(exportable,true);
141
- let isMobile = isMobileOrTabletMedia();
142
- selectable = defaultVal(selectable,true);
143
- selectableMultiple = this.isSelectableMultiple();
144
- pagin = defaultVal(pagin,true)
145
- showPagination = defaultVal(showPagination,true);
114
+ }
115
+
116
+ getTestID(){
117
+ return defaultStr(this.props.testID,"RN_DatagridTable");
118
+ }
119
+ render(){
120
+ let {title,testID,actions,
121
+ selectableMultiple,
122
+ sortable,
123
+ autoSort,
124
+ exportable,
125
+ selectable,pagin,showPagination,
126
+ sessionName,onMount,onUnmount,onFetchData,dataSourceSelector,
127
+ queryLimit,
128
+ filters,
129
+ chartContainerProps,
130
+ accordion, //pour le rendu du header en accordion
131
+ ...rest
132
+ } = this.props;
133
+ const canRenderChart = this.canRenderChart();
134
+ chartContainerProps = defaultObj(chartContainerProps);
135
+ testID = this.getTestID();
136
+ rest = defaultObj(rest);
137
+ exportable = defaultBool(exportable,true);
138
+ let isMobile = isMobileOrTabletMedia();
139
+ selectable = defaultVal(selectable,true);
140
+ selectableMultiple = this.isSelectableMultiple();
141
+ pagin = defaultVal(pagin,true)
142
+ showPagination = defaultVal(showPagination,true);
146
143
 
147
- const pagination = defaultObj(this._pagination);
148
- pagination.rowsPerPageItems = defaultArray(pagination.rowsPerPageItems,this.getDefaultPaginationRowsPerPageItems())
149
- let countPages = this.countPages.call(this);
150
- /*let paginationLabel = defaultFunc(pagination.label,({start, last, total}) => `${start}-${last} / ${total}`);
151
- let pagLast = Math.min(pagination.rows, pagination.start + pagination.limit);
144
+ const pagination = defaultObj(this._pagination);
145
+ pagination.rowsPerPageItems = defaultArray(pagination.rowsPerPageItems,this.getDefaultPaginationRowsPerPageItems())
146
+ let countPages = this.countPages.call(this);
147
+ /*let paginationLabel = defaultFunc(pagination.label,({start, last, total}) => `${start}-${last} / ${total}`);
148
+ let pagLast = Math.min(pagination.rows, pagination.start + pagination.limit);
152
149
 
153
- paginationLabel = paginationLabel({
154
- start:pagination.start + 1,
155
- last:pagLast,
156
- total:pagination.rows,pages:countPages
157
- })*/
158
- const {visibleColumns,sortedColumn} = this.preparedColumns;
159
- const hasFootersFields = this.hasFootersFields();
160
- const {columnsWidths:widths} = this.state;
161
- const showFooters = this.canShowFooters(), showFilters = this.canShowFilters();
162
- const pointerEvents = this.getPointerEvents();
150
+ paginationLabel = paginationLabel({
151
+ start:pagination.start + 1,
152
+ last:pagLast,
153
+ total:pagination.rows,pages:countPages
154
+ })*/
155
+ const {visibleColumns,sortedColumn} = this.preparedColumns;
156
+ const hasFootersFields = this.hasFootersFields();
157
+ const {columnsWidths:widths} = this.state;
158
+ const showFooters = this.canShowFooters(), showFilters = this.canShowFilters();
159
+ const pointerEvents = this.getPointerEvents();
163
160
 
164
- const restItems = [...this.renderCustomMenu()];
165
- let max = this.getMaxSelectableRows();
166
- if(selectableMultiple && max){
167
- max = max.formatNumber();
168
- if(selectableMultiple && !canRenderChart && this.canRenderActions()){
169
- restItems.push({
170
- label : "Sélectionner "+max.formatNumber(),
171
- icon : "select-all",
172
- onPress : (x,event)=>{
173
- this.handleAllRowsToggle(true);
174
- }
175
- });
176
- restItems.push({
177
- label : "Tout désélectionner",
178
- onPress : (x,event)=>{
179
- this.handleAllRowsToggle(false);
180
- },
181
- icon : "select"
182
- });
183
- }
184
- }
185
- const rPagination = showPagination ? <View style={[styles.paginationContainer]}>
186
- <ScrollView testID={testID+"_Datagrid_Headers"} horizontal style={styles.paginationContainerStyle} contentContainerStyle={styles.minW100}>
187
- <View testID={testID+"_HeaderPaginationContent"} style={[styles.paginationContent]}>
188
- {this.renderCustomPagination()}
189
- <View testID={testID+"_HeaderQueryLimit"}>
190
- {this.renderQueryLimit(this.getStateDataSize().formatNumber())}
191
- </View>
192
- {!isMobile && <>
193
- <Button normal style={[styles.paginationItem]} icon = {"refresh"} onPress = {this.refresh.bind(this)}>
194
- Rafraichir
195
- </Button>
196
- {this.isFilterable() && (
197
- <Button
198
- normal
199
- style={styles.paginationItem}
200
- onPress = {()=>{showFilters?this.hideFilters():this.showFilters()} }
201
- icon = {showFilters?'eye-off':'eye'}
202
- >
203
- {showFilters?'Masquer/Filtres':'Afficher/Filtres'}
204
- </Button>
205
- )}
206
- {hasFootersFields && !canRenderChart ? <Button
161
+ const restItems = [...this.renderCustomMenu()];
162
+ let max = this.getMaxSelectableRows();
163
+ if(selectableMultiple && max){
164
+ max = max.formatNumber();
165
+ if(selectableMultiple && !canRenderChart && this.canRenderActions()){
166
+ restItems.push({
167
+ label : "Sélectionner "+max.formatNumber(),
168
+ icon : "select-all",
169
+ onPress : (x,event)=>{
170
+ this.handleAllRowsToggle(true);
171
+ }
172
+ });
173
+ restItems.push({
174
+ label : "Tout désélectionner",
175
+ onPress : (x,event)=>{
176
+ this.handleAllRowsToggle(false);
177
+ },
178
+ icon : "select"
179
+ });
180
+ }
181
+ }
182
+ const rPagination = showPagination ? <View style={[styles.paginationContainer]}>
183
+ <ScrollView testID={testID+"_Datagrid_Headers"} horizontal style={styles.paginationContainerStyle} contentContainerStyle={styles.minW100}>
184
+ <View testID={testID+"_HeaderPaginationContent"} style={[styles.paginationContent]}>
185
+ {this.renderCustomPagination()}
186
+ <View testID={testID+"_HeaderQueryLimit"}>
187
+ {this.renderQueryLimit(this.getStateDataSize().formatNumber())}
188
+ </View>
189
+ {!isMobile && <>
190
+ <Button normal style={[styles.paginationItem]} icon = {"refresh"} onPress = {this.refresh.bind(this)}>
191
+ Rafraichir
192
+ </Button>
193
+ {this.isFilterable() && (
194
+ <Button
207
195
  normal
208
196
  style={styles.paginationItem}
209
- onPress = {()=>{this.toggleFooters(!showFooters)} }
210
- icon = {showFooters?'view-column':'view-module'}
197
+ onPress = {()=>{showFilters?this.hideFilters():this.showFilters()} }
198
+ icon = {showFilters?'eye-off':'eye'}
211
199
  >
212
- {showFooters?'Masquer les totaux':'Afficher les totaux'}
213
- </Button>:null}
214
- {restItems.map((item,index)=>{
215
- return <Button
216
- normal
217
- key = {index}
218
- {...item}
219
- style={[styles.paginationItem,item.style]}
220
- children = {item.children|| item.label}
221
- />
222
- })}
223
- </>}
200
+ {showFilters?'Masquer/Filtres':'Afficher/Filtres'}
201
+ </Button>
202
+ )}
203
+ {hasFootersFields && !canRenderChart ? <Button
204
+ normal
205
+ style={styles.paginationItem}
206
+ onPress = {()=>{this.toggleFooters(!showFooters)} }
207
+ icon = {showFooters?'view-column':'view-module'}
208
+ >
209
+ {showFooters?'Masquer les totaux':'Afficher les totaux'}
210
+ </Button>:null}
211
+ {restItems.map((item,index)=>{
212
+ return <Button
213
+ normal
214
+ key = {index}
215
+ {...item}
216
+ style={[styles.paginationItem,item.style]}
217
+ children = {item.children|| item.label}
218
+ />
219
+ })}
220
+ </>}
221
+ <BottomSheetMenu
222
+ testID = {testID+"_BottomSheetMenu"}
223
+ anchor = {(props)=>{
224
+ return <Icon {...props} title={isMobile?"Actions":"Colonnes"} name={isMobile?MENU_ICON:'view-column'}></Icon>
225
+ }}
226
+ closeOnPress = {isMobile?undefined:false}
227
+ items = {isMobile ? [
228
+ isMobile?
229
+ {
230
+ text : 'Rafraichir',
231
+ icon : "refresh",
232
+ onPress : this.refresh.bind(this)
233
+ } : null,
234
+ {
235
+ text : 'colonnes',
236
+ icon : "view-column",
237
+ closeOnPress : false,
238
+ items : visibleColumns
239
+ },
240
+ isMobile && this.isFilterable() ?{
241
+ onPress : ()=>{showFilters?this.hideFilters():this.showFilters()}
242
+ ,icon : showFilters?'eye-off':'eye'
243
+ ,text : (showFilters?'Masquer/Filtres':'Afficher/Filtres')
244
+ } : null,
245
+ isMobile && hasFootersFields?{
246
+ onPress : ()=>{this.toggleFooters(!showFooters)}
247
+ ,icon : showFooters?'view-column':'view-module'
248
+ ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
249
+ } : null,
250
+ ...restItems,
251
+ //...(selectableMultiple ? restItems : [])
252
+ ] : visibleColumns}
253
+
254
+ />
255
+ {this.renderSectionListMenu()}
256
+ {this.renderDisplayTypes()}
257
+ {this.renderAggregatorFunctionsMenu()}
258
+ {this.renderExportableMenu()}
259
+ {!canRenderChart ? <View pointerEvents={pointerEvents} testID={testID+"_HeaderPagination"} style = {styles.paginationItem}>
224
260
  <BottomSheetMenu
225
- testID = {testID+"_BottomSheetMenu"}
226
- anchor = {(props)=>{
227
- return <Icon {...props} title={isMobile?"Actions":"Colonnes"} name={isMobile?MENU_ICON:'view-column'}></Icon>
228
- }}
229
- closeOnPress = {isMobile?undefined:false}
230
- items = {isMobile ? [
231
- isMobile?
232
- {
233
- text : 'Rafraichir',
234
- icon : "refresh",
235
- onPress : this.refresh.bind(this)
236
- } : null,
237
- {
238
- text : 'colonnes',
239
- icon : "view-column",
240
- closeOnPress : false,
241
- items : visibleColumns
261
+ testID={testID+"_HeaderMenus"}
262
+ anchor={(props)=>(<Icon {...props} icon={'axis-z-arrow'}/>)}
263
+ items = {[
264
+ this.canScrollTo() && {
265
+ text : 'Retour en haut',
266
+ icon : "arrow-up-bold",
267
+ onPress : this.scrollToTop.bind(this)
242
268
  },
243
- isMobile && this.isFilterable() ?{
244
- onPress : ()=>{showFilters?this.hideFilters():this.showFilters()}
245
- ,icon : showFilters?'eye-off':'eye'
246
- ,text : (showFilters?'Masquer/Filtres':'Afficher/Filtres')
247
- } : null,
248
- isMobile && hasFootersFields?{
249
- onPress : ()=>{this.toggleFooters(!showFooters)}
250
- ,icon : showFooters?'view-column':'view-module'
251
- ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
252
- } : null,
253
- ...restItems,
254
- //...(selectableMultiple ? restItems : [])
255
- ] : visibleColumns}
256
-
269
+ this.canScrollTo() &&{
270
+ text : 'Retour A gauche',
271
+ icon : "arrow-up-bold",
272
+ onPress : this.scrollToLeft.bind(this)
273
+ },
274
+ this.canScrollTo() &&{
275
+ text : 'Aller à la dernière ligne',
276
+ icon : "arrow-down-bold",
277
+ onPress : this.scrollToEnd.bind(this)
278
+ },
279
+ ]}
257
280
  />
258
- {this.renderSectionListMenu()}
259
- {this.renderDisplayTypes()}
260
- {this.renderAggregatorFunctionsMenu()}
261
- {this.renderExportableMenu()}
262
- {!canRenderChart ? <View pointerEvents={pointerEvents} testID={testID+"_HeaderPagination"} style = {styles.paginationItem}>
263
- <BottomSheetMenu
264
- testID={testID+"_HeaderMenus"}
265
- anchor={(props)=>(<Icon {...props} icon={'axis-z-arrow'}/>)}
266
- items = {[
267
- this.canScrollTo() && {
268
- text : 'Retour en haut',
269
- icon : "arrow-up-bold",
270
- onPress : this.scrollToTop.bind(this)
271
- },
272
- this.canScrollTo() &&{
273
- text : 'Retour A gauche',
274
- icon : "arrow-up-bold",
275
- onPress : this.scrollToLeft.bind(this)
276
- },
277
- this.canScrollTo() &&{
278
- text : 'Aller à la dernière ligne',
279
- icon : "arrow-down-bold",
280
- onPress : this.scrollToEnd.bind(this)
281
- },
282
- ]}
283
- />
284
- </View>:null}
285
- {/*filters !== false && <td className="datagrid-local-filter-wrapper" ><LocalFilter title = {this.props.title} fields ={this.state.columns} onChange={this.onLocalFiltersChange.bind(this)}/></td>*/}
286
- {!canRenderChart && <RenderType/> || null}
281
+ </View>:null}
282
+ {/*filters !== false && <td className="datagrid-local-filter-wrapper" ><LocalFilter title = {this.props.title} fields ={this.state.columns} onChange={this.onLocalFiltersChange.bind(this)}/></td>*/}
283
+ {!canRenderChart && <RenderType/> || null}
284
+ </View>
285
+ </ScrollView>
286
+ </View> : null;
287
+ return <DatagridProvider context={this}>
288
+ <View style={[styles.container,{flex:1}]} testID={testID+"_TableContainer"} pointerEvents={pointerEvents}>
289
+ <View testID={testID+"_LayoutContainer"}>
290
+ {this.canRenderActions() ? <DatagridActions
291
+ pointerEvents = {pointerEvents}
292
+ title = {this.renderDataSourceSelector()}
293
+ actions = {actions}
294
+ /> : null}
295
+ {rPagination}
296
+ {this.renderProgressBar()}
287
297
  </View>
288
- </ScrollView>
289
- </View> : null;
290
- return <DatagridProvider context={this}>
291
- <View style={[styles.container,{flex:1}]} testID={testID+"_TableContainer"} pointerEvents={pointerEvents}>
292
- <View testID={testID+"_LayoutContainer"}>
293
- {this.canRenderActions() ? <DatagridActions
294
- pointerEvents = {pointerEvents}
295
- title = {this.renderDataSourceSelector()}
296
- actions = {actions}
297
- /> : null}
298
- {rPagination}
299
- {this.renderProgressBar()}
300
- </View>
301
- {canRenderChart ?
302
- <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
303
- {this.renderChart()}
304
- </View> :
305
- <Table
306
- ref = {(el)=>{
307
- this.listRef.current = el;
308
- }}
309
- {...rest}
310
- withDatagridContext
311
- sortedColumn = {sortedColumn}
312
- onRender = {this.onRender.bind(this)}
313
- getItemType = {this.getFlashListItemType.bind(this)}
314
- renderItem = {this.renderFlashListItem.bind(this)}
315
- renderSectionHeader = {this.renderFlashListItem.bind(this)}
316
- hasFooters = {hasFootersFields && !canRenderChart ? true : false}
317
- showFilters = {showFilters}
318
- showFooters = {showFooters && !canRenderChart ? true : false}
319
- showHeaders = { canRenderChart ? !!showFilters : true}
320
- headerCellContainerProps = {{
321
- style : showFilters?{justifyContent:'flex-start'}:null
322
- }}
323
- isRowSelected = {this.isRowSelected.bind(this)}
324
- columns = {this.state.columns}
325
- //renderRow={this.renderRow.bind(this)}
326
- getRowKey = {this.getRowKey.bind(this)}
327
- columnsWidths = {widths}
328
- renderCell={this.renderRowCell.bind(this)}
329
- rowContainerProps = {(props)=>{
330
- return {
331
- style : getRowStyle(props,{selected:this.isRowSelected.bind(this)}),
332
- }
333
- }}
334
- data = {this.state.data}
335
- footers = {this.getFooterValues()}
336
- renderHeaderCell={this.renderHeaderCell.bind(this)}
337
- renderFilterCell={this.renderFilterCell.bind(this)}
338
- renderFooterCell={this.renderFooterCell.bind(this)}
339
- renderEmpty = {this.renderEmpty.bind(this)}
340
- />}
341
- </View>
342
-
343
- </DatagridProvider>
344
- }
298
+ {canRenderChart ?
299
+ <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
300
+ {this.renderChart()}
301
+ </View> :
302
+ <Table
303
+ ref = {(el)=>{
304
+ this.listRef.current = el;
305
+ }}
306
+ {...rest}
307
+ withDatagridContext
308
+ sortedColumn = {sortedColumn}
309
+ onRender = {this.onRender.bind(this)}
310
+ getItemType = {this.getFlashListItemType.bind(this)}
311
+ renderItem = {this.renderFlashListItem.bind(this)}
312
+ renderSectionHeader = {this.renderFlashListItem.bind(this)}
313
+ hasFooters = {hasFootersFields && !canRenderChart ? true : false}
314
+ showFilters = {showFilters}
315
+ showFooters = {showFooters && !canRenderChart ? true : false}
316
+ showHeaders = { canRenderChart ? !!showFilters : true}
317
+ headerCellContainerProps = {{
318
+ style : showFilters?{justifyContent:'flex-start'}:null
319
+ }}
320
+ isRowSelected = {this.isRowSelected.bind(this)}
321
+ columns = {this.state.columns}
322
+ //renderRow={this.renderRow.bind(this)}
323
+ getRowKey = {this.getRowKey.bind(this)}
324
+ columnsWidths = {widths}
325
+ renderCell={this.renderRowCell.bind(this)}
326
+ rowContainerProps = {(props)=>{
327
+ return {
328
+ style : getRowStyle(props,{selected:this.isRowSelected.bind(this)}),
329
+ }
330
+ }}
331
+ data = {this.state.data}
332
+ footers = {this.getFooterValues()}
333
+ renderHeaderCell={this.renderHeaderCell.bind(this)}
334
+ renderFilterCell={this.renderFilterCell.bind(this)}
335
+ renderFooterCell={this.renderFooterCell.bind(this)}
336
+ renderEmpty = {this.renderEmpty.bind(this)}
337
+ />}
338
+ </View>
339
+
340
+ </DatagridProvider>
345
341
  }
346
- clx.propTypes = {
347
- ...defaultObj(Table.propTypes),
348
- ...defaultObj(Factory.propTypes),
349
- };
350
- return clx;
351
342
  }
352
-
353
- const DatagridRealTable = DatagridFactory();
354
-
355
- DatagridRealTable.displayName = "DatagridRealTableComponent";
356
-
357
- export default DatagridRealTable;
358
-
359
- export const TableData = DatagridFactory(CommonDatagridTableData);
360
-
361
- TableData.displayName = "DatagridTableDataRealTable";
362
-
343
+ DatagridTableComponent.propTypes = {
344
+ ...defaultObj(Table.propTypes),
345
+ ...defaultObj(Datagrid.propTypes),
346
+ };
363
347
 
364
348
  const styles = StyleSheet.create({
365
349
  paginationContainerStyle : {