@wavemaker/app-rn-runtime 11.4.0-next.26251 → 11.4.0-next.28151

app-rn-runtime/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","width","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 style={[{width: \"100%\"}, styles.root, this.styles.root]}>{props.children}</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,WAAW,CAACC,KAAwB,EAAE;IACpC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,iBAAiB,EAAE,CAAC;EACtD;EAEAM,YAAY,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,CAAE,UAASR,KAAK,CAACS,aAAc,YAAWT,KAAK,CAACU,WAAY,EAAC,CAAC;IAChG,oBACE,oBAAC,IAAI;MAAC,KAAK,EAAE,CAAC;QAACC,KAAK,EAAE;MAAM,CAAC,EAAET,MAAM,CAACC,IAAI,EAAE,IAAI,CAACD,MAAM,CAACC,IAAI;IAAE,GAAEH,KAAK,CAACY,QAAQ,CAAQ;EAE1F;AACF"}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmGridcolumnProps","DEFAULT_CLASS","WmGridcolumnState","WmGridcolumn","constructor","props","renderWidget","styles","root","height","overflow","undefined","theme","getStyle","xscolumnwidth","columnwidth","width","_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 style={[{width: \"100%\"}, styles.root, this.styles.root]}>{this._background}{props.children}</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,WAAW,CAACC,KAAwB,EAAE;IACpC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,iBAAiB,EAAE,CAAC;EACtD;EAEAM,YAAY,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,CAAE,UAASR,KAAK,CAACS,aAAc,YAAWT,KAAK,CAACU,WAAY,EAAC,CAAC;IAChG,oBACE,oBAAC,IAAI;MAAC,KAAK,EAAE,CAAC;QAACC,KAAK,EAAE;MAAM,CAAC,EAAET,MAAM,CAACC,IAAI,EAAE,IAAI,CAACD,MAAM,CAACC,IAAI;IAAE,GAAE,IAAI,CAACS,WAAW,EAAEZ,KAAK,CAACa,QAAQ,CAAQ;EAE5G;AACF"}

app-rn-runtime/components/container/layoutgrid/gridrow/gridrow.component.js

@@ -11,7 +11,7 @@ export default class WmGridrow extends BaseComponent {
   renderWidget(props) {
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
-    }, props.children);
+    }, this._background, props.children);
   }
 }
 //# sourceMappingURL=gridrow.component.js.map

app-rn-runtime/components/container/layoutgrid/gridrow/gridrow.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmGridrowProps","DEFAULT_CLASS","WmGridrowState","WmGridrow","constructor","props","renderWidget","styles","root","children"],"sources":["gridrow.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 WmGridrowProps from './gridrow.props';\nimport { DEFAULT_CLASS, WmGridRowStyles } from './gridrow.styles';\n\nexport class WmGridrowState extends BaseComponentState<WmGridrowProps> {\n\n}\n\nexport default class WmGridrow extends BaseComponent<WmGridrowProps, WmGridrowState, WmGridRowStyles> {\n\n  constructor(props: WmGridrowProps) {\n    super(props, DEFAULT_CLASS, new WmGridrowProps());\n  }\n\n  renderWidget(props: WmGridrowProps) {\n    return (\n      <View style={this.styles.root}>{props.children}</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,cAAc,MAAM,iBAAiB;AAC5C,SAASC,aAAa,QAAyB,kBAAkB;AAEjE,OAAO,MAAMC,cAAc,SAASH,kBAAkB,CAAiB;AAIvE,eAAe,MAAMI,SAAS,SAASL,aAAa,CAAkD;EAEpGM,WAAW,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,cAAc,EAAE,CAAC;EACnD;EAEAM,YAAY,CAACD,KAAqB,EAAE;IAClC,oBACE,oBAAC,IAAI;MAAC,KAAK,EAAE,IAAI,CAACE,MAAM,CAACC;IAAK,GAAEH,KAAK,CAACI,QAAQ,CAAQ;EAE1D;AACF"}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmGridrowProps","DEFAULT_CLASS","WmGridrowState","WmGridrow","constructor","props","renderWidget","styles","root","_background","children"],"sources":["gridrow.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 WmGridrowProps from './gridrow.props';\nimport { DEFAULT_CLASS, WmGridRowStyles } from './gridrow.styles';\n\nexport class WmGridrowState extends BaseComponentState<WmGridrowProps> {\n\n}\n\nexport default class WmGridrow extends BaseComponent<WmGridrowProps, WmGridrowState, WmGridRowStyles> {\n\n  constructor(props: WmGridrowProps) {\n    super(props, DEFAULT_CLASS, new WmGridrowProps());\n  }\n\n  renderWidget(props: WmGridrowProps) {\n    return (\n      <View style={this.styles.root}>{this._background}{props.children}</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,cAAc,MAAM,iBAAiB;AAC5C,SAASC,aAAa,QAAyB,kBAAkB;AAEjE,OAAO,MAAMC,cAAc,SAASH,kBAAkB,CAAiB;AAIvE,eAAe,MAAMI,SAAS,SAASL,aAAa,CAAkD;EAEpGM,WAAW,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,cAAc,EAAE,CAAC;EACnD;EAEAM,YAAY,CAACD,KAAqB,EAAE;IAClC,oBACE,oBAAC,IAAI;MAAC,KAAK,EAAE,IAAI,CAACE,MAAM,CAACC;IAAK,GAAE,IAAI,CAACC,WAAW,EAAEJ,KAAK,CAACK,QAAQ,CAAQ;EAE5E;AACF"}

app-rn-runtime/components/container/layoutgrid/layoutgrid.component.js

@@ -11,7 +11,7 @@ export default class WmLayoutgrid extends BaseComponent {
   renderWidget(props) {
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
-    }, props.children);
+    }, this._background, props.children);
   }
 }
 //# sourceMappingURL=layoutgrid.component.js.map

app-rn-runtime/components/container/layoutgrid/layoutgrid.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmLayoutgridProps","DEFAULT_CLASS","WmLayoutgridState","WmLayoutgrid","constructor","props","renderWidget","styles","root","children"],"sources":["layoutgrid.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 WmLayoutgridProps from './layoutgrid.props';\nimport { DEFAULT_CLASS, WmLayoutGridStyles } from './layoutgrid.styles';\n\nexport class WmLayoutgridState extends BaseComponentState<WmLayoutgridProps> {\n\n}\n\nexport default class WmLayoutgrid extends BaseComponent<WmLayoutgridProps, WmLayoutgridState, WmLayoutGridStyles> {\n\n  constructor(props: WmLayoutgridProps) {\n    super(props, DEFAULT_CLASS, new WmLayoutgridProps());\n  }\n\n  renderWidget(props: WmLayoutgridProps) {\n    return (\n      <View style={this.styles.root}>{props.children}</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,WAAW,CAACC,KAAwB,EAAE;IACpC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,iBAAiB,EAAE,CAAC;EACtD;EAEAM,YAAY,CAACD,KAAwB,EAAE;IACrC,oBACE,oBAAC,IAAI;MAAC,KAAK,EAAE,IAAI,CAACE,MAAM,CAACC;IAAK,GAAEH,KAAK,CAACI,QAAQ,CAAQ;EAE1D;AACF"}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmLayoutgridProps","DEFAULT_CLASS","WmLayoutgridState","WmLayoutgrid","constructor","props","renderWidget","styles","root","_background","children"],"sources":["layoutgrid.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 WmLayoutgridProps from './layoutgrid.props';\nimport { DEFAULT_CLASS, WmLayoutGridStyles } from './layoutgrid.styles';\n\nexport class WmLayoutgridState extends BaseComponentState<WmLayoutgridProps> {\n\n}\n\nexport default class WmLayoutgrid extends BaseComponent<WmLayoutgridProps, WmLayoutgridState, WmLayoutGridStyles> {\n\n  constructor(props: WmLayoutgridProps) {\n    super(props, DEFAULT_CLASS, new WmLayoutgridProps());\n  }\n\n  renderWidget(props: WmLayoutgridProps) {\n    return (\n      <View style={this.styles.root}>{this._background}{props.children}</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,WAAW,CAACC,KAAwB,EAAE;IACpC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,iBAAiB,EAAE,CAAC;EACtD;EAEAM,YAAY,CAACD,KAAwB,EAAE;IACrC,oBACE,oBAAC,IAAI;MAAC,KAAK,EAAE,IAAI,CAACE,MAAM,CAACC;IAAK,GAAE,IAAI,CAACC,WAAW,EAAEJ,KAAK,CAACK,QAAQ,CAAQ;EAE5E;AACF"}

app-rn-runtime/components/container/linearlayout/linearlayout.component.js

@@ -36,7 +36,7 @@ export default class WmLinearlayout extends BaseComponent {
         ...this.getStyles(props),
         ...this.styles.root
       }
-    }, props.children);
+    }, this._background, props.children);
   }
 }
 //# sourceMappingURL=linearlayout.component.js.map

app-rn-runtime/components/container/linearlayout/linearlayout.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmLinearlayoutProps","DEFAULT_CLASS","ALIGNMENT_MAP","WmLinearlayoutState","WmLinearlayout","constructor","props","getStyles","s","direction","display","flexDirection","isHorizontal","startsWith","justifyContent","horizontalalign","alignItems","verticalalign","renderWidget","styles","root","children"],"sources":["linearlayout.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, ViewStyle } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmLinearlayoutProps from './linearlayout.props';\nimport { DEFAULT_CLASS, WmLinearlayoutStyles } from './linearlayout.styles';\n\nconst ALIGNMENT_MAP = {\n  'top':  'flex-start',\n  'left': 'flex-start',\n  'center': 'center',\n  'right': 'flex-end',\n  'bottom': 'flex-end'\n} as any;\n\nexport class WmLinearlayoutState extends BaseComponentState<WmLinearlayoutProps> {}\n\nexport default class WmLinearlayout extends BaseComponent<WmLinearlayoutProps, WmLinearlayoutState, WmLinearlayoutStyles> {\n\n  constructor(props: WmLinearlayoutProps) {\n    super(props, DEFAULT_CLASS, new WmLinearlayoutProps());\n  }\n\n  getStyles(props: WmLinearlayoutProps) {\n    const s = {} as ViewStyle;\n    const direction = props.direction;\n    s.display = 'flex';\n    s.flexDirection = direction;\n    const isHorizontal = direction.startsWith('row');\n    if (isHorizontal) {\n      s.justifyContent = ALIGNMENT_MAP[props.horizontalalign];\n      s.alignItems = ALIGNMENT_MAP[props.verticalalign];\n    } else {\n      s.justifyContent = ALIGNMENT_MAP[props.verticalalign];\n      s.alignItems = ALIGNMENT_MAP[props.horizontalalign];\n    }\n    return s;\n  }\n\n  renderWidget(props: WmLinearlayoutProps) {\n    return (<View style={{...this.getStyles(props), ...this.styles.root}}>\n      {props.children}\n      </View>); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAmB,cAAc;AAC9C,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,mBAAmB,MAAM,sBAAsB;AACtD,SAASC,aAAa,QAA8B,uBAAuB;AAE3E,MAAMC,aAAa,GAAG;EACpB,KAAK,EAAG,YAAY;EACpB,MAAM,EAAE,YAAY;EACpB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,UAAU;EACnB,QAAQ,EAAE;AACZ,CAAQ;AAER,OAAO,MAAMC,mBAAmB,SAASJ,kBAAkB,CAAsB;AAEjF,eAAe,MAAMK,cAAc,SAASN,aAAa,CAAiE;EAExHO,WAAW,CAACC,KAA0B,EAAE;IACtC,KAAK,CAACA,KAAK,EAAEL,aAAa,EAAE,IAAID,mBAAmB,EAAE,CAAC;EACxD;EAEAO,SAAS,CAACD,KAA0B,EAAE;IACpC,MAAME,CAAC,GAAG,CAAC,CAAc;IACzB,MAAMC,SAAS,GAAGH,KAAK,CAACG,SAAS;IACjCD,CAAC,CAACE,OAAO,GAAG,MAAM;IAClBF,CAAC,CAACG,aAAa,GAAGF,SAAS;IAC3B,MAAMG,YAAY,GAAGH,SAAS,CAACI,UAAU,CAAC,KAAK,CAAC;IAChD,IAAID,YAAY,EAAE;MAChBJ,CAAC,CAACM,cAAc,GAAGZ,aAAa,CAACI,KAAK,CAACS,eAAe,CAAC;MACvDP,CAAC,CAACQ,UAAU,GAAGd,aAAa,CAACI,KAAK,CAACW,aAAa,CAAC;IACnD,CAAC,MAAM;MACLT,CAAC,CAACM,cAAc,GAAGZ,aAAa,CAACI,KAAK,CAACW,aAAa,CAAC;MACrDT,CAAC,CAACQ,UAAU,GAAGd,aAAa,CAACI,KAAK,CAACS,eAAe,CAAC;IACrD;IACA,OAAOP,CAAC;EACV;EAEAU,YAAY,CAACZ,KAA0B,EAAE;IACvC,oBAAQ,oBAAC,IAAI;MAAC,KAAK,EAAE;QAAC,GAAG,IAAI,CAACC,SAAS,CAACD,KAAK,CAAC;QAAE,GAAG,IAAI,CAACa,MAAM,CAACC;MAAI;IAAE,GAClEd,KAAK,CAACe,QAAQ,CACR;EACX;AACF"}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmLinearlayoutProps","DEFAULT_CLASS","ALIGNMENT_MAP","WmLinearlayoutState","WmLinearlayout","constructor","props","getStyles","s","direction","display","flexDirection","isHorizontal","startsWith","justifyContent","horizontalalign","alignItems","verticalalign","renderWidget","styles","root","_background","children"],"sources":["linearlayout.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, ViewStyle } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmLinearlayoutProps from './linearlayout.props';\nimport { DEFAULT_CLASS, WmLinearlayoutStyles } from './linearlayout.styles';\n\nconst ALIGNMENT_MAP = {\n  'top':  'flex-start',\n  'left': 'flex-start',\n  'center': 'center',\n  'right': 'flex-end',\n  'bottom': 'flex-end'\n} as any;\n\nexport class WmLinearlayoutState extends BaseComponentState<WmLinearlayoutProps> {}\n\nexport default class WmLinearlayout extends BaseComponent<WmLinearlayoutProps, WmLinearlayoutState, WmLinearlayoutStyles> {\n\n  constructor(props: WmLinearlayoutProps) {\n    super(props, DEFAULT_CLASS, new WmLinearlayoutProps());\n  }\n\n  getStyles(props: WmLinearlayoutProps) {\n    const s = {} as ViewStyle;\n    const direction = props.direction;\n    s.display = 'flex';\n    s.flexDirection = direction;\n    const isHorizontal = direction.startsWith('row');\n    if (isHorizontal) {\n      s.justifyContent = ALIGNMENT_MAP[props.horizontalalign];\n      s.alignItems = ALIGNMENT_MAP[props.verticalalign];\n    } else {\n      s.justifyContent = ALIGNMENT_MAP[props.verticalalign];\n      s.alignItems = ALIGNMENT_MAP[props.horizontalalign];\n    }\n    return s;\n  }\n\n  renderWidget(props: WmLinearlayoutProps) {\n    return (<View style={{...this.getStyles(props), ...this.styles.root}}>\n      {this._background}{props.children}\n      </View>); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAmB,cAAc;AAC9C,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,mBAAmB,MAAM,sBAAsB;AACtD,SAASC,aAAa,QAA8B,uBAAuB;AAE3E,MAAMC,aAAa,GAAG;EACpB,KAAK,EAAG,YAAY;EACpB,MAAM,EAAE,YAAY;EACpB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,UAAU;EACnB,QAAQ,EAAE;AACZ,CAAQ;AAER,OAAO,MAAMC,mBAAmB,SAASJ,kBAAkB,CAAsB;AAEjF,eAAe,MAAMK,cAAc,SAASN,aAAa,CAAiE;EAExHO,WAAW,CAACC,KAA0B,EAAE;IACtC,KAAK,CAACA,KAAK,EAAEL,aAAa,EAAE,IAAID,mBAAmB,EAAE,CAAC;EACxD;EAEAO,SAAS,CAACD,KAA0B,EAAE;IACpC,MAAME,CAAC,GAAG,CAAC,CAAc;IACzB,MAAMC,SAAS,GAAGH,KAAK,CAACG,SAAS;IACjCD,CAAC,CAACE,OAAO,GAAG,MAAM;IAClBF,CAAC,CAACG,aAAa,GAAGF,SAAS;IAC3B,MAAMG,YAAY,GAAGH,SAAS,CAACI,UAAU,CAAC,KAAK,CAAC;IAChD,IAAID,YAAY,EAAE;MAChBJ,CAAC,CAACM,cAAc,GAAGZ,aAAa,CAACI,KAAK,CAACS,eAAe,CAAC;MACvDP,CAAC,CAACQ,UAAU,GAAGd,aAAa,CAACI,KAAK,CAACW,aAAa,CAAC;IACnD,CAAC,MAAM;MACLT,CAAC,CAACM,cAAc,GAAGZ,aAAa,CAACI,KAAK,CAACW,aAAa,CAAC;MACrDT,CAAC,CAACQ,UAAU,GAAGd,aAAa,CAACI,KAAK,CAACS,eAAe,CAAC;IACrD;IACA,OAAOP,CAAC;EACV;EAEAU,YAAY,CAACZ,KAA0B,EAAE;IACvC,oBAAQ,oBAAC,IAAI;MAAC,KAAK,EAAE;QAAC,GAAG,IAAI,CAACC,SAAS,CAACD,KAAK,CAAC;QAAE,GAAG,IAAI,CAACa,MAAM,CAACC;MAAI;IAAE,GAClE,IAAI,CAACC,WAAW,EAAEf,KAAK,CAACgB,QAAQ,CAC1B;EACX;AACF"}

app-rn-runtime/components/container/linearlayout/linearlayoutitem/linearlayoutitem.component.js

@@ -18,7 +18,7 @@ export default class WmLinearlayoutitem extends BaseComponent {
         flexShrink: isNil(props.flexshrink) ? props.flexgrow : props.flexshrink,
         flexBasis: props.flexgrow && (direction === 'row' || direction === 'row-reverse') ? 0 : 'auto'
       }
-    }, props.children);
+    }, this._background, props.children);
   }
 }
 //# sourceMappingURL=linearlayoutitem.component.js.map

app-rn-runtime/components/container/linearlayout/linearlayoutitem/linearlayoutitem.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","isNil","BaseComponent","BaseComponentState","WmLinearlayoutitemProps","DEFAULT_CLASS","WmLinearlayoutitemState","WmLinearlayoutitem","constructor","props","renderWidget","direction","parent","state","styles","root","flexGrow","flexgrow","flexShrink","flexshrink","flexBasis","children"],"sources":["linearlayoutitem.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } 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 (<View style={{\n      ...this.styles.root,\n      flexGrow: props.flexgrow,\n      flexShrink: isNil(props.flexshrink) ? props.flexgrow : props.flexshrink,\n      flexBasis:  props.flexgrow && (direction === 'row' || direction === 'row-reverse') ? 0 : 'auto'\n    }}>{props.children}</View>); \n  }\n}"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,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,WAAW,CAACC,KAA8B,EAAE;IAC1C,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,uBAAuB,EAAE,CAAC;EAC5D;EAEAM,YAAY,CAACD,KAA8B,EAAE;IAC3C,MAAME,SAAS,GAAI,IAAI,CAACC,MAAM,CAAoBC,KAAK,CAACJ,KAAK,CAACE,SAAS;IACvE,oBAAQ,oBAAC,IAAI;MAAC,KAAK,EAAE;QACnB,GAAG,IAAI,CAACG,MAAM,CAACC,IAAI;QACnBC,QAAQ,EAAEP,KAAK,CAACQ,QAAQ;QACxBC,UAAU,EAAEjB,KAAK,CAACQ,KAAK,CAACU,UAAU,CAAC,GAAGV,KAAK,CAACQ,QAAQ,GAAGR,KAAK,CAACU,UAAU;QACvEC,SAAS,EAAGX,KAAK,CAACQ,QAAQ,KAAKN,SAAS,KAAK,KAAK,IAAIA,SAAS,KAAK,aAAa,CAAC,GAAG,CAAC,GAAG;MAC3F;IAAE,GAAEF,KAAK,CAACY,QAAQ,CAAQ;EAC5B;AACF"}
+{"version":3,"names":["React","View","isNil","BaseComponent","BaseComponentState","WmLinearlayoutitemProps","DEFAULT_CLASS","WmLinearlayoutitemState","WmLinearlayoutitem","constructor","props","renderWidget","direction","parent","state","styles","root","flexGrow","flexgrow","flexShrink","flexshrink","flexBasis","_background","children"],"sources":["linearlayoutitem.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } 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 (<View style={{\n      ...this.styles.root,\n      flexGrow: props.flexgrow,\n      flexShrink: isNil(props.flexshrink) ? props.flexgrow : props.flexshrink,\n      flexBasis:  props.flexgrow && (direction === 'row' || direction === 'row-reverse') ? 0 : 'auto'\n    }}>{this._background}{props.children}</View>); \n  }\n}"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,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,WAAW,CAACC,KAA8B,EAAE;IAC1C,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,uBAAuB,EAAE,CAAC;EAC5D;EAEAM,YAAY,CAACD,KAA8B,EAAE;IAC3C,MAAME,SAAS,GAAI,IAAI,CAACC,MAAM,CAAoBC,KAAK,CAACJ,KAAK,CAACE,SAAS;IACvE,oBAAQ,oBAAC,IAAI;MAAC,KAAK,EAAE;QACnB,GAAG,IAAI,CAACG,MAAM,CAACC,IAAI;QACnBC,QAAQ,EAAEP,KAAK,CAACQ,QAAQ;QACxBC,UAAU,EAAEjB,KAAK,CAACQ,KAAK,CAACU,UAAU,CAAC,GAAGV,KAAK,CAACQ,QAAQ,GAAGR,KAAK,CAACU,UAAU;QACvEC,SAAS,EAAGX,KAAK,CAACQ,QAAQ,KAAKN,SAAS,KAAK,KAAK,IAAIA,SAAS,KAAK,aAAa,CAAC,GAAG,CAAC,GAAG;MAC3F;IAAE,GAAE,IAAI,CAACU,WAAW,EAAEZ,KAAK,CAACa,QAAQ,CAAQ;EAC9C;AACF"}

app-rn-runtime/components/container/panel/panel-content/panel-content.component.js

@@ -11,7 +11,7 @@ export default class WmPanelContent extends BaseComponent {
   renderWidget(props) {
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
-    }, props.children);
+    }, this._background, props.children);
   }
 }
 //# sourceMappingURL=panel-content.component.js.map

app-rn-runtime/components/container/panel/panel-content/panel-content.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmPanelContentProps","DEFAULT_CLASS","WmPanelContentState","WmPanelContent","constructor","props","renderWidget","styles","root","children"],"sources":["panel-content.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 WmPanelContentProps from './panel-content.props';\nimport { DEFAULT_CLASS, WmPanelContentStyles } from './panel-content.styles';\n\nexport class WmPanelContentState extends BaseComponentState<WmPanelContentProps> {}\n\nexport default class WmPanelContent extends BaseComponent<WmPanelContentProps, WmPanelContentState, WmPanelContentStyles> {\n\n  constructor(props: WmPanelContentProps) {\n    super(props, DEFAULT_CLASS, new WmPanelContentProps());\n  }\n\n  renderWidget(props: WmPanelContentProps) {\n    return (<View style={this.styles.root}>{props.children}</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,mBAAmB,MAAM,uBAAuB;AACvD,SAASC,aAAa,QAA8B,wBAAwB;AAE5E,OAAO,MAAMC,mBAAmB,SAASH,kBAAkB,CAAsB;AAEjF,eAAe,MAAMI,cAAc,SAASL,aAAa,CAAiE;EAExHM,WAAW,CAACC,KAA0B,EAAE;IACtC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,mBAAmB,EAAE,CAAC;EACxD;EAEAM,YAAY,CAACD,KAA0B,EAAE;IACvC,oBAAQ,oBAAC,IAAI;MAAC,KAAK,EAAE,IAAI,CAACE,MAAM,CAACC;IAAK,GAAEH,KAAK,CAACI,QAAQ,CAAQ;EAChE;AACF"}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmPanelContentProps","DEFAULT_CLASS","WmPanelContentState","WmPanelContent","constructor","props","renderWidget","styles","root","_background","children"],"sources":["panel-content.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 WmPanelContentProps from './panel-content.props';\nimport { DEFAULT_CLASS, WmPanelContentStyles } from './panel-content.styles';\n\nexport class WmPanelContentState extends BaseComponentState<WmPanelContentProps> {}\n\nexport default class WmPanelContent extends BaseComponent<WmPanelContentProps, WmPanelContentState, WmPanelContentStyles> {\n\n  constructor(props: WmPanelContentProps) {\n    super(props, DEFAULT_CLASS, new WmPanelContentProps());\n  }\n\n  renderWidget(props: WmPanelContentProps) {\n    return (<View style={this.styles.root}>{this._background}{props.children}</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,mBAAmB,MAAM,uBAAuB;AACvD,SAASC,aAAa,QAA8B,wBAAwB;AAE5E,OAAO,MAAMC,mBAAmB,SAASH,kBAAkB,CAAsB;AAEjF,eAAe,MAAMI,cAAc,SAASL,aAAa,CAAiE;EAExHM,WAAW,CAACC,KAA0B,EAAE;IACtC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,mBAAmB,EAAE,CAAC;EACxD;EAEAM,YAAY,CAACD,KAA0B,EAAE;IACvC,oBAAQ,oBAAC,IAAI;MAAC,KAAK,EAAE,IAAI,CAACE,MAAM,CAACC;IAAK,GAAE,IAAI,CAACC,WAAW,EAAEJ,KAAK,CAACK,QAAQ,CAAQ;EAClF;AACF"}

app-rn-runtime/components/container/panel/panel-footer/panel-footer.component.js

@@ -11,7 +11,7 @@ export default class WmPanelFooter extends BaseComponent {
   renderWidget(props) {
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
-    }, props.children);
+    }, this._background, props.children);
   }
 }
 //# sourceMappingURL=panel-footer.component.js.map

app-rn-runtime/components/container/panel/panel-footer/panel-footer.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmPanelFooterProps","DEFAULT_CLASS","WmPanelFooterState","WmPanelFooter","constructor","props","renderWidget","styles","root","children"],"sources":["panel-footer.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 WmPanelFooterProps from './panel-footer.props';\nimport { DEFAULT_CLASS, WmPanelFooterStyles } from './panel-footer.styles';\n\nexport class WmPanelFooterState extends BaseComponentState<WmPanelFooterProps> {}\n\nexport default class WmPanelFooter extends BaseComponent<WmPanelFooterProps, WmPanelFooterState, WmPanelFooterStyles> {\n\n  constructor(props: WmPanelFooterProps) {\n    super(props, DEFAULT_CLASS, new WmPanelFooterProps());\n  }\n\n  renderWidget(props: WmPanelFooterProps) {\n    return (<View style={this.styles.root}>{props.children}</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,kBAAkB,MAAM,sBAAsB;AACrD,SAASC,aAAa,QAA6B,uBAAuB;AAE1E,OAAO,MAAMC,kBAAkB,SAASH,kBAAkB,CAAqB;AAE/E,eAAe,MAAMI,aAAa,SAASL,aAAa,CAA8D;EAEpHM,WAAW,CAACC,KAAyB,EAAE;IACrC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,kBAAkB,EAAE,CAAC;EACvD;EAEAM,YAAY,CAACD,KAAyB,EAAE;IACtC,oBAAQ,oBAAC,IAAI;MAAC,KAAK,EAAE,IAAI,CAACE,MAAM,CAACC;IAAK,GAAEH,KAAK,CAACI,QAAQ,CAAQ;EAChE;AACF"}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmPanelFooterProps","DEFAULT_CLASS","WmPanelFooterState","WmPanelFooter","constructor","props","renderWidget","styles","root","_background","children"],"sources":["panel-footer.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 WmPanelFooterProps from './panel-footer.props';\nimport { DEFAULT_CLASS, WmPanelFooterStyles } from './panel-footer.styles';\n\nexport class WmPanelFooterState extends BaseComponentState<WmPanelFooterProps> {}\n\nexport default class WmPanelFooter extends BaseComponent<WmPanelFooterProps, WmPanelFooterState, WmPanelFooterStyles> {\n\n  constructor(props: WmPanelFooterProps) {\n    super(props, DEFAULT_CLASS, new WmPanelFooterProps());\n  }\n\n  renderWidget(props: WmPanelFooterProps) {\n    return (<View style={this.styles.root}>{this._background}{props.children}</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,kBAAkB,MAAM,sBAAsB;AACrD,SAASC,aAAa,QAA6B,uBAAuB;AAE1E,OAAO,MAAMC,kBAAkB,SAASH,kBAAkB,CAAqB;AAE/E,eAAe,MAAMI,aAAa,SAASL,aAAa,CAA8D;EAEpHM,WAAW,CAACC,KAAyB,EAAE;IACrC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,kBAAkB,EAAE,CAAC;EACvD;EAEAM,YAAY,CAACD,KAAyB,EAAE;IACtC,oBAAQ,oBAAC,IAAI;MAAC,KAAK,EAAE,IAAI,CAACE,MAAM,CAACC;IAAK,GAAE,IAAI,CAACC,WAAW,EAAEJ,KAAK,CAACK,QAAQ,CAAQ;EAClF;AACF"}

app-rn-runtime/components/container/panel/panel.component.js

@@ -116,7 +116,7 @@ export default class WmPanel extends BaseComponent {
   renderWidget(props) {
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
-    }, /*#__PURE__*/React.createElement(List.AccordionGroup, {
+    }, this._background, /*#__PURE__*/React.createElement(List.AccordionGroup, {
       expandedId: this.state.expandedId,
       onAccordionPress: this.onPanelPress.bind(this)
     }, /*#__PURE__*/React.createElement(Animatedview, {

app-rn-runtime/components/container/panel/panel.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Badge","List","BaseComponent","BaseComponentState","WmIcon","WmPanelProps","DEFAULT_CLASS","Animatedview","WmPanelState","WmPanel","constructor","props","updateState","expandedId","state","expanded","onPartialLoad","invokeEventCallback","renderContent","renderPartial","isPartialLoaded","setTimeout","bind","onPanelPress","collapsible","paneId","eventName","animatedRef","triggerExit","then","res","proxy","expandCollapseIcon","isExpanded","widgetProps","badge","badgevalue","undefined","styles","badgetype","iconclass","toggleIcon","flexDirection","renderPanel","icon","name","title","header","text","subheading","marginLeft","ref","children","renderWidget","root","animation"],"sources":["panel.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { Badge, List } from 'react-native-paper';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\n\nimport WmPanelProps from './panel.props';\nimport { DEFAULT_CLASS, WmPanelStyles } from './panel.styles';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\n\nexport class WmPanelState extends BaseComponentState<WmPanelProps> {\n  expandedId: any;\n  isPartialLoaded = false;\n}\n\nexport default class WmPanel extends BaseComponent<WmPanelProps, WmPanelState, WmPanelStyles> {\n  private animatedRef: any;\n  constructor(props: WmPanelProps) {\n    super(props, DEFAULT_CLASS, new WmPanelProps());\n    this.updateState({\n      expandedId: this.state.props.expanded ? 1 : -1,\n    } as WmPanelState);\n  }\n\n  onPartialLoad() {\n    this.invokeEventCallback('onLoad', [this]);\n  }\n\n  renderContent(props: WmPanelProps) {\n    if (props.renderPartial) {\n      if (!this.state.isPartialLoaded) {\n        setTimeout(() => {\n          this.updateState({\n            isPartialLoaded: true\n          } as WmPanelState);\n        });\n      }\n      return props.renderPartial(this.onPartialLoad.bind(this));\n    }\n  }\n\n  onPanelPress(expandedId: any) {\n    if (!this.state.props.collapsible) {\n      return;\n    }\n    const paneId = expandedId === this.state.expandedId ? -1 : 1;\n    const eventName = paneId === 1 ? 'onExpand' : 'onCollapse';\n\n    if (eventName === 'onCollapse') {\n      this.animatedRef.triggerExit().then((res: any) => {\n        if (res) {\n          this.updateState({\n            expandedId: paneId,\n            props: {\n              expanded: false\n            }\n          } as WmPanelState);\n        }\n      })\n    } else {\n      this.updateState({\n        expandedId: paneId,\n        props: {\n          expanded: true\n        }\n      } as WmPanelState);\n    }\n\n    this.invokeEventCallback(eventName, [null, this.proxy]);\n  }\n\n  expandCollapseIcon(isExpanded: boolean) {\n    const widgetProps = this.state.props;\n    //@ts-ignore\n    const badge = widgetProps.badgevalue != undefined ? (<Badge style={[this.styles.badge, this.styles[widgetProps.badgetype || 'default']]}>{widgetProps.badgevalue}</Badge>): null;\n    const iconclass = isExpanded ? 'wi wi-chevron-up' : 'wi wi-chevron-down';\n    const expandCollapseIcon = widgetProps.collapsible ? (<WmIcon name={'expand_collapse_icon'} styles={this.styles.toggleIcon} iconclass={iconclass}></WmIcon>) : null;\n    return (<View style={{flexDirection: 'row'}}>{badge}{expandCollapseIcon}</View>);\n  }\n\n  renderPanel(props: WmPanelProps) {\n    const icon = (<WmIcon styles={this.styles.icon} name={props.name + '_icon'} iconclass={props.iconclass}></WmIcon>);\n    return (\n      <List.Accordion title={props.title} style={this.styles.header} id={1}\n                      titleStyle={this.styles.text} descriptionStyle={this.styles.subheading}\n                      description={props.subheading}\n                      expanded={props.expanded} \n                      right={({isExpanded}) => this.expandCollapseIcon(isExpanded)} left={props => icon}>\n        <Animatedview style={{marginLeft: -64}} ref={ref => this.animatedRef = ref} entryanimation={'fadeInDown'}>\n          <View>{this.renderContent(props)}</View>\n          <View>{props.children}</View>\n        </Animatedview>\n      </List.Accordion>\n    );\n  }\n\n  renderWidget(props: WmPanelProps) {\n    return (<View style={this.styles.root}>\n                  <List.AccordionGroup expandedId={this.state.expandedId} onAccordionPress={this.onPanelPress.bind(this)}>\n                      <Animatedview entryanimation={props.animation}>\n                        {this.renderPanel(props)}\n                      </Animatedview>\n                  </List.AccordionGroup>\n            </View>);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","View","Badge","List","BaseComponent","BaseComponentState","WmIcon","WmPanelProps","DEFAULT_CLASS","Animatedview","WmPanelState","WmPanel","constructor","props","updateState","expandedId","state","expanded","onPartialLoad","invokeEventCallback","renderContent","renderPartial","isPartialLoaded","setTimeout","bind","onPanelPress","collapsible","paneId","eventName","animatedRef","triggerExit","then","res","proxy","expandCollapseIcon","isExpanded","widgetProps","badge","badgevalue","undefined","styles","badgetype","iconclass","toggleIcon","flexDirection","renderPanel","icon","name","title","header","text","subheading","marginLeft","ref","children","renderWidget","root","_background","animation"],"sources":["panel.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { Badge, List } from 'react-native-paper';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\n\nimport WmPanelProps from './panel.props';\nimport { DEFAULT_CLASS, WmPanelStyles } from './panel.styles';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\n\nexport class WmPanelState extends BaseComponentState<WmPanelProps> {\n  expandedId: any;\n  isPartialLoaded = false;\n}\n\nexport default class WmPanel extends BaseComponent<WmPanelProps, WmPanelState, WmPanelStyles> {\n  private animatedRef: any;\n  constructor(props: WmPanelProps) {\n    super(props, DEFAULT_CLASS, new WmPanelProps());\n    this.updateState({\n      expandedId: this.state.props.expanded ? 1 : -1,\n    } as WmPanelState);\n  }\n\n  onPartialLoad() {\n    this.invokeEventCallback('onLoad', [this]);\n  }\n\n  renderContent(props: WmPanelProps) {\n    if (props.renderPartial) {\n      if (!this.state.isPartialLoaded) {\n        setTimeout(() => {\n          this.updateState({\n            isPartialLoaded: true\n          } as WmPanelState);\n        });\n      }\n      return props.renderPartial(this.onPartialLoad.bind(this));\n    }\n  }\n\n  onPanelPress(expandedId: any) {\n    if (!this.state.props.collapsible) {\n      return;\n    }\n    const paneId = expandedId === this.state.expandedId ? -1 : 1;\n    const eventName = paneId === 1 ? 'onExpand' : 'onCollapse';\n\n    if (eventName === 'onCollapse') {\n      this.animatedRef.triggerExit().then((res: any) => {\n        if (res) {\n          this.updateState({\n            expandedId: paneId,\n            props: {\n              expanded: false\n            }\n          } as WmPanelState);\n        }\n      })\n    } else {\n      this.updateState({\n        expandedId: paneId,\n        props: {\n          expanded: true\n        }\n      } as WmPanelState);\n    }\n\n    this.invokeEventCallback(eventName, [null, this.proxy]);\n  }\n\n  expandCollapseIcon(isExpanded: boolean) {\n    const widgetProps = this.state.props;\n    //@ts-ignore\n    const badge = widgetProps.badgevalue != undefined ? (<Badge style={[this.styles.badge, this.styles[widgetProps.badgetype || 'default']]}>{widgetProps.badgevalue}</Badge>): null;\n    const iconclass = isExpanded ? 'wi wi-chevron-up' : 'wi wi-chevron-down';\n    const expandCollapseIcon = widgetProps.collapsible ? (<WmIcon name={'expand_collapse_icon'} styles={this.styles.toggleIcon} iconclass={iconclass}></WmIcon>) : null;\n    return (<View style={{flexDirection: 'row'}}>{badge}{expandCollapseIcon}</View>);\n  }\n\n  renderPanel(props: WmPanelProps) {\n    const icon = (<WmIcon styles={this.styles.icon} name={props.name + '_icon'} iconclass={props.iconclass}></WmIcon>);\n    return (\n      <List.Accordion title={props.title} style={this.styles.header} id={1}\n                      titleStyle={this.styles.text} descriptionStyle={this.styles.subheading}\n                      description={props.subheading}\n                      expanded={props.expanded} \n                      right={({isExpanded}) => this.expandCollapseIcon(isExpanded)} left={props => icon}>\n        <Animatedview style={{marginLeft: -64}} ref={ref => this.animatedRef = ref} entryanimation={'fadeInDown'}>\n          <View>{this.renderContent(props)}</View>\n          <View>{props.children}</View>\n        </Animatedview>\n      </List.Accordion>\n    );\n  }\n\n  renderWidget(props: WmPanelProps) {\n    return (<View style={this.styles.root}>\n                  {this._background}\n                  <List.AccordionGroup expandedId={this.state.expandedId} onAccordionPress={this.onPanelPress.bind(this)}>\n                      <Animatedview entryanimation={props.animation}>\n                        {this.renderPanel(props)}\n                      </Animatedview>\n                  </List.AccordionGroup>\n            </View>);\n  }\n}\n"],"mappings":"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"}

app-rn-runtime/components/container/tabs/tabheader/tabheader.component.js

@@ -89,7 +89,10 @@ export default class WmTabheader extends BaseComponent {
       const isSelected = i === this.props.selectedTabIndex;
       return /*#__PURE__*/React.createElement(Tappable, {
         onTap: this.onTabSelection.bind(this, i),
-        key: header.key
+        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]
@@ -123,14 +126,19 @@ export default class WmTabheader extends BaseComponent {
       onLayout: this.setHeaderPanelPositon.bind(this)
     }, /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
-    }, props.data.map((header, i) => {
+    }, 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
+        key: header.key,
+        styles: this.styles.header.flexGrow ? {
+          flexGrow: this.styles.header.flexGrow
+        } : null
       }, /*#__PURE__*/React.createElement(View, {
         onLayout: this.setHeaderPositon.bind(this, i),
-        style: [this.styles.header, isSelected ? this.styles.activeHeader : null]
+        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]

app-rn-runtime/components/container/tabs/tabheader/tabheader.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","Easing","Text","View","BaseComponent","BaseComponentState","WmTabheaderProps","DEFAULT_CLASS","Tappable","createSkeleton","WmTabheaderState","WmTabheader","constructor","props","Value","headerScrollPosition","addListener","value","headerScrollPositionValue","setHeaderPanelPositon","nativeEvent","headerPanelLayout","layout","setHeaderPositon","index","headersLayout","selectedTabIndex","forceUpdate","onTabSelection","state","onIndexChange","setPosition","toIndicatorPosition","toIndicatorWidth","width","toHeaderScrollPosition","totalWidth","forEach","p","i","minScrollPosition","maxScrollPosition","Math","max","min","parallel","timing","useNativeDriver","toValue","duration","easing","linear","indicatorWidth","indicatorPosition","start","renderSkeleton","transform","translateX","bind","styles","root","data","map","header","isSelected","key","activeHeader","theme","borderRadius","height","activeHeaderText","fontSize","activeIndicator","scaleX","renderWidget","headerText","title"],"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';\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    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    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:  (toIndicatorPosition - (100 - toIndicatorWidth) / 2),\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}>\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    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          {props.data.map((header ,i) => {\n            const isSelected = i === props.selectedTabIndex ;\n            return (\n              <Tappable onTap={this.onTabSelection.bind(this, i)} key={header.key}>\n                <View onLayout={this.setHeaderPositon.bind(this, i)} style={[\n                  this.styles.header, \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              </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"],"mappings":"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"}
+{"version":3,"names":["React","Animated","Easing","Text","View","BaseComponent","BaseComponentState","WmTabheaderProps","DEFAULT_CLASS","Tappable","createSkeleton","WmTabheaderState","WmTabheader","constructor","props","Value","headerScrollPosition","addListener","value","headerScrollPositionValue","setHeaderPanelPositon","nativeEvent","headerPanelLayout","layout","setHeaderPositon","index","headersLayout","selectedTabIndex","forceUpdate","onTabSelection","state","onIndexChange","setPosition","toIndicatorPosition","toIndicatorWidth","width","toHeaderScrollPosition","totalWidth","forEach","p","i","minScrollPosition","maxScrollPosition","Math","max","min","parallel","timing","useNativeDriver","toValue","duration","easing","linear","indicatorWidth","indicatorPosition","start","renderSkeleton","transform","translateX","bind","styles","root","data","map","header","isSelected","key","flex","activeHeader","theme","borderRadius","height","activeHeaderText","fontSize","activeIndicator","scaleX","renderWidget","_background","flexGrow","undefined","headerText","title"],"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';\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    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    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:  (toIndicatorPosition - (100 - toIndicatorWidth) / 2),\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    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._background}\n          {props.data.map((header ,i) => {\n            const isSelected = i === props.selectedTabIndex ;\n            return (\n              <Tappable onTap={this.onTabSelection.bind(this, i)} key={header.key} \n                styles={this.styles.header.flexGrow ? {flexGrow: this.styles.header.flexGrow} : null}>\n                <View onLayout={this.setHeaderPositon.bind(this, i)} 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              </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"],"mappings":"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"}

app-rn-runtime/components/container/tabs/tabheader/tabheader.styles.js

@@ -15,7 +15,8 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       paddingVertical: 12,
       minWidth: 80,
       flexDirection: 'row',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      flexGrow: 1
     },
     headerIcon: {
       text: {

app-rn-runtime/components/container/tabs/tabheader/tabheader.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","flexDirection","minWidth","overflow","backgroundColor","tabHeaderBgColor","text","header","paddingHorizontal","paddingVertical","justifyContent","headerIcon","color","tabHeaderIconColor","headerText","tabHeaderTextColor","fontFamily","baseFont","fontWeight","fontSize","textTransform","activeHeader","tabActiveHeaderBgColor","activeIndicator","tabActiveIndicatorBgColor","width","height","marginTop","activeHeaderIcon","tabActiveHeaderIconColor","activeHeaderText","tabActiveHeaderTextColor","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    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        },\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        },\n        activeHeaderIcon: {\n            text: {\n                color: themeVariables.tabActiveHeaderIconColor\n            }\n        } as WmIconStyles,\n        activeHeaderText: {\n            color: themeVariables.tabActiveHeaderTextColor \n        },\n        skeleton: {} as WmSkeletonStyles\n    } as WmTabheaderStyles;\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAiB/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;IACpB,CAAC;IACDC,UAAU,EAAE;MACRL,IAAI,EAAE;QACFM,KAAK,EAAEf,cAAc,CAACgB;MAC1B;IACJ,CAAiB;IACjBC,UAAU,EAAE;MACRF,KAAK,EAAEf,cAAc,CAACkB,kBAAkB;MACxCZ,QAAQ,EAAE,SAAS;MACnBa,UAAU,EAAEnB,cAAc,CAACoB,QAAQ;MACnCC,UAAU,EAAE,MAAM;MAClBC,QAAQ,EAAE,EAAE;MACZC,aAAa,EAAE;IACnB,CAAC;IACDC,YAAY,EAAE;MACVjB,eAAe,EAAEP,cAAc,CAACyB;IACpC,CAAC;IACDC,eAAe,EAAE;MACbnB,eAAe,EAAEP,cAAc,CAAC2B,yBAAyB;MACzDC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE,CAAC;MACTC,SAAS,EAAE,CAAC;IAChB,CAAC;IACDC,gBAAgB,EAAE;MACdtB,IAAI,EAAE;QACFM,KAAK,EAAEf,cAAc,CAACgC;MAC1B;IACJ,CAAiB;IACjBC,gBAAgB,EAAE;MACdlB,KAAK,EAAEf,cAAc,CAACkC;IAC1B,CAAC;IACDC,QAAQ,EAAE,CAAC;EACf,CAAsB;EACtBlC,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC"}
+{"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","activeHeaderIcon","tabActiveHeaderIconColor","activeHeaderText","tabActiveHeaderTextColor","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    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        },\n        activeHeaderIcon: {\n            text: {\n                color: themeVariables.tabActiveHeaderIconColor\n            }\n        } as WmIconStyles,\n        activeHeaderText: {\n            color: themeVariables.tabActiveHeaderTextColor \n        },\n        skeleton: {} as WmSkeletonStyles\n    } as WmTabheaderStyles;\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAiB/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;IAChB,CAAC;IACDC,gBAAgB,EAAE;MACdvB,IAAI,EAAE;QACFO,KAAK,EAAEhB,cAAc,CAACiC;MAC1B;IACJ,CAAiB;IACjBC,gBAAgB,EAAE;MACdlB,KAAK,EAAEhB,cAAc,CAACmC;IAC1B,CAAC;IACDC,QAAQ,EAAE,CAAC;EACf,CAAsB;EACtBnC,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC"}

app-rn-runtime/components/container/tabs/tabpane/tabpane.component.js

@@ -49,7 +49,7 @@ export default class WmTabpane extends BaseComponent {
   renderWidget(props) {
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
-    }, this.renderContent(props));
+    }, this._background, this.renderContent(props));
   }
 }
 //# sourceMappingURL=tabpane.component.js.map

app-rn-runtime/components/container/tabs/tabpane/tabpane.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmTabpaneProps","DEFAULT_CLASS","WmTabpaneState","WmTabpane","constructor","props","onPartialLoad","invokeEventCallback","renderContent","renderPartial","state","isPartialLoaded","setTimeout","updateState","bind","children","componentDidMount","tabs","parent","addTabPane","proxy","_onSelect","_onDeselect","select","selectTabPane","renderWidget","styles","root"],"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.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;EAAA;IAAA;IAAA,yCACnD,KAAK;EAAA;AACzB;AAEA,eAAe,MAAMI,SAAS,SAASL,aAAa,CAAkD;EAEpGM,WAAW,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,cAAc,EAAE,CAAC;EACnD;EAEAM,aAAa,GAAG;IACd,IAAI,CAACC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;EAClD;EAEAC,aAAa,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,CAAC,CAAmB;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,iBAAiB,GAAG;IAClB,MAAMC,IAAI,GAAI,IAAI,CAACC,MAAiB;IACpCD,IAAI,CAACE,UAAU,CAAC,IAAI,CAACC,KAAK,CAAc;IACxC,KAAK,CAACJ,iBAAiB,EAAE;EAC3B;EAEAK,SAAS,GAAG;IACV,IAAI,CAACd,mBAAmB,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,CAACa,KAAK,CAAC,CAAC;EAC1D;EACAE,WAAW,GAAG;IACZ,IAAI,CAACf,mBAAmB,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,CAACa,KAAK,CAAC,CAAC;EAC5D;EAEAG,MAAM,GAAG;IACN,IAAI,CAACL,MAAM,CAAYM,aAAa,CAAC,IAAI,CAAC;EAC7C;EAEAC,YAAY,CAACpB,KAAqB,EAAE;IAClC,oBAAQ,oBAAC,IAAI;MAAC,KAAK,EAAE,IAAI,CAACqB,MAAM,CAACC;IAAK,GAAE,IAAI,CAACnB,aAAa,CAACH,KAAK,CAAC,CAAQ;EAC3E;AACF"}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmTabpaneProps","DEFAULT_CLASS","WmTabpaneState","WmTabpane","constructor","props","onPartialLoad","invokeEventCallback","renderContent","renderPartial","state","isPartialLoaded","setTimeout","updateState","bind","children","componentDidMount","tabs","parent","addTabPane","proxy","_onSelect","_onDeselect","select","selectTabPane","renderWidget","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;EAAA;IAAA;IAAA,yCACnD,KAAK;EAAA;AACzB;AAEA,eAAe,MAAMI,SAAS,SAASL,aAAa,CAAkD;EAEpGM,WAAW,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,cAAc,EAAE,CAAC;EACnD;EAEAM,aAAa,GAAG;IACd,IAAI,CAACC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;EAClD;EAEAC,aAAa,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,CAAC,CAAmB;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,iBAAiB,GAAG;IAClB,MAAMC,IAAI,GAAI,IAAI,CAACC,MAAiB;IACpCD,IAAI,CAACE,UAAU,CAAC,IAAI,CAACC,KAAK,CAAc;IACxC,KAAK,CAACJ,iBAAiB,EAAE;EAC3B;EAEAK,SAAS,GAAG;IACV,IAAI,CAACd,mBAAmB,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,CAACa,KAAK,CAAC,CAAC;EAC1D;EACAE,WAAW,GAAG;IACZ,IAAI,CAACf,mBAAmB,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,CAACa,KAAK,CAAC,CAAC;EAC5D;EAEAG,MAAM,GAAG;IACN,IAAI,CAACL,MAAM,CAAYM,aAAa,CAAC,IAAI,CAAC;EAC7C;EAEAC,YAAY,CAACpB,KAAqB,EAAE;IAClC,oBAAQ,oBAAC,IAAI;MAAC,KAAK,EAAE,IAAI,CAACqB,MAAM,CAACC;IAAK,GAAE,IAAI,CAACC,WAAW,EAAE,IAAI,CAACpB,aAAa,CAACH,KAAK,CAAC,CAAQ;EAC7F;AACF"}

app-rn-runtime/components/container/tabs/tabs.component.js

@@ -2,8 +2,10 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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, PanResponder, View } from 'react-native';
+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';
@@ -20,35 +22,27 @@ export default class WmTabs extends BaseComponent {
     _defineProperty(this, "tabPanes", []);
     _defineProperty(this, "newIndex", 0);
     _defineProperty(this, "tabLayout", null);
-    _defineProperty(this, "tabPosition", new Animated.Value(0));
     _defineProperty(this, "tabPaneHeights", []);
-    _defineProperty(this, "panResponder", PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderGrant: () => {
-        this.tabPosition.extractOffset();
+    _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
+        };
       },
-      onPanResponderMove: Animated.event([null, {
-        dx: this.tabPosition
-      }]),
-      onPanResponderRelease: () => {
-        const dx = this.tabPosition._value;
-        this.tabPosition.flattenOffset();
-        let toIndex = this.state.selectedTabIndex;
-        if (Math.abs(dx) > 50) {
-          if (dx < 0) {
-            if (toIndex < this.tabPanes.length - 1) {
-              this.onChange(toIndex + 1);
-              return;
-            }
-          } else if (toIndex > 0) {
-            this.onChange(toIndex - 1);
-            return;
-          }
-        }
-        this.onChange(toIndex);
-        this.forceUpdate();
+      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;
@@ -68,16 +62,6 @@ export default class WmTabs extends BaseComponent {
       this.forceUpdate();
     }
   }
-  animate() {
-    var _this$tabLayout;
-    let toIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.selectedTabIndex;
-    return Animated.timing(this.tabPosition, {
-      useNativeDriver: true,
-      toValue: -1 * toIndex * (((_this$tabLayout = this.tabLayout) === null || _this$tabLayout === void 0 ? void 0 : _this$tabLayout.width) || 0),
-      duration: 200,
-      easing: Easing.out(Easing.linear)
-    }).start();
-  }
   setTabShown(tabIndex, callback) {
     if (!this.state.tabsShown[tabIndex]) {
       const tabsShown = [...this.state.tabsShown];
@@ -92,20 +76,28 @@ export default class WmTabs extends BaseComponent {
     }
   }
   addTabPane(tabPane) {
-    this.tabPanes[this.newIndex || this.state.selectedTabIndex] = tabPane;
-    this.newIndex++;
+    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.onChange(this.tabPanes.indexOf(tabPane));
+    this.goToTab(this.tabPanes.indexOf(tabPane));
   }
   goToTab(index) {
-    this.onChange(index);
+    var _this$tabLayout2, _this$animationView;
+    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() {
-    this.onChange(this.state.selectedTabIndex - 1);
+    var _this$animationView2;
+    (_this$animationView2 = this.animationView) === null || _this$animationView2 === void 0 ? void 0 : _this$animationView2.goToLower();
   }
   next() {
-    this.onChange(this.state.selectedTabIndex + 1);
+    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) {
@@ -115,7 +107,6 @@ export default class WmTabs extends BaseComponent {
     const deselectedTab = this.tabPanes[this.state.selectedTabIndex];
     this.newIndex = newIndex;
     deselectedTab === null || deselectedTab === void 0 ? void 0 : deselectedTab._onDeselect();
-    this.animate(newIndex);
     this.updateState({
       selectedTabIndex: newIndex
     }, () => {
@@ -146,8 +137,7 @@ export default class WmTabs extends BaseComponent {
       styles: this.styles.tabHeader,
       data: headerData,
       showskeleton: this.props.showskeleton,
-      selectedTabIndex: this.state.selectedTabIndex,
-      onIndexChange: this.onChange.bind(this)
+      selectedTabIndex: this.state.selectedTabIndex
     }), /*#__PURE__*/React.createElement(View
     //{...this.panResponder.panHandlers}
     , {
@@ -156,13 +146,10 @@ export default class WmTabs extends BaseComponent {
         //height: this.tabPaneHeights[this.state.selectedTabIndex],
         overflow: 'hidden'
       }
-    }, /*#__PURE__*/React.createElement(Animated.View, {
+    }, /*#__PURE__*/React.createElement(View, {
       style: {
         flexDirection: 'row',
-        flexWrap: 'nowrap',
-        transform: [{
-          translateX: this.tabPosition
-        }]
+        flexWrap: 'nowrap'
       }
     }, tabPanes.map((p, i) => {
       return /*#__PURE__*/React.createElement(View, {
@@ -184,7 +171,7 @@ export default class WmTabs extends BaseComponent {
     }));
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
-    }, /*#__PURE__*/React.createElement(View, {
+    }, this._background, /*#__PURE__*/React.createElement(View, {
       onLayout: this.setTabLayout.bind(this),
       style: {
         width: '100%'
@@ -193,32 +180,46 @@ export default class WmTabs extends BaseComponent {
       styles: this.styles.tabHeader,
       data: headerData,
       selectedTabIndex: this.state.selectedTabIndex,
-      onIndexChange: this.onChange.bind(this)
-    }), /*#__PURE__*/React.createElement(View
-    //{...this.panResponder.panHandlers}
-    , {
-      style: {
+      onIndexChange: this.goToTab.bind(this)
+    }), /*#__PURE__*/React.createElement(View, {
+      style: [{
         width: '100%',
-        height: this.tabPaneHeights[this.state.selectedTabIndex],
-        overflow: 'hidden'
-      }
-    }, /*#__PURE__*/React.createElement(Animated.View, {
+        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',
-        transform: [{
-          translateX: this.tabPosition
-        }]
-      }
+        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);
+      }, p));
     }))));
   }
 }