etendo-ui-library 1.2.62 → 1.2.64
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/dist-native/assets/images/components/EmptyTableState.js +1 -1
- package/dist-native/components/table/Table.d.ts +1 -1
- package/dist-native/components/table/Table.js +1 -1
- package/dist-native/components/table/Table.styles.d.ts +2 -0
- package/dist-native/components/table/Table.styles.js +1 -1
- package/dist-native/components/table/Table.types.d.ts +5 -5
- package/dist-web/assets/images/components/EmptyTableState.js +76 -18
- package/dist-web/components/table/Table.d.ts +1 -1
- package/dist-web/components/table/Table.js +41 -19
- package/dist-web/components/table/Table.styles.d.ts +2 -0
- package/dist-web/components/table/Table.styles.js +5 -3
- package/dist-web/components/table/Table.types.d.ts +5 -5
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNativeSvg=_interopRequireWildcard(require("react-native-svg"));var _table_utils=require("../../../helpers/table_utils");var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/assets/images/components/EmptyTableState.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var EmptyTableState=function EmptyTableState(){var originalWidth=268.5;var originalHeight=92.8;var aspectRatio=originalWidth/originalHeight;return _react.default.createElement(_reactNativeSvg.default,{viewBox:"0 0 268.5 92.8",style:{width:_table_utils.isDeviceTablet?'100%':'100%',aspectRatio:aspectRatio,height:_table_utils.isDeviceTablet?'35%':'25%'},__self:_this,__source:{fileName:_jsxFileName,lineNumber:10,columnNumber:5}},_react.default.createElement(_reactNativeSvg.Path,{d:"M8.5,0.5h229.4c4.4,0,8,3.6,8,8v32.6c0,4.4-3.6,8-8,8H8.5c-4.4,0-8-3.6-8-8V8.5C0.5,4.1,4.1,0.5,8.5,0.5z",fill:"#F9F9F9",stroke:"#D3D3D3",strokeMiterlimit:"10",__self:_this,__source:{fileName:_jsxFileName,lineNumber:18,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M16.1,19.5h91.2c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3H16.1c-2.9,0-5.3-2.4-5.3-5.3l0,0 C10.8,21.9,13.2,19.5,16.1,19.5z",fill:"#C9D5E2",__self:_this,__source:{fileName:_jsxFileName,lineNumber:26,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M137,19.5h33.7c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3H137c-2.9,0-5.3-2.4-5.3-5.3l0,0 C131.7,21.9,134.1,19.5,137,19.5z",fillOpacity:"0.5",fill:"#C9D5E2",__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M196.8,19.5h33.7c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3h-33.7c-2.9,0-5.3-2.4-5.3-5.3l0,0 C191.6,21.9,193.9,19.5,196.8,19.5z",fillOpacity:"0.5",fill:"#C9D5E2",__self:_this,__source:{fileName:_jsxFileName,lineNumber:35,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Line,{x1:"123.1",y1:"0.5",x2:"123.1",y2:"49.1",stroke:"#D3D3D3",strokeMiterlimit:"10",__self:_this,__source:{fileName:_jsxFileName,lineNumber:42,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Line,{x1:"185.5",y1:"0.5",x2:"185.5",y2:"49.1",stroke:"#D3D3D3",strokeMiterlimit:"10",__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M28.6,44.2H250c6.6,0,12,5.4,12,12v24.6c0,6.6-5.4,12-12,12H28.6c-6.6,0-12-5.4-12-12V56.2 C16.6,49.6,22,44.2,28.6,44.2z",fillOpacity:"0.4",fill:"#E8E9EA",__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M30.6,38.2H260c4.4,0,8,3.6,8,8v32.6c0,4.4-3.6,8-8,8H30.6c-4.4,0-8-3.6-8-8V46.2 C22.6,41.8,26.2,38.2,30.6,38.2z",fill:"#F9F9F9",stroke:"#D3D3D3",strokeMiterlimit:"10",__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M38.2,57.2h91.2c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3H38.2c-2.9,0-5.3-2.4-5.3-5.3l0,0 C32.9,59.6,35.3,57.2,38.2,57.2z",fill:"#C9D5E2",__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M159.1,57.2h33.7c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3h-33.7c-2.9,0-5.3-2.4-5.3-5.3l0,0 C153.8,59.6,156.2,57.2,159.1,57.2z",fillOpacity:"0.5",fill:"#C9D5E2",__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Path,{d:"M218.9,57.2h33.7c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3h-33.7c-2.9,0-5.3-2.4-5.3-5.3l0,0 C213.7,59.6,216,57.2,218.9,57.2z",fillOpacity:"0.5",fill:"#C9D5E2",__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Line,{x1:"145.2",y1:"38.2",x2:"145.2",y2:"86.8",stroke:"#D3D3D3",strokeMiterlimit:"10",__self:_this,__source:{fileName:_jsxFileName,lineNumber:91,columnNumber:7}}),_react.default.createElement(_reactNativeSvg.Line,{x1:"207.6",y1:"38.2",x2:"207.6",y2:"86.8",stroke:"#D3D3D3",strokeMiterlimit:"10",__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:7}}));};var _default=exports.default=EmptyTableState;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TableProps } from './Table.types';
|
|
3
|
-
declare const Table: ({ data, columns, title, onRowPress, tableHeight, isLoading,
|
|
3
|
+
declare const Table: ({ data, columns, title, onRowPress, tableHeight, isLoading, textEmptyTable, commentEmptyTable, loadMoreData, isLoadMoreData, }: TableProps) => React.JSX.Element;
|
|
4
4
|
export default Table;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _Table=require("./Table.styles");var _TableHeaders=_interopRequireDefault(require("./components/TableHeaders"));var _TableCell=_interopRequireDefault(require("./components/TableCell"));var _table_utils=require("../../helpers/table_utils");var _secondaryComponents=require("../secondaryComponents");var _colors=require("../../styles/colors");var _EmptyTableState=_interopRequireDefault(require("../../assets/images/components/EmptyTableState"));var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/components/table/Table.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var Table=function Table(_ref){var data=_ref.data,columns=_ref.columns,title=_ref.title,onRowPress=_ref.onRowPress,tableHeight=_ref.tableHeight,isLoading=_ref.isLoading,textEmptyTable=_ref.textEmptyTable,commentEmptyTable=_ref.commentEmptyTable,loadMoreData=_ref.loadMoreData,_ref$isLoadMoreData=_ref.isLoadMoreData,isLoadMoreData=_ref$isLoadMoreData===void 0?true:_ref$isLoadMoreData;var _useState=(0,_react.useState)(0),_useState2=(0,_slicedToArray2.default)(_useState,2),currentPage=_useState2[0],setCurrentPage=_useState2[1];var handleLoadMore=function handleLoadMore(){if(isLoadMoreData&&!isLoading&&loadMoreData){console.log('handleLoadMore called');loadMoreData(currentPage+1,function(){setCurrentPage(currentPage+1);});}};var findPrimaryId=function findPrimaryId(col,indexRow){var primary='';if(indexRow>=0){for(var element of col){if(element.primary===true){if(element.key){primary=data[indexRow][element.key];break;}}}}return primary;};var RenderItem=function RenderItem(item,index){return _react.default.createElement(_reactNative.Pressable,{onPress:function onPress(){if(onRowPress){onRowPress(findPrimaryId(columns,index));}},style:[_Table.styles.row,(0,_table_utils.paintOddRows)(index)],__self:_this,__source:{fileName:_jsxFileName,lineNumber:58,columnNumber:7}},columns.map(function(col,colIndex){var _col$components;return col.visible&&_react.default.createElement(_reactNative.View,{style:[_Table.styles.cell,col.cellStyle,{width:col.width}],key:'movementTable'+colIndex,__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:15}},col.components?(_col$components=col.components)==null?void 0:_col$components.map(function(itemAction,actionIndex){return _react.default.createElement(_reactNative.TouchableOpacity,{style:_Table.styles.cellEditContainer,onPress:function onPress(){return itemAction.onAction(findPrimaryId(columns,index));},key:'tableCellCustom'+actionIndex,__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:25}},itemAction.component);}):_react.default.createElement(_TableCell.default,{label:col.key?item[col.key]:'',key:'tableCell'+index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:87,columnNumber:19}}));}));};var RenderSkeleton=function RenderSkeleton(item,index){return _react.default.createElement(_reactNative.View,{style:[_Table.styles.row,(0,_table_utils.paintOddRows)(index)],__self:_this,__source:{fileName:_jsxFileName,lineNumber:102,columnNumber:7}},columns.map(function(col,colIndex){return col.visible&&_react.default.createElement(_secondaryComponents.SkeletonRowTable,{key:colIndex,width:col.width,color:_colors.NEUTRAL_300,indexRow:index,indexColumn:colIndex,__self:_this,__source:{fileName:_jsxFileName,lineNumber:106,columnNumber:15}});}));};var EmptyState=function EmptyState(){return _react.default.createElement(_reactNative.View,{style:_Table.styles.emptyStateConteiner,__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:7}},_react.default.createElement(_EmptyTableState.default,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:9}}),_react.default.createElement(_reactNative.View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:124,columnNumber:9}},_react.default.createElement(_reactNative.Text,{style:_Table.styles.emptyTextTitle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:11}},textEmptyTable),_react.default.createElement(_reactNative.Text,{style:_Table.styles.emptyTextSubtitle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:126,columnNumber:11}},commentEmptyTable)));};return _react.default.createElement(_reactNative.View,{style:[_Table.styles.container,(0,_table_utils.removeHeaderBorder)(title),{height:tableHeight}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:133,columnNumber:5}},_react.default.createElement(_TableHeaders.default,{title:title,columns:columns,isLoading:!(isLoading&&!data.length),__self:_this,__source:{fileName:_jsxFileName,lineNumber:139,columnNumber:7}}),_react.default.createElement(_reactNative.FlatList,{data:isLoading&&!data.length?Array(5).fill({}):data,renderItem:function renderItem(item){return isLoading&&!data.length&&loadMoreData?RenderSkeleton(item.item,item.index):RenderItem(item.item,item.index);},ListEmptyComponent:_react.default.createElement(EmptyState,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:152,columnNumber:29}}),keyExtractor:function keyExtractor(_item,index){return'Table: '+index;},ListFooterComponent:function ListFooterComponent(){return loadMoreData&&isLoadMoreData&&isLoading&&Boolean(data.length)&&RenderSkeleton(null,data.length);},onEndReached:function onEndReached(){return handleLoadMore();},onEndReachedThreshold:0.2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:145,columnNumber:7}}));};var _default=exports.default=Table;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({container:{width:'100%',borderWidth:1,borderColor:_colors.NEUTRAL_10,borderTopLeftRadius:10,borderTopRightRadius:10,borderRightWidth:0},titleContainer:{backgroundColor:_colors.TERTIARY_30,borderColor:_colors.NEUTRAL_10,borderTopLeftRadius:10,borderTopRightRadius:10},titleText:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',paddingVertical:10,fontWeight:'600'},headerContainer:{backgroundColor:_colors.TERTIARY_30,flexDirection:'row'},headerCell:{borderTopWidth:1,borderRightWidth:1,borderColor:_colors.NEUTRAL_10,alignItems:'center',justifyContent:'center',paddingHorizontal:5,paddingVertical:10},cell:{justifyContent:'center',paddingHorizontal:5,borderRightWidth:1,borderTopWidth:1,borderColor:_colors.NEUTRAL_10},cellText:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',verticalAlign:'middle',paddingVertical:22.5},cellTextEdit:{fontSize:14,fontWeight:'400',color:_colors.PRIMARY_100,textAlign:'center',verticalAlign:'middle'},cellTextTitle:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',paddingVertical:10,fontWeight:'600'},scrollCell:{flexGrow:1,alignItems:'center',justifyContent:'center'},centerItem:{alignItems:'center',justifyContent:'center',flexDirection:'row',height:'100%',paddingVertical:5},row:{flexDirection:'row'},placeholderContainer:{borderWidth:1,borderTopWidth:0,borderColor:_colors.NEUTRAL_40,alignItems:'center',justifyContent:'center'},imgEdit:{height:13,width:13,marginRight:5},cellEditContainer:{height:'100%'},emptyStateConteiner:{display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'#FAFAFA',height:400,width:'100%'},emptyTextTitle:{color:_colors.
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({container:{width:'100%',borderWidth:1,borderColor:_colors.NEUTRAL_10,borderTopLeftRadius:10,borderTopRightRadius:10,borderRightWidth:0},titleContainer:{backgroundColor:_colors.TERTIARY_30,borderColor:_colors.NEUTRAL_10,borderTopLeftRadius:10,borderTopRightRadius:10},titleText:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',paddingVertical:10,fontWeight:'600'},headerContainer:{backgroundColor:_colors.TERTIARY_30,flexDirection:'row'},headerCell:{borderTopWidth:1,borderRightWidth:1,borderColor:_colors.NEUTRAL_10,alignItems:'center',justifyContent:'center',paddingHorizontal:5,paddingVertical:10},cell:{justifyContent:'center',paddingHorizontal:5,borderRightWidth:1,borderTopWidth:1,borderColor:_colors.NEUTRAL_10},cellText:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',verticalAlign:'middle',paddingVertical:22.5},cellTextEdit:{fontSize:14,fontWeight:'400',color:_colors.PRIMARY_100,textAlign:'center',verticalAlign:'middle'},cellTextTitle:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',paddingVertical:10,fontWeight:'600'},scrollCell:{flexGrow:1,alignItems:'center',justifyContent:'center'},centerItem:{alignItems:'center',justifyContent:'center',flexDirection:'row',height:'100%',paddingVertical:5},row:{flexDirection:'row'},placeholderContainer:{borderWidth:1,borderTopWidth:0,borderColor:_colors.NEUTRAL_40,alignItems:'center',justifyContent:'center'},imgEdit:{height:13,width:13,marginRight:5},cellEditContainer:{height:'100%'},emptyStateConteiner:{display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'#FAFAFA',height:400,width:'100%'},emptyTextTitle:{color:_colors.PRIMARY_100,textAlign:'center',fontSize:20,fontWeight:'500',lineHeight:28,marginTop:25,maxWidth:'80%'},emptyTextSubtitle:{color:_colors.NEUTRAL_700,textAlign:'center',fontSize:14,fontWeight:'600',lineHeight:28}});
|
|
@@ -4,13 +4,13 @@ export interface TableProps {
|
|
|
4
4
|
data: Array<any>;
|
|
5
5
|
columns: Columns[];
|
|
6
6
|
title?: string;
|
|
7
|
-
tableHeight?: DimensionValue
|
|
8
|
-
onRowPress
|
|
7
|
+
tableHeight?: DimensionValue;
|
|
8
|
+
onRowPress?: (primary: string) => void;
|
|
9
9
|
isLoading?: boolean;
|
|
10
10
|
textEmptyTable?: string;
|
|
11
11
|
commentEmptyTable?: string;
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
loadMoreData?: (page: number, updateNewPageInTable: () => void) => void;
|
|
13
|
+
isLoadMoreData?: boolean;
|
|
14
14
|
}
|
|
15
15
|
export interface TableCellProps {
|
|
16
16
|
label?: string;
|
|
@@ -25,7 +25,7 @@ export type Columns = {
|
|
|
25
25
|
visible?: boolean;
|
|
26
26
|
label?: string;
|
|
27
27
|
key?: string;
|
|
28
|
-
width?: DimensionValue
|
|
28
|
+
width?: DimensionValue;
|
|
29
29
|
components?: Actions[];
|
|
30
30
|
cellStyle?: ViewStyle;
|
|
31
31
|
};
|
|
@@ -1,23 +1,81 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import Svg, { Defs, Pattern, Image as SvgImage } from "react-native-svg-web";
|
|
2
|
+
import Svg, { Line, Path } from "react-native-svg-web";
|
|
4
3
|
import { isDeviceTablet } from "../../../helpers/table_utils";
|
|
5
4
|
var EmptyTableState = function EmptyTableState() {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
})
|
|
5
|
+
var originalWidth = 268.5;
|
|
6
|
+
var originalHeight = 92.8;
|
|
7
|
+
var aspectRatio = originalWidth / originalHeight;
|
|
8
|
+
return /*#__PURE__*/React.createElement(Svg, {
|
|
9
|
+
viewBox: "0 0 268.5 92.8",
|
|
10
|
+
style: {
|
|
11
|
+
width: isDeviceTablet ? '100%' : '100%',
|
|
12
|
+
aspectRatio: aspectRatio,
|
|
13
|
+
height: isDeviceTablet ? '35%' : '25%'
|
|
14
|
+
}
|
|
15
|
+
}, /*#__PURE__*/React.createElement(Path, {
|
|
16
|
+
d: "M8.5,0.5h229.4c4.4,0,8,3.6,8,8v32.6c0,4.4-3.6,8-8,8H8.5c-4.4,0-8-3.6-8-8V8.5C0.5,4.1,4.1,0.5,8.5,0.5z",
|
|
17
|
+
fill: "#F9F9F9",
|
|
18
|
+
stroke: "#D3D3D3",
|
|
19
|
+
strokeMiterlimit: "10"
|
|
20
|
+
}), /*#__PURE__*/React.createElement(Path, {
|
|
21
|
+
d: "M16.1,19.5h91.2c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3H16.1c-2.9,0-5.3-2.4-5.3-5.3l0,0 C10.8,21.9,13.2,19.5,16.1,19.5z",
|
|
22
|
+
fill: "#C9D5E2"
|
|
23
|
+
}), /*#__PURE__*/React.createElement(Path, {
|
|
24
|
+
d: "M137,19.5h33.7c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3H137c-2.9,0-5.3-2.4-5.3-5.3l0,0 C131.7,21.9,134.1,19.5,137,19.5z",
|
|
25
|
+
fillOpacity: "0.5",
|
|
26
|
+
fill: "#C9D5E2"
|
|
27
|
+
}), /*#__PURE__*/React.createElement(Path, {
|
|
28
|
+
d: "M196.8,19.5h33.7c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3h-33.7c-2.9,0-5.3-2.4-5.3-5.3l0,0 C191.6,21.9,193.9,19.5,196.8,19.5z",
|
|
29
|
+
fillOpacity: "0.5",
|
|
30
|
+
fill: "#C9D5E2"
|
|
31
|
+
}), /*#__PURE__*/React.createElement(Line, {
|
|
32
|
+
x1: "123.1",
|
|
33
|
+
y1: "0.5",
|
|
34
|
+
x2: "123.1",
|
|
35
|
+
y2: "49.1",
|
|
36
|
+
stroke: "#D3D3D3",
|
|
37
|
+
strokeMiterlimit: "10"
|
|
38
|
+
}), /*#__PURE__*/React.createElement(Line, {
|
|
39
|
+
x1: "185.5",
|
|
40
|
+
y1: "0.5",
|
|
41
|
+
x2: "185.5",
|
|
42
|
+
y2: "49.1",
|
|
43
|
+
stroke: "#D3D3D3",
|
|
44
|
+
strokeMiterlimit: "10"
|
|
45
|
+
}), /*#__PURE__*/React.createElement(Path, {
|
|
46
|
+
d: "M28.6,44.2H250c6.6,0,12,5.4,12,12v24.6c0,6.6-5.4,12-12,12H28.6c-6.6,0-12-5.4-12-12V56.2 C16.6,49.6,22,44.2,28.6,44.2z",
|
|
47
|
+
fillOpacity: "0.4",
|
|
48
|
+
fill: "#E8E9EA"
|
|
49
|
+
}), /*#__PURE__*/React.createElement(Path, {
|
|
50
|
+
d: "M30.6,38.2H260c4.4,0,8,3.6,8,8v32.6c0,4.4-3.6,8-8,8H30.6c-4.4,0-8-3.6-8-8V46.2 C22.6,41.8,26.2,38.2,30.6,38.2z",
|
|
51
|
+
fill: "#F9F9F9",
|
|
52
|
+
stroke: "#D3D3D3",
|
|
53
|
+
strokeMiterlimit: "10"
|
|
54
|
+
}), /*#__PURE__*/React.createElement(Path, {
|
|
55
|
+
d: "M38.2,57.2h91.2c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3H38.2c-2.9,0-5.3-2.4-5.3-5.3l0,0 C32.9,59.6,35.3,57.2,38.2,57.2z",
|
|
56
|
+
fill: "#C9D5E2"
|
|
57
|
+
}), /*#__PURE__*/React.createElement(Path, {
|
|
58
|
+
d: "M159.1,57.2h33.7c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3h-33.7c-2.9,0-5.3-2.4-5.3-5.3l0,0 C153.8,59.6,156.2,57.2,159.1,57.2z",
|
|
59
|
+
fillOpacity: "0.5",
|
|
60
|
+
fill: "#C9D5E2"
|
|
61
|
+
}), /*#__PURE__*/React.createElement(Path, {
|
|
62
|
+
d: "M218.9,57.2h33.7c2.9,0,5.3,2.4,5.3,5.3l0,0c0,2.9-2.4,5.3-5.3,5.3h-33.7c-2.9,0-5.3-2.4-5.3-5.3l0,0 C213.7,59.6,216,57.2,218.9,57.2z",
|
|
63
|
+
fillOpacity: "0.5",
|
|
64
|
+
fill: "#C9D5E2"
|
|
65
|
+
}), /*#__PURE__*/React.createElement(Line, {
|
|
66
|
+
x1: "145.2",
|
|
67
|
+
y1: "38.2",
|
|
68
|
+
x2: "145.2",
|
|
69
|
+
y2: "86.8",
|
|
70
|
+
stroke: "#D3D3D3",
|
|
71
|
+
strokeMiterlimit: "10"
|
|
72
|
+
}), /*#__PURE__*/React.createElement(Line, {
|
|
73
|
+
x1: "207.6",
|
|
74
|
+
y1: "38.2",
|
|
75
|
+
x2: "207.6",
|
|
76
|
+
y2: "86.8",
|
|
77
|
+
stroke: "#D3D3D3",
|
|
78
|
+
strokeMiterlimit: "10"
|
|
79
|
+
}));
|
|
22
80
|
};
|
|
23
81
|
export default EmptyTableState;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TableProps } from './Table.types';
|
|
3
|
-
declare const Table: ({ data, columns, title, onRowPress, tableHeight, isLoading,
|
|
3
|
+
declare const Table: ({ data, columns, title, onRowPress, tableHeight, isLoading, textEmptyTable, commentEmptyTable, loadMoreData, isLoadMoreData, }: TableProps) => React.JSX.Element;
|
|
4
4
|
export default Table;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
|
|
2
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
3
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
2
4
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
3
5
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
4
|
-
|
|
6
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
7
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
|
+
import React, { useState } from 'react';
|
|
5
9
|
import { FlatList, Pressable, Text, TouchableOpacity, View } from "react-native-web";
|
|
6
10
|
import { styles } from "./Table.styles";
|
|
7
11
|
import TableHeaders from "./components/TableHeaders";
|
|
@@ -17,9 +21,23 @@ var Table = function Table(_ref) {
|
|
|
17
21
|
onRowPress = _ref.onRowPress,
|
|
18
22
|
tableHeight = _ref.tableHeight,
|
|
19
23
|
isLoading = _ref.isLoading,
|
|
20
|
-
pageSize = _ref.pageSize,
|
|
21
24
|
textEmptyTable = _ref.textEmptyTable,
|
|
22
|
-
commentEmptyTable = _ref.commentEmptyTable
|
|
25
|
+
commentEmptyTable = _ref.commentEmptyTable,
|
|
26
|
+
loadMoreData = _ref.loadMoreData,
|
|
27
|
+
_ref$isLoadMoreData = _ref.isLoadMoreData,
|
|
28
|
+
isLoadMoreData = _ref$isLoadMoreData === void 0 ? true : _ref$isLoadMoreData;
|
|
29
|
+
var _useState = useState(0),
|
|
30
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
31
|
+
currentPage = _useState2[0],
|
|
32
|
+
setCurrentPage = _useState2[1];
|
|
33
|
+
var handleLoadMore = function handleLoadMore() {
|
|
34
|
+
if (isLoadMoreData && !isLoading && loadMoreData) {
|
|
35
|
+
console.log('handleLoadMore called');
|
|
36
|
+
loadMoreData(currentPage + 1, function () {
|
|
37
|
+
setCurrentPage(currentPage + 1);
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
};
|
|
23
41
|
var findPrimaryId = function findPrimaryId(col, indexRow) {
|
|
24
42
|
var primary = '';
|
|
25
43
|
if (indexRow >= 0) {
|
|
@@ -46,7 +64,9 @@ var Table = function Table(_ref) {
|
|
|
46
64
|
var RenderItem = function RenderItem(item, index) {
|
|
47
65
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
48
66
|
onPress: function onPress() {
|
|
49
|
-
onRowPress
|
|
67
|
+
if (onRowPress) {
|
|
68
|
+
onRowPress(findPrimaryId(columns, index));
|
|
69
|
+
}
|
|
50
70
|
},
|
|
51
71
|
style: [styles.row, paintOddRows(index)]
|
|
52
72
|
}, columns.map(function (col, colIndex) {
|
|
@@ -71,10 +91,7 @@ var Table = function Table(_ref) {
|
|
|
71
91
|
}));
|
|
72
92
|
};
|
|
73
93
|
var RenderSkeleton = function RenderSkeleton(item, index) {
|
|
74
|
-
return /*#__PURE__*/React.createElement(
|
|
75
|
-
onPress: function onPress() {
|
|
76
|
-
onRowPress(findPrimaryId(columns, index));
|
|
77
|
-
},
|
|
94
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
78
95
|
style: [styles.row, paintOddRows(index)]
|
|
79
96
|
}, columns.map(function (col, colIndex) {
|
|
80
97
|
return col.visible && /*#__PURE__*/React.createElement(SkeletonRowTable, {
|
|
@@ -89,31 +106,36 @@ var Table = function Table(_ref) {
|
|
|
89
106
|
var EmptyState = function EmptyState() {
|
|
90
107
|
return /*#__PURE__*/React.createElement(View, {
|
|
91
108
|
style: styles.emptyStateConteiner
|
|
92
|
-
}, /*#__PURE__*/React.createElement(EmptyTableState, null), /*#__PURE__*/React.createElement(Text, {
|
|
109
|
+
}, /*#__PURE__*/React.createElement(EmptyTableState, null), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
|
|
93
110
|
style: styles.emptyTextTitle
|
|
94
111
|
}, textEmptyTable), /*#__PURE__*/React.createElement(Text, {
|
|
95
112
|
style: styles.emptyTextSubtitle
|
|
96
|
-
}, commentEmptyTable));
|
|
113
|
+
}, commentEmptyTable)));
|
|
97
114
|
};
|
|
98
|
-
return /*#__PURE__*/React.createElement(
|
|
115
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
99
116
|
style: [styles.container, removeHeaderBorder(title), {
|
|
100
117
|
height: tableHeight
|
|
101
118
|
}]
|
|
102
119
|
}, /*#__PURE__*/React.createElement(TableHeaders, {
|
|
103
120
|
title: title,
|
|
104
121
|
columns: columns,
|
|
105
|
-
isLoading: !isLoading
|
|
122
|
+
isLoading: !(isLoading && !data.length)
|
|
106
123
|
}), /*#__PURE__*/React.createElement(FlatList, {
|
|
107
|
-
data:
|
|
108
|
-
showsVerticalScrollIndicator: false,
|
|
109
|
-
showsHorizontalScrollIndicator: false,
|
|
124
|
+
data: isLoading && !data.length ? Array(5).fill({}) : data,
|
|
110
125
|
renderItem: function renderItem(item) {
|
|
111
|
-
return isLoading ? RenderSkeleton(item.item, item.index) : RenderItem(item.item, item.index);
|
|
126
|
+
return isLoading && !data.length && loadMoreData ? RenderSkeleton(item.item, item.index) : RenderItem(item.item, item.index);
|
|
112
127
|
},
|
|
113
|
-
ListEmptyComponent: EmptyState,
|
|
128
|
+
ListEmptyComponent: /*#__PURE__*/React.createElement(EmptyState, null),
|
|
114
129
|
keyExtractor: function keyExtractor(_item, index) {
|
|
115
130
|
return 'Table: ' + index;
|
|
116
|
-
}
|
|
117
|
-
|
|
131
|
+
},
|
|
132
|
+
ListFooterComponent: function ListFooterComponent() {
|
|
133
|
+
return loadMoreData && isLoadMoreData && isLoading && Boolean(data.length) && RenderSkeleton(null, data.length);
|
|
134
|
+
},
|
|
135
|
+
onEndReached: function onEndReached() {
|
|
136
|
+
return handleLoadMore();
|
|
137
|
+
},
|
|
138
|
+
onEndReachedThreshold: 0.2
|
|
139
|
+
}));
|
|
118
140
|
};
|
|
119
141
|
export default Table;
|
|
@@ -102,14 +102,16 @@ export var styles = StyleSheet.create({
|
|
|
102
102
|
width: '100%'
|
|
103
103
|
},
|
|
104
104
|
emptyTextTitle: {
|
|
105
|
-
color:
|
|
105
|
+
color: PRIMARY_100,
|
|
106
106
|
textAlign: 'center',
|
|
107
107
|
fontSize: 20,
|
|
108
108
|
fontWeight: '500',
|
|
109
|
-
lineHeight: 28
|
|
109
|
+
lineHeight: 28,
|
|
110
|
+
marginTop: 25,
|
|
111
|
+
maxWidth: '80%'
|
|
110
112
|
},
|
|
111
113
|
emptyTextSubtitle: {
|
|
112
|
-
color:
|
|
114
|
+
color: NEUTRAL_700,
|
|
113
115
|
textAlign: 'center',
|
|
114
116
|
fontSize: 14,
|
|
115
117
|
fontWeight: '600',
|
|
@@ -4,13 +4,13 @@ export interface TableProps {
|
|
|
4
4
|
data: Array<any>;
|
|
5
5
|
columns: Columns[];
|
|
6
6
|
title?: string;
|
|
7
|
-
tableHeight?: DimensionValue
|
|
8
|
-
onRowPress
|
|
7
|
+
tableHeight?: DimensionValue;
|
|
8
|
+
onRowPress?: (primary: string) => void;
|
|
9
9
|
isLoading?: boolean;
|
|
10
10
|
textEmptyTable?: string;
|
|
11
11
|
commentEmptyTable?: string;
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
loadMoreData?: (page: number, updateNewPageInTable: () => void) => void;
|
|
13
|
+
isLoadMoreData?: boolean;
|
|
14
14
|
}
|
|
15
15
|
export interface TableCellProps {
|
|
16
16
|
label?: string;
|
|
@@ -25,7 +25,7 @@ export type Columns = {
|
|
|
25
25
|
visible?: boolean;
|
|
26
26
|
label?: string;
|
|
27
27
|
key?: string;
|
|
28
|
-
width?: DimensionValue
|
|
28
|
+
width?: DimensionValue;
|
|
29
29
|
components?: Actions[];
|
|
30
30
|
cellStyle?: ViewStyle;
|
|
31
31
|
};
|