@wavemaker/app-rn-runtime 11.4.0-next.28152 → 11.4.0-patch.1

package/components/container/tabs/tabheader/tabheader.component.js

@@ -0,0 +1,182 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React from 'react';
+import { Animated, Easing, Text, View } from 'react-native';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmTabheaderProps from './tabheader.props';
+import { DEFAULT_CLASS } from './tabheader.styles';
+import { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';
+import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
+import { BackgroundComponent } from '@wavemaker/app-rn-runtime/styles/background.component';
+export class WmTabheaderState extends BaseComponentState {}
+export default class WmTabheader extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmTabheaderProps(), new WmTabheaderState());
+    _defineProperty(this, "headerPanelLayout", null);
+    _defineProperty(this, "headersLayout", []);
+    _defineProperty(this, "headerScrollPosition", new Animated.Value(0));
+    _defineProperty(this, "headerScrollPositionValue", 0);
+    _defineProperty(this, "indicatorPosition", new Animated.Value(0));
+    _defineProperty(this, "indicatorWidth", new Animated.Value(0));
+    this.headerScrollPosition.addListener(_ref => {
+      let {
+        value
+      } = _ref;
+      return this.headerScrollPositionValue = value;
+    });
+  }
+  setHeaderPanelPositon(nativeEvent) {
+    this.headerPanelLayout = nativeEvent.nativeEvent.layout;
+  }
+  setHeaderPositon(index, nativeEvent) {
+    this.headersLayout[index] = nativeEvent.nativeEvent.layout;
+    if (index === this.props.selectedTabIndex) {
+      this.forceUpdate();
+    }
+  }
+  onTabSelection(index) {
+    if (this.state.props.selectedTabIndex != index) {
+      this.state.props.onIndexChange && this.state.props.onIndexChange(index);
+    }
+  }
+  setPosition() {
+    var _this$headersLayout$s, _this$headerPanelLayo, _this$headerPanelLayo2;
+    const selectedTabIndex = this.state.props.selectedTabIndex;
+    let toIndicatorPosition = 0;
+    let toIndicatorWidth = ((_this$headersLayout$s = this.headersLayout[selectedTabIndex]) === null || _this$headersLayout$s === void 0 ? void 0 : _this$headersLayout$s.width) || 0;
+    let toHeaderScrollPosition = this.headerScrollPositionValue;
+    let totalWidth = 0;
+    if (this.state.props.data.length !== this.headersLayout.length) {
+      return;
+    }
+    this.headersLayout.forEach((p, i) => {
+      if (i < selectedTabIndex) {
+        toIndicatorPosition += p.width;
+      }
+      totalWidth += p.width;
+    });
+    toHeaderScrollPosition = -1 * (toIndicatorPosition - (((_this$headerPanelLayo = this.headerPanelLayout) === null || _this$headerPanelLayo === void 0 ? void 0 : _this$headerPanelLayo.width) || 0) / 2 + toIndicatorWidth / 2);
+    const minScrollPosition = -1 * (totalWidth - (((_this$headerPanelLayo2 = this.headerPanelLayout) === null || _this$headerPanelLayo2 === void 0 ? void 0 : _this$headerPanelLayo2.width) || 0));
+    const maxScrollPosition = 0;
+    toHeaderScrollPosition = Math.max(minScrollPosition, toHeaderScrollPosition);
+    toHeaderScrollPosition = Math.min(maxScrollPosition, toHeaderScrollPosition);
+    let positionIndicator = toIndicatorPosition - (100 - toIndicatorWidth) / 2;
+    let position = this.isRTL ? -positionIndicator : positionIndicator;
+    Animated.parallel([Animated.timing(this.headerScrollPosition, {
+      useNativeDriver: true,
+      toValue: toHeaderScrollPosition,
+      duration: 200,
+      easing: Easing.linear
+    }), Animated.timing(this.indicatorWidth, {
+      useNativeDriver: true,
+      toValue: toIndicatorWidth / 100,
+      duration: 200,
+      easing: Easing.linear
+    }), Animated.timing(this.indicatorPosition, {
+      useNativeDriver: true,
+      toValue: position,
+      duration: 200,
+      easing: Easing.linear
+    })]).start();
+  }
+  renderSkeleton(props) {
+    return /*#__PURE__*/React.createElement(Animated.View, {
+      style: {
+        transform: [{
+          translateX: this.headerScrollPosition
+        }]
+      },
+      onLayout: this.setHeaderPanelPositon.bind(this)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this.props.data.map((header, i) => {
+      var _this$styles$root, _this$styles$root2, _this$styles$activeHe;
+      const isSelected = i === this.props.selectedTabIndex;
+      return /*#__PURE__*/React.createElement(Tappable, {
+        onTap: this.onTabSelection.bind(this, i),
+        key: header.key,
+        styles: {
+          flex: 1
+        }
+      }, /*#__PURE__*/React.createElement(View, {
+        onLayout: this.setHeaderPositon.bind(this, i),
+        style: [this.styles.header, isSelected ? this.styles.activeHeader : null]
+      }, createSkeleton(this.theme, {
+        root: {
+          borderRadius: 4
+        }
+      }, {
+        ...this.styles.root,
+        width: ((_this$styles$root = this.styles.root) === null || _this$styles$root === void 0 ? void 0 : _this$styles$root.width) || "100%",
+        height: ((_this$styles$root2 = this.styles.root) === null || _this$styles$root2 === void 0 ? void 0 : _this$styles$root2.height) || ((_this$styles$activeHe = this.styles.activeHeaderText) === null || _this$styles$activeHe === void 0 ? void 0 : _this$styles$activeHe.fontSize) || 16
+      })));
+    })), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [this.styles.activeIndicator, {
+        transform: [{
+          translateX: this.indicatorPosition
+        }, {
+          scaleX: this.indicatorWidth
+        }]
+      }]
+    }));
+  }
+  renderWidget(props) {
+    this.setPosition();
+    const activeIndicator = this.styles.activeIndicator;
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        overflow: 'hidden'
+      }
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: {
+        transform: [{
+          translateX: this.headerScrollPosition
+        }]
+      },
+      onLayout: this.setHeaderPanelPositon.bind(this)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this._background, props.data.map((header, i) => {
+      const isSelected = i === props.selectedTabIndex;
+      return /*#__PURE__*/React.createElement(Tappable, {
+        onTap: this.onTabSelection.bind(this, i),
+        key: header.key,
+        styles: this.styles.header.flexGrow ? {
+          flexGrow: this.styles.header.flexGrow
+        } : null
+      }, /*#__PURE__*/React.createElement(View, {
+        onLayout: this.setHeaderPositon.bind(this, i)
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.header, {
+          flexGrow: undefined
+        }, isSelected ? this.styles.activeHeader : null]
+      }, /*#__PURE__*/React.createElement(Text, {
+        numberOfLines: 1,
+        style: [this.styles.headerText, isSelected ? this.styles.activeHeaderText : null]
+      }, header.title))));
+    })), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [this.styles.activeIndicator, {
+        transform: [{
+          translateX: this.indicatorPosition
+        }, {
+          scaleX: this.indicatorWidth
+        }]
+      }]
+    }, activeIndicator.backgroundImage ? /*#__PURE__*/React.createElement(BackgroundComponent, {
+      image: activeIndicator.backgroundImage,
+      position: activeIndicator.backgroundPosition,
+      size: activeIndicator.backgroundSize,
+      repeat: activeIndicator.backgroundRepeat,
+      resizeMode: activeIndicator.backgroundResizeMode,
+      style: {
+        borderRadius: this.styles.root.borderRadius
+      }
+    }) : null, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.arrowIndicator
+    }, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.arrowIndicatorDot
+    })))));
+  }
+}
+//# sourceMappingURL=tabheader.component.js.map

package/components/container/tabs/tabheader/tabheader.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Animated","Easing","Text","View","BaseComponent","BaseComponentState","WmTabheaderProps","DEFAULT_CLASS","Tappable","createSkeleton","BackgroundComponent","WmTabheaderState","WmTabheader","constructor","props","_defineProperty","Value","headerScrollPosition","addListener","_ref","value","headerScrollPositionValue","setHeaderPanelPositon","nativeEvent","headerPanelLayout","layout","setHeaderPositon","index","headersLayout","selectedTabIndex","forceUpdate","onTabSelection","state","onIndexChange","setPosition","_this$headersLayout$s","_this$headerPanelLayo","_this$headerPanelLayo2","toIndicatorPosition","toIndicatorWidth","width","toHeaderScrollPosition","totalWidth","data","length","forEach","p","i","minScrollPosition","maxScrollPosition","Math","max","min","positionIndicator","position","isRTL","parallel","timing","useNativeDriver","toValue","duration","easing","linear","indicatorWidth","indicatorPosition","start","renderSkeleton","createElement","style","transform","translateX","onLayout","bind","styles","root","map","header","_this$styles$root","_this$styles$root2","_this$styles$activeHe","isSelected","onTap","key","flex","activeHeader","theme","borderRadius","height","activeHeaderText","fontSize","activeIndicator","scaleX","renderWidget","overflow","_background","flexGrow","undefined","numberOfLines","headerText","title","backgroundImage","image","backgroundPosition","size","backgroundSize","repeat","backgroundRepeat","resizeMode","backgroundResizeMode","arrowIndicator","arrowIndicatorDot"],"sources":["tabheader.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, Easing, LayoutChangeEvent, LayoutRectangle, Text, View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmTabheaderProps from './tabheader.props';\nimport { DEFAULT_CLASS, WmTabheaderStyles } from './tabheader.styles';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\nimport WmSkeleton, { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\nimport { BackgroundComponent } from '@wavemaker/app-rn-runtime/styles/background.component';\n\nexport class WmTabheaderState extends BaseComponentState<WmTabheaderProps> {\n}\n\nexport default class WmTabheader extends BaseComponent<WmTabheaderProps, WmTabheaderState, WmTabheaderStyles> {\n\n  private headerPanelLayout: LayoutRectangle = null as any;\n  private headersLayout: LayoutRectangle[] = [];\n  private headerScrollPosition = new Animated.Value(0);\n  private headerScrollPositionValue = 0;\n  private indicatorPosition = new Animated.Value(0);\n  private indicatorWidth = new Animated.Value(0);\n\n  constructor(props: WmTabheaderProps) {\n    super(props, DEFAULT_CLASS, new WmTabheaderProps(), new WmTabheaderState());\n    this.headerScrollPosition.addListener(({value}) => this.headerScrollPositionValue = value);\n  }\n\n  setHeaderPanelPositon(nativeEvent: LayoutChangeEvent) {\n    this.headerPanelLayout = nativeEvent.nativeEvent.layout;\n  }\n\n  setHeaderPositon(index: number, nativeEvent: LayoutChangeEvent) {\n    this.headersLayout[index] = nativeEvent.nativeEvent.layout;\n    if (index === this.props.selectedTabIndex) {\n      this.forceUpdate();\n    }\n  }\n\n  onTabSelection(index: number) {\n    if (this.state.props.selectedTabIndex != index) {\n      this.state.props.onIndexChange && this.state.props.onIndexChange(index);\n    }\n  }\n\n  setPosition() {\n    const selectedTabIndex = this.state.props.selectedTabIndex;\n    let toIndicatorPosition = 0;\n    let toIndicatorWidth = this.headersLayout[selectedTabIndex]?.width || 0;\n    let toHeaderScrollPosition = this.headerScrollPositionValue;\n    let totalWidth = 0;\n    if (this.state.props.data.length !== this.headersLayout.length) {\n      return;\n    }\n    this.headersLayout.forEach((p, i) => {\n      if (i < selectedTabIndex) {\n        toIndicatorPosition += p.width;\n      }\n      totalWidth += p.width;\n    });\n    toHeaderScrollPosition = -1 * (toIndicatorPosition - (this.headerPanelLayout?.width || 0) / 2 + toIndicatorWidth/ 2) ;\n    const minScrollPosition = -1 * (totalWidth - (this.headerPanelLayout?.width || 0));\n    const maxScrollPosition = 0;\n    toHeaderScrollPosition = Math.max(minScrollPosition, toHeaderScrollPosition);\n    toHeaderScrollPosition = Math.min(maxScrollPosition, toHeaderScrollPosition);\n    let positionIndicator = (toIndicatorPosition - (100 - toIndicatorWidth) / 2);\n    let position = this.isRTL?-positionIndicator:positionIndicator;\n    Animated.parallel([\n      Animated.timing(this.headerScrollPosition, {\n        useNativeDriver: true,\n        toValue:  toHeaderScrollPosition,\n        duration: 200,\n        easing: Easing.linear\n      }),\n      Animated.timing(this.indicatorWidth, {\n        useNativeDriver: true,\n        toValue:  toIndicatorWidth / 100,\n        duration: 200,\n        easing: Easing.linear\n      }),\n      Animated.timing(this.indicatorPosition, {\n        useNativeDriver: true,\n        toValue:  position,\n        duration: 200,\n        easing: Easing.linear\n      })\n    ]).start();\n  }\n\n  public renderSkeleton(props: WmTabheaderProps){\n    return(\n      <Animated.View style={{\n        transform: [{\n          translateX: this.headerScrollPosition\n        }]\n      }}\n      onLayout={this.setHeaderPanelPositon.bind(this)}>\n        <View style={this.styles.root}>\n          {this.props.data.map((header ,i) => {\n            const isSelected = i === this.props.selectedTabIndex;\n            return (\n              <Tappable onTap={this.onTabSelection.bind(this, i)} key={header.key} styles={{flex: 1}}>\n                <View onLayout={this.setHeaderPositon.bind(this, i)} style={[\n                  this.styles.header, \n                  isSelected ? this.styles.activeHeader : null]}>\n                  {\n                    createSkeleton(this.theme, { root: { borderRadius: 4 }} as WmSkeletonStyles, {\n                      ...this.styles.root,\n                      width: this.styles.root?.width || \"100%\",\n                      height: this.styles.root?.height || this.styles.activeHeaderText?.fontSize || 16\n                    })\n                  }\n                </View>\n              </Tappable>\n            );\n          })}\n        </View>\n        <Animated.View style={[this.styles.activeIndicator, {\n          transform: [{\n            translateX: this.indicatorPosition\n          }, {\n            scaleX: this.indicatorWidth\n          }]\n        }]}></Animated.View>\n      </Animated.View>\n\n    )\n  }\n\n  renderWidget(props: WmTabheaderProps) {\n    this.setPosition();\n    const activeIndicator = this.styles.activeIndicator as any;\n    return (\n      <View style={{overflow: 'hidden'}}>\n      <Animated.View style={{\n        transform: [{\n          translateX: this.headerScrollPosition\n        }]\n      }}\n      onLayout={this.setHeaderPanelPositon.bind(this)}>\n        <View style={this.styles.root}>\n          {this._background}\n          {props.data.map((header ,i) => {\n            const isSelected = i === props.selectedTabIndex ;\n            return (\n              <Tappable onTap={this.onTabSelection.bind(this, i)}\n                key={header.key} \n                styles={this.styles.header.flexGrow ? {flexGrow: this.styles.header.flexGrow} : null}>\n                <View onLayout={this.setHeaderPositon.bind(this, i)}>\n                  <View style={[\n                    this.styles.header,\n                    {flexGrow: undefined},\n                    isSelected ? this.styles.activeHeader : null]}>\n                    <Text numberOfLines={1} style={[\n                      this.styles.headerText, \n                      isSelected ? this.styles.activeHeaderText : null]}>{header.title}</Text>\n                  </View>\n                </View>\n              </Tappable>\n            );\n          })}\n        </View>\n        <Animated.View style={[this.styles.activeIndicator, {\n          transform: [{\n            translateX: this.indicatorPosition\n          }, {\n            scaleX: this.indicatorWidth\n          }]\n        }]}>\n          {activeIndicator.backgroundImage ? (<BackgroundComponent\n            image={activeIndicator.backgroundImage}\n            position={activeIndicator.backgroundPosition}\n            size={activeIndicator.backgroundSize}\n            repeat={activeIndicator.backgroundRepeat}\n            resizeMode={activeIndicator.backgroundResizeMode}\n            style={{borderRadius: this.styles.root.borderRadius}}\n          ></BackgroundComponent>) : null }\n          <View style={this.styles.arrowIndicator}>\n            <View style={this.styles.arrowIndicatorDot}></View>\n          </View>\n        </Animated.View>\n      </Animated.View>\n      </View>\n    ); \n  }\n}\n"],"mappings":"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"}

package/components/container/tabs/tabheader/tabheader.props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseProps","WmTabheaderProps","constructor","arguments","_defineProperty"],"sources":["tabheader.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmTabheaderProps extends BaseProps {\n  data: {icon: string, key: string, title: string}[] = [] as any;\n  selectedTabIndex = 0;\n  onIndexChange?: (index: number) => any = null as any;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,gBAAgB,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,eACD,EAAE;IAAAA,eAAA,2BACpC,CAAC;IAAAA,eAAA,wBACqB,IAAI;EAAA;AAC/C"}

package/components/container/tabs/tabheader/tabheader.styles.js

@@ -0,0 +1,64 @@
+import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+export const DEFAULT_CLASS = 'app-tabheader';
+BASE_THEME.registerStyle((themeVariables, addStyle) => {
+  const defaultStyles = {
+    root: {
+      flexDirection: 'row',
+      minWidth: '100%',
+      overflow: 'visible',
+      backgroundColor: themeVariables.tabHeaderBgColor
+    },
+    text: {},
+    header: {
+      backgroundColor: themeVariables.tabHeaderBgColor,
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+      minWidth: 80,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      flexGrow: 1
+    },
+    headerIcon: {
+      text: {
+        color: themeVariables.tabHeaderIconColor
+      }
+    },
+    headerText: {
+      color: themeVariables.tabHeaderTextColor,
+      overflow: 'visible',
+      fontFamily: themeVariables.baseFont,
+      fontWeight: 'bold',
+      fontSize: 16,
+      textTransform: 'capitalize'
+    },
+    activeHeader: {
+      backgroundColor: themeVariables.tabActiveHeaderBgColor
+    },
+    activeIndicator: {
+      backgroundColor: themeVariables.tabActiveIndicatorBgColor,
+      width: 100,
+      height: 4,
+      marginTop: -4,
+      backgroundPosition: '0px center',
+      backgroundSize: '48px 48px',
+      backgroundRepeat: 'no-repeat'
+    },
+    activeHeaderIcon: {
+      text: {
+        color: themeVariables.tabActiveHeaderIconColor
+      }
+    },
+    activeHeaderText: {
+      color: themeVariables.tabActiveHeaderTextColor
+    },
+    arrowIndicator: {
+      display: 'none'
+    },
+    arrowIndicatorDot: {
+      display: 'none'
+    },
+    skeleton: {}
+  };
+  addStyle(DEFAULT_CLASS, '', defaultStyles);
+});
+//# sourceMappingURL=tabheader.styles.js.map

package/components/container/tabs/tabheader/tabheader.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BASE_THEME","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","flexDirection","minWidth","overflow","backgroundColor","tabHeaderBgColor","text","header","paddingHorizontal","paddingVertical","justifyContent","flexGrow","headerIcon","color","tabHeaderIconColor","headerText","tabHeaderTextColor","fontFamily","baseFont","fontWeight","fontSize","textTransform","activeHeader","tabActiveHeaderBgColor","activeIndicator","tabActiveIndicatorBgColor","width","height","marginTop","backgroundPosition","backgroundSize","backgroundRepeat","activeHeaderIcon","tabActiveHeaderIconColor","activeHeaderText","tabActiveHeaderTextColor","arrowIndicator","display","arrowIndicatorDot","skeleton"],"sources":["tabheader.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { TextStyle, ViewStyle } from 'react-native';\nimport { WmIconStyles } from '@wavemaker/app-rn-runtime/components/basic/icon/icon.styles';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmTabheaderStyles = BaseStyles & {\n    activeIndicator: ViewStyle,\n    header: ViewStyle,\n    headerIcon: WmIconStyles,\n    headerText: TextStyle,\n    arrowIndicator: ViewStyle,\n    arrowIndicatorDot: ViewStyle,\n    activeHeader: ViewStyle,\n    activeHeaderIcon: WmIconStyles,\n    activeHeaderText: TextStyle,\n    skeleton: WmSkeletonStyles \n};\n\nexport const DEFAULT_CLASS = 'app-tabheader';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles = {\n        root: {\n            flexDirection: 'row',\n            minWidth: '100%',\n            overflow: 'visible',\n            backgroundColor: themeVariables.tabHeaderBgColor,\n        },\n        text: {},\n        header: {\n            backgroundColor: themeVariables.tabHeaderBgColor,\n            paddingHorizontal: 12,\n            paddingVertical: 12,\n            minWidth: 80,\n            flexDirection: 'row',\n            justifyContent: 'center',\n            flexGrow: 1\n        },\n        headerIcon: {\n            text: {\n                color: themeVariables.tabHeaderIconColor\n            }\n        } as WmIconStyles,\n        headerText: {\n            color: themeVariables.tabHeaderTextColor,\n            overflow: 'visible',\n            fontFamily: themeVariables.baseFont,\n            fontWeight: 'bold',\n            fontSize: 16,\n            textTransform: 'capitalize'\n        },\n        activeHeader: {\n            backgroundColor: themeVariables.tabActiveHeaderBgColor\n        },\n        activeIndicator: {\n            backgroundColor: themeVariables.tabActiveIndicatorBgColor,\n            width: 100,\n            height: 4,\n            marginTop: -4,\n            backgroundPosition: '0px center',\n            backgroundSize: '48px 48px',\n            backgroundRepeat: 'no-repeat'\n        },\n        activeHeaderIcon: {\n            text: {\n                color: themeVariables.tabActiveHeaderIconColor\n            }\n        } as WmIconStyles,\n        activeHeaderText: {\n            color: themeVariables.tabActiveHeaderTextColor \n        },\n        arrowIndicator: {\n            display: 'none'\n        },\n        arrowIndicatorDot: {\n            display: 'none'\n        },\n        skeleton: {} as WmSkeletonStyles\n    } as WmTabheaderStyles;\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAmB/D,OAAO,MAAMC,aAAa,GAAG,eAAe;AAC5CD,UAAU,CAACE,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAa,GAAG;IAClBC,IAAI,EAAE;MACFC,aAAa,EAAE,KAAK;MACpBC,QAAQ,EAAE,MAAM;MAChBC,QAAQ,EAAE,SAAS;MACnBC,eAAe,EAAEP,cAAc,CAACQ;IACpC,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,MAAM,EAAE;MACJH,eAAe,EAAEP,cAAc,CAACQ,gBAAgB;MAChDG,iBAAiB,EAAE,EAAE;MACrBC,eAAe,EAAE,EAAE;MACnBP,QAAQ,EAAE,EAAE;MACZD,aAAa,EAAE,KAAK;MACpBS,cAAc,EAAE,QAAQ;MACxBC,QAAQ,EAAE;IACd,CAAC;IACDC,UAAU,EAAE;MACRN,IAAI,EAAE;QACFO,KAAK,EAAEhB,cAAc,CAACiB;MAC1B;IACJ,CAAiB;IACjBC,UAAU,EAAE;MACRF,KAAK,EAAEhB,cAAc,CAACmB,kBAAkB;MACxCb,QAAQ,EAAE,SAAS;MACnBc,UAAU,EAAEpB,cAAc,CAACqB,QAAQ;MACnCC,UAAU,EAAE,MAAM;MAClBC,QAAQ,EAAE,EAAE;MACZC,aAAa,EAAE;IACnB,CAAC;IACDC,YAAY,EAAE;MACVlB,eAAe,EAAEP,cAAc,CAAC0B;IACpC,CAAC;IACDC,eAAe,EAAE;MACbpB,eAAe,EAAEP,cAAc,CAAC4B,yBAAyB;MACzDC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE,CAAC;MACTC,SAAS,EAAE,CAAC,CAAC;MACbC,kBAAkB,EAAE,YAAY;MAChCC,cAAc,EAAE,WAAW;MAC3BC,gBAAgB,EAAE;IACtB,CAAC;IACDC,gBAAgB,EAAE;MACd1B,IAAI,EAAE;QACFO,KAAK,EAAEhB,cAAc,CAACoC;MAC1B;IACJ,CAAiB;IACjBC,gBAAgB,EAAE;MACdrB,KAAK,EAAEhB,cAAc,CAACsC;IAC1B,CAAC;IACDC,cAAc,EAAE;MACZC,OAAO,EAAE;IACb,CAAC;IACDC,iBAAiB,EAAE;MACfD,OAAO,EAAE;IACb,CAAC;IACDE,QAAQ,EAAE,CAAC;EACf,CAAsB;EACtBzC,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC"}

package/components/container/tabs/tabpane/tabpane.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmTabpaneProps","DEFAULT_CLASS","WmTabpaneState","constructor","arguments","_defineProperty","WmTabpane","props","onPartialLoad","invokeEventCallback","renderContent","renderPartial","state","isPartialLoaded","setTimeout","updateState","bind","children","componentDidMount","tabs","parent","addTabPane","proxy","_onSelect","_onDeselect","select","selectTabPane","renderWidget","createElement","style","styles","root","_background"],"sources":["tabpane.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmTabpaneProps from './tabpane.props';\nimport { DEFAULT_CLASS, WmTabpaneStyles } from './tabpane.styles';\nimport WmTabs from '../tabs.component';\n\nexport class WmTabpaneState extends BaseComponentState<WmTabpaneProps> {\n  isPartialLoaded = false;\n}\n\nexport default class WmTabpane extends BaseComponent<WmTabpaneProps, WmTabpaneState, WmTabpaneStyles> {\n\n  constructor(props: WmTabpaneProps) {\n    super(props, DEFAULT_CLASS, new WmTabpaneProps());\n  }\n\n  onPartialLoad() {\n    this.invokeEventCallback('onLoad', [null, this]);\n  }\n\n  renderContent(props: WmTabpaneProps) {\n    if (props.renderPartial) {\n      if (!this.state.isPartialLoaded) {\n        setTimeout(() => {\n          this.updateState({\n            isPartialLoaded: true\n          } as WmTabpaneState);\n        });\n      }\n      return props.renderPartial(this.onPartialLoad.bind(this));\n    }\n    return props.children;\n  }\n\n  componentDidMount() {\n    const tabs = (this.parent) as WmTabs;\n    tabs.addTabPane(this.proxy as WmTabpane);\n    super.componentDidMount();\n  }\n\n  _onSelect() {\n    this.invokeEventCallback('onSelect', [null, this.proxy]);\n  }\n  _onDeselect() {\n    this.invokeEventCallback('onDeselect', [null, this.proxy]);\n  }\n\n  select() {\n    (this.parent as WmTabs).selectTabPane(this);\n  }\n\n  renderWidget(props: WmTabpaneProps) {\n    return (<View style={this.styles.root}>{this._background}{this.renderContent(props)}</View>);\n  }\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,cAAc,MAAM,iBAAiB;AAC5C,SAASC,aAAa,QAAyB,kBAAkB;AAGjE,OAAO,MAAMC,cAAc,SAASH,kBAAkB,CAAiB;EAAAI,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,0BACnD,KAAK;EAAA;AACzB;AAEA,eAAe,MAAMC,SAAS,SAASR,aAAa,CAAkD;EAEpGK,WAAWA,CAACI,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEN,aAAa,EAAE,IAAID,cAAc,CAAC,CAAC,CAAC;EACnD;EAEAQ,aAAaA,CAAA,EAAG;IACd,IAAI,CAACC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;EAClD;EAEAC,aAAaA,CAACH,KAAqB,EAAE;IACnC,IAAIA,KAAK,CAACI,aAAa,EAAE;MACvB,IAAI,CAAC,IAAI,CAACC,KAAK,CAACC,eAAe,EAAE;QAC/BC,UAAU,CAAC,MAAM;UACf,IAAI,CAACC,WAAW,CAAC;YACfF,eAAe,EAAE;UACnB,CAAmB,CAAC;QACtB,CAAC,CAAC;MACJ;MACA,OAAON,KAAK,CAACI,aAAa,CAAC,IAAI,CAACH,aAAa,CAACQ,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D;IACA,OAAOT,KAAK,CAACU,QAAQ;EACvB;EAEAC,iBAAiBA,CAAA,EAAG;IAClB,MAAMC,IAAI,GAAI,IAAI,CAACC,MAAiB;IACpCD,IAAI,CAACE,UAAU,CAAC,IAAI,CAACC,KAAkB,CAAC;IACxC,KAAK,CAACJ,iBAAiB,CAAC,CAAC;EAC3B;EAEAK,SAASA,CAAA,EAAG;IACV,IAAI,CAACd,mBAAmB,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,CAACa,KAAK,CAAC,CAAC;EAC1D;EACAE,WAAWA,CAAA,EAAG;IACZ,IAAI,CAACf,mBAAmB,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,CAACa,KAAK,CAAC,CAAC;EAC5D;EAEAG,MAAMA,CAAA,EAAG;IACN,IAAI,CAACL,MAAM,CAAYM,aAAa,CAAC,IAAI,CAAC;EAC7C;EAEAC,YAAYA,CAACpB,KAAqB,EAAE;IAClC,oBAAQX,KAAA,CAAAgC,aAAA,CAAC/B,IAAI;MAACgC,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAAE,IAAI,CAACC,WAAW,EAAE,IAAI,CAACtB,aAAa,CAACH,KAAK,CAAQ,CAAC;EAC7F;AACF"}

package/components/container/tabs/tabpane/tabpane.props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseProps","WmTabpaneProps","constructor","arguments","_defineProperty"],"sources":["tabpane.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmTabpaneProps extends BaseProps {\n  children: any;\n  paneicon: string = null as any;\n  title: string = 'Tab Title';\n  renderPartial?: Function;\n  isPartialLoaded = false;\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,cAAc,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA;IAAAA,eAAA,mBAEjC,IAAI;IAAAA,eAAA,gBACP,WAAW;IAAAA,eAAA;IAAAA,eAAA,0BAET,KAAK;EAAA;AACzB"}

package/components/container/tabs/tabs.component.js

@@ -0,0 +1,229 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React from 'react';
+import { View } from 'react-native';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import * as SwipeAnimation from '@wavemaker/app-rn-runtime/gestures/swipe.animation';
+import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
+import WmTabsProps from './tabs.props';
+import { DEFAULT_CLASS } from './tabs.styles';
+import WmTabheader from './tabheader/tabheader.component';
+export class WmTabsState extends BaseComponentState {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "tabsShown", []);
+    _defineProperty(this, "selectedTabIndex", 0);
+  }
+}
+export default class WmTabs extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmTabsProps(), new WmTabsState());
+    _defineProperty(this, "tabPanes", []);
+    _defineProperty(this, "newIndex", 0);
+    _defineProperty(this, "tabLayout", null);
+    _defineProperty(this, "tabPaneHeights", []);
+    _defineProperty(this, "animationView", null);
+    _defineProperty(this, "animationHandlers", {
+      bounds: e => {
+        var _this$tabLayout;
+        const activeTabIndex = this.state.selectedTabIndex,
+          w = ((_this$tabLayout = this.tabLayout) === null || _this$tabLayout === void 0 ? void 0 : _this$tabLayout.width) || 0,
+          noOfTabs = this.tabPanes.length;
+        return {
+          lower: -1 * (activeTabIndex - (activeTabIndex === 0 ? 0 : 1)) * w,
+          center: -1 * activeTabIndex * w,
+          upper: -1 * (activeTabIndex + (activeTabIndex === noOfTabs - 1 ? 0 : 1)) * w
+        };
+      },
+      onLower: e => {
+        this.onChange(this.state.selectedTabIndex - 1);
+      },
+      onUpper: e => {
+        this.onChange(this.state.selectedTabIndex + 1);
+      }
+    });
+    const selectedIndex = props.defaultpaneindex || 0;
+    const tabsShown = [];
+    tabsShown[selectedIndex] = true;
+    this.updateState({
+      selectedTabIndex: selectedIndex,
+      tabsShown: tabsShown
+    });
+  }
+  setTabLayout(event) {
+    this.tabLayout = event.nativeEvent.layout;
+    this.forceUpdate(() => {
+      this.goToTab();
+    });
+  }
+  setTabPaneHeights(index, nativeEvent) {
+    var _nativeEvent$nativeEv;
+    this.tabPaneHeights[index] = (_nativeEvent$nativeEv = nativeEvent.nativeEvent.layout) === null || _nativeEvent$nativeEv === void 0 ? void 0 : _nativeEvent$nativeEv.height;
+    if (index === this.state.selectedTabIndex) {
+      this.forceUpdate();
+    }
+  }
+  setTabShown(tabIndex, callback) {
+    if (!this.state.tabsShown[tabIndex]) {
+      const tabsShown = [...this.state.tabsShown];
+      tabsShown[tabIndex] = true;
+      setTimeout(() => {
+        this.updateState({
+          tabsShown: tabsShown
+        }, callback);
+      }, 300);
+    } else {
+      callback && callback();
+    }
+  }
+  addTabPane(tabPane) {
+    const i = this.tabPanes.findIndex(t => t.props.name === tabPane.props.name);
+    if (i >= 0) {
+      this.tabPanes[i] = tabPane;
+    } else {
+      this.tabPanes[this.newIndex++] = tabPane;
+    }
+  }
+  selectTabPane(tabPane) {
+    this.goToTab(this.tabPanes.indexOf(tabPane));
+  }
+  goToTab() {
+    var _this$tabLayout2, _this$animationView;
+    let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.selectedTabIndex;
+    const position = -1 * index * (((_this$tabLayout2 = this.tabLayout) === null || _this$tabLayout2 === void 0 ? void 0 : _this$tabLayout2.width) || 0);
+    (_this$animationView = this.animationView) === null || _this$animationView === void 0 ? void 0 : _this$animationView.setPosition(position).then(() => this.onChange(index));
+  }
+  prev() {
+    var _this$animationView2;
+    (_this$animationView2 = this.animationView) === null || _this$animationView2 === void 0 ? void 0 : _this$animationView2.goToLower();
+  }
+  next() {
+    var _this$animationView3;
+    (_this$animationView3 = this.animationView) === null || _this$animationView3 === void 0 ? void 0 : _this$animationView3.goToLower();
+  }
+  onChange(newIndex) {
+    if (newIndex < 0 || newIndex >= this.tabPanes.length) {
+      return;
+    }
+    const oldIndex = this.state.selectedTabIndex;
+    const deselectedTab = this.tabPanes[this.state.selectedTabIndex];
+    this.newIndex = newIndex;
+    deselectedTab === null || deselectedTab === void 0 ? void 0 : deselectedTab._onDeselect();
+    this.updateState({
+      selectedTabIndex: newIndex
+    }, () => {
+      this.setTabShown(newIndex, () => {
+        const selectedTab = this.tabPanes[newIndex];
+        selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab._onSelect();
+        this.invokeEventCallback('onChange', [{}, this.proxy, newIndex, oldIndex]);
+      });
+    });
+  }
+  renderSkeleton(props) {
+    const tabPanes = React.Children.toArray(this.props.children).filter((item, index) => item.props.show != false);
+    const headerData = tabPanes.map((p, i) => ({
+      title: p.props.title || 'Tab Title',
+      icon: '',
+      key: `tab-${p.props.title}-${i}`
+    }));
+    return /*#__PURE__*/React.createElement(View, {
+      style: [this.styles.root, {
+        borderBottomWidth: 0
+      }]
+    }, /*#__PURE__*/React.createElement(View, {
+      onLayout: this.setTabLayout.bind(this),
+      style: {
+        width: '100%'
+      }
+    }), /*#__PURE__*/React.createElement(WmTabheader, {
+      styles: this.styles.tabHeader,
+      data: headerData,
+      showskeleton: this.props.showskeleton,
+      selectedTabIndex: this.state.selectedTabIndex
+    }), /*#__PURE__*/React.createElement(View
+    //{...this.panResponder.panHandlers}
+    , {
+      style: {
+        width: '100%',
+        //height: this.tabPaneHeights[this.state.selectedTabIndex],
+        overflow: 'hidden'
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'nowrap'
+      }
+    }, tabPanes.map((p, i) => {
+      return /*#__PURE__*/React.createElement(View, {
+        key: `tab-${p.props.title}-${i}`,
+        style: {
+          width: '100%',
+          alignSelf: 'flex-start'
+        },
+        onLayout: this.setTabPaneHeights.bind(this, i)
+      }, p);
+    }))));
+  }
+  renderWidget(props) {
+    const tabPanes = React.Children.toArray(props.children).filter((item, index) => item.props.show != false);
+    const headerData = tabPanes.map((p, i) => ({
+      title: p.props.title || 'Tab Title',
+      icon: '',
+      key: `tab-${p.props.title}-${i}`
+    }));
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this._background, /*#__PURE__*/React.createElement(View, {
+      onLayout: this.setTabLayout.bind(this),
+      style: {
+        width: '100%'
+      }
+    }), /*#__PURE__*/React.createElement(WmTabheader, {
+      styles: this.styles.tabHeader,
+      data: headerData,
+      selectedTabIndex: this.state.selectedTabIndex,
+      onIndexChange: this.goToTab.bind(this)
+    }), /*#__PURE__*/React.createElement(View, {
+      style: [{
+        width: '100%',
+        flex: 1
+      }, this.styles.root.height ? isWebPreviewMode() ? {
+        'overflow-x': 'hidden',
+        'overflow-y': 'auto'
+      } : {
+        overflow: 'scroll'
+      } : {
+        overflow: 'hidden',
+        maxHeight: this.tabPaneHeights[this.state.selectedTabIndex]
+      }]
+    }, /*#__PURE__*/React.createElement(SwipeAnimation.View, {
+      enableGestures: props.enablegestures,
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'nowrap'
+      },
+      direction: "horizontal",
+      ref: r => {
+        this.animationView = r;
+      },
+      handlers: this.animationHandlers
+    }, tabPanes.map((p, i) => {
+      return /*#__PURE__*/React.createElement(View, {
+        style: {
+          width: '100%',
+          height: this.styles.root.height ? undefined : 1000000,
+          alignSelf: 'flex-start'
+        }
+      }, /*#__PURE__*/React.createElement(View, {
+        key: `tab-${p.props.title}-${i}`,
+        style: {
+          width: '100%',
+          alignSelf: 'flex-start'
+        },
+        onLayout: this.setTabPaneHeights.bind(this, i)
+      }, p));
+    }))));
+  }
+}
+//# sourceMappingURL=tabs.component.js.map

package/components/container/tabs/tabs.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","SwipeAnimation","isWebPreviewMode","WmTabsProps","DEFAULT_CLASS","WmTabheader","WmTabsState","constructor","arguments","_defineProperty","WmTabs","props","bounds","e","_this$tabLayout","activeTabIndex","state","selectedTabIndex","w","tabLayout","width","noOfTabs","tabPanes","length","lower","center","upper","onLower","onChange","onUpper","selectedIndex","defaultpaneindex","tabsShown","updateState","setTabLayout","event","nativeEvent","layout","forceUpdate","goToTab","setTabPaneHeights","index","_nativeEvent$nativeEv","tabPaneHeights","height","setTabShown","tabIndex","callback","setTimeout","addTabPane","tabPane","i","findIndex","t","name","newIndex","selectTabPane","indexOf","_this$tabLayout2","_this$animationView","undefined","position","animationView","setPosition","then","prev","_this$animationView2","goToLower","next","_this$animationView3","oldIndex","deselectedTab","_onDeselect","selectedTab","_onSelect","invokeEventCallback","proxy","renderSkeleton","Children","toArray","children","filter","item","show","headerData","map","p","title","icon","key","createElement","style","styles","root","borderBottomWidth","onLayout","bind","tabHeader","data","showskeleton","overflow","flexDirection","flexWrap","alignSelf","renderWidget","_background","onIndexChange","flex","maxHeight","enableGestures","enablegestures","direction","ref","r","handlers","animationHandlers"],"sources":["tabs.component.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, LayoutRectangle, View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport * as SwipeAnimation from '@wavemaker/app-rn-runtime/gestures/swipe.animation';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\n\nimport WmTabsProps from './tabs.props';\nimport { DEFAULT_CLASS, WmTabsStyles } from './tabs.styles';\nimport WmTabpane from './tabpane/tabpane.component';\nimport WmTabheader from './tabheader/tabheader.component';\n\nexport class WmTabsState extends BaseComponentState<WmTabsProps> {\n  tabsShown: boolean[] = [];\n  selectedTabIndex: number = 0;\n}\n\nexport default class WmTabs extends BaseComponent<WmTabsProps, WmTabsState, WmTabsStyles> {\n  public tabPanes = [] as WmTabpane[];\n  private newIndex = 0;\n  private tabLayout: LayoutRectangle = null as any;\n  private tabPaneHeights: number[] = [];\n  private animationView: SwipeAnimation.View | null = null as any;\n  private animationHandlers = {\n    bounds: (e) => {\n      const activeTabIndex = this.state.selectedTabIndex,\n            w = this.tabLayout?.width || 0,\n            noOfTabs = this.tabPanes.length;\n      return {\n        lower: -1 * (activeTabIndex - (activeTabIndex === 0 ? 0 : 1)) * w,\n        center: -1 * activeTabIndex * w,\n        upper:  -1 * (activeTabIndex + (activeTabIndex === noOfTabs - 1 ? 0 : 1)) * w\n      };\n    },\n    onLower: (e) => {\n      this.onChange(this.state.selectedTabIndex - 1);\n    },\n    onUpper: (e) => {\n      this.onChange(this.state.selectedTabIndex + 1);\n    }\n  } as SwipeAnimation.Handlers;\n\n  constructor(props: WmTabsProps) {\n    super(props, DEFAULT_CLASS, new WmTabsProps(), new WmTabsState());\n    const selectedIndex = props.defaultpaneindex || 0;\n    const tabsShown: boolean[] = [];\n    tabsShown[selectedIndex] = true;\n    this.updateState({\n      selectedTabIndex: selectedIndex,\n      tabsShown: tabsShown\n    }as WmTabsState);\n  }\n\n  setTabLayout(event: LayoutChangeEvent) {\n    this.tabLayout = event.nativeEvent.layout;\n    this.forceUpdate(() => {\n      this.goToTab();\n    });\n  }\n\n  setTabPaneHeights(index: number, nativeEvent: LayoutChangeEvent) {\n    this.tabPaneHeights[index] = nativeEvent.nativeEvent.layout?.height;\n    if (index === this.state.selectedTabIndex) {\n      this.forceUpdate();\n    }\n  }\n\n  setTabShown(tabIndex: number, callback: () => any) {\n    if (!this.state.tabsShown[tabIndex]) {\n      const tabsShown = [...this.state.tabsShown];\n      tabsShown[tabIndex] = true;\n      setTimeout(() => {\n        this.updateState({\n          tabsShown: tabsShown\n        } as WmTabsState, callback);\n      }, 300);\n    } else {\n      callback && callback();\n    }\n  }\n\n  addTabPane(tabPane: WmTabpane) {\n    const i = this.tabPanes.findIndex(t => t.props.name === tabPane.props.name);\n    if (i >= 0) {\n      this.tabPanes[i] = tabPane;\n    } else {\n      this.tabPanes[this.newIndex++] = tabPane;\n    }\n  }\n\n  selectTabPane(tabPane: WmTabpane) {\n    this.goToTab(this.tabPanes.indexOf(tabPane));\n  }\n\n  goToTab(index = this.state.selectedTabIndex) {\n    const position = -1 * index * (this.tabLayout?.width || 0);\n    this.animationView?.setPosition(position)\n      .then(() => this.onChange(index));\n  }\n\n  prev() {\n    this.animationView?.goToLower();\n  }\n\n  next() {\n    this.animationView?.goToLower();\n  }\n\n  onChange(newIndex: number) {\n    if (newIndex < 0 || newIndex >= this.tabPanes.length) {\n      return;\n    }\n    const oldIndex = this.state.selectedTabIndex;\n    const deselectedTab = this.tabPanes[this.state.selectedTabIndex];\n    this.newIndex = newIndex;\n    deselectedTab?._onDeselect();\n    this.updateState({\n      selectedTabIndex: newIndex\n    } as WmTabsState, () => {\n      this.setTabShown(newIndex, () => {\n        const selectedTab = this.tabPanes[newIndex];\n        selectedTab?._onSelect();\n        this.invokeEventCallback('onChange', [{}, this.proxy, newIndex, oldIndex]);\n      });\n    });\n  }\n\n  public renderSkeleton(props: WmTabsProps){\n    const tabPanes =  React.Children.toArray(this.props.children)\n    .filter((item: any, index: number) => item.props.show != false);\n    const headerData = tabPanes.map((p: any, i: number) => \n      ({title: p.props.title || 'Tab Title', icon: '', key:  `tab-${p.props.title}-${i}`}));\n    return(\n      <View style={[this.styles.root, { borderBottomWidth: 0}]}>\n      <View onLayout={this.setTabLayout.bind(this)} style={{width: '100%'}}></View>\n      <WmTabheader\n        styles={this.styles.tabHeader}\n        data={headerData}\n        showskeleton={this.props.showskeleton}\n        selectedTabIndex={this.state.selectedTabIndex}\n      ></WmTabheader>\n      <View \n        //{...this.panResponder.panHandlers}\n        style={{\n          width: '100%',\n          //height: this.tabPaneHeights[this.state.selectedTabIndex],\n          overflow: 'hidden'\n        }} >\n        <View style={{\n          flexDirection: 'row',\n          flexWrap: 'nowrap'\n        }}>\n          {tabPanes.map((p: any, i) => {\n            return (\n            <View\n              key={`tab-${p.props.title}-${i}`}\n              style={{width: '100%', alignSelf: 'flex-start'}}\n              onLayout={this.setTabPaneHeights.bind(this, i)}>\n              {/* {this.state.tabsShown[i] ? p : null} */}\n              {p}\n            </View>);\n          })}\n        </View>\n      </View>\n    </View>\n\n    )\n  }\n\n  renderWidget(props: WmTabsProps) {\n    const tabPanes =  React.Children.toArray(props.children)\n      .filter((item: any, index: number) => item.props.show != false);\n    const headerData = tabPanes.map((p: any, i: number) => \n      ({title: p.props.title || 'Tab Title', icon: '', key:  `tab-${p.props.title}-${i}`}));\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        <View onLayout={this.setTabLayout.bind(this)} style={{width: '100%'}}></View>\n        <WmTabheader\n          styles={this.styles.tabHeader}\n          data={headerData}\n          selectedTabIndex={this.state.selectedTabIndex}\n          onIndexChange={this.goToTab.bind(this)}\n        ></WmTabheader>\n        <View\n          style={[{\n            width: '100%',\n            flex: 1\n          }, this.styles.root.height ? \n          (isWebPreviewMode() ? {'overflow-x': 'hidden','overflow-y': 'auto'} as any : {overflow: 'scroll'}) \n          : {\n            overflow: 'hidden',\n            maxHeight: this.tabPaneHeights[this.state.selectedTabIndex],\n          }]} >\n          <SwipeAnimation.View \n            enableGestures={props.enablegestures}\n            style={{\n              flexDirection: 'row',\n              flexWrap: 'nowrap'\n            }}\n            direction='horizontal'\n            ref={(r) => {this.animationView = r}}\n            handlers = {this.animationHandlers}\n          >\n            {tabPanes.map((p: any, i) => {\n              return (\n              <View \n                style={{\n                  width: '100%',\n                  height: this.styles.root.height  ? undefined : 1000000,\n                  alignSelf: 'flex-start'}}>\n                <View\n                  key={`tab-${p.props.title}-${i}`}\n                  style={{width: '100%', alignSelf: 'flex-start'}}\n                  onLayout={this.setTabPaneHeights.bind(this, i)}>\n                  {/* {this.state.tabsShown[i] ? p : null} */}\n                  {p}\n                </View>\n              </View>);\n            })}\n          </SwipeAnimation.View>\n        </View>\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}

package/components/container/tabs/tabs.props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseProps","WmTabsProps","constructor","arguments","_defineProperty"],"sources":["tabs.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmTabsProps extends BaseProps {\n  children: any;\n  defaultpaneindex: number = 0;\n  enablegestures = true;\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,WAAW,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA;IAAAA,eAAA,2BAEtB,CAAC;IAAAA,eAAA,yBACX,IAAI;EAAA;AACvB"}

package/components/container/tabs/tabs.styles.js

@@ -0,0 +1,57 @@
+import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+import { defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';
+export const DEFAULT_CLASS = 'app-tabs';
+BASE_THEME.registerStyle((themeVariables, addStyle) => {
+  const defaultStyles = defineStyles({
+    root: {
+      minHeight: 240,
+      elevation: 0,
+      borderBottomWidth: 1,
+      borderStyle: 'solid',
+      borderColor: themeVariables.tabBorderColor
+    },
+    text: {},
+    tabHeader: {}
+  });
+  addStyle(DEFAULT_CLASS, '', defaultStyles);
+  addStyle('tabs-with-arrow-indicator', '', {
+    tabHeader: {
+      root: {
+        backgroundColor: themeVariables.transparent
+      },
+      header: {
+        marginBottom: 16
+      },
+      activeIndicator: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: 2,
+        height: 0
+      },
+      arrowIndicator: {
+        display: 'flex',
+        backgroundColor: themeVariables.tabArrowIndicatorBgColor,
+        width: 24,
+        height: 24,
+        justifyContent: 'center',
+        alignItems: 'center',
+        transform: [{
+          rotateZ: '45deg'
+        }]
+      },
+      arrowIndicatorDot: {
+        display: 'flex',
+        backgroundColor: themeVariables.tabArrowIndicatorDotColor,
+        width: 4,
+        height: 4,
+        borderRadius: 8,
+        transform: [{
+          translateX: -2
+        }, {
+          translateY: -2
+        }]
+      }
+    }
+  });
+});
+//# sourceMappingURL=tabs.styles.js.map