@fto-consult/expo-ui 6.25.1 → 6.25.2
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.
- package/app.config.json +1 -1
- package/package.json +1 -1
- package/src/components/Datagrid/Common/Common.js +1 -1
- package/src/components/Table/Header/Cell/index.native.js +2 -1
- package/src/components/Table/Header/CellHeader.js +22 -0
- package/src/components/Table/Header/index.js +23 -8
- package/src/components/Table/Row/Cell/Content.native.js +5 -4
- package/src/components/Table/Row/Cell/index.js +3 -3
- package/src/components/Table/Row/RowWrapper.native.js +10 -2
- package/src/components/Table/Row/index.js +4 -3
- package/src/components/Table/hooks.js +15 -20
- package/src/components/Table/index.js +9 -35
- package/src/components/Table/styles.js +10 -3
- package/src/components/Table/useTable.js +7 -0
- package/src/screens/Help/openLibraries.js +1 -1
package/app.config.json
CHANGED
package/package.json
CHANGED
|
@@ -961,7 +961,7 @@ export default class CommonDatagridComponent extends AppComponent {
|
|
|
961
961
|
this.setState(state);
|
|
962
962
|
});
|
|
963
963
|
};
|
|
964
|
-
const max = isMobileOrTabletMedia()?
|
|
964
|
+
const max = isMobileOrTabletMedia()? 200 : 5000;
|
|
965
965
|
if(this.INITIAL_STATE.data.length > max){
|
|
966
966
|
return this.setIsLoading(true,call,true);
|
|
967
967
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import View from "$ecomponents/View";
|
|
2
2
|
import React from "$react";
|
|
3
|
+
import styles from "../../styles";
|
|
3
4
|
const TableHeaderCellComponent = React.forwardRef(({width,style,...props},ref)=>{
|
|
4
|
-
return <View ref={ref} {...props} style={[style,width && {width}]}/>
|
|
5
|
+
return <View ref={ref} {...props} style={[styles.cell,style,width && {width}]}/>
|
|
5
6
|
});
|
|
6
7
|
TableHeaderCellComponent.displayName = "TableTableHeaderCellComponent";
|
|
7
8
|
export default TableHeaderCellComponent;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "$react";
|
|
2
|
+
import Cell from "./Cell";
|
|
3
|
+
import useTable from "../useTable";
|
|
4
|
+
import Label from "$ecomponents/Label";
|
|
5
|
+
import {defaultVal} from "$cutils";
|
|
6
|
+
import theme from "$theme";
|
|
7
|
+
import styles from "../styles";
|
|
8
|
+
|
|
9
|
+
export default function TableCellMainHeaderComponent({columnField,columnDef,style,colArgs,...props}){
|
|
10
|
+
const {sortedColumn,renderHeaderCell,colsWidths} = useTable();
|
|
11
|
+
const width = colsWidths[columnField];
|
|
12
|
+
const isSelectableColumnName = columnDef.isSelectableColumnName;
|
|
13
|
+
const children = React.useMemo(()=>{
|
|
14
|
+
const content = typeof renderHeaderCell =='function'? renderHeaderCell(colArgs) : defaultVal(columnDef.text,columnDef.label,columnField);
|
|
15
|
+
if(!React.isValidElement(content,true)){
|
|
16
|
+
console.error(content," is not valid element of header ",columnDef," it could not be render on table");
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
return <Label splitText numberOfLines={1} style={[theme.styles.w100,theme.styles.h100,{maxHeight:70},width&&{width}]} textBold primary>{content}</Label>
|
|
20
|
+
},[sortedColumn,columnField])
|
|
21
|
+
return <Cell {...props} style={[styles.headerItem,style]} children={children}/>
|
|
22
|
+
}
|
|
@@ -8,19 +8,27 @@ import { View } from "react-native";
|
|
|
8
8
|
import PropTypes from "prop-types";
|
|
9
9
|
import { StyleSheet } from "react-native";
|
|
10
10
|
import {isMobileNative} from "$cplatform";
|
|
11
|
-
import {classNames} from "$cutils";
|
|
11
|
+
import {classNames,defaultObj} from "$cutils";
|
|
12
12
|
const isNative = isMobileNative();
|
|
13
13
|
const Component = isNative ? View : "tr";
|
|
14
|
-
import
|
|
14
|
+
import { useTable } from "../hooks";
|
|
15
|
+
import styles from "../styles";
|
|
16
|
+
import CellHeader from "./CellHeader";
|
|
15
17
|
|
|
16
|
-
export default function RowHeaderComponent({
|
|
18
|
+
export default function RowHeaderComponent({isFilter,isFooter,isHeader,className,children:cChildren,...rest}){
|
|
19
|
+
const {showHeaders,visibleColsNames,visibleColsNamesStr,headerContainerProps,footerContainerProps,filtersContainerProps,showFilters,footers,headers,filters,showFooters} = useTable();
|
|
20
|
+
const canV = showHeaders === false ? false : Array.isArray(children)? !!children.length : true;
|
|
21
|
+
const visible = canV && (isHeader ? true : isFilter ? !!showFilters : isFooter ? !!showFooters: true);
|
|
22
|
+
const containerProps = defaultObj( isHeader ? headerContainerProps : isFooter ? footerContainerProps : filtersContainerProps);
|
|
23
|
+
const style = filters ? styles.filters : isFooter ? styles.footer : null;
|
|
17
24
|
const children = React.useMemo(()=>{
|
|
18
|
-
|
|
19
|
-
|
|
25
|
+
const contents = isFilter ? filters : isFooter ? footers : headers;
|
|
26
|
+
return visibleColsNames.map((columnField,cIndex)=>{
|
|
27
|
+
return contents[columnField] || null;
|
|
28
|
+
});
|
|
29
|
+
},[visibleColsNamesStr]);
|
|
20
30
|
const rP = isNative ? rest : {className:classNames(className,"table-footer-or-header-row")}
|
|
21
|
-
|
|
22
|
-
//const backgroundColor = theme.isDark()? theme.Colors.lighten(theme.surfaceBackgroundColor):theme.Colors.darken(theme.surfaceBackgroundColor);
|
|
23
|
-
return <Component {...rP} style={StyleSheet.flatten([rest.style,!visible && {height:0,opacity:0,display:'none'}])}>
|
|
31
|
+
return <Component {...rP} {...containerProps} style={StyleSheet.flatten([styles.header,style,rest.style,containerProps.style,!visible && hStyle.hidden])}>
|
|
24
32
|
{children}
|
|
25
33
|
</Component>
|
|
26
34
|
}
|
|
@@ -32,3 +40,10 @@ RowHeaderComponent.propTypes = {
|
|
|
32
40
|
export {Cell};
|
|
33
41
|
|
|
34
42
|
RowHeaderComponent.Cell = Cell;
|
|
43
|
+
RowHeaderComponent.CellHeader = CellHeader;
|
|
44
|
+
|
|
45
|
+
export {CellHeader};
|
|
46
|
+
|
|
47
|
+
const hStyle = StyleSheet.create({
|
|
48
|
+
hidden : {height:0,opacity:0,display:'none'}
|
|
49
|
+
});
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
// license that can be found in the LICENSE file.
|
|
4
4
|
import React from "react";
|
|
5
5
|
import View from "$ecomponents/View";
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
import {useTable} from "../../hooks";
|
|
7
|
+
function TableCellContentComponent({children,columnField,style,colSpan,...rest}){
|
|
8
|
+
const {colsWidths} = useTable();
|
|
9
|
+
const width = columnField ? colsWidths[columnField] : 0;
|
|
10
|
+
return (<View testID={"RN_TableRowCellContentComponent"} {...rest} style={[style,width && {width}]}>
|
|
10
11
|
{children}
|
|
11
12
|
</View>);
|
|
12
13
|
}
|
|
@@ -4,7 +4,7 @@ import { useTable } from "../../hooks";
|
|
|
4
4
|
import {defaultObj} from "$cutils";
|
|
5
5
|
import Label from "$ecomponents/Label";
|
|
6
6
|
import styles from "../../styles";
|
|
7
|
-
const TableRowCellComponent = React.forwardRef(({children,columnDef,rowData,colSpan,isSectionListHeader,rowIndex,style,...rest},ref)=>{
|
|
7
|
+
const TableRowCellComponent = React.forwardRef(({children,columnDef,columnField,rowData,colSpan,isSectionListHeader,rowIndex,style,...rest},ref)=>{
|
|
8
8
|
if(isSectionListHeader){
|
|
9
9
|
return <CellContent colSpan={colSpan} ref={ref} style={[styles.sectionListHeader,style]} >
|
|
10
10
|
{children}
|
|
@@ -12,14 +12,14 @@ const TableRowCellComponent = React.forwardRef(({children,columnDef,rowData,colS
|
|
|
12
12
|
}
|
|
13
13
|
const {renderCell} = useTable();
|
|
14
14
|
const {content,containerProps} = React.useMemo(()=>{
|
|
15
|
-
const rArgs = {...rest,columnDef,rowData,rowIndex,containerProps : {}};
|
|
15
|
+
const rArgs = {...rest,columnDef,columnField,rowData,rowIndex,containerProps : {}};
|
|
16
16
|
const r = typeof renderCell =='function' && renderCell (rArgs) || children;
|
|
17
17
|
return {
|
|
18
18
|
content : r && React.isValidElement(r,true)? r : children,
|
|
19
19
|
containerProps : defaultObj(rArgs.containerProps)
|
|
20
20
|
}
|
|
21
21
|
},[children]);
|
|
22
|
-
return (<CellContent ref={ref} {...containerProps} style={[style,containerProps.style]} >
|
|
22
|
+
return (<CellContent ref={ref} {...containerProps} columnField={columnField} style={[style,containerProps.style]} >
|
|
23
23
|
{columnDef.isSelectableColumnName ? content : <Label testID="RN_TableRowCell" style={[styles.cell]}>{content}</Label>}
|
|
24
24
|
</CellContent>);
|
|
25
25
|
});
|
|
@@ -1,9 +1,17 @@
|
|
|
1
|
-
import { forwardRef } from "react";
|
|
1
|
+
import { forwardRef,useMemo } from "react";
|
|
2
2
|
import View from "$ecomponents/View";
|
|
3
3
|
import styles from "../styles";
|
|
4
|
+
import { useTable } from "../hooks";
|
|
5
|
+
import {useIsRowSelected} from "$ecomponents/Datagrid/hooks";
|
|
6
|
+
import { getRowStyle } from "$ecomponents/Datagrid/utils";
|
|
4
7
|
|
|
5
8
|
const TableRowWrapperComponent = forwardRef(({children,colSpan,...props},ref)=>{
|
|
6
|
-
|
|
9
|
+
const {bordered,withDatagridContext} = useTable();
|
|
10
|
+
const selected = withDatagridContext ? useIsRowSelected(props) : false;
|
|
11
|
+
const rowStyle = useMemo(()=>{
|
|
12
|
+
return getRowStyle({...props,bordered});
|
|
13
|
+
},[selected])
|
|
14
|
+
return <View ref={ref} {...props} style={[styles.row,rowStyle,props.style]} children={children}/>
|
|
7
15
|
});
|
|
8
16
|
|
|
9
17
|
TableRowWrapperComponent.displayName = "TableRowWrapperComponent";
|
|
@@ -11,7 +11,8 @@ import RowWrapper from "./RowWrapper";
|
|
|
11
11
|
import React from "$react";
|
|
12
12
|
import theme from "$theme";
|
|
13
13
|
export default function TableRowComponent({cells,rowKey,rowData,index,...rest}){
|
|
14
|
-
const {visibleColsNames,
|
|
14
|
+
const {visibleColsNames,visibleColsNamesStr,renderSectionHeader,columns} = useTable();
|
|
15
|
+
if(!isObj(rowData)) return null;
|
|
15
16
|
const content = React.useMemo(()=>{
|
|
16
17
|
if(rowData.isSectionListHeader && typeof renderSectionHeader ==='function'){
|
|
17
18
|
return <RowWrapper style={[styles.row,theme.styles.pv1]}>
|
|
@@ -23,8 +24,8 @@ export default function TableRowComponent({cells,rowKey,rowData,index,...rest}){
|
|
|
23
24
|
if(!isObj(columnDef)) return null;
|
|
24
25
|
return <Cell rowData={rowData} rowKey={rowKey} children={rowData[columnField]} rowIndex={index} columnDef={columnDef} index={cIndex} key={columnField} columnField={columnField}/>
|
|
25
26
|
});
|
|
26
|
-
},[rowKey,index,
|
|
27
|
-
return <RowWrapper style={[styles.row]}>
|
|
27
|
+
},[rowKey,index,visibleColsNamesStr]);
|
|
28
|
+
return <RowWrapper {...rest} rowKey={rowKey} rowData={rowData} rowIndex={index} style={[styles.row]}>
|
|
28
29
|
{content}
|
|
29
30
|
</RowWrapper>;
|
|
30
31
|
}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import React,{useMemo
|
|
1
|
+
import React,{useMemo} from "$react";
|
|
2
2
|
import {defaultStr,isObj} from "$cutils";
|
|
3
3
|
import {DEFAULT_COLUMN_WIDTH} from "./utils";
|
|
4
4
|
import Label from "$ecomponents/Label";
|
|
5
5
|
import HeaderCell from "./Header/Cell";
|
|
6
|
-
import
|
|
6
|
+
import MainHeaderCell from "./Header/CellHeader";
|
|
7
7
|
import styles from "./styles";
|
|
8
|
-
import theme from "$theme";
|
|
9
8
|
|
|
10
|
-
export const usePrepareColumns = ({columns,
|
|
9
|
+
export const usePrepareColumns = ({columns,forceRender,testID,renderFooterCell,renderHeaderCell,renderFilterCell,columnsWidths,headerCellContainerProps,colsWidths,columnProps,footers,footerCellContainerProps,filterCellContainerProps})=>{
|
|
11
10
|
return useMemo(()=>{
|
|
12
11
|
testID = defaultStr(testID,"RN_TableColumns")
|
|
13
|
-
const cols = {},headers = {},footers = {},filters = {},visibleColsNames = [],columnsVisibilities=[],columnsNames = [];
|
|
12
|
+
const cols = {},headers = {},footers = {},filters = {},visibleColsNames = [],columnsVisibilities=[],columnsNames = [],colsWidths={};
|
|
14
13
|
let hasFooters = false;
|
|
15
14
|
columnProps = defaultObj(columnProps);
|
|
16
15
|
let columnIndex = 0;
|
|
@@ -18,27 +17,22 @@ export const usePrepareColumns = ({columns,sortedColumn,forceRender,testID,rende
|
|
|
18
17
|
headerCellContainerProps = defaultObj(headerCellContainerProps);
|
|
19
18
|
footerCellContainerProps = defaultObj(footerCellContainerProps);
|
|
20
19
|
filterCellContainerProps = defaultObj(filterCellContainerProps);
|
|
20
|
+
let totalWidths = 0;
|
|
21
21
|
Object.map(columns,(columnDef,field)=>{
|
|
22
22
|
if(!isObj(columnDef)) return;
|
|
23
23
|
const columnField = defaultStr(columnDef.field,field);
|
|
24
24
|
let {visible,width,type,style} = columnDef;
|
|
25
25
|
visible = typeof visible =='boolean'? visible : true;
|
|
26
26
|
type = defaultStr(type,"text").toLowerCase().trim();
|
|
27
|
-
width = defaultDecimal(widths[columnField],width,DEFAULT_COLUMN_WIDTH);
|
|
27
|
+
width = colsWidths[columnField] = defaultDecimal(widths[columnField],width,DEFAULT_COLUMN_WIDTH);
|
|
28
28
|
const colArgs = {width,type,columnDef,containerProps:{},columnField,index:columnIndex,columnIndex};
|
|
29
|
-
const content = typeof renderHeaderCell =='function'? renderHeaderCell(colArgs) : defaultVal(columnDef.text,columnDef.label,columnField);
|
|
30
29
|
const hContainerProps = defaultObj(colArgs.containerProps);
|
|
31
|
-
|
|
32
|
-
console.error(content," is not valid element of header ",columnDef," it could not be render on table");
|
|
33
|
-
return null;
|
|
34
|
-
}
|
|
30
|
+
totalWidths+=width;
|
|
35
31
|
const rArgs = {columnDef,width};
|
|
36
|
-
headers[columnField] = <
|
|
37
|
-
<Label splitText numberOfLines={1} style={[theme.styles.w100,theme.styles.h100,{maxHeight:70},width&&{width}]} textBold primary>{content}</Label>
|
|
38
|
-
</HeaderCell>;
|
|
32
|
+
headers[columnField] = <MainHeaderCell colArgs={colArgs} {...rArgs} columnField={columnField} width={width} testID={testID+"_HeaderCell_"+columnField} {...headerCellContainerProps} {...hContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,headerCellContainerProps.style,hContainerProps.style,style]}/>
|
|
39
33
|
if(typeof renderFilterCell =='function'){
|
|
40
34
|
const filterCell = renderFilterCell(colArgs);
|
|
41
|
-
filters[columnField] = <HeaderCell {...rArgs} testID={testID+"_Filter_Cell_"+columnField} {...filterCellContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,styles.filterCell,filterCellContainerProps.style,styles.cell,style]}>
|
|
35
|
+
filters[columnField] = <HeaderCell {...rArgs} width={width} testID={testID+"_Filter_Cell_"+columnField} {...filterCellContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,styles.filterCell,filterCellContainerProps.style,styles.cell,style]}>
|
|
42
36
|
{React.isValidElement(filterCell)? filterCell : null}
|
|
43
37
|
</HeaderCell>
|
|
44
38
|
}
|
|
@@ -56,7 +50,7 @@ export const usePrepareColumns = ({columns,sortedColumn,forceRender,testID,rende
|
|
|
56
50
|
if(!hasFooters && cellFooter){
|
|
57
51
|
hasFooters = true;
|
|
58
52
|
}
|
|
59
|
-
footers[columnField] = <HeaderCell {...rArgs} testID={testID+"_Footer_Cell_"+columnField} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,footerCellContainerProps.style,style]}>
|
|
53
|
+
footers[columnField] = <HeaderCell {...rArgs} width={width} testID={testID+"_Footer_Cell_"+columnField} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,footerCellContainerProps.style,style]}>
|
|
60
54
|
<Label primary children={cellFooter}/>
|
|
61
55
|
</HeaderCell>
|
|
62
56
|
}
|
|
@@ -75,10 +69,11 @@ export const usePrepareColumns = ({columns,sortedColumn,forceRender,testID,rende
|
|
|
75
69
|
};
|
|
76
70
|
columnIndex++;
|
|
77
71
|
});
|
|
78
|
-
return {columns:cols,columnsNames,headers,columnsVisibilities,visibleColsNames,hasFooters,footers,filters};
|
|
79
|
-
},[columns,
|
|
72
|
+
return {columns:cols,columnsNames,headers,colsWidths,columnsVisibilities,totalWidths,totalColsWidths:totalWidths,visibleColsNamesStr:JSON.stringify(visibleColsNames),visibleColsNames,hasFooters,footers,filters};
|
|
73
|
+
},[columns,footers,forceRender]);
|
|
80
74
|
}
|
|
81
75
|
|
|
82
|
-
export const TableContext = createContext(null);
|
|
83
76
|
|
|
84
|
-
export
|
|
77
|
+
export {default as useTable} from "./useTable";
|
|
78
|
+
|
|
79
|
+
export * from "./useTable";
|
|
@@ -51,7 +51,7 @@ const getOnScrollCb = (refs,pos,cb2)=>{
|
|
|
51
51
|
return isMobileNative()? cb : debounce(cb,200);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRender,height,progressBar,renderListContent,children,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,
|
|
54
|
+
const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRender,height,progressBar,renderListContent,children,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,columns,...props},tableRef)=>{
|
|
55
55
|
containerProps = defaultObj(containerProps);
|
|
56
56
|
cellContainerProps = defaultObj(cellContainerProps);
|
|
57
57
|
scrollViewProps = defaultObj(scrollViewProps);
|
|
@@ -59,42 +59,23 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
|
|
|
59
59
|
footerScrollViewProps = defaultObj(footerScrollViewProps);
|
|
60
60
|
const listRef = React.useRef(null),scrollViewRef = React.useRef(null),headerScrollViewRef = React.useRef(null);
|
|
61
61
|
const layoutRef = React.useRef({});
|
|
62
|
-
const {
|
|
63
|
-
headerContainerProps = defaultObj(headerContainerProps);
|
|
64
|
-
footerContainerProps = defaultObj(footerContainerProps);
|
|
62
|
+
const {testID,withDatagridContext,filters,getRowByIndex,itemsChanged,hasFooters:stateHasFooters,bordered,totalWidths,keyExtractor,items,data} = useTable();
|
|
65
63
|
const hasData = !!Object.size(data,true);
|
|
66
64
|
const emptyData = !hasData && renderListContent === false ?null : typeof renderEmpty =='function' ? renderEmpty() : null;
|
|
67
65
|
const hasEmptyData = emptyData && React.isValidElement(emptyData);
|
|
68
66
|
const emptyContent = <View onRender={onComponentRender} testID={testID+"_EmptyData"} style={styles.hasNotData}>
|
|
69
67
|
{emptyData}
|
|
70
68
|
</View>
|
|
71
|
-
const {fFilters,headersContent,footersContent,totalWidths} = React.useMemo(()=>{
|
|
72
|
-
const headersContent = [],footersContent = [],fFilters = [];
|
|
73
|
-
let totalWidths = 0;
|
|
74
|
-
visibleColsNames.map((i,index)=>{
|
|
75
|
-
headersContent.push(headers[i]);
|
|
76
|
-
totalWidths+=cols[i].width;
|
|
77
|
-
if(showFooters && stateHasFooters){
|
|
78
|
-
footersContent.push(footers[i]);
|
|
79
|
-
}
|
|
80
|
-
if(showFilters && filters[i]){
|
|
81
|
-
fFilters.push(filters[i]);
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
return {headersContent,totalWidths,footersContent,fFilters};
|
|
86
|
-
},[visibleColsNames,showFilters,showFooters,layoutRef.current]);
|
|
87
|
-
|
|
88
|
-
|
|
89
69
|
const scrollContentContainerStyle = {flex:1,width:listWidth,minWidth:totalWidths,height:'100%'};
|
|
90
70
|
const scrollEventThrottle = isMobileNative()?200:50;
|
|
91
71
|
const scrollViewFlexGrow = {flexGrow:0};
|
|
92
|
-
const maxScrollheight = footersContent.length && fFilters.length ? 170 : footersContent.length ?120 : fFilters.length ? 140 : 80;
|
|
72
|
+
const maxScrollheight = 170;//footersContent.length && fFilters.length ? 170 : footersContent.length ?120 : fFilters.length ? 140 : 80;
|
|
93
73
|
const allScrollViewProps = {
|
|
94
74
|
scrollEventThrottle,
|
|
95
75
|
horizontal : true,
|
|
96
76
|
...scrollViewProps,
|
|
97
|
-
style : [{maxHeight:maxScrollheight},
|
|
77
|
+
style : [{maxHeight:maxScrollheight},
|
|
78
|
+
scrollViewProps.style],
|
|
98
79
|
contentContainerStyle : [styles.scrollView,scrollViewProps.contentContainerStyle,scrollViewFlexGrow,scrollContentContainerStyle]
|
|
99
80
|
}
|
|
100
81
|
const listWidth = '100%';
|
|
@@ -128,7 +109,6 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
|
|
|
128
109
|
get scrollViewContext(){ return scrollViewRef.current},
|
|
129
110
|
get headerScrollViewContext(){return headerScrollViewRef.current},
|
|
130
111
|
}
|
|
131
|
-
const showTableHeaders = showHeaders !== false || showFilters ;
|
|
132
112
|
const absoluteScrollViewRefCanScroll = React.useRef(true);
|
|
133
113
|
React.setRef(tableRef,context);
|
|
134
114
|
const cStyle = {width:listWidth}
|
|
@@ -162,15 +142,9 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
|
|
|
162
142
|
}
|
|
163
143
|
};
|
|
164
144
|
const headerFootersFilters = <>
|
|
165
|
-
<Header
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
<Header visible = {!!fFilters.length} {...headerContainerProps} testID={testID+"_Filters"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0,headerContainerProps.style]}>
|
|
169
|
-
{fFilters}
|
|
170
|
-
</Header>
|
|
171
|
-
<Header visible={!!(showTableHeaders && footersContent.length)} testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,headerContainerProps.style,footerContainerProps.style,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
|
|
172
|
-
{footersContent}
|
|
173
|
-
</Header>
|
|
145
|
+
<Header isHeader={true} testID={testID+"_Header"}/>
|
|
146
|
+
<Header isFilter={true} testID={testID+"_Filters"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}/>
|
|
147
|
+
<Header isFooter testID={testID+"_Footer"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}/>
|
|
174
148
|
</>
|
|
175
149
|
return <View testID= {testID+"_Container"} {...containerProps} onLayout={(e)=>{
|
|
176
150
|
layoutRef.current = e.nativeEvent.layout;
|
|
@@ -278,7 +252,7 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
|
|
|
278
252
|
const index = props['data-index'];
|
|
279
253
|
const item = getRowByIndex(index) || props?.item || null;
|
|
280
254
|
if(!item) return null;
|
|
281
|
-
const args = {rowData:item,rowIndex:index,bordered
|
|
255
|
+
const args = {rowData:item,rowIndex:index,bordered,isTable:true};
|
|
282
256
|
args.isSelected = withDatagridContext ? isRowSelected(args) : false;
|
|
283
257
|
return <TableRowComponent {...props} style={[getRowStyle(args),props.style]}/>
|
|
284
258
|
},
|
|
@@ -32,6 +32,13 @@ const styles = StyleSheet.create({
|
|
|
32
32
|
paddingVertical : 7,
|
|
33
33
|
alignItems : 'center',
|
|
34
34
|
width : '100%',
|
|
35
|
+
minHeight : 40,
|
|
36
|
+
},
|
|
37
|
+
filters : {
|
|
38
|
+
height : 50,
|
|
39
|
+
},
|
|
40
|
+
footers : {
|
|
41
|
+
minHeight : 40,
|
|
35
42
|
},
|
|
36
43
|
footerContainer : {
|
|
37
44
|
width : '100%',
|
|
@@ -71,7 +78,7 @@ const styles = StyleSheet.create({
|
|
|
71
78
|
row : {
|
|
72
79
|
flexDirection : "row",
|
|
73
80
|
justifyContent : "flex-start",
|
|
74
|
-
alignItems : '
|
|
81
|
+
alignItems : 'center',
|
|
75
82
|
width : '100%',
|
|
76
83
|
},
|
|
77
84
|
rowNoPadding : {
|
|
@@ -88,8 +95,8 @@ const styles = StyleSheet.create({
|
|
|
88
95
|
cell : isMobileNative()? {
|
|
89
96
|
paddingLeft:10,
|
|
90
97
|
paddingRight : 5,
|
|
91
|
-
paddingBottom :
|
|
92
|
-
paddingTop :
|
|
98
|
+
paddingBottom : 2,
|
|
99
|
+
paddingTop : 2,
|
|
93
100
|
} : {
|
|
94
101
|
paddingLeft: 10,
|
|
95
102
|
paddingTop:5,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports = {"@
|
|
1
|
+
module.exports = {"@FTO-CONSULT/EXPO-UI":{"name":"@FTO-CONSULT/EXPO-UI","version":"6.25.2","homepage":"https://github.com/borispipo/expo-ui#readme"}};
|