@wavemaker-ai/app-rn-runtime 1.0.0-next.27766

package/components/data/list/list.component.js

@@ -0,0 +1,739 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { ActivityIndicator, SectionList, Text, View, FlatList, Dimensions, Platform } from 'react-native';
+import { isArray, isEmpty, isNil, isNumber } from 'lodash-es';
+import { BaseComponent, BaseComponentState } from '@wavemaker-ai/app-rn-runtime/core/base.component';
+import { getGroupedData, getNumberOfEmptyObjects, isDefined } from "@wavemaker-ai/app-rn-runtime/core/utils";
+import { getNumberOfColumnsFromResponsiveConfig } from '@wavemaker-ai/app-rn-runtime/core/responsive.utils';
+import { Tappable } from '@wavemaker-ai/app-rn-runtime/core/tappable.component';
+import { DefaultKeyExtractor } from '@wavemaker-ai/app-rn-runtime/core/key.extractor';
+import WmLabel from '@wavemaker-ai/app-rn-runtime/components/basic/label/label.component';
+import WmIcon from '@wavemaker-ai/app-rn-runtime/components/basic/icon/icon.component';
+import { Swipeable } from 'react-native-gesture-handler';
+import _viewPort, { EVENTS as ViewPortEvents } from '@wavemaker-ai/app-rn-runtime/core/viewport';
+import WmListProps from './list.props';
+import { DEFAULT_CLASS } from './list.styles';
+import { DEFAULT_CLASS as LIST_TEMPLATE_DEFAULT_CLASS } from './list-template/list-template.styles';
+import { BackgroundComponent } from '@wavemaker-ai/app-rn-runtime/styles/background.component';
+import { isAutoLayout as checkAutoLayout, getContentContainerStyle, getDirectionStyle, getDimensionStyle, extractAutoLayoutProps } from '@wavemaker-ai/app-rn-runtime/core/auto-layout.utils';
+export class WmListState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "selectedindex", void 0);
+    _defineProperty(this, "groupedData", []);
+    _defineProperty(this, "currentPage", 1);
+    _defineProperty(this, "maxRecordsToShow", 20);
+    _defineProperty(this, "loadingData", true);
+  }
+}
+export default class WmList extends BaseComponent {
+  constructor(_props) {
+    super(_props, DEFAULT_CLASS, new WmListProps(), new WmListState());
+    _defineProperty(this, "itemWidgets", []);
+    _defineProperty(this, "selectedItemWidgets", {});
+    _defineProperty(this, "keyExtractor", new DefaultKeyExtractor());
+    //private endThreshold = -1;
+    // private loadingData = false;
+    _defineProperty(this, "hasMoreData", true);
+    _defineProperty(this, "leftActionTemplate", void 0);
+    _defineProperty(this, "rightActionTemplate", void 0);
+    _defineProperty(this, "flatListRefs", {});
+    _defineProperty(this, "selectedItems", []);
+    _defineProperty(this, "scrolledToEnd", false);
+    _defineProperty(this, "screenWidth", Dimensions.get("window").width);
+    _defineProperty(this, "renderLeftActions", () => {
+      return this.leftActionTemplate ? /*#__PURE__*/React.createElement(React.Fragment, null, this.leftActionTemplate.getTemplate()) : null;
+    });
+    _defineProperty(this, "renderRightActions", () => {
+      return this.rightActionTemplate ? /*#__PURE__*/React.createElement(React.Fragment, null, this.rightActionTemplate.getTemplate()) : null;
+    });
+    _defineProperty(this, "clear", () => {
+      this.updateState({
+        groupedData: {}
+      });
+    });
+    _defineProperty(this, "selectItem", item => {
+      const dataset = this.state.props.dataset;
+      if (isNumber(item)) {
+        this.onSelect(dataset[item], item);
+      } else {
+        let index = dataset.indexOf(item);
+        this.onSelect(dataset[index], index);
+      }
+    });
+    _defineProperty(this, "getSelectedItems", () => {
+      if (!this.props.multiselect) {
+        return [this.selectedItems];
+      }
+      return this.selectedItems;
+    });
+    _defineProperty(this, "getItem", index => {
+      const props = this.state.props;
+      return this.props.dataset[index];
+    });
+    _defineProperty(this, "deselectItem", item => {
+      const props = this.state.props;
+      let selectedItem = props.selecteditem || null;
+      let index = isNumber(item) ? item : props.dataset.indexOf(item);
+      if (props.multiselect && index >= 0) {
+        selectedItem = [...(props.selecteditem || [])];
+        let selectedItemIndex = selectedItem.indexOf(props.dataset[index]);
+        if (selectedItemIndex >= 0) {
+          selectedItem.splice(selectedItemIndex, 1);
+        }
+      } else {
+        if (props.selecteditem === props.dataset[index]) {
+          selectedItem = null;
+        }
+      }
+      this.updateState({
+        props: {
+          selecteditem: selectedItem
+        }
+      }, () => {
+        this.invokeEventCallback('onDeselect', [this.proxy, item]);
+      });
+    });
+    _defineProperty(this, "getWidgets", (widgetname, index) => {
+      if (index >= 0 && index < this.itemWidgets.length) {
+        return this.itemWidgets[index][widgetname];
+      } else {
+        return this.itemWidgets.map(item => item[widgetname]).filter(widget => widget !== undefined);
+      }
+    });
+    _defineProperty(this, "selectAll", () => {
+      const props = this.state.props;
+      const dataset = props.dataset;
+      if (!props.multiselect || !isArray(dataset) || dataset.length === 0) {
+        return;
+      }
+      const selectedItems = [...dataset];
+      this.updateState({
+        props: {
+          selecteditem: selectedItems
+        },
+        selectedindex: -1
+      });
+    });
+    _defineProperty(this, "scrollToItem", (groupKey, itemIndex) => {
+      const refKey = groupKey || 'main';
+      if (this.flatListRefs[refKey]) {
+        this.flatListRefs[refKey].scrollToIndex({
+          index: itemIndex,
+          animated: true
+        });
+      }
+    });
+    _defineProperty(this, "getCaption", (isHorizontal, vData) => {
+      const {
+        nodatamessage,
+        ondemandmessage
+      } = this.state.props;
+      if (!isHorizontal) {
+        return this.hasMoreData ? ondemandmessage : nodatamessage;
+      }
+      return this.hasMoreData ? ondemandmessage : nodatamessage;
+    });
+    _defineProperty(this, "renderCustomCell", ({
+      children,
+      style,
+      ...props
+    }) => {
+      return /*#__PURE__*/React.createElement(View, _extends({}, props, {
+        style: [style, {
+          width: this.getListTemplateWidth() == "fill" ? "100%" : {}
+        }]
+      }), children);
+    });
+    this.updateState({
+      maxRecordsToShow: this.state.props.pagesize
+    });
+
+    // Subscribe to viewport changes to re-render when screen size changes
+    this.cleanup.push(_viewPort.subscribe(ViewPortEvents.SIZE_CHANGE, newDim => {
+      this.screenWidth = newDim.width;
+      this.forceUpdate();
+    }));
+  }
+  isSelected($item) {
+    const selectedItem = this.state.props.selecteditem;
+    if (isArray(selectedItem)) {
+      return selectedItem.indexOf($item) >= 0;
+    }
+    return selectedItem === $item;
+  }
+  async onSelect($item, $index, $event) {
+    if (this.state.props.disableitemselect) {
+      return;
+    }
+    const props = this.state.props;
+    let selectedItem = null;
+    let eventName = 'onSelect';
+    if (props.disableitem !== true && (typeof props.disableitem !== 'function' || !props.disableitem($item, $index))) {
+      if (props.multiselect) {
+        selectedItem = [...(props.selecteditem || [])];
+        const index = selectedItem.indexOf($item);
+        if (index < 0) {
+          if (!props.selectionlimit || props.selectionlimit < 0 || selectedItem.length < props.selectionlimit) {
+            selectedItem.push($item);
+          } else {
+            this.invokeEventCallback('onSelectionlimitexceed', [null, this]);
+          }
+        } else {
+          selectedItem.splice(index, 1);
+          eventName = 'onDeselect';
+        }
+      } else {
+        this.state.props.selecteditem && this.invokeEventCallback('onDeselect', [this.proxy, this.state.props.selecteditem]);
+        selectedItem = $item;
+      }
+      this.selectedItems = selectedItem;
+      this.selectedItemWidgets = this.itemWidgets[$index];
+      let groupKey = null;
+      if (props.direction === 'row') {
+        var _this$state$groupedDa;
+        (_this$state$groupedDa = this.state.groupedData) === null || _this$state$groupedDa === void 0 || _this$state$groupedDa.forEach(group => {
+          if (group.data.includes($item)) {
+            groupKey = group.key;
+          }
+        });
+      }
+      return new Promise(resolve => {
+        this.updateState({
+          props: {
+            selecteditem: selectedItem
+          },
+          selectedindex: $index
+        }, () => {
+          if (props.direction === 'row' && props.horizontalscrolltoitem) {
+            this.scrollToItem(groupKey, $index);
+          }
+          this.invokeEventCallback(eventName, [this.proxy, $item]);
+          $event && this.invokeEventCallback('onTap', [$event, this.proxy]);
+          resolve(null);
+        });
+      });
+    } else {
+      return Promise.resolve(null);
+    }
+  }
+  get loadDataOnDemand() {
+    const navigation = this.state.props.navigation;
+    return navigation === 'Scroll' || navigation === 'On-Demand';
+  }
+  loadData() {
+    if (this.state.loadingData || !this.hasMoreData) {
+      return;
+    }
+    if (isArray(this.state.props.dataset) && this.state.props.dataset.length > this.state.maxRecordsToShow) {
+      this.updateState({
+        loadingData: true,
+        maxRecordsToShow: this.state.maxRecordsToShow + this.state.props.pagesize
+      });
+      setTimeout(() => {
+        // Force a re-render by making a small state update
+        this.updateState({
+          loadingData: false
+        });
+      }, 100);
+    } else if (this.loadDataOnDemand) {
+      const $list = this.proxy;
+      $list.loadingdata = true;
+      // Set loading state via updateState
+      this.updateState({
+        loadingData: true
+      });
+      this.props.getNextPageData && this.props.getNextPageData(null, this.proxy, this.state.currentPage + 1).then(data => {
+        if (isArray(data) && data.length > 0 && isArray(this.state.props.dataset)) {
+          $list.dataset = [...this.state.props.dataset, ...data];
+          this.updateState({
+            currentPage: this.state.currentPage + 1,
+            maxRecordsToShow: this.state.maxRecordsToShow + this.state.props.pagesize
+          });
+          this.hasMoreData = true;
+          if ((data === null || data === void 0 ? void 0 : data.last) === true) {
+            this.hasMoreData = false;
+          }
+        } else {
+          this.hasMoreData = false;
+        }
+      }).catch(err => {
+        console.error(err);
+      }).then(() => {
+        setTimeout(() => {
+          $list.loadingdata = false;
+        }, 1000);
+      });
+    }
+  }
+  selectFirstItem() {
+    const props = this.state.props;
+    if (this.initialized && props.dataset && props.dataset.length) {
+      const index = props.groupby ? '00' : 0;
+      this.onSelect(props.dataset[0], index);
+    }
+  }
+  deselectAll() {
+    this.updateState({
+      props: {
+        selecteditem: null
+      },
+      selectedindex: -1
+    });
+  }
+  setGroupData(items) {
+    const dataItems = items;
+    const props = this.state.props;
+    if (props.groupby) {
+      const groupedData = dataItems && getGroupedData(dataItems, props.groupby, props.match, props.orderby, props.dateformat, this);
+      this.updateState({
+        groupedData: groupedData
+      }, () => {
+        var _this$keyExtractor;
+        (_this$keyExtractor = this.keyExtractor) === null || _this$keyExtractor === void 0 || _this$keyExtractor.clear();
+      });
+    }
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    const props = this.state.props;
+    switch (name) {
+      case 'selectfirstitem':
+        if ($new) {
+          this.selectFirstItem();
+        }
+        break;
+      case 'dataset':
+        if (this.state.props.groupby) {
+          this.setGroupData($new);
+        } else {
+          if (!($old && $old.length) && $new && $new.length && this.loadDataOnDemand) {
+            this.updateState({
+              props: {
+                dataset: [...$new]
+              }
+            });
+          }
+          const data = isArray($new) ? $new : !isEmpty($new) && isDefined($new) ? [$new] : [];
+          if (props.orderby) {
+            const orderbyData = data && getGroupedData(data, props.groupby, props.match, props.orderby, props.dateformat, this);
+            this.updateState({
+              groupedData: orderbyData[0] ? [{
+                key: 'key',
+                data: orderbyData[0].data
+              }] : []
+            }, () => {
+              var _this$keyExtractor2;
+              (_this$keyExtractor2 = this.keyExtractor) === null || _this$keyExtractor2 === void 0 || _this$keyExtractor2.clear();
+            });
+          } else {
+            this.updateState({
+              groupedData: data[0] || props.direction === 'row' ? [{
+                key: 'key',
+                data: data
+              }] : []
+            }, () => {
+              var _this$keyExtractor3;
+              (_this$keyExtractor3 = this.keyExtractor) === null || _this$keyExtractor3 === void 0 || _this$keyExtractor3.clear();
+            });
+          }
+        }
+        this.itemWidgets = [];
+        if (props.selectfirstitem) {
+          this.selectFirstItem();
+        } else {
+          this.deselectAll();
+        }
+        if (isArray($new)) {
+          setTimeout(() => {
+            this.updateState({
+              loadingData: false
+            });
+          }, 0);
+        }
+        break;
+      case 'groupby':
+      case 'match':
+        this.setGroupData(this.state.props.dataset);
+        break;
+      case 'multiselect':
+        if ($new) {
+          if (!isArray(this.state.props.selecteditem)) {
+            this.state.props.selecteditem = this.state.props.selecteditem ? [this.state.props.selecteditem] : [];
+          }
+        } else if (isArray(this.state.props.selecteditem)) {
+          this.state.props.selecteditem = this.state.props.selecteditem.pop();
+        }
+        break;
+      case 'loadingdata':
+        if ($new != $old) {
+          this.updateState({
+            loadingData: $new
+          });
+        }
+        break;
+      case 'selecteditem':
+        if ($new != $old && isNumber($new)) {
+          this.selectItem(this.state.props.dataset[$new]);
+        }
+        break;
+    }
+  }
+  componentDidMount() {
+    var _props$dataset;
+    const props = this.state.props;
+    if (this.state.props.selectfirstitem && (_props$dataset = props.dataset) !== null && _props$dataset !== void 0 && _props$dataset.length) {
+      setTimeout(() => {
+        this.onSelect(props.dataset[0], 0);
+      });
+    }
+    this.subscribe('scroll', event => {
+      var _event$nativeEvent, _event$nativeEvent2, _event$nativeEvent3;
+      const scrollPosition = event === null || event === void 0 || (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 || (_event$nativeEvent = _event$nativeEvent.contentOffset) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.y;
+      const contentHeight = event === null || event === void 0 || (_event$nativeEvent2 = event.nativeEvent) === null || _event$nativeEvent2 === void 0 || (_event$nativeEvent2 = _event$nativeEvent2.contentSize) === null || _event$nativeEvent2 === void 0 ? void 0 : _event$nativeEvent2.height;
+      const viewportHeight = event === null || event === void 0 || (_event$nativeEvent3 = event.nativeEvent) === null || _event$nativeEvent3 === void 0 || (_event$nativeEvent3 = _event$nativeEvent3.layoutMeasurement) === null || _event$nativeEvent3 === void 0 ? void 0 : _event$nativeEvent3.height;
+
+      //checking user scrolled till bottom of the list logic
+      const threshold = 50; // px
+      const isVisible = scrollPosition + viewportHeight >= contentHeight - threshold;
+      if (isVisible && !this.scrolledToEnd) {
+        this.scrolledToEnd = true;
+        //console.log('user scrolled till end');
+        this.loadData();
+      } else if (!isVisible && this.scrolledToEnd) {
+        this.scrolledToEnd = false;
+      }
+    });
+    super.componentDidMount();
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    super.componentDidUpdate && super.componentDidUpdate(prevProps, prevState, snapshot);
+    if (prevProps.triggeronrenderwhenhidden === true || this.showView()) {
+      this.invokeEventCallback('onRender', [this, this.state.props.dataset]);
+    }
+  }
+  getDefaultStyles() {
+    const isHorizontal = this.state.props.direction === 'row';
+    return this.theme.getStyle(`${this.defaultClass} ${isHorizontal ? 'app-horizontal-list' : 'app-vertical-list'}`);
+  }
+  getIndex(item) {
+    return this.state.props.dataset.indexOf(item);
+  }
+  generateItemKey(item, index, props) {
+    if (props.itemkey && item && !this._showSkeleton) {
+      return props.itemkey(item, index);
+    }
+    return 'list_item_' + this.keyExtractor.getKey(item, true);
+  }
+  getFlatListData(groupData, isHorizontal, props) {
+    if (this._showSkeleton) {
+      var _ref;
+      return [...getNumberOfEmptyObjects((_ref = this.props.numberofskeletonitems) !== null && _ref !== void 0 ? _ref : 3)];
+    }
+    if (!groupData || isEmpty(groupData[0])) {
+      return [];
+    }
+    if (isHorizontal && props.horizontalondemandenabled === false) {
+      return groupData;
+    }
+    return groupData.slice(0, this.state.maxRecordsToShow);
+  }
+  renderItem(item, index, props) {
+    var _this$styles$columnWr, _this$styles;
+    const cols = this.getNoOfColumns();
+    const isHorizontal = props.direction === 'row';
+    const isWrap = isHorizontal && props.wrap;
+    const styles = this._showSkeleton ? {
+      ...this.styles.item,
+      ...this.styles.skeleton.root
+    } : this.styles.item;
+    let containerStyle = {};
+    const columnGap = (_this$styles$columnWr = (_this$styles = this.styles) === null || _this$styles === void 0 || (_this$styles = _this$styles.columnWrapper) === null || _this$styles === void 0 ? void 0 : _this$styles.gap) !== null && _this$styles$columnWr !== void 0 ? _this$styles$columnWr : 0;
+    if (!cols || isNaN(cols) || cols <= 0) {
+      containerStyle = {};
+    } else if (columnGap > 0) {
+      const totalGap = columnGap * (cols - 1);
+      const availableWidth = this.screenWidth - totalGap;
+      if (availableWidth <= 0) {
+        containerStyle = {
+          width: "100%"
+        };
+      } else {
+        containerStyle = {
+          width: `${Math.round(availableWidth / (cols * this.screenWidth) * 100)}%`
+        };
+      }
+    } else {
+      containerStyle = cols ? {
+        width: Math.round(100 / cols) + "%",
+        flex: null
+      } : {};
+    }
+    return index < this.state.maxRecordsToShow || isHorizontal && this.state.props.horizontalondemandenabled === false ? !props.shouldswipe ? /*#__PURE__*/React.createElement(View, {
+      style: containerStyle
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles, isWrap ? {
+        minWidth: 0
+      } : null, props.itemclass ? this.theme.getStyle(props.itemclass(item, index)) : null, this.isSelected(item) ? this.styles.selectedItem : {}]
+    }, styles.backgroundImage ? /*#__PURE__*/React.createElement(BackgroundComponent, {
+      image: styles.backgroundImage,
+      position: styles.backgroundPosition || 'center',
+      size: styles.backgroundSize || 'cover',
+      repeat: styles.backgroundRepeat || 'no-repeat',
+      resizeMode: styles.backgroundResizeMode || 'cover',
+      style: {
+        borderRadius: this.styles.item.borderRadius
+      }
+    }) : null, /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(`item${index}`), {
+      disableTouchEffect: this.state.props.disabletoucheffect,
+      onTap: $event => this.onSelect(item, index, $event),
+      onLongTap: () => !this.state.props.disableitemselect && this.invokeEventCallback('onLongtap', [null, this.proxy]),
+      onDoubleTap: () => !this.state.props.disableitemselect && this.invokeEventCallback('onDoubletap', [null, this.proxy]),
+      styles: [{
+        display: 'flex',
+        flexDirection: 'row'
+      }, cols ? {
+        width: '100%'
+      } : null, cols && cols > 1 || isHorizontal ? {
+        paddingRight: (isNil(this.styles.item.marginRight) ? this.styles.item.margin : this.styles.item.marginRight) || 4
+      } : null, this.styles.itemContainer, Platform.OS == 'web' && this.getListTemplateWidth() == "fill" ? {
+        width: "100%"
+      } : {}]
+    }), props.renderItem(item, index, this), this.isSelected(item) ? /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('icon' + index),
+      iconclass: "wi wi-check-circle",
+      styles: this.styles.selectedIcon
+    }) : null))) : /*#__PURE__*/React.createElement(Swipeable, {
+      renderLeftActions: () => this.renderLeftActions(),
+      renderRightActions: () => this.renderRightActions(),
+      containerStyle: containerStyle
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles, isWrap ? {
+        minWidth: 0
+      } : null, props.itemclass ? this.theme.getStyle(props.itemclass(item, index)) : null, this.isSelected(item) ? this.styles.selectedItem : {}]
+    }, styles.backgroundImage ? /*#__PURE__*/React.createElement(BackgroundComponent, {
+      image: styles.backgroundImage,
+      position: styles.backgroundPosition || 'center',
+      size: styles.backgroundSize || 'cover',
+      repeat: styles.backgroundRepeat || 'no-repeat',
+      resizeMode: styles.backgroundResizeMode || 'cover',
+      style: {
+        borderRadius: this.styles.item.borderRadius
+      }
+    }) : null, /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(`item${index}`), {
+      disableTouchEffect: this.state.props.disabletoucheffect,
+      onTap: $event => this.onSelect(item, index, $event),
+      onLongTap: () => !this.state.props.disableitemselect && this.invokeEventCallback('onLongtap', [null, this.proxy]),
+      onDoubleTap: () => !this.state.props.disableitemselect && this.invokeEventCallback('onDoubletap', [null, this.proxy]),
+      styles: [{
+        display: 'flex',
+        flexDirection: 'row'
+      }, cols ? {
+        width: '100%'
+      } : null, cols && cols > 1 || isHorizontal ? {
+        paddingRight: (isNil(this.styles.item.marginRight) ? this.styles.item.margin : this.styles.item.marginRight) || 4
+      } : null, this.styles.itemContainer]
+    }), props.renderItem(item, index, this), this.isSelected(item) ? /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('icon' + index),
+      iconclass: props.selecteditemicon ? props.selecteditemicon : 'wi wi-check-circle',
+      styles: this.styles.selectedIcon
+    }) : null))) : null;
+  }
+  renderHeader(props, title) {
+    return props.groupby ? /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.groupHeading,
+      accessibilityRole: "header"
+    }, title) : props.iconclass || props.title || props.subheading ? /*#__PURE__*/React.createElement(View, {
+      style: this.styles.heading
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1,
+        flexDirection: 'row'
+      }
+    }, /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('icon'),
+      styles: this.styles.listIcon,
+      iconclass: props.iconclass
+    }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(WmLabel, {
+      id: this.getTestId('title'),
+      styles: this.styles.title,
+      caption: props.title,
+      accessibilityrole: "header"
+    }), /*#__PURE__*/React.createElement(WmLabel, {
+      id: this.getTestId('subheading'),
+      styles: this.styles.subheading,
+      caption: props.subheading
+    })))) : null;
+  }
+  renderEmptyMessage(isHorizontal, item, index, props) {
+    return /*#__PURE__*/React.createElement(WmLabel, {
+      id: this.getTestId('emptymsg'),
+      styles: this.styles.emptyMessage,
+      caption: props.nodatamessage
+    });
+  }
+  renderLoadingIcon(props) {
+    return props.loadingicon ? /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('loadingicon'),
+      styles: this.styles.loadingIcon,
+      iconclass: props.loadingicon,
+      caption: props.loadingdatamsg
+    }) : /*#__PURE__*/React.createElement(ActivityIndicator, {
+      color: this.styles.loadingIcon.text.color
+    });
+  }
+  getNoOfColumns() {
+    const props = this.state.props;
+    if (props.direction === 'column' && props.responsive) {
+      const columns = getNumberOfColumnsFromResponsiveConfig(props.itemsperrow, undefined, props.fallback);
+      return columns && columns > 0 ? columns : 1;
+    } else if (props.direction === 'column' && !props.responsive) {
+      if (props.itemsperrow.xs) {
+        return props.itemsperrow.xs;
+      }
+    }
+    return 0;
+  }
+  findListTemplateInChildren(nodes = this.componentNode.children) {
+    for (const node of nodes) {
+      const instance = node.instance;
+      if ((instance === null || instance === void 0 ? void 0 : instance.defaultClass) === LIST_TEMPLATE_DEFAULT_CLASS) {
+        return instance;
+      }
+      const nested = this.findListTemplateInChildren(node.children);
+      if (nested) {
+        return nested;
+      }
+    }
+    return undefined;
+  }
+  getListTemplateWidth() {
+    var _listTemplate$styles;
+    const listTemplate = this.findListTemplateInChildren();
+    return listTemplate === null || listTemplate === void 0 || (_listTemplate$styles = listTemplate.styles) === null || _listTemplate$styles === void 0 || (_listTemplate$styles = _listTemplate$styles.root) === null || _listTemplate$styles === void 0 ? void 0 : _listTemplate$styles.width;
+  }
+  onLayoutChange(e) {
+    // const l = e.nativeEvent.layout;
+    // this.endThreshold = l.height + l.y - 100;
+    // if (!this.endThreshold) {
+    //   this.endThreshold = -1;
+
+    // }
+  }
+  renderWithFlatList(props, isHorizontal = false) {
+    const isWrap = isHorizontal && props.wrap;
+    const hasExplicitAutoLayout = props.alignment !== undefined || props.gap !== undefined || props.columngap !== undefined || Boolean(props.wrap);
+    const listAutoLayoutProps = extractAutoLayoutProps(props);
+    listAutoLayoutProps.direction = isHorizontal ? 'row' : 'column';
+    const listDirectionStyle = hasExplicitAutoLayout ? getDirectionStyle(listAutoLayoutProps) : null;
+    const listContentStyle = hasExplicitAutoLayout ? getContentContainerStyle(listAutoLayoutProps) : null;
+    const fullWidthStyle = {
+      width: '100%'
+    };
+    const rootStyle = [this.styles.root, !isHorizontal ? fullWidthStyle : null];
+    const groupStyle = [this.styles.group, !isHorizontal ? fullWidthStyle : null];
+    const flatListStyle = !isHorizontal ? fullWidthStyle : undefined;
+    return /*#__PURE__*/React.createElement(View, {
+      style: rootStyle,
+      onLayout: e => this.onLayoutChange(e)
+    }, !isEmpty(this.state.groupedData) ? this.state.groupedData.map((v, i) => /*#__PURE__*/React.createElement(View, {
+      style: groupStyle,
+      key: v.key || this.keyExtractor.getKey(v, true)
+    }, this.renderHeader(props, v.key), /*#__PURE__*/React.createElement(FlatList, _extends({
+      ref: ref => {
+        this.flatListRefs[v.key || 'main'] = ref;
+      },
+      CellRendererComponent: Platform.OS === 'web' ? this.renderCustomCell : undefined,
+      testID: this.getTestId('flat_list'),
+      style: flatListStyle,
+      key: props.name + '_' + (isHorizontal ? 'H' : 'V') + props.itemsperrow.xs + (isWrap ? '_W' : ''),
+      keyExtractor: (item, i) => this.generateItemKey(item, i, props),
+      scrollEnabled: isHorizontal && !isWrap,
+      horizontal: isHorizontal && !isWrap,
+      contentContainerStyle: [this.styles.listContainer, listDirectionStyle, listContentStyle],
+      data: this.getFlatListData(v.data, isHorizontal, props),
+      ListEmptyComponent: itemInfo => this.renderEmptyMessage(isHorizontal, itemInfo.item, itemInfo.index, props),
+      renderItem: itemInfo => this.renderItem(itemInfo.item, itemInfo.index, props)
+    }, isHorizontal && !isWrap ? {
+      showsHorizontalScrollIndicator: !props.hidehorizontalscrollbar
+    } : !isWrap ? {
+      numColumns: this.getNoOfColumns()
+    } : {}, !isWrap && this.getNoOfColumns() > 1 ? {
+      columnWrapperStyle: this.styles.columnWrapper
+    } : {})), this.loadDataOnDemand || v.data.length > this.state.maxRecordsToShow && props.navigation !== 'None' ? this.state.loadingData ? this.renderLoadingIcon(props) : /*#__PURE__*/React.createElement(WmLabel, {
+      id: this.getTestId('ondemandmessage'),
+      styles: this.styles.onDemandMessage,
+      caption: this.getCaption(isHorizontal, v.data),
+      onTap: () => this.loadData()
+    }) : null)) : this.state.loadingData ? this.renderLoadingIcon(props) : this.renderEmptyMessage(isHorizontal, null, null, props));
+  }
+  getSectionListData(props) {
+    if (this._showSkeleton) {
+      var _ref2;
+      return [{
+        key: '',
+        data: [...getNumberOfEmptyObjects((_ref2 = this.props.numberofskeletonitems) !== null && _ref2 !== void 0 ? _ref2 : 3)]
+      }];
+    } else if (this.state.groupedData && this.state.groupedData[0] && this.state.groupedData[0]['data'].length) {
+      return this.state.groupedData.map(section => ({
+        ...section,
+        data: isArray(section === null || section === void 0 ? void 0 : section.data) ? section.data.slice(0, this.state.maxRecordsToShow) : section === null || section === void 0 ? void 0 : section.data
+      }));
+    }
+    return [];
+  }
+  renderWithSectionList(props, isHorizontal = false) {
+    const hasExplicitAutoLayout = props.alignment !== undefined || props.gap !== undefined || props.columngap !== undefined || Boolean(props.wrap);
+    const listAutoLayoutProps = extractAutoLayoutProps(props);
+    listAutoLayoutProps.direction = isHorizontal ? 'row' : 'column';
+    const listDirectionStyle = hasExplicitAutoLayout ? getDirectionStyle(listAutoLayoutProps) : null;
+    const listContentStyle = hasExplicitAutoLayout ? getContentContainerStyle(listAutoLayoutProps) : null;
+    return this.state.loadingData ? this.renderLoadingIcon(props) : /*#__PURE__*/React.createElement(SectionList, {
+      keyExtractor: (item, i) => this.generateItemKey(item, i, props),
+      horizontal: isHorizontal,
+      contentContainerStyle: [this.styles.root, listDirectionStyle, listContentStyle],
+      sections: this.getSectionListData(props),
+      renderSectionHeader: ({
+        section: {
+          key,
+          data
+        }
+      }) => {
+        return this.renderHeader(props, key);
+      },
+      renderSectionFooter: () => props.loadingdata ? this.renderLoadingIcon(props) : null,
+      ListEmptyComponent: itemInfo => this.renderEmptyMessage(isHorizontal, itemInfo.item, itemInfo.index, props),
+      renderItem: itemInfo => this.renderItem(itemInfo.item, itemInfo.index, props)
+    });
+  }
+  renderWidget(props) {
+    var _this$parent;
+    this.invokeEventCallback('onBeforedatarender', [this, this.state.props.dataset]);
+    const isHorizontal = props.direction == 'row';
+    const alProps = extractAutoLayoutProps(props, (_this$parent = this.parent) === null || _this$parent === void 0 || (_this$parent = _this$parent.state) === null || _this$parent === void 0 ? void 0 : _this$parent.props);
+    const listDir = props.direction;
+    if (listDir === 'row') {
+      alProps.direction = 'row';
+    } else {
+      alProps.direction = 'column';
+    }
+    const hasAutoLayout = checkAutoLayout({
+      ...alProps,
+      direction: undefined
+    });
+    const outerStyle = [isHorizontal ? null : {
+      width: '100%'
+    }];
+    if (hasAutoLayout) {
+      outerStyle.push(getDirectionStyle(alProps), getContentContainerStyle(alProps), getDimensionStyle(alProps, this.styles.root));
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: outerStyle,
+      onLayout: event => this.handleLayout(event)
+    }, this._background, isHorizontal || !props.groupby ? this.renderWithFlatList(props, isHorizontal) : this.renderWithSectionList(props, isHorizontal));
+  }
+}
+//# sourceMappingURL=list.component.js.map