mxw-public/customlistview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use Flatlist, Scrollview from react-native-gesture-handler, edited footer

Browse Source
This commit is contained in:
Bart Onstee
2022-11-16 20:31:14 +01:00
parent 3b85aac01d
commit 43df7f32b5
7 changed files with 25451 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules

BIN
dist/1.0.0/incentro.CustomListView.mpk vendored
View File

Binary file not shown.

37
dist/tmp/widgets/incentro/customlistview/CustomListView.js vendored
View File

@@ -236,25 +236,29 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_native__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-native */ "react-native"); /* harmony import */ var react_native__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-native */ "react-native");
/* harmony import */ var react_native__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_native__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var react_native__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_native__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var big_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! big.js */ "big.js"); /* harmony import */ var react_native_gesture_handler__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-native-gesture-handler */ "react-native-gesture-handler");
/* harmony import */ var big_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(big_js__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var react_native_gesture_handler__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_native_gesture_handler__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mendix/pluggable-widgets-tools */ "./node_modules/@mendix/pluggable-widgets-tools/dist/index.js"); /* harmony import */ var big_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! big.js */ "big.js");
/* harmony import */ var _mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var big_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(big_js__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mendix/pluggable-widgets-tools */ "./node_modules/@mendix/pluggable-widgets-tools/dist/index.js");
/* harmony import */ var _mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_4__);
let clickTimer; let clickTimer;
let ScreenHeight = react_native__WEBPACK_IMPORTED_MODULE_1__["Dimensions"].get("window").height;
const defaultStyle = { const defaultStyle = {
footer: { footer: {
marginBottom: 300, marginBottom: ScreenHeight * 0.1,
} }
}; };
class CustomListView extends react__WEBPACK_IMPORTED_MODULE_0__["PureComponent"] { class CustomListView extends react__WEBPACK_IMPORTED_MODULE_0__["PureComponent"] {
constructor(props) { constructor(props) {
var _a; var _a;
super(props); super(props);
this.styles = Object(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_3__["mergeNativeStyles"])(defaultStyle, this.props.style); this.styles = Object(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_4__["mergeNativeStyles"])(defaultStyle, this.props.style);
this.renderFlatListHandler = this.renderFlatList.bind(this); this.renderFlatListHandler = this.renderFlatList.bind(this);
this.renderScrollViewHandler = this.renderScrollView.bind(this); this.renderScrollViewHandler = this.renderScrollView.bind(this);
this.onClickHandler = this.onClick.bind(this); this.onClickHandler = this.onClick.bind(this);
@@ -286,20 +290,20 @@ class CustomListView extends react__WEBPACK_IMPORTED_MODULE_0__["PureComponent"]
const { ds, windowSize, initialNumToRender, removeClippedSubviews, maxNumberToRenderPerBatch, cellBatchingSize, useItemLayout, itemSize } = this.props; const { ds, windowSize, initialNumToRender, removeClippedSubviews, maxNumberToRenderPerBatch, cellBatchingSize, useItemLayout, itemSize } = this.props;
const size = Number(itemSize); const size = Number(itemSize);
return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], null, useItemLayout ? return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], null, useItemLayout ?
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["FlatList"], { getItemLayout: (data, index) => ({ Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native_gesture_handler__WEBPACK_IMPORTED_MODULE_2__["FlatList"], { getItemLayout: (data, index) => ({
length: size, length: size,
offset: size * index, offset: size * index,
index, index,
data data
}), ref: this.flatListRef, data: ds === null || ds === void 0 ? void 0 : ds.items, renderItem: this.renderItem, windowSize: windowSize, initialNumToRender: initialNumToRender, removeClippedSubviews: removeClippedSubviews, ListEmptyComponent: this.renderEmptyHandler(), maxToRenderPerBatch: maxNumberToRenderPerBatch, ListFooterComponent: this.renderFooterHandler() }) }), ref: this.flatListRef, data: ds === null || ds === void 0 ? void 0 : ds.items, renderItem: this.renderItem, windowSize: windowSize, initialNumToRender: initialNumToRender, removeClippedSubviews: removeClippedSubviews, ListEmptyComponent: this.renderEmptyHandler(), maxToRenderPerBatch: maxNumberToRenderPerBatch, ListFooterComponent: this.renderFooterHandler(), canCancelContentTouches: true })
: :
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["FlatList"], { data: ds === null || ds === void 0 ? void 0 : ds.items, renderItem: this.renderItem, windowSize: windowSize, initialNumToRender: initialNumToRender, removeClippedSubviews: removeClippedSubviews, ListEmptyComponent: this.renderEmptyHandler(), maxToRenderPerBatch: maxNumberToRenderPerBatch, ListFooterComponent: this.renderFooterHandler(), updateCellsBatchingPeriod: cellBatchingSize }))); Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native_gesture_handler__WEBPACK_IMPORTED_MODULE_2__["FlatList"], { data: ds === null || ds === void 0 ? void 0 : ds.items, renderItem: this.renderItem, windowSize: windowSize, initialNumToRender: initialNumToRender, removeClippedSubviews: removeClippedSubviews, ListEmptyComponent: this.renderEmptyHandler(), maxToRenderPerBatch: maxNumberToRenderPerBatch, ListFooterComponent: this.renderFooterHandler(), updateCellsBatchingPeriod: cellBatchingSize })));
} }
renderScrollView() { renderScrollView() {
var _a; var _a;
const { ds, container } = this.props; const { ds, container } = this.props;
return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], null, return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], null,
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["ScrollView"], null, (_a = ds.items) === null || _a === void 0 ? void 0 : _a.map((item) => Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { key: item.id }, container(item)))))); Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native_gesture_handler__WEBPACK_IMPORTED_MODULE_2__["ScrollView"], null, (_a = ds.items) === null || _a === void 0 ? void 0 : _a.map((item) => Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { key: item.id }, container(item))))));
} }
renderFooter() { renderFooter() {
return Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.footer }); return Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.footer });
@@ -315,7 +319,7 @@ class CustomListView extends react__WEBPACK_IMPORTED_MODULE_0__["PureComponent"]
if (!this.state.clickDisabled) { if (!this.state.clickDisabled) {
this.setState({ clickDisabled: true }); this.setState({ clickDisabled: true });
actionValue.execute(); actionValue.execute();
scrollItem === null || scrollItem === void 0 ? void 0 : scrollItem.setValue(new big_js__WEBPACK_IMPORTED_MODULE_2__["Big"](index)); scrollItem === null || scrollItem === void 0 ? void 0 : scrollItem.setValue(new big_js__WEBPACK_IMPORTED_MODULE_3__["Big"](index));
clickTimer = setTimeout(() => { clickTimer = setTimeout(() => {
this.setState({ clickDisabled: false }); this.setState({ clickDisabled: false });
}, 3000); }, 3000);
@@ -372,6 +376,17 @@ module.exports = require("react");
module.exports = require("react-native"); module.exports = require("react-native");
/***/ }),
/***/ "react-native-gesture-handler":
/*!***********************************************!*\
!*** external "react-native-gesture-handler" ***!
\***********************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = require("react-native-gesture-handler");
/***/ }) /***/ })
/******/ }); /******/ });

2
dist/tmp/widgets/incentro/customlistview/CustomListView.js.map vendored
View File

File diff suppressed because one or more lines are too long

25435
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -28,5 +28,7 @@
"@types/react": "~16.9.0", "@types/react": "~16.9.0",
"@types/react-native": "~0.61.23" "@types/react-native": "~0.61.23"
}, },
"dependencies": {} "dependencies": {
"react-native-gesture-handler": "1.8.0"
}
} }

7
src/CustomListView.tsx
View File

@@ -1,5 +1,6 @@
import { PureComponent, ReactNode, createElement, createRef } from "react"; import { PureComponent, ReactNode, createElement, createRef } from "react";
import { View, FlatList, ScrollView, TouchableOpacity, Text, ViewStyle } from "react-native"; import { View, TouchableOpacity, Text, ViewStyle, Dimensions } from "react-native";
import { FlatList, ScrollView } from "react-native-gesture-handler";
import { ObjectItem } from "mendix"; import { ObjectItem } from "mendix";
import { Big } from "big.js" import { Big } from "big.js"
@@ -7,6 +8,7 @@ import { CustomListViewProps } from "../typings/CustomListViewProps"
import { Style, mergeNativeStyles } from '@mendix/pluggable-widgets-tools'; import { Style, mergeNativeStyles } from '@mendix/pluggable-widgets-tools';
let clickTimer: number; let clickTimer: number;
let ScreenHeight = Dimensions.get("window").height;
export interface CustomStyle extends Style { export interface CustomStyle extends Style {
footer: ViewStyle footer: ViewStyle
@@ -14,7 +16,7 @@ export interface CustomStyle extends Style {
const defaultStyle: CustomStyle = { const defaultStyle: CustomStyle = {
footer: { footer: {
marginBottom: 300, marginBottom: ScreenHeight * 0.1,
} }
}; };
@@ -68,6 +70,7 @@ export class CustomListView extends PureComponent<CustomListViewProps<CustomStyl
ListEmptyComponent={this.renderEmptyHandler()} ListEmptyComponent={this.renderEmptyHandler()}
maxToRenderPerBatch={maxNumberToRenderPerBatch} maxToRenderPerBatch={maxNumberToRenderPerBatch}
ListFooterComponent={this.renderFooterHandler()} ListFooterComponent={this.renderFooterHandler()}
canCancelContentTouches={true}
/> />
: :
<FlatList <FlatList