@wavemaker/app-rn-runtime 11.11.7-rc.218 → 11.12.0-next.28180

package/components/container/container.component.js

@@ -3,7 +3,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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 { View } from 'react-native';
+import { View, Platform, Animated } from 'react-native';
 import WmContainerProps from './container.props';
 import { DEFAULT_CLASS } from './container.styles';
 import { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';
@@ -11,16 +11,39 @@ import { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animate
 import { PartialHost, PartialHostState } from './partial-host.component';
 import { createSkeleton } from '../basic/skeleton/skeleton.component';
 import { ScrollView } from 'react-native-gesture-handler';
-import { StickyView } from '@wavemaker/app-rn-runtime/core/sticky-container.component';
+import { StickyWrapperContext } from '@wavemaker/app-rn-runtime/core/sticky-wrapper';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { StickyContainer } from '@wavemaker/app-rn-runtime/core/components/sticky-container.component';
+import { getParentStyles } from '@wavemaker/app-rn-runtime/core/components/sticky-container.styles';
+import injector from '@wavemaker/app-rn-runtime/core/injector';
 export class WmContainerState extends PartialHostState {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "isPartialLoaded", false);
+    _defineProperty(this, "stickyContainerVisibility", false);
   }
 }
 export default class WmContainer extends PartialHost {
   constructor(props) {
     super(props, DEFAULT_CLASS, new WmContainerProps(), new WmContainerState());
+    _defineProperty(this, "containerRef", void 0);
+    _defineProperty(this, "stickyContainerOpacity", void 0);
+    _defineProperty(this, "appConfig", injector.get('APP_CONFIG'));
+    _defineProperty(this, "insets", {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    });
+    this.containerRef = /*#__PURE__*/React.createRef();
+    this.stickyContainerOpacity = new Animated.Value(1);
+    this.subscribe('updateStickyHeaders', _event => {
+      if (this.props.sticky) {
+        setTimeout(() => {
+          this.getStickyHeaderTranslateY();
+        }, 500);
+      }
+    });
   }
   getBackground() {
     return this._showSkeleton ? null : this._background;
@@ -52,6 +75,58 @@ export default class WmContainer extends PartialHost {
     }
     return null;
   }
+  getStickyHeaderTranslateY() {
+    var _this$appConfig, _this$containerRef;
+    const {
+      stickyContainerTranslateY
+    } = this.context;
+    const isEdgeToEdgeApp = !!((_this$appConfig = this.appConfig) !== null && _this$appConfig !== void 0 && (_this$appConfig = _this$appConfig.edgeToEdgeConfig) !== null && _this$appConfig !== void 0 && _this$appConfig.isEdgeToEdgeApp);
+    (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 || (_this$containerRef = _this$containerRef.current) === null || _this$containerRef === void 0 || _this$containerRef.measure((_x = 0, _y = 0, _width = 0, _height = 0, px = 0, py = 0) => {
+      var _this$insets;
+      const topInsetsInYposition = Platform.OS == 'ios' && !isEdgeToEdgeApp ? ((_this$insets = this.insets) === null || _this$insets === void 0 ? void 0 : _this$insets.top) || 0 : 0;
+      if (stickyContainerTranslateY) {
+        stickyContainerTranslateY.value = py - topInsetsInYposition;
+        this.updateState({
+          stickyContainerVisibility: true
+        });
+      }
+    });
+  }
+  componentDidUpdate(_prevProps, prevState) {
+    if (prevState.stickyContainerVisibility !== this.state.stickyContainerVisibility) {
+      Animated.timing(this.stickyContainerOpacity, {
+        toValue: this.state.stickyContainerVisibility ? 0 : 1,
+        delay: 500,
+        useNativeDriver: true
+      }).start();
+    }
+  }
+  renderStickyContent(props, dimensions, styles) {
+    const {
+      stickyContainerVisibility
+    } = this.state;
+    const {
+      positioningStyles
+    } = getParentStyles(this);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, stickyContainerVisibility ? /*#__PURE__*/React.createElement(StickyContainer, {
+      component: this,
+      theme: this.theme,
+      style: [this.styles.sticky, {
+        backgroundColor: styles.backgroundColor
+      }],
+      positionStyles: positioningStyles,
+      show: props.show
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [dimensions, {
+        backgroundColor: styles.backgroundColor
+      }, this.styles.content]
+    }, this.renderContent(props))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [dimensions, {
+        opacity: this.stickyContainerOpacity
+      }, this.styles.content],
+      ref: this.containerRef
+    }, this.renderContent(props)));
+  }
   renderWidget(props) {
     const dimensions = {
       width: this.styles.root.width ? '100%' : undefined,
@@ -61,31 +136,36 @@ export default class WmContainer extends PartialHost {
       ...this.styles.root,
       ...this.styles.skeleton.root
     } : this.styles.root;
-    if (props.issticky) this.isSticky = true;
-    return /*#__PURE__*/React.createElement(Animatedview, {
-      entryanimation: props.animation,
-      delay: props.animationdelay,
-      style: styles,
-      onLayout: (event, ref) => this.handleLayout(event, ref)
-    }, this.getBackground(), /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(), {
-      target: this,
-      styles: dimensions,
-      disableTouchEffect: this.state.props.disabletoucheffect
-    }), props.issticky ? /*#__PURE__*/React.createElement(StickyView, {
-      component: this,
-      style: this.styles.sticky,
-      theme: this.theme
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles
-    }, this.renderContent(props))) : !props.scrollable ? /*#__PURE__*/React.createElement(View, {
-      style: [dimensions, this.styles.content]
-    }, this.renderContent(props)) : /*#__PURE__*/React.createElement(ScrollView, {
-      style: [dimensions, this.styles.content],
-      onScroll: event => {
-        this.notify('scroll', [event]);
-      },
-      scrollEventThrottle: 48
-    }, this.renderContent(props))));
+    if (props.sticky) {
+      this.isSticky = true;
+    }
+    return /*#__PURE__*/React.createElement(SafeAreaInsetsContext.Consumer, null, (insets = {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }) => {
+      this.insets = insets;
+      return /*#__PURE__*/React.createElement(Animatedview, {
+        entryanimation: props.animation,
+        delay: props.animationdelay,
+        style: styles,
+        onLayout: (event, ref) => {
+          this.handleLayout(event, ref);
+        }
+      }, this.getBackground(), /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(), {
+        target: this,
+        styles: dimensions,
+        disableTouchEffect: this.state.props.disabletoucheffect
+      }), props.sticky ? this.renderStickyContent(props, dimensions, styles) : !props.scrollable ? /*#__PURE__*/React.createElement(View, {
+        style: [dimensions, this.styles.content]
+      }, this.renderContent(props)) : /*#__PURE__*/React.createElement(ScrollView, {
+        style: [dimensions, this.styles.content],
+        onScroll: event => this.notify('scroll', [event]),
+        scrollEventThrottle: 48
+      }, this.renderContent(props))));
+    });
   }
 }
+_defineProperty(WmContainer, "contextType", StickyWrapperContext);
 //# sourceMappingURL=container.component.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","WmContainerProps","DEFAULT_CLASS","Tappable","Animatedview","PartialHost","PartialHostState","createSkeleton","ScrollView","StickyView","WmContainerState","constructor","args","_defineProperty","WmContainer","props","getBackground","_showSkeleton","_background","renderSkeleton","showskeletonchildren","_this$props","dimensions","width","styles","root","undefined","height","skeletonStyles","skeleton","text","theme","createElement","style","opacity","_extends","getTestPropsForAction","target","disableTouchEffect","state","disabletoucheffect","content","renderContent","renderWidget","issticky","isSticky","entryanimation","animation","delay","animationdelay","onLayout","event","ref","handleLayout","component","sticky","scrollable","onScroll","notify","scrollEventThrottle"],"sources":["container.component.tsx"],"sourcesContent":["import React from 'react';\nimport { ColorValue, LayoutChangeEvent, View, ViewStyle } from 'react-native';\n\nimport WmContainerProps from './container.props';\nimport { DEFAULT_CLASS, WmContainerStyles } from './container.styles';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\nimport { PartialHost, PartialHostState } from './partial-host.component';\nimport { createSkeleton } from '../basic/skeleton/skeleton.component';\nimport { WmSkeletonStyles } from '../basic/skeleton/skeleton.styles';\nimport { ScrollView } from 'react-native-gesture-handler';\nimport { StickyView } from '@wavemaker/app-rn-runtime/core/sticky-container.component';\n\nexport class WmContainerState extends PartialHostState<WmContainerProps> {\n  isPartialLoaded = false;\n}\n\nexport default class WmContainer extends PartialHost<WmContainerProps, WmContainerState, WmContainerStyles> {\n  constructor(props: WmContainerProps) {\n    super(props, DEFAULT_CLASS, new WmContainerProps(), new WmContainerState());\n  }\n\n  getBackground(): React.JSX.Element | null {\n    return this._showSkeleton ? null : this._background\n  } \n  \n  public renderSkeleton(props: WmContainerProps): React.ReactNode {\n      if(!props.showskeletonchildren) {\n        const dimensions = {\n          width: this.styles.root.width ? '100%' : undefined,\n          height: this.styles.root.height ? '100%' : undefined\n        };    \n        const skeletonStyles: WmSkeletonStyles = this.props?.styles?.skeleton || { root: {}, text: {}  } as WmSkeletonStyles\n        return createSkeleton(this.theme, skeletonStyles, {\n          ...this.styles.root\n        }, (<View style={[this.styles.root, { opacity: 0 }]}>\n                  <Tappable {...this.getTestPropsForAction()} target={this} styles={dimensions} disableTouchEffect={this.state.props.disabletoucheffect}>\n            <View style={[dimensions as ViewStyle,  this.styles.content]}>{this.renderContent(props)}</View>\n        </Tappable>\n\n        </View>))\n      }\n      return null;\n    }\n\n\n  renderWidget(props: WmContainerProps) {\n    const dimensions = {\n      width: this.styles.root.width ? '100%' : undefined,\n      height: this.styles.root.height ? '100%' : undefined\n    };\n\n    const styles = this._showSkeleton ? {\n      ...this.styles.root,\n      ...this.styles.skeleton.root\n    } : this.styles.root\n    if(props.issticky) this.isSticky = true;\n    return (\n      <Animatedview \n        entryanimation={props.animation} \n        delay={props.animationdelay} \n        style={styles}\n        onLayout={(event: LayoutChangeEvent, ref: React.RefObject<View>) => this.handleLayout(event, ref)}\n      >\n        {this.getBackground()}\n        <Tappable {...this.getTestPropsForAction()} target={this} styles={dimensions} disableTouchEffect={this.state.props.disabletoucheffect}>\n          { props.issticky ? \n            <StickyView\n              component={this}\n              style={this.styles.sticky}\n              theme={this.theme}>\n               <View style={styles}>\n                  {this.renderContent(props)}\n              </View>\n            </StickyView>\n            : !props.scrollable ? \n            <View style={[dimensions as ViewStyle,  this.styles.content]}>\n              {this.renderContent(props)}\n            </View>\n            :<ScrollView style={[dimensions as ViewStyle,  this.styles.content]}\n                onScroll={(event) => {this.notify('scroll', [event])}}\n                scrollEventThrottle={48}>\n              {this.renderContent(props)}\n            </ScrollView>\n          }\n        </Tappable>\n      </Animatedview>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","Platform","Animated","WmContainerProps","DEFAULT_CLASS","Tappable","Animatedview","PartialHost","PartialHostState","createSkeleton","ScrollView","StickyWrapperContext","SafeAreaInsetsContext","StickyContainer","getParentStyles","injector","WmContainerState","constructor","args","_defineProperty","WmContainer","props","get","top","bottom","left","right","containerRef","createRef","stickyContainerOpacity","Value","subscribe","_event","sticky","setTimeout","getStickyHeaderTranslateY","getBackground","_showSkeleton","_background","renderSkeleton","showskeletonchildren","_this$props","dimensions","width","styles","root","undefined","height","skeletonStyles","skeleton","text","theme","createElement","style","opacity","_extends","getTestPropsForAction","target","disableTouchEffect","state","disabletoucheffect","content","renderContent","_this$appConfig","_this$containerRef","stickyContainerTranslateY","context","isEdgeToEdgeApp","appConfig","edgeToEdgeConfig","current","measure","_x","_y","_width","_height","px","py","_this$insets","topInsetsInYposition","OS","insets","value","updateState","stickyContainerVisibility","componentDidUpdate","_prevProps","prevState","timing","toValue","delay","useNativeDriver","start","renderStickyContent","positioningStyles","Fragment","component","backgroundColor","positionStyles","show","ref","renderWidget","isSticky","Consumer","entryanimation","animation","animationdelay","onLayout","event","handleLayout","scrollable","onScroll","notify","scrollEventThrottle"],"sources":["container.component.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, View, ViewStyle, Platform, Animated } from 'react-native';\nimport WmContainerProps from './container.props';\nimport { DEFAULT_CLASS, WmContainerStyles } from './container.styles';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\nimport { PartialHost, PartialHostState } from './partial-host.component';\nimport { createSkeleton } from '../basic/skeleton/skeleton.component';\nimport { WmSkeletonStyles } from '../basic/skeleton/skeleton.styles';\nimport { ScrollView } from 'react-native-gesture-handler';\nimport { StickyWrapperContextType, StickyWrapperContext } from '@wavemaker/app-rn-runtime/core/sticky-wrapper';\nimport { EdgeInsets, SafeAreaInsetsContext } from 'react-native-safe-area-context';\nimport { StickyContainer } from '@wavemaker/app-rn-runtime/core/components/sticky-container.component';\nimport { getParentStyles } from '@wavemaker/app-rn-runtime/core/components/sticky-container.styles';\nimport injector from '@wavemaker/app-rn-runtime/core/injector';\nimport AppConfig from '@wavemaker/app-rn-runtime/core/AppConfig';\n\nexport class WmContainerState extends PartialHostState<WmContainerProps> {\n  isPartialLoaded = false;\n  stickyContainerVisibility = false;\n}\n\nexport default class WmContainer extends PartialHost<WmContainerProps, WmContainerState, WmContainerStyles> {\n  static contextType = StickyWrapperContext;\n  private containerRef: React.RefObject<View>;\n  private stickyContainerOpacity: Animated.Value;\n  private appConfig = injector.get<AppConfig>('APP_CONFIG');\n  insets: EdgeInsets | null = {\n    top: 0, bottom: 0, left: 0, right: 0\n  };\n\n  constructor(props: WmContainerProps) {\n    super(props, DEFAULT_CLASS, new WmContainerProps(), new WmContainerState());\n    this.containerRef = React.createRef();\n    this.stickyContainerOpacity = new Animated.Value(1);\n\n    this.subscribe('updateStickyHeaders', (_event: any) => {\n      if(this.props.sticky){\n        setTimeout(()=>{\n          this.getStickyHeaderTranslateY();\n        }, 500);\n      }\n    })\n  }\n\n  getBackground(): React.JSX.Element | null {\n    return this._showSkeleton ? null : this._background\n  } \n  \n  public renderSkeleton(props: WmContainerProps): React.ReactNode {\n      if(!props.showskeletonchildren) {\n        const dimensions = {\n          width: this.styles.root.width ? '100%' : undefined,\n          height: this.styles.root.height ? '100%' : undefined\n        };    \n        const skeletonStyles: WmSkeletonStyles = this.props?.styles?.skeleton || { root: {}, text: {}  } as WmSkeletonStyles\n        return createSkeleton(this.theme, skeletonStyles, {\n          ...this.styles.root\n        }, (<View style={[this.styles.root, { opacity: 0 }]}>\n                  <Tappable {...this.getTestPropsForAction()} target={this} styles={dimensions} disableTouchEffect={this.state.props.disabletoucheffect}>\n            <View style={[dimensions as ViewStyle,  this.styles.content]}>{this.renderContent(props)}</View>\n        </Tappable>\n\n        </View>))\n      }\n      return null;\n  }\n\n  public getStickyHeaderTranslateY(){\n    const { stickyContainerTranslateY } = this.context as StickyWrapperContextType;\n    const isEdgeToEdgeApp = !!this.appConfig?.edgeToEdgeConfig?.isEdgeToEdgeApp;\n    this.containerRef?.current?.measure((_x = 0, _y = 0, _width = 0, _height = 0, px = 0, py = 0)=>{\n      const topInsetsInYposition = (Platform.OS == 'ios' && !isEdgeToEdgeApp) ? (this.insets?.top || 0): 0\n      if(stickyContainerTranslateY) {\n        stickyContainerTranslateY.value = py - topInsetsInYposition ;\n        this.updateState({ stickyContainerVisibility: true} as WmContainerState);     \n      }\n    })\n  }\n\n  componentDidUpdate(_prevProps: any, prevState: any) {\n    if (prevState.stickyContainerVisibility !== this.state.stickyContainerVisibility) {\n      Animated.timing(this.stickyContainerOpacity, {\n        toValue: this.state.stickyContainerVisibility ? 0 : 1,\n        delay: 500,\n        useNativeDriver: true\n      }).start();\n    }\n  }\n\n  private renderStickyContent(props: WmContainerProps, dimensions: ViewStyle, styles: ViewStyle) {\n    const { stickyContainerVisibility } = this.state;\n    const { positioningStyles } = getParentStyles(this);\n\n    return (\n      <>\n        {stickyContainerVisibility ? (\n          <StickyContainer\n            component={this}\n            theme={this.theme}\n            style={[\n              this.styles.sticky,\n              { backgroundColor: styles.backgroundColor }\n            ]}\n            positionStyles={positioningStyles}\n            show={props.show as boolean}\n          >\n            <View style={[dimensions as ViewStyle, { backgroundColor: styles.backgroundColor }, this.styles.content]}>\n              {this.renderContent(props)}\n            </View>\n          </StickyContainer>\n        ) : <></>}\n        <Animated.View \n          style={[\n            dimensions as ViewStyle, \n            { opacity: this.stickyContainerOpacity }, \n            this.styles.content\n          ]} \n          ref={this.containerRef}\n        >\n          {this.renderContent(props)}\n        </Animated.View>\n      </>\n    );\n  }\n\n  renderWidget(props: WmContainerProps) {\n    const dimensions: ViewStyle = {\n      width: this.styles.root.width ? '100%' : undefined,\n      height: this.styles.root.height ? '100%' : undefined\n    };\n\n    const styles = this._showSkeleton ? {\n      ...this.styles.root,\n      ...this.styles.skeleton.root\n    } : this.styles.root;\n\n    if (props.sticky) {\n      this.isSticky = true;\n    }\n    return (\n      <SafeAreaInsetsContext.Consumer>\n        {(insets = { top: 0, bottom: 0, left: 0, right: 0 }) => {\n          this.insets = insets;\n          return (\n            <Animatedview \n              entryanimation={props.animation} \n              delay={props.animationdelay} \n              style={styles}\n              onLayout={(event: LayoutChangeEvent, ref: React.RefObject<View>) => {\n                this.handleLayout(event, ref);\n              }}\n            >\n              {this.getBackground()}\n              <Tappable \n                {...this.getTestPropsForAction()} \n                target={this} \n                styles={dimensions} \n                disableTouchEffect={this.state.props.disabletoucheffect}\n              >\n                {props.sticky ? (\n                  this.renderStickyContent(props, dimensions, styles)\n                ) : !props.scrollable ? (\n                  <View style={[dimensions as ViewStyle, this.styles.content]}>\n                    {this.renderContent(props)}\n                  </View>\n                ) : (\n                  <ScrollView \n                    style={[dimensions as ViewStyle, this.styles.content]}\n                    onScroll={(event) => this.notify('scroll', [event])}\n                    scrollEventThrottle={48}\n                  >\n                    {this.renderContent(props)}\n                  </ScrollView>\n                )}\n              </Tappable>\n            </Animatedview>\n          );\n        }}\n      </SafeAreaInsetsContext.Consumer>\n    );\n  }\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAA4BC,IAAI,EAAaC,QAAQ,EAAEC,QAAQ,QAAQ,cAAc;AACrF,OAAOC,gBAAgB,MAAM,mBAAmB;AAChD,SAASC,aAAa,QAA2B,oBAAoB;AACrE,SAASC,QAAQ,QAAQ,mDAAmD;AAC5E,SAASC,YAAY,QAAQ,mEAAmE;AAChG,SAASC,WAAW,EAAEC,gBAAgB,QAAQ,0BAA0B;AACxE,SAASC,cAAc,QAAQ,sCAAsC;AAErE,SAASC,UAAU,QAAQ,8BAA8B;AACzD,SAAmCC,oBAAoB,QAAQ,+CAA+C;AAC9G,SAAqBC,qBAAqB,QAAQ,gCAAgC;AAClF,SAASC,eAAe,QAAQ,sEAAsE;AACtG,SAASC,eAAe,QAAQ,mEAAmE;AACnG,OAAOC,QAAQ,MAAM,yCAAyC;AAG9D,OAAO,MAAMC,gBAAgB,SAASR,gBAAgB,CAAmB;EAAAS,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,0BACrD,KAAK;IAAAA,eAAA,oCACK,KAAK;EAAA;AACnC;AAEA,eAAe,MAAMC,WAAW,SAASb,WAAW,CAAwD;EAS1GU,WAAWA,CAACI,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,EAAEjB,aAAa,EAAE,IAAID,gBAAgB,CAAC,CAAC,EAAE,IAAIa,gBAAgB,CAAC,CAAC,CAAC;IAACG,eAAA;IAAAA,eAAA;IAAAA,eAAA,oBAN1DJ,QAAQ,CAACO,GAAG,CAAY,YAAY,CAAC;IAAAH,eAAA,iBAC7B;MAC1BI,GAAG,EAAE,CAAC;MAAEC,MAAM,EAAE,CAAC;MAAEC,IAAI,EAAE,CAAC;MAAEC,KAAK,EAAE;IACrC,CAAC;IAIC,IAAI,CAACC,YAAY,gBAAG5B,KAAK,CAAC6B,SAAS,CAAC,CAAC;IACrC,IAAI,CAACC,sBAAsB,GAAG,IAAI3B,QAAQ,CAAC4B,KAAK,CAAC,CAAC,CAAC;IAEnD,IAAI,CAACC,SAAS,CAAC,qBAAqB,EAAGC,MAAW,IAAK;MACrD,IAAG,IAAI,CAACX,KAAK,CAACY,MAAM,EAAC;QACnBC,UAAU,CAAC,MAAI;UACb,IAAI,CAACC,yBAAyB,CAAC,CAAC;QAClC,CAAC,EAAE,GAAG,CAAC;MACT;IACF,CAAC,CAAC;EACJ;EAEAC,aAAaA,CAAA,EAA6B;IACxC,OAAO,IAAI,CAACC,aAAa,GAAG,IAAI,GAAG,IAAI,CAACC,WAAW;EACrD;EAEOC,cAAcA,CAAClB,KAAuB,EAAmB;IAC5D,IAAG,CAACA,KAAK,CAACmB,oBAAoB,EAAE;MAAA,IAAAC,WAAA;MAC9B,MAAMC,UAAU,GAAG;QACjBC,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC,IAAI,CAACF,KAAK,GAAG,MAAM,GAAGG,SAAS;QAClDC,MAAM,EAAE,IAAI,CAACH,MAAM,CAACC,IAAI,CAACE,MAAM,GAAG,MAAM,GAAGD;MAC7C,CAAC;MACD,MAAME,cAAgC,GAAG,EAAAP,WAAA,OAAI,CAACpB,KAAK,cAAAoB,WAAA,gBAAAA,WAAA,GAAVA,WAAA,CAAYG,MAAM,cAAAH,WAAA,uBAAlBA,WAAA,CAAoBQ,QAAQ,KAAI;QAAEJ,IAAI,EAAE,CAAC,CAAC;QAAEK,IAAI,EAAE,CAAC;MAAG,CAAqB;MACpH,OAAOzC,cAAc,CAAC,IAAI,CAAC0C,KAAK,EAAEH,cAAc,EAAE;QAChD,GAAG,IAAI,CAACJ,MAAM,CAACC;MACjB,CAAC,eAAG9C,KAAA,CAAAqD,aAAA,CAACpD,IAAI;QAACqD,KAAK,EAAE,CAAC,IAAI,CAACT,MAAM,CAACC,IAAI,EAAE;UAAES,OAAO,EAAE;QAAE,CAAC;MAAE,gBAC1CvD,KAAA,CAAAqD,aAAA,CAAC/C,QAAQ,EAAAkD,QAAA,KAAK,IAAI,CAACC,qBAAqB,CAAC,CAAC;QAAEC,MAAM,EAAE,IAAK;QAACb,MAAM,EAAEF,UAAW;QAACgB,kBAAkB,EAAE,IAAI,CAACC,KAAK,CAACtC,KAAK,CAACuC;MAAmB,iBAC5I7D,KAAA,CAAAqD,aAAA,CAACpD,IAAI;QAACqD,KAAK,EAAE,CAACX,UAAU,EAAgB,IAAI,CAACE,MAAM,CAACiB,OAAO;MAAE,GAAE,IAAI,CAACC,aAAa,CAACzC,KAAK,CAAQ,CACzF,CAEJ,CAAE,CAAC;IACX;IACA,OAAO,IAAI;EACf;EAEOc,yBAAyBA,CAAA,EAAE;IAAA,IAAA4B,eAAA,EAAAC,kBAAA;IAChC,MAAM;MAAEC;IAA0B,CAAC,GAAG,IAAI,CAACC,OAAmC;IAC9E,MAAMC,eAAe,GAAG,CAAC,GAAAJ,eAAA,GAAC,IAAI,CAACK,SAAS,cAAAL,eAAA,gBAAAA,eAAA,GAAdA,eAAA,CAAgBM,gBAAgB,cAAAN,eAAA,eAAhCA,eAAA,CAAkCI,eAAe;IAC3E,CAAAH,kBAAA,OAAI,CAACrC,YAAY,cAAAqC,kBAAA,gBAAAA,kBAAA,GAAjBA,kBAAA,CAAmBM,OAAO,cAAAN,kBAAA,eAA1BA,kBAAA,CAA4BO,OAAO,CAAC,CAACC,EAAE,GAAG,CAAC,EAAEC,EAAE,GAAG,CAAC,EAAEC,MAAM,GAAG,CAAC,EAAEC,OAAO,GAAG,CAAC,EAAEC,EAAE,GAAG,CAAC,EAAEC,EAAE,GAAG,CAAC,KAAG;MAAA,IAAAC,YAAA;MAC7F,MAAMC,oBAAoB,GAAI9E,QAAQ,CAAC+E,EAAE,IAAI,KAAK,IAAI,CAACb,eAAe,GAAK,EAAAW,YAAA,OAAI,CAACG,MAAM,cAAAH,YAAA,uBAAXA,YAAA,CAAavD,GAAG,KAAI,CAAC,GAAG,CAAC;MACpG,IAAG0C,yBAAyB,EAAE;QAC5BA,yBAAyB,CAACiB,KAAK,GAAGL,EAAE,GAAGE,oBAAoB;QAC3D,IAAI,CAACI,WAAW,CAAC;UAAEC,yBAAyB,EAAE;QAAI,CAAqB,CAAC;MAC1E;IACF,CAAC,CAAC;EACJ;EAEAC,kBAAkBA,CAACC,UAAe,EAAEC,SAAc,EAAE;IAClD,IAAIA,SAAS,CAACH,yBAAyB,KAAK,IAAI,CAACzB,KAAK,CAACyB,yBAAyB,EAAE;MAChFlF,QAAQ,CAACsF,MAAM,CAAC,IAAI,CAAC3D,sBAAsB,EAAE;QAC3C4D,OAAO,EAAE,IAAI,CAAC9B,KAAK,CAACyB,yBAAyB,GAAG,CAAC,GAAG,CAAC;QACrDM,KAAK,EAAE,GAAG;QACVC,eAAe,EAAE;MACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;IACZ;EACF;EAEQC,mBAAmBA,CAACxE,KAAuB,EAAEqB,UAAqB,EAAEE,MAAiB,EAAE;IAC7F,MAAM;MAAEwC;IAA0B,CAAC,GAAG,IAAI,CAACzB,KAAK;IAChD,MAAM;MAAEmC;IAAkB,CAAC,GAAGhF,eAAe,CAAC,IAAI,CAAC;IAEnD,oBACEf,KAAA,CAAAqD,aAAA,CAAArD,KAAA,CAAAgG,QAAA,QACGX,yBAAyB,gBACxBrF,KAAA,CAAAqD,aAAA,CAACvC,eAAe;MACdmF,SAAS,EAAE,IAAK;MAChB7C,KAAK,EAAE,IAAI,CAACA,KAAM;MAClBE,KAAK,EAAE,CACL,IAAI,CAACT,MAAM,CAACX,MAAM,EAClB;QAAEgE,eAAe,EAAErD,MAAM,CAACqD;MAAgB,CAAC,CAC3C;MACFC,cAAc,EAAEJ,iBAAkB;MAClCK,IAAI,EAAE9E,KAAK,CAAC8E;IAAgB,gBAE5BpG,KAAA,CAAAqD,aAAA,CAACpD,IAAI;MAACqD,KAAK,EAAE,CAACX,UAAU,EAAe;QAAEuD,eAAe,EAAErD,MAAM,CAACqD;MAAgB,CAAC,EAAE,IAAI,CAACrD,MAAM,CAACiB,OAAO;IAAE,GACtG,IAAI,CAACC,aAAa,CAACzC,KAAK,CACrB,CACS,CAAC,gBAChBtB,KAAA,CAAAqD,aAAA,CAAArD,KAAA,CAAAgG,QAAA,MAAI,CAAC,eACThG,KAAA,CAAAqD,aAAA,CAAClD,QAAQ,CAACF,IAAI;MACZqD,KAAK,EAAE,CACLX,UAAU,EACV;QAAEY,OAAO,EAAE,IAAI,CAACzB;MAAuB,CAAC,EACxC,IAAI,CAACe,MAAM,CAACiB,OAAO,CACnB;MACFuC,GAAG,EAAE,IAAI,CAACzE;IAAa,GAEtB,IAAI,CAACmC,aAAa,CAACzC,KAAK,CACZ,CACf,CAAC;EAEP;EAEAgF,YAAYA,CAAChF,KAAuB,EAAE;IACpC,MAAMqB,UAAqB,GAAG;MAC5BC,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC,IAAI,CAACF,KAAK,GAAG,MAAM,GAAGG,SAAS;MAClDC,MAAM,EAAE,IAAI,CAACH,MAAM,CAACC,IAAI,CAACE,MAAM,GAAG,MAAM,GAAGD;IAC7C,CAAC;IAED,MAAMF,MAAM,GAAG,IAAI,CAACP,aAAa,GAAG;MAClC,GAAG,IAAI,CAACO,MAAM,CAACC,IAAI;MACnB,GAAG,IAAI,CAACD,MAAM,CAACK,QAAQ,CAACJ;IAC1B,CAAC,GAAG,IAAI,CAACD,MAAM,CAACC,IAAI;IAEpB,IAAIxB,KAAK,CAACY,MAAM,EAAE;MAChB,IAAI,CAACqE,QAAQ,GAAG,IAAI;IACtB;IACA,oBACEvG,KAAA,CAAAqD,aAAA,CAACxC,qBAAqB,CAAC2F,QAAQ,QAC5B,CAACtB,MAAM,GAAG;MAAE1D,GAAG,EAAE,CAAC;MAAEC,MAAM,EAAE,CAAC;MAAEC,IAAI,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAC,KAAK;MACtD,IAAI,CAACuD,MAAM,GAAGA,MAAM;MACpB,oBACElF,KAAA,CAAAqD,aAAA,CAAC9C,YAAY;QACXkG,cAAc,EAAEnF,KAAK,CAACoF,SAAU;QAChCf,KAAK,EAAErE,KAAK,CAACqF,cAAe;QAC5BrD,KAAK,EAAET,MAAO;QACd+D,QAAQ,EAAEA,CAACC,KAAwB,EAAER,GAA0B,KAAK;UAClE,IAAI,CAACS,YAAY,CAACD,KAAK,EAAER,GAAG,CAAC;QAC/B;MAAE,GAED,IAAI,CAAChE,aAAa,CAAC,CAAC,eACrBrC,KAAA,CAAAqD,aAAA,CAAC/C,QAAQ,EAAAkD,QAAA,KACH,IAAI,CAACC,qBAAqB,CAAC,CAAC;QAChCC,MAAM,EAAE,IAAK;QACbb,MAAM,EAAEF,UAAW;QACnBgB,kBAAkB,EAAE,IAAI,CAACC,KAAK,CAACtC,KAAK,CAACuC;MAAmB,IAEvDvC,KAAK,CAACY,MAAM,GACX,IAAI,CAAC4D,mBAAmB,CAACxE,KAAK,EAAEqB,UAAU,EAAEE,MAAM,CAAC,GACjD,CAACvB,KAAK,CAACyF,UAAU,gBACnB/G,KAAA,CAAAqD,aAAA,CAACpD,IAAI;QAACqD,KAAK,EAAE,CAACX,UAAU,EAAe,IAAI,CAACE,MAAM,CAACiB,OAAO;MAAE,GACzD,IAAI,CAACC,aAAa,CAACzC,KAAK,CACrB,CAAC,gBAEPtB,KAAA,CAAAqD,aAAA,CAAC1C,UAAU;QACT2C,KAAK,EAAE,CAACX,UAAU,EAAe,IAAI,CAACE,MAAM,CAACiB,OAAO,CAAE;QACtDkD,QAAQ,EAAGH,KAAK,IAAK,IAAI,CAACI,MAAM,CAAC,QAAQ,EAAE,CAACJ,KAAK,CAAC,CAAE;QACpDK,mBAAmB,EAAE;MAAG,GAEvB,IAAI,CAACnD,aAAa,CAACzC,KAAK,CACf,CAEN,CACE,CAAC;IAEnB,CAC8B,CAAC;EAErC;AACF;AAACF,eAAA,CAhKoBC,WAAW,iBACTT,oBAAoB","ignoreList":[]}

package/components/container/container.props.js

@@ -9,7 +9,9 @@ export default class WmContainerProps extends PartialHostProps {
     _defineProperty(this, "animationdelay", null);
     _defineProperty(this, "onLoad", void 0);
     _defineProperty(this, "scrollable", false);
-    _defineProperty(this, "issticky", false);
+    _defineProperty(this, "sticky", false);
+    _defineProperty(this, "stickyContainerVisibility", false);
+    _defineProperty(this, "stickyContainerOpacity", void 0);
   }
 }
 //# sourceMappingURL=container.props.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["PartialHostProps","WmContainerProps","constructor","args","_defineProperty"],"sources":["container.props.ts"],"sourcesContent":["import { PartialHostProps } from './partial-host.component';\n\nexport default class WmContainerProps extends PartialHostProps {\n  animation?: string = null as any;\n  animationdelay?: number = null as any;\n  onLoad?: Function;\n  scrollable?: Boolean = false as any;\n  issticky?: Boolean = false as boolean;\n}\n"],"mappings":";;;AAAA,SAASA,gBAAgB,QAAQ,0BAA0B;AAE3D,eAAe,MAAMC,gBAAgB,SAASD,gBAAgB,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,oBACxC,IAAI;IAAAA,eAAA,yBACC,IAAI;IAAAA,eAAA;IAAAA,eAAA,qBAEP,KAAK;IAAAA,eAAA,mBACP,KAAK;EAAA;AAC5B","ignoreList":[]}
+{"version":3,"names":["PartialHostProps","WmContainerProps","constructor","args","_defineProperty"],"sources":["container.props.ts"],"sourcesContent":["import { PartialHostProps } from './partial-host.component';\nimport { Animated } from 'react-native';\n\nexport default class WmContainerProps extends PartialHostProps {\n  animation?: string = null as any;\n  animationdelay?: number = null as any;\n  onLoad?: Function;\n  scrollable?: Boolean = false as any;\n  sticky?: Boolean = false as boolean;\n  stickyContainerVisibility?: Boolean = false;\n  stickyContainerOpacity?: Animated.Value;\n}\n"],"mappings":";;;AAAA,SAASA,gBAAgB,QAAQ,0BAA0B;AAG3D,eAAe,MAAMC,gBAAgB,SAASD,gBAAgB,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,oBACxC,IAAI;IAAAA,eAAA,yBACC,IAAI;IAAAA,eAAA;IAAAA,eAAA,qBAEP,KAAK;IAAAA,eAAA,iBACT,KAAK;IAAAA,eAAA,oCACc,KAAK;IAAAA,eAAA;EAAA;AAE7C","ignoreList":[]}

package/components/container/container.styles.js

@@ -15,9 +15,7 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
         backgroundColor: 'transparent'
       }
     },
-    sticky: {
-      paddingHorizontal: 8
-    }
+    sticky: {}
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);
   addStyle('media-body', '', {

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

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","text","content","flexDirection","skeleton","borderColor","shadowColor","backgroundColor","sticky","paddingHorizontal","flex","paddingLeft","paddingRight","justifyContent","shadowOffset","width","height","shadowRadius","borderRadius","borderWidth","containerOutlineColor","borderStyle"],"sources":["container.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle }  from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '../basic/skeleton/skeleton.styles';\n\nexport type WmContainerStyles = BaseStyles & {\n    content: AllStyle,\n    skeleton: WmSkeletonStyles,\n    sticky: AllStyle\n};\n\nexport const DEFAULT_CLASS = 'app-container';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmContainerStyles = defineStyles({\n        root: {},\n        text: {},\n        content: {\n            flexDirection: 'column'\n        },\n        skeleton: {\n            root: {\n                borderColor: 'transparent',\n                shadowColor: 'transparent',\n                backgroundColor: 'transparent',\n            },\n        } as any as WmSkeletonStyles, \n        sticky: {\n            paddingHorizontal: 8\n        }\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle('media-body', '', {\n        root: {\n            flex: 1,\n            paddingLeft: 8,\n            paddingRight: 8,\n            justifyContent: 'center'\n        }\n    } as WmContainerStyles);\n    addStyle('media-right', '', {\n        root: {\n            justifyContent: 'center'\n        }\n    } as WmContainerStyles);\n    addStyle('app-elevated-container', '', {\n        root: {\n            shadowColor: 'rgba(0, 0, 0, 0.2)',\n            shadowOffset: {\n                width: 2,\n                height: 2\n            },\n            shadowRadius: 2,\n            borderRadius: 8\n        }\n    } as WmContainerStyles);\n    addStyle('app-outlined-container', '', {\n        root: {\n            borderWidth: 1,\n            borderColor: themeVariables.containerOutlineColor,\n            borderStyle: 'solid'\n        }\n    } as WmContainerStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAqB,wCAAwC;AAC9E,SAAqBC,YAAY,QAAQ,+CAA+C;AASxF,OAAO,MAAMC,aAAa,GAAG,eAAe;AAC5CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAgC,GAAGL,YAAY,CAAC;IAClDM,IAAI,EAAE,CAAC,CAAC;IACRC,IAAI,EAAE,CAAC,CAAC;IACRC,OAAO,EAAE;MACLC,aAAa,EAAE;IACnB,CAAC;IACDC,QAAQ,EAAE;MACNJ,IAAI,EAAE;QACFK,WAAW,EAAE,aAAa;QAC1BC,WAAW,EAAE,aAAa;QAC1BC,eAAe,EAAE;MACrB;IACJ,CAA4B;IAC5BC,MAAM,EAAE;MACJC,iBAAiB,EAAE;IACvB;EACJ,CAAC,CAAC;EAEFX,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,YAAY,EAAE,EAAE,EAAE;IACvBE,IAAI,EAAE;MACFU,IAAI,EAAE,CAAC;MACPC,WAAW,EAAE,CAAC;MACdC,YAAY,EAAE,CAAC;MACfC,cAAc,EAAE;IACpB;EACJ,CAAsB,CAAC;EACvBf,QAAQ,CAAC,aAAa,EAAE,EAAE,EAAE;IACxBE,IAAI,EAAE;MACFa,cAAc,EAAE;IACpB;EACJ,CAAsB,CAAC;EACvBf,QAAQ,CAAC,wBAAwB,EAAE,EAAE,EAAE;IACnCE,IAAI,EAAE;MACFM,WAAW,EAAE,oBAAoB;MACjCQ,YAAY,EAAE;QACVC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACZ,CAAC;MACDC,YAAY,EAAE,CAAC;MACfC,YAAY,EAAE;IAClB;EACJ,CAAsB,CAAC;EACvBpB,QAAQ,CAAC,wBAAwB,EAAE,EAAE,EAAE;IACnCE,IAAI,EAAE;MACFmB,WAAW,EAAE,CAAC;MACdd,WAAW,EAAER,cAAc,CAACuB,qBAAqB;MACjDC,WAAW,EAAE;IACjB;EACJ,CAAsB,CAAC;AAC3B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","text","content","flexDirection","skeleton","borderColor","shadowColor","backgroundColor","sticky","flex","paddingLeft","paddingRight","justifyContent","shadowOffset","width","height","shadowRadius","borderRadius","borderWidth","containerOutlineColor","borderStyle"],"sources":["container.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle }  from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '../basic/skeleton/skeleton.styles';\n\nexport type WmContainerStyles = BaseStyles & {\n    content: AllStyle,\n    skeleton: WmSkeletonStyles,\n    sticky: AllStyle\n};\n\nexport const DEFAULT_CLASS = 'app-container';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmContainerStyles = defineStyles({\n        root: {},\n        text: {},\n        content: {\n            flexDirection: 'column'\n        },\n        skeleton: {\n            root: {\n                borderColor: 'transparent',\n                shadowColor: 'transparent',\n                backgroundColor: 'transparent',\n            },\n        } as any as WmSkeletonStyles, \n        sticky: {}\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle('media-body', '', {\n        root: {\n            flex: 1,\n            paddingLeft: 8,\n            paddingRight: 8,\n            justifyContent: 'center'\n        }\n    } as WmContainerStyles);\n    addStyle('media-right', '', {\n        root: {\n            justifyContent: 'center'\n        }\n    } as WmContainerStyles);\n    addStyle('app-elevated-container', '', {\n        root: {\n            shadowColor: 'rgba(0, 0, 0, 0.2)',\n            shadowOffset: {\n                width: 2,\n                height: 2\n            },\n            shadowRadius: 2,\n            borderRadius: 8\n        }\n    } as WmContainerStyles);\n    addStyle('app-outlined-container', '', {\n        root: {\n            borderWidth: 1,\n            borderColor: themeVariables.containerOutlineColor,\n            borderStyle: 'solid'\n        }\n    } as WmContainerStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAqB,wCAAwC;AAC9E,SAAqBC,YAAY,QAAQ,+CAA+C;AASxF,OAAO,MAAMC,aAAa,GAAG,eAAe;AAC5CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAgC,GAAGL,YAAY,CAAC;IAClDM,IAAI,EAAE,CAAC,CAAC;IACRC,IAAI,EAAE,CAAC,CAAC;IACRC,OAAO,EAAE;MACLC,aAAa,EAAE;IACnB,CAAC;IACDC,QAAQ,EAAE;MACNJ,IAAI,EAAE;QACFK,WAAW,EAAE,aAAa;QAC1BC,WAAW,EAAE,aAAa;QAC1BC,eAAe,EAAE;MACrB;IACJ,CAA4B;IAC5BC,MAAM,EAAE,CAAC;EACb,CAAC,CAAC;EAEFV,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,YAAY,EAAE,EAAE,EAAE;IACvBE,IAAI,EAAE;MACFS,IAAI,EAAE,CAAC;MACPC,WAAW,EAAE,CAAC;MACdC,YAAY,EAAE,CAAC;MACfC,cAAc,EAAE;IACpB;EACJ,CAAsB,CAAC;EACvBd,QAAQ,CAAC,aAAa,EAAE,EAAE,EAAE;IACxBE,IAAI,EAAE;MACFY,cAAc,EAAE;IACpB;EACJ,CAAsB,CAAC;EACvBd,QAAQ,CAAC,wBAAwB,EAAE,EAAE,EAAE;IACnCE,IAAI,EAAE;MACFM,WAAW,EAAE,oBAAoB;MACjCO,YAAY,EAAE;QACVC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACZ,CAAC;MACDC,YAAY,EAAE,CAAC;MACfC,YAAY,EAAE;IAClB;EACJ,CAAsB,CAAC;EACvBnB,QAAQ,CAAC,wBAAwB,EAAE,EAAE,EAAE;IACnCE,IAAI,EAAE;MACFkB,WAAW,EAAE,CAAC;MACdb,WAAW,EAAER,cAAc,CAACsB,qBAAqB;MACjDC,WAAW,EAAE;IACjB;EACJ,CAAsB,CAAC;AAC3B,CAAC,CAAC","ignoreList":[]}

package/components/container/layoutgrid/gridcolumn/gridcolumn.component.js

@@ -12,7 +12,12 @@ export default class WmGridcolumn extends BaseComponent {
     if (this.styles.root.height) {
       this.styles.root.overflow = undefined;
     }
-    const styles = this.theme.getStyle(`col-xs-${props.xscolumnwidth}  col-sm-${props.columnwidth}`);
+    let styles;
+    if (props.xscolumnwidth) {
+      styles = this.theme.getStyle(`col-xs-${props.xscolumnwidth}  col-sm-${props.columnwidth}`);
+    } else {
+      styles = this.theme.getStyle(`col-xs-${props.columnwidth}`);
+    }
     return /*#__PURE__*/React.createElement(View, {
       style: [{
         width: "100%"

package/components/container/layoutgrid/gridcolumn/gridcolumn.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmGridcolumnProps","DEFAULT_CLASS","WmGridcolumnState","WmGridcolumn","constructor","props","renderWidget","styles","root","height","overflow","undefined","theme","getStyle","xscolumnwidth","columnwidth","createElement","style","width","onLayout","event","handleLayout","_background","children"],"sources":["gridcolumn.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 WmGridcolumnProps from './gridcolumn.props';\nimport { DEFAULT_CLASS, WmGridColumnStyles } from './gridcolumn.styles';\n\nexport class WmGridcolumnState extends BaseComponentState<WmGridcolumnProps> {\n\n}\n\nexport default class WmGridcolumn extends BaseComponent<WmGridcolumnProps, WmGridcolumnState, WmGridColumnStyles> {\n\n  constructor(props: WmGridcolumnProps) {\n    super(props, DEFAULT_CLASS, new WmGridcolumnProps());\n  }\n\n  renderWidget(props: WmGridcolumnProps) {\n    if (this.styles.root.height) {\n      this.styles.root.overflow = undefined;\n    }\n    const styles = this.theme.getStyle(`col-xs-${props.xscolumnwidth}  col-sm-${props.columnwidth}`);\n    return (\n      <View \n        style={[{width: \"100%\"}, styles.root, this.styles.root]}\n        onLayout={(event) => this.handleLayout(event)}\n      >\n        {this._background}\n        {props.children}\n      </View>\n    );\n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,iBAAiB,MAAM,oBAAoB;AAClD,SAASC,aAAa,QAA4B,qBAAqB;AAEvE,OAAO,MAAMC,iBAAiB,SAASH,kBAAkB,CAAoB;AAI7E,eAAe,MAAMI,YAAY,SAASL,aAAa,CAA2D;EAEhHM,WAAWA,CAACC,KAAwB,EAAE;IACpC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,iBAAiB,CAAC,CAAC,CAAC;EACtD;EAEAM,YAAYA,CAACD,KAAwB,EAAE;IACrC,IAAI,IAAI,CAACE,MAAM,CAACC,IAAI,CAACC,MAAM,EAAE;MAC3B,IAAI,CAACF,MAAM,CAACC,IAAI,CAACE,QAAQ,GAAGC,SAAS;IACvC;IACA,MAAMJ,MAAM,GAAG,IAAI,CAACK,KAAK,CAACC,QAAQ,CAAC,UAAUR,KAAK,CAACS,aAAa,YAAYT,KAAK,CAACU,WAAW,EAAE,CAAC;IAChG,oBACEnB,KAAA,CAAAoB,aAAA,CAACnB,IAAI;MACHoB,KAAK,EAAE,CAAC;QAACC,KAAK,EAAE;MAAM,CAAC,EAAEX,MAAM,CAACC,IAAI,EAAE,IAAI,CAACD,MAAM,CAACC,IAAI,CAAE;MACxDW,QAAQ,EAAGC,KAAK,IAAK,IAAI,CAACC,YAAY,CAACD,KAAK;IAAE,GAE7C,IAAI,CAACE,WAAW,EAChBjB,KAAK,CAACkB,QACH,CAAC;EAEX;AACF","ignoreList":[]}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmGridcolumnProps","DEFAULT_CLASS","WmGridcolumnState","WmGridcolumn","constructor","props","renderWidget","styles","root","height","overflow","undefined","xscolumnwidth","theme","getStyle","columnwidth","createElement","style","width","onLayout","event","handleLayout","_background","children"],"sources":["gridcolumn.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 WmGridcolumnProps from './gridcolumn.props';\nimport { DEFAULT_CLASS, WmGridColumnStyles } from './gridcolumn.styles';\n\nexport class WmGridcolumnState extends BaseComponentState<WmGridcolumnProps> {\n\n}\n\nexport default class WmGridcolumn extends BaseComponent<WmGridcolumnProps, WmGridcolumnState, WmGridColumnStyles> {\n\n  constructor(props: WmGridcolumnProps) {\n    super(props, DEFAULT_CLASS, new WmGridcolumnProps());\n  }\n\n  renderWidget(props: WmGridcolumnProps) {\n    if (this.styles.root.height) {\n      this.styles.root.overflow = undefined;\n    }\n\n    let styles;\n    if(props.xscolumnwidth) {\n      styles = this.theme.getStyle(`col-xs-${props.xscolumnwidth}  col-sm-${props.columnwidth}`);\n    } else {\n      styles = this.theme.getStyle(`col-xs-${props.columnwidth}`)\n    }\n\n    return (\n      <View \n        style={[{width: \"100%\"}, styles.root, this.styles.root]}\n        onLayout={(event) => this.handleLayout(event)}\n      >\n        {this._background}\n        {props.children}\n      </View>\n    );\n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,iBAAiB,MAAM,oBAAoB;AAClD,SAASC,aAAa,QAA4B,qBAAqB;AAEvE,OAAO,MAAMC,iBAAiB,SAASH,kBAAkB,CAAoB;AAI7E,eAAe,MAAMI,YAAY,SAASL,aAAa,CAA2D;EAEhHM,WAAWA,CAACC,KAAwB,EAAE;IACpC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,iBAAiB,CAAC,CAAC,CAAC;EACtD;EAEAM,YAAYA,CAACD,KAAwB,EAAE;IACrC,IAAI,IAAI,CAACE,MAAM,CAACC,IAAI,CAACC,MAAM,EAAE;MAC3B,IAAI,CAACF,MAAM,CAACC,IAAI,CAACE,QAAQ,GAAGC,SAAS;IACvC;IAEA,IAAIJ,MAAM;IACV,IAAGF,KAAK,CAACO,aAAa,EAAE;MACtBL,MAAM,GAAG,IAAI,CAACM,KAAK,CAACC,QAAQ,CAAC,UAAUT,KAAK,CAACO,aAAa,YAAYP,KAAK,CAACU,WAAW,EAAE,CAAC;IAC5F,CAAC,MAAM;MACLR,MAAM,GAAG,IAAI,CAACM,KAAK,CAACC,QAAQ,CAAC,UAAUT,KAAK,CAACU,WAAW,EAAE,CAAC;IAC7D;IAEA,oBACEnB,KAAA,CAAAoB,aAAA,CAACnB,IAAI;MACHoB,KAAK,EAAE,CAAC;QAACC,KAAK,EAAE;MAAM,CAAC,EAAEX,MAAM,CAACC,IAAI,EAAE,IAAI,CAACD,MAAM,CAACC,IAAI,CAAE;MACxDW,QAAQ,EAAGC,KAAK,IAAK,IAAI,CAACC,YAAY,CAACD,KAAK;IAAE,GAE7C,IAAI,CAACE,WAAW,EAChBjB,KAAK,CAACkB,QACH,CAAC;EAEX;AACF","ignoreList":[]}

package/components/container/linearlayout/linearlayoutitem/linearlayoutitem.component.js

@@ -15,8 +15,8 @@ export default class WmLinearlayoutitem extends BaseComponent {
       style: {
         ...this.styles.root,
         flexGrow: props.flexgrow,
-        flexShrink: isNil(props.flexshrink) ? props.flexgrow : props.flexshrink,
-        flexBasis: Platform.OS == "web" ? 'auto' : props.flexgrow && (direction === 'row' || direction === 'row-reverse') ? 0 : 'auto'
+        flexShrink: isNil(props.flexshrink) ? Platform.OS == "web" ? props.flexgrow : 0 : props.flexshrink,
+        flexBasis: props.flexgrow && (direction === 'row' || direction === 'row-reverse') ? 0 : 'auto'
       },
       onLayout: event => this.handleLayout(event)
     }, this._background, props.children);

package/components/container/linearlayout/linearlayoutitem/linearlayoutitem.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Platform","isNil","BaseComponent","BaseComponentState","WmLinearlayoutitemProps","DEFAULT_CLASS","WmLinearlayoutitemState","WmLinearlayoutitem","constructor","props","renderWidget","direction","parent","state","createElement","style","styles","root","flexGrow","flexgrow","flexShrink","flexshrink","flexBasis","OS","onLayout","event","handleLayout","_background","children"],"sources":["linearlayoutitem.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Platform } from 'react-native';\nimport { isNil } from 'lodash-es';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmLinearlayout from '../linearlayout.component';\nimport WmLinearlayoutitemProps from './linearlayoutitem.props';\nimport { DEFAULT_CLASS, WmLinearlayoutitemStyles } from './linearlayoutitem.styles';\n\nexport class WmLinearlayoutitemState extends BaseComponentState<WmLinearlayoutitemProps> {}\n\nexport default class WmLinearlayoutitem extends BaseComponent<WmLinearlayoutitemProps, WmLinearlayoutitemState, WmLinearlayoutitemStyles> {\n\n  constructor(props: WmLinearlayoutitemProps) {\n    super(props, DEFAULT_CLASS, new WmLinearlayoutitemProps());\n  }\n\n  renderWidget(props: WmLinearlayoutitemProps) {\n    const direction = (this.parent as WmLinearlayout).state.props.direction;\n    return (\n    <View \n      style={{\n        ...this.styles.root,\n        flexGrow: props.flexgrow,\n        flexShrink: isNil(props.flexshrink) ? props.flexgrow : props.flexshrink,\n        flexBasis:  Platform.OS == \"web\" ? 'auto' : (props.flexgrow && (direction === 'row' || direction === 'row-reverse') ? 0 : 'auto')\n      }}\n      onLayout={(event) => this.handleLayout(event)}\n    >{this._background}{props.children}</View>); \n  }\n}"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AAC7C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAGjG,OAAOC,uBAAuB,MAAM,0BAA0B;AAC9D,SAASC,aAAa,QAAkC,2BAA2B;AAEnF,OAAO,MAAMC,uBAAuB,SAASH,kBAAkB,CAA0B;AAEzF,eAAe,MAAMI,kBAAkB,SAASL,aAAa,CAA6E;EAExIM,WAAWA,CAACC,KAA8B,EAAE;IAC1C,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,uBAAuB,CAAC,CAAC,CAAC;EAC5D;EAEAM,YAAYA,CAACD,KAA8B,EAAE;IAC3C,MAAME,SAAS,GAAI,IAAI,CAACC,MAAM,CAAoBC,KAAK,CAACJ,KAAK,CAACE,SAAS;IACvE,oBACAb,KAAA,CAAAgB,aAAA,CAACf,IAAI;MACHgB,KAAK,EAAE;QACL,GAAG,IAAI,CAACC,MAAM,CAACC,IAAI;QACnBC,QAAQ,EAAET,KAAK,CAACU,QAAQ;QACxBC,UAAU,EAAEnB,KAAK,CAACQ,KAAK,CAACY,UAAU,CAAC,GAAGZ,KAAK,CAACU,QAAQ,GAAGV,KAAK,CAACY,UAAU;QACvEC,SAAS,EAAGtB,QAAQ,CAACuB,EAAE,IAAI,KAAK,GAAG,MAAM,GAAId,KAAK,CAACU,QAAQ,KAAKR,SAAS,KAAK,KAAK,IAAIA,SAAS,KAAK,aAAa,CAAC,GAAG,CAAC,GAAG;MAC5H,CAAE;MACFa,QAAQ,EAAGC,KAAK,IAAK,IAAI,CAACC,YAAY,CAACD,KAAK;IAAE,GAC9C,IAAI,CAACE,WAAW,EAAElB,KAAK,CAACmB,QAAe,CAAC;EAC5C;AACF","ignoreList":[]}
+{"version":3,"names":["React","View","Platform","isNil","BaseComponent","BaseComponentState","WmLinearlayoutitemProps","DEFAULT_CLASS","WmLinearlayoutitemState","WmLinearlayoutitem","constructor","props","renderWidget","direction","parent","state","createElement","style","styles","root","flexGrow","flexgrow","flexShrink","flexshrink","OS","flexBasis","onLayout","event","handleLayout","_background","children"],"sources":["linearlayoutitem.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Platform } from 'react-native';\nimport { isNil } from 'lodash-es';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmLinearlayout from '../linearlayout.component';\nimport WmLinearlayoutitemProps from './linearlayoutitem.props';\nimport { DEFAULT_CLASS, WmLinearlayoutitemStyles } from './linearlayoutitem.styles';\n\nexport class WmLinearlayoutitemState extends BaseComponentState<WmLinearlayoutitemProps> {}\n\nexport default class WmLinearlayoutitem extends BaseComponent<WmLinearlayoutitemProps, WmLinearlayoutitemState, WmLinearlayoutitemStyles> {\n\n  constructor(props: WmLinearlayoutitemProps) {\n    super(props, DEFAULT_CLASS, new WmLinearlayoutitemProps());\n  }\n\n  renderWidget(props: WmLinearlayoutitemProps) {\n    const direction = (this.parent as WmLinearlayout).state.props.direction;\n    return (\n    <View \n      style={{\n        ...this.styles.root,\n        flexGrow: props.flexgrow,\n        flexShrink: isNil(props.flexshrink) ? Platform.OS == \"web\" ? props.flexgrow : 0 : props.flexshrink,\n        flexBasis:  (props.flexgrow && (direction === 'row' || direction === 'row-reverse') ? 0 : 'auto')   \n      } as any}\n      onLayout={(event) => this.handleLayout(event)}\n    >{this._background}{props.children}</View>); \n\n  }\n}"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AAC7C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAGjG,OAAOC,uBAAuB,MAAM,0BAA0B;AAC9D,SAASC,aAAa,QAAkC,2BAA2B;AAEnF,OAAO,MAAMC,uBAAuB,SAASH,kBAAkB,CAA0B;AAEzF,eAAe,MAAMI,kBAAkB,SAASL,aAAa,CAA6E;EAExIM,WAAWA,CAACC,KAA8B,EAAE;IAC1C,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,uBAAuB,CAAC,CAAC,CAAC;EAC5D;EAEAM,YAAYA,CAACD,KAA8B,EAAE;IAC3C,MAAME,SAAS,GAAI,IAAI,CAACC,MAAM,CAAoBC,KAAK,CAACJ,KAAK,CAACE,SAAS;IACvE,oBACAb,KAAA,CAAAgB,aAAA,CAACf,IAAI;MACHgB,KAAK,EAAE;QACL,GAAG,IAAI,CAACC,MAAM,CAACC,IAAI;QACnBC,QAAQ,EAAET,KAAK,CAACU,QAAQ;QACxBC,UAAU,EAAEnB,KAAK,CAACQ,KAAK,CAACY,UAAU,CAAC,GAAGrB,QAAQ,CAACsB,EAAE,IAAI,KAAK,GAAGb,KAAK,CAACU,QAAQ,GAAG,CAAC,GAAGV,KAAK,CAACY,UAAU;QAClGE,SAAS,EAAId,KAAK,CAACU,QAAQ,KAAKR,SAAS,KAAK,KAAK,IAAIA,SAAS,KAAK,aAAa,CAAC,GAAG,CAAC,GAAG;MAC5F,CAAS;MACTa,QAAQ,EAAGC,KAAK,IAAK,IAAI,CAACC,YAAY,CAACD,KAAK;IAAE,GAC9C,IAAI,CAACE,WAAW,EAAElB,KAAK,CAACmB,QAAe,CAAC;EAE5C;AACF","ignoreList":[]}

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

@@ -11,6 +11,7 @@ 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';
 import WmIcon from "@wavemaker/app-rn-runtime/components/basic/icon/icon.component";
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
 export class WmTabheaderState extends BaseComponentState {}
 export default class WmTabheader extends BaseComponent {
   constructor(props) {
@@ -163,6 +164,12 @@ export default class WmTabheader extends BaseComponent {
       style: this.styles.root
     }, this._background, props.data.map((header, i) => {
       const isSelected = i === props.selectedTabIndex;
+      const accessibilityProps = getAccessibilityProps(AccessibilityWidgetType.TABS, {
+        selected: isSelected,
+        accessibilitylabel: props.accessibilityProps[i].accessibilitylabel,
+        hint: props.accessibilityProps[i].hint,
+        accessibilityrole: props.accessibilityProps[i].accessibilityrole
+      });
       return /*#__PURE__*/React.createElement(Tappable, _extends({
         onTap: this.onTabSelection.bind(this, i)
       }, this.getTestPropsForAction(i + ''), {
@@ -170,7 +177,8 @@ export default class WmTabheader extends BaseComponent {
         disableTouchEffect: this.state.props.disabletoucheffect,
         styles: this.styles.header.flexGrow ? {
           flexGrow: this.styles.header.flexGrow
-        } : null
+        } : null,
+        accessibilityProps: accessibilityProps
       }), /*#__PURE__*/React.createElement(View, {
         onLayout: this.setHeaderPositon.bind(this, i)
       }, /*#__PURE__*/React.createElement(View, {
@@ -180,7 +188,8 @@ export default class WmTabheader extends BaseComponent {
       }, /*#__PURE__*/React.createElement(WmIcon, {
         id: this.getTestId(i + 'icon'),
         styles: this.theme.mergeStyle({}, this.styles.headerIcon, isSelected ? this.styles.activeHeaderIcon : null),
-        iconclass: header.icon
+        iconclass: header.icon,
+        accessible: false
       }), /*#__PURE__*/React.createElement(Text, _extends({
         numberOfLines: 1,
         style: [this.styles.headerText, isSelected ? this.styles.activeHeaderText : null]

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

@@ -1 +1 @@
-{"version":3,"names":["React","createRef","Animated","Easing","Text","View","ScrollView","BaseComponent","BaseComponentState","WmTabheaderProps","DEFAULT_CLASS","Tappable","createSkeleton","BackgroundComponent","WmIcon","WmTabheaderState","WmTabheader","constructor","props","_defineProperty","Value","headerScrollPosition","addListener","value","headerScrollPositionValue","setHeaderPanelPositon","nativeEvent","headerPanelLayout","layout","forceUpdate","setHeaderPositon","index","headersLayout","selectedTabIndex","onTabSelection","state","onIndexChange","scrollPosition","totalWidth","toIndicatorPosition","_this$headersLayout$s","_this$headersLayout$s2","_this$headerPanelLayo","initialPosition","isRTL","baseWidth","elementWidth","width","positionX","setPosition","_this$headersLayout$s3","_this$headerPanelLayo2","_this$headerPanelLayo3","_this$listRef$current","toIndicatorWidth","toHeaderScrollPosition","data","length","forEach","p","i","minScrollPosition","maxScrollPosition","Math","max","min","positionIndicator","position","listRef","current","scrollTo","x","y","parallel","timing","useNativeDriver","toValue","duration","easing","linear","indicatorWidth","reverseIndicatorWidth","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","disableTouchEffect","disabletoucheffect","activeHeader","theme","borderRadius","height","activeHeaderText","fontSize","activeIndicator","scaleX","renderWidget","arrowIndicator","_extends","overflow","zIndex","getTestProps","event","handleLayout","ref","horizontal","showsHorizontalScrollIndicator","scrollEnabled","shouldScroll","_background","getTestPropsForAction","flexGrow","undefined","id","getTestId","mergeStyle","headerIcon","activeHeaderIcon","iconclass","icon","numberOfLines","headerText","getTestPropsForLabel","title","backgroundImage","image","backgroundPosition","size","backgroundSize","repeat","backgroundRepeat","resizeMode","backgroundResizeMode","arrowIndicatorDot"],"sources":["tabheader.component.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport { Animated, Easing, LayoutChangeEvent, LayoutRectangle, Text, View, ScrollView } 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';\nimport WmIcon from \"@wavemaker/app-rn-runtime/components/basic/icon/icon.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 reverseIndicatorWidth = new Animated.Value(0);\n  private indicatorWidth = new Animated.Value(0);\n  private listRef: any = createRef();\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    this.forceUpdate();\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  scrollPosition(selectedTabIndex: number, totalWidth: number, toIndicatorPosition: number) {\n    const initialPosition = this.isRTL ? totalWidth : 0;\n    const baseWidth = this.isRTL ? totalWidth - toIndicatorPosition : toIndicatorPosition;\n    const elementWidth  = this.isRTL ? -1 * (this.headersLayout[selectedTabIndex]?.width/2) : this.headersLayout[selectedTabIndex]?.width/2\n    const positionX = selectedTabIndex === 0 ? initialPosition : \n      ((baseWidth + (elementWidth)) - (this.headerPanelLayout?.width || 0) / 2);\n\n    return positionX\n  }\n\n  setPosition() {\n    const selectedTabIndex = this.state.props.selectedTabIndex ? this.state.props.selectedTabIndex : 0\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\n    const positionX = this.scrollPosition(selectedTabIndex, totalWidth, toIndicatorPosition)\n\n    this.listRef.current?.scrollTo({\n      x: positionX,\n      y: 0,\n      Animated: true\n    });\n\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.reverseIndicatorWidth, {\n        useNativeDriver: true,\n        toValue:  toIndicatorWidth ? 100 / toIndicatorWidth : 0,\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}} disableTouchEffect={this.state.props.disabletoucheffect}>\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 || \"80%\",\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 arrowIndicator = this.styles.arrowIndicator as any;\n    return (\n      <View \n        style={{overflow: 'hidden', zIndex: 16}}\n        {...this.getTestProps('tabheader')}\n        onLayout={(event) => this.handleLayout(event)}\n      >\n      <ScrollView\n        ref={this.listRef}\n        horizontal={true}\n        onLayout={this.setHeaderPanelPositon.bind(this)}\n        showsHorizontalScrollIndicator={false}\n        scrollEnabled={props.shouldScroll}\n      >\n      <View>\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                {...this.getTestPropsForAction(i +'')}\n                key={header.key}\n                disableTouchEffect={this.state.props.disabletoucheffect}\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                    <WmIcon\n                      id={this.getTestId(i + 'icon')}\n                      styles={this.theme.mergeStyle({}, this.styles.headerIcon, isSelected ? this.styles.activeHeaderIcon : null)}\n                      iconclass={header.icon}></WmIcon>\n                    <Text numberOfLines={1} style={[\n                      this.styles.headerText,\n                      isSelected ? this.styles.activeHeaderText : null]}\n                      {...this.getTestPropsForLabel(i + '_title')}\n                    >{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          <Animated.View style={[{\n              transform: [{\n                scaleX: this.reverseIndicatorWidth\n              }]\n            },\n            this.styles.arrowIndicator\n          ]}>\n            {\n            arrowIndicator.backgroundImage ? (\n              <BackgroundComponent\n              image={arrowIndicator.backgroundImage}\n              position={arrowIndicator.backgroundPosition}\n              size={arrowIndicator.backgroundSize}\n              repeat={arrowIndicator.backgroundRepeat}\n              resizeMode={arrowIndicator.backgroundResizeMode}\n              style={{borderRadius: this.styles.root.borderRadius}}\n              ></BackgroundComponent>\n            ) : null }\n            <View style={this.styles.arrowIndicatorDot}></View>\n          </Animated.View>\n        </Animated.View>\n        </View>\n      </ScrollView>\n      </View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","createRef","Animated","Easing","Text","View","ScrollView","BaseComponent","BaseComponentState","WmTabheaderProps","DEFAULT_CLASS","Tappable","createSkeleton","BackgroundComponent","WmIcon","AccessibilityWidgetType","getAccessibilityProps","WmTabheaderState","WmTabheader","constructor","props","_defineProperty","Value","headerScrollPosition","addListener","value","headerScrollPositionValue","setHeaderPanelPositon","nativeEvent","headerPanelLayout","layout","forceUpdate","setHeaderPositon","index","headersLayout","selectedTabIndex","onTabSelection","state","onIndexChange","scrollPosition","totalWidth","toIndicatorPosition","_this$headersLayout$s","_this$headersLayout$s2","_this$headerPanelLayo","initialPosition","isRTL","baseWidth","elementWidth","width","positionX","setPosition","_this$headersLayout$s3","_this$headerPanelLayo2","_this$headerPanelLayo3","_this$listRef$current","toIndicatorWidth","toHeaderScrollPosition","data","length","forEach","p","i","minScrollPosition","maxScrollPosition","Math","max","min","positionIndicator","position","listRef","current","scrollTo","x","y","parallel","timing","useNativeDriver","toValue","duration","easing","linear","indicatorWidth","reverseIndicatorWidth","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","disableTouchEffect","disabletoucheffect","activeHeader","theme","borderRadius","height","activeHeaderText","fontSize","activeIndicator","scaleX","renderWidget","arrowIndicator","_extends","overflow","zIndex","getTestProps","event","handleLayout","ref","horizontal","showsHorizontalScrollIndicator","scrollEnabled","shouldScroll","_background","accessibilityProps","TABS","selected","accessibilitylabel","hint","accessibilityrole","getTestPropsForAction","flexGrow","undefined","id","getTestId","mergeStyle","headerIcon","activeHeaderIcon","iconclass","icon","accessible","numberOfLines","headerText","getTestPropsForLabel","title","backgroundImage","image","backgroundPosition","size","backgroundSize","repeat","backgroundRepeat","resizeMode","backgroundResizeMode","arrowIndicatorDot"],"sources":["tabheader.component.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport { Animated, Easing, LayoutChangeEvent, LayoutRectangle, Text, View, ScrollView } 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';\nimport WmIcon from \"@wavemaker/app-rn-runtime/components/basic/icon/icon.component\";\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';\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 reverseIndicatorWidth = new Animated.Value(0);\n  private indicatorWidth = new Animated.Value(0);\n  private listRef: any = createRef();\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    this.forceUpdate();\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  scrollPosition(selectedTabIndex: number, totalWidth: number, toIndicatorPosition: number) {\n    const initialPosition = this.isRTL ? totalWidth : 0;\n    const baseWidth = this.isRTL ? totalWidth - toIndicatorPosition : toIndicatorPosition;\n    const elementWidth  = this.isRTL ? -1 * (this.headersLayout[selectedTabIndex]?.width/2) : this.headersLayout[selectedTabIndex]?.width/2\n    const positionX = selectedTabIndex === 0 ? initialPosition : \n      ((baseWidth + (elementWidth)) - (this.headerPanelLayout?.width || 0) / 2);\n\n    return positionX\n  }\n\n  setPosition() {\n    const selectedTabIndex = this.state.props.selectedTabIndex ? this.state.props.selectedTabIndex : 0\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\n    const positionX = this.scrollPosition(selectedTabIndex, totalWidth, toIndicatorPosition)\n\n    this.listRef.current?.scrollTo({\n      x: positionX,\n      y: 0,\n      Animated: true\n    });\n\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.reverseIndicatorWidth, {\n        useNativeDriver: true,\n        toValue:  toIndicatorWidth ? 100 / toIndicatorWidth : 0,\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}} disableTouchEffect={this.state.props.disabletoucheffect}>\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 || \"80%\",\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 arrowIndicator = this.styles.arrowIndicator as any;\n    return (\n      <View \n        style={{overflow: 'hidden', zIndex: 16}}\n        {...this.getTestProps('tabheader')}\n        onLayout={(event) => this.handleLayout(event)}\n      >\n      <ScrollView\n        ref={this.listRef}\n        horizontal={true}\n        onLayout={this.setHeaderPanelPositon.bind(this)}\n        showsHorizontalScrollIndicator={false}\n        scrollEnabled={props.shouldScroll}\n      >\n      <View>\n        <View style={this.styles.root}>\n          {this._background}\n          {props.data.map((header ,i) => {\n            const isSelected = i === props.selectedTabIndex ;\n            const accessibilityProps = getAccessibilityProps(AccessibilityWidgetType.TABS, {\n              selected: isSelected,\n              accessibilitylabel: props.accessibilityProps[i].accessibilitylabel,\n              hint: props.accessibilityProps[i].hint,\n              accessibilityrole: props.accessibilityProps[i].accessibilityrole,\n            });\n            return (\n              <Tappable onTap={this.onTabSelection.bind(this, i)}\n                {...this.getTestPropsForAction(i +'')}\n                key={header.key}\n                disableTouchEffect={this.state.props.disabletoucheffect}\n                styles={this.styles.header.flexGrow ? {flexGrow: this.styles.header.flexGrow} : null} accessibilityProps={accessibilityProps}>\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                    <WmIcon\n                      id={this.getTestId(i + 'icon')}\n                      styles={this.theme.mergeStyle({}, this.styles.headerIcon, isSelected ? this.styles.activeHeaderIcon : null)}\n                      iconclass={header.icon}\n                      accessible={false}></WmIcon>\n                    <Text numberOfLines={1} style={[\n                      this.styles.headerText,\n                      isSelected ? this.styles.activeHeaderText : null]}\n                      {...this.getTestPropsForLabel(i + '_title')}\n                    >{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          <Animated.View style={[{\n              transform: [{\n                scaleX: this.reverseIndicatorWidth\n              }]\n            },\n            this.styles.arrowIndicator\n          ]}>\n            {\n            arrowIndicator.backgroundImage ? (\n              <BackgroundComponent\n              image={arrowIndicator.backgroundImage}\n              position={arrowIndicator.backgroundPosition}\n              size={arrowIndicator.backgroundSize}\n              repeat={arrowIndicator.backgroundRepeat}\n              resizeMode={arrowIndicator.backgroundResizeMode}\n              style={{borderRadius: this.styles.root.borderRadius}}\n              ></BackgroundComponent>\n            ) : null }\n            <View style={this.styles.arrowIndicatorDot}></View>\n          </Animated.View>\n        </Animated.View>\n        </View>\n      </ScrollView>\n      </View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -10,6 +10,7 @@ export default class WmTabheaderProps extends BaseProps {
     _defineProperty(this, "onIndexChange", null);
     _defineProperty(this, "shouldScroll", void 0);
     _defineProperty(this, "disabletoucheffect", false);
+    _defineProperty(this, "accessibilityProps", void 0);
   }
 }
 //# sourceMappingURL=tabheader.props.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmTabheaderProps","constructor","args","_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  shouldScroll?: boolean;\n  disabletoucheffect?: boolean = false;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,gBAAgB,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,eACD,EAAE;IAAAA,eAAA,2BACnC,CAAC;IAAAA,eAAA,wBACoB,IAAI;IAAAA,eAAA;IAAAA,eAAA,6BAEd,KAAK;EAAA;AACtC","ignoreList":[]}
+{"version":3,"names":["BaseProps","WmTabheaderProps","constructor","args","_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  shouldScroll?: boolean;\n  disabletoucheffect?: boolean = false;\n  accessibilityProps?: any;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,gBAAgB,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,eACD,EAAE;IAAAA,eAAA,2BACnC,CAAC;IAAAA,eAAA,wBACoB,IAAI;IAAAA,eAAA;IAAAA,eAAA,6BAEd,KAAK;IAAAA,eAAA;EAAA;AAEtC","ignoreList":[]}

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

@@ -11,6 +11,9 @@ export default class WmTabpaneProps extends BaseProps {
     _defineProperty(this, "renderPartial", void 0);
     _defineProperty(this, "isPartialLoaded", false);
     _defineProperty(this, "invokeVariables", true);
+    _defineProperty(this, "accessibilitylabel", undefined);
+    _defineProperty(this, "hint", undefined);
+    _defineProperty(this, "accessibilityrole", void 0);
   }
 }
 //# sourceMappingURL=tabpane.props.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmTabpaneProps","constructor","args","_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  invokeVariables = true;\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,cAAc,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;IAAAA,eAAA,mBAEhC,IAAI;IAAAA,eAAA,gBACR,WAAW;IAAAA,eAAA;IAAAA,eAAA,0BAER,KAAK;IAAAA,eAAA,0BACN,IAAI;EAAA;AACxB","ignoreList":[]}
+{"version":3,"names":["BaseProps","WmTabpaneProps","constructor","args","_defineProperty","undefined"],"sources":["tabpane.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AccessibilityRole } from 'react-native';\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  invokeVariables = true;\n  accessibilitylabel?: string = undefined;\n  hint?: string = undefined;\n  accessibilityrole?: AccessibilityRole;\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAGzE,eAAe,MAAMC,cAAc,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;IAAAA,eAAA,mBAEhC,IAAI;IAAAA,eAAA,gBACR,WAAW;IAAAA,eAAA;IAAAA,eAAA,0BAER,KAAK;IAAAA,eAAA,0BACN,IAAI;IAAAA,eAAA,6BACQC,SAAS;IAAAD,eAAA,eACvBC,SAAS;IAAAD,eAAA;EAAA;AAE3B","ignoreList":[]}

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

@@ -4,7 +4,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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';
+
+// TODO: Change the logic of gesture handler in swipe.animation file, as its interfering with scroll animation
+// for now Pan responder is being used instead of Gesture handler. 
+import * as SwipeAnimation from '@wavemaker/app-rn-runtime/gestures/carousel-swipe.animation';
 import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
 import WmTabsProps from './tabs.props';
 import { DEFAULT_CLASS } from './tabs.styles';
@@ -218,6 +221,11 @@ export default class WmTabs extends BaseComponent {
       icon: p.props.paneicon || '',
       key: `tab-${i}`
     }));
+    const accessibilityData = tabPanes.map((p, i) => ({
+      accessibilitylabel: p.props.accessibilitylabel || p.props.title,
+      hint: p.props.hint,
+      accessibilityrole: p.props.accessibilityrole
+    }));
     const styles = this._showSkeleton ? {
       ...this.styles.root,
       ...this.styles.skeleton.root
@@ -237,7 +245,8 @@ export default class WmTabs extends BaseComponent {
       selectedTabIndex: this.state.selectedTabIndex,
       onIndexChange: this.goToTab.bind(this),
       shouldScroll: props.enablescroll,
-      disabletoucheffect: this.state.props.disabletoucheffect
+      disabletoucheffect: this.state.props.disabletoucheffect,
+      accessibilityProps: accessibilityData
     }), /*#__PURE__*/React.createElement(View, {
       style: [{
         width: '100%',