@wavemaker/app-rn-runtime 11.5.1-rc.5418 → 11.5.2-next.140989

app-rn-runtime/components/chart/line-chart/line-chart.component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { Svg } from 'react-native-svg';
-import { VictoryChart, VictoryLine, VictoryLegend, VictoryScatter, VictoryGroup, VictoryArea, VictoryVoronoiContainer } from 'victory-native';
+import { VictoryChart, VictoryLine, VictoryLegend, VictoryScatter, VictoryGroup } from 'victory-native';
 import WmLineChartProps from './line-chart.props';
 import { DEFAULT_CLASS } from './line-chart.styles';
 import { BaseChartComponent, BaseChartComponentState } from "@wavemaker/app-rn-runtime/components/chart/basechart.component";
@@ -19,14 +19,6 @@ export default class WmLineChart extends BaseChartComponent {
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
     }, /*#__PURE__*/React.createElement(VictoryChart, {
-      containerComponent: /*#__PURE__*/React.createElement(VictoryVoronoiContainer, {
-        labels: _ref => {
-          let {
-            datum
-          } = _ref;
-          return `${datum.x}, ${datum.y}`;
-        }
-      }),
       theme: this.state.theme,
       height: this.styles.root.height,
       width: this.styles.root.width || this.screenWidth,
@@ -48,32 +40,18 @@ export default class WmLineChart extends BaseChartComponent {
     }), this.getLegendView(), this.getXaxis(), this.getYAxis(), this.state.data.map((d, i) => {
       return /*#__PURE__*/React.createElement(VictoryGroup, {
         key: props.name + '_line_group_' + i
-      }, /*#__PURE__*/React.createElement(VictoryArea, {
-        interpolation: props.interpolation,
-        key: props.name + '_area_' + i,
-        name: props.name + '_area_' + i,
-        standalone: true,
-        style: {
-          data: {
-            fill: '#90EE90',
-            // Set the fill color to green
-            fillOpacity: 0.8 // Adjust the opacity as needed
-          }
-        },
-
-        data: this.isRTL ? d.toReversed() : d
-      }), /*#__PURE__*/React.createElement(VictoryLine, {
+      }, /*#__PURE__*/React.createElement(VictoryLine, {
         interpolation: props.interpolation,
         key: props.name + '_line_' + i,
         name: props.name + '_line_' + i,
         standalone: true,
         style: {
           data: {
-            stroke: "green" || ThemeVariables.INSTANCE.chartLineColor,
+            stroke: this.state.colors[i] || ThemeVariables.INSTANCE.chartLineColor,
             strokeWidth: props.linethickness
           }
         },
-        data: this.isRTL ? d.toReversed() : d
+        data: d
       }), props.highlightpoints || this.state.data.length === 1 ? /*#__PURE__*/React.createElement(VictoryScatter, {
         size: 5,
         key: props.name + '_scatter' + i,
@@ -82,11 +60,8 @@ export default class WmLineChart extends BaseChartComponent {
             fill: this.state.colors[i],
             opacity: 0.8
           }
-        }
-
-        // data={this.isRTL?d.toReversed():d}
-        ,
-        data: this.isRTL ? d.toReversed() : [d[d.length - 1]]
+        },
+        data: d
       }) : null);
     })));
   }

app-rn-runtime/components/chart/line-chart/line-chart.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Svg","VictoryChart","VictoryLine","VictoryLegend","VictoryScatter","VictoryGroup","VictoryArea","VictoryVoronoiContainer","WmLineChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","ThemeVariables","WmLineChartState","WmLineChart","constructor","props","renderWidget","_this$state$data","state","data","length","createElement","style","styles","root","containerComponent","labels","_ref","datum","x","y","theme","height","width","screenWidth","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","name","title","subheading","orientation","gutter","getLegendView","getXaxis","getYAxis","map","d","i","key","interpolation","standalone","fill","fillOpacity","isRTL","toReversed","stroke","INSTANCE","chartLineColor","strokeWidth","linethickness","highlightpoints","size","colors","opacity"],"sources":["line-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { Svg } from 'react-native-svg';\n\nimport {\n  VictoryChart,\n  VictoryLine,\n  VictoryLegend,\n  VictoryScatter,\n  VictoryGroup,\n  VictoryLabel,\n  VictoryArea,\n  VictoryAxis,\n  VictoryTooltip,\n  VictoryVoronoiContainer\n} from 'victory-native';\n\nimport WmLineChartProps from './line-chart.props';\nimport { DEFAULT_CLASS, WmLineChartStyles } from './line-chart.styles';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from \"@wavemaker/app-rn-runtime/components/chart/basechart.component\";\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\nimport {InterpolationPropType} from \"victory-core\";\n\nexport class WmLineChartState extends BaseChartComponentState<WmLineChartProps> {}\n\nexport default class WmLineChart extends BaseChartComponent<WmLineChartProps, WmLineChartState, WmLineChartStyles> {\n\n  constructor(props: WmLineChartProps) {\n    super(props, DEFAULT_CLASS, new WmLineChartProps(), new WmLineChartState());\n  }\n  renderWidget(props: WmLineChartProps) {\n  \n    if (!this.state.data?.length) {\n      return null;\n    }\n    return (<View\n      style={this.styles.root}\n    >\n      <VictoryChart\n      containerComponent={<VictoryVoronoiContainer labels={({ datum }) => `${(datum.x)}, ${(datum.y)}`}/>}\n      theme={this.state.theme}\n      height={this.styles.root.height as number}\n      width={this.styles.root.width as number || this.screenWidth}\n      padding={{ top: props.offsettop, bottom: props.offsetbottom, left: props.offsetleft, right: props.offsetright }}\n    >\n        <VictoryLegend\n          name={'legend'}\n          containerComponent={<Svg />}\n          title={[props.title, props.subheading]}\n          orientation=\"horizontal\"\n          gutter={20}\n          data={[]}\n          theme={this.state.theme}\n          y={0}\n        />\n        {this.getLegendView()}\n        {this.getXaxis()}\n        {this.getYAxis()}\n      {\n        this.state.data.map((d: any, i: number) => {\n          return <VictoryGroup key={props.name + '_line_group_' + i}>\n            <VictoryArea\n                interpolation={props.interpolation as InterpolationPropType}\n                key={props.name + '_area_' + i}\n                name={props.name + '_area_' + i}\n                standalone={true}\n                style={{\n                data: {\n                  fill: '#90EE90',  // Set the fill color to green\n                  fillOpacity: 0.8,  // Adjust the opacity as needed\n                  },\n                }}\n                data={this.isRTL ? d.toReversed() : d}\n             />\n            <VictoryLine interpolation={props.interpolation as InterpolationPropType}  key={props.name + '_line_' + i}\n                              name={props.name + '_line_' + i}\n                              standalone={true}\n                              style={{\n                                data: {\n                                  stroke: (\"green\" || ThemeVariables.INSTANCE.chartLineColor),\n                                  strokeWidth: props.linethickness,\n                                }\n                              }}       \n            data={this.isRTL?d.toReversed():d}\n          />\n          {(props.highlightpoints || this.state.data.length === 1) ?\n            <VictoryScatter size={5} key={props.name + '_scatter' + i}\n                            style={{\n                              data: { fill: this.state.colors[i], opacity: 0.8,}\n                            }}\n                           \n                            // data={this.isRTL?d.toReversed():d}\n                            data={this.isRTL?d.toReversed(): [d[d.length-1]]}\n                          \n            />: null}\n            </VictoryGroup>\n        })\n      }\n    </VictoryChart>\n    </View>);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","View","Svg","VictoryChart","VictoryLine","VictoryLegend","VictoryScatter","VictoryGroup","WmLineChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","ThemeVariables","WmLineChartState","WmLineChart","constructor","props","renderWidget","_this$state$data","state","data","length","createElement","style","styles","root","theme","height","width","screenWidth","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","name","containerComponent","title","subheading","orientation","gutter","y","getLegendView","getXaxis","getYAxis","map","d","i","key","interpolation","standalone","stroke","colors","INSTANCE","chartLineColor","strokeWidth","linethickness","highlightpoints","size","fill","opacity"],"sources":["line-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { Svg } from 'react-native-svg';\n\nimport {\n  VictoryChart,\n  VictoryLine,\n  VictoryLegend,\n  VictoryScatter,\n  VictoryGroup,\n  } from 'victory-native';\n\nimport WmLineChartProps from './line-chart.props';\nimport { DEFAULT_CLASS, WmLineChartStyles } from './line-chart.styles';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from \"@wavemaker/app-rn-runtime/components/chart/basechart.component\";\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\nimport {InterpolationPropType} from \"victory-core\";\n\nexport class WmLineChartState extends BaseChartComponentState<WmLineChartProps> {}\n\nexport default class WmLineChart extends BaseChartComponent<WmLineChartProps, WmLineChartState, WmLineChartStyles> {\n\n  constructor(props: WmLineChartProps) {\n    super(props, DEFAULT_CLASS, new WmLineChartProps(), new WmLineChartState());\n  }\n  renderWidget(props: WmLineChartProps) {\n      if (!this.state.data?.length) {\n      return null;\n    }\n    return (\n    <View style={this.styles.root}>\n      <VictoryChart\n        theme={this.state.theme}\n        height={this.styles.root.height as number}\n        width={this.styles.root.width as number || this.screenWidth}\n        padding={{ top: props.offsettop, bottom: props.offsetbottom, left: props.offsetleft, right: props.offsetright }}\n      >\n        <VictoryLegend\n          name={'legend'}\n          containerComponent={<Svg />}\n          title={[props.title, props.subheading]}\n          orientation=\"horizontal\"\n          gutter={20}\n          data={[]}\n          theme={this.state.theme}\n          y={0}\n        />\n        {this.getLegendView()}\n        {this.getXaxis()}\n        {this.getYAxis()}\n        {this.state.data.map((d: any, i: number) => {\n          return <VictoryGroup key={props.name + '_line_group_' + i}>\n            <VictoryLine interpolation={props.interpolation as InterpolationPropType}  key={props.name + '_line_' + i}\n              name={props.name + '_line_' + i}\n              standalone={true}\n              style={{\n                data: {\n                  stroke: (this.state.colors[i] || ThemeVariables.INSTANCE.chartLineColor),\n                  strokeWidth: props.linethickness,\n                }\n              }}       \n              data={d}\n            />\n          {(props.highlightpoints || this.state.data.length === 1) ?\n              <VictoryScatter size={5} key={props.name + '_scatter' + i}\n                  style={{\n                    data: { fill: this.state.colors[i], opacity: 0.8,}\n                  }}\n                  data={d}\n              />: null}\n            </VictoryGroup>\n        })}\n      </VictoryChart>\n    </View>);\n  }\n}\n"],"mappings":"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"}

app-rn-runtime/components/chart/line-chart/line-chart.props.js

@@ -6,7 +6,6 @@ export default class WmLineChartProps extends BaseChartComponentProps {
   constructor() {
     super(...arguments);
     _defineProperty(this, "linethickness", 2);
-    _defineProperty(this, "getdatapointstodisplay", label => null);
   }
 }
 //# sourceMappingURL=line-chart.props.js.map

app-rn-runtime/components/chart/line-chart/line-chart.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseChartComponentProps","WmLineChartProps","constructor","arguments","_defineProperty","label"],"sources":["line-chart.props.ts"],"sourcesContent":["import BaseChartComponentProps from \"@wavemaker/app-rn-runtime/components/chart/basechart.props\";\n\nexport default class WmLineChartProps extends BaseChartComponentProps {\n  linethickness: number = 2;\n  getdatapointstodisplay = (label: string) => null as any;\n}\n"],"mappings":";;;AAAA,OAAOA,uBAAuB,MAAM,4DAA4D;AAEhG,eAAe,MAAMC,gBAAgB,SAASD,uBAAuB,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,wBAC5C,CAAC;IAAAA,eAAA,iCACCC,KAAa,IAAK,IAAW;EAAA;AACzD"}
+{"version":3,"names":["BaseChartComponentProps","WmLineChartProps","constructor","arguments","_defineProperty"],"sources":["line-chart.props.ts"],"sourcesContent":["import BaseChartComponentProps from \"@wavemaker/app-rn-runtime/components/chart/basechart.props\";\n\nexport default class WmLineChartProps extends BaseChartComponentProps {\n  linethickness: number = 2;\n}\n"],"mappings":";;;AAAA,OAAOA,uBAAuB,MAAM,4DAA4D;AAEhG,eAAe,MAAMC,gBAAgB,SAASD,uBAAuB,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,wBAC5C,CAAC;EAAA;AAC3B"}

app-rn-runtime/components/chart/stack-chart/stack-chart.component.js

@@ -30,24 +30,34 @@ export default class WmStackChart extends BaseChartComponent {
     super.componentDidMount();
     this.setHeightWidthOnChart();
   }
+  getNegativeValuesArray() {
+    let negativeValuesArray = cloneDeep(this.state.data[0]).filter(d => d.y < 0);
+    negativeValuesArray = orderBy(negativeValuesArray, 'y', 'desc');
+    return negativeValuesArray;
+  }
+  getPositiveValuesArray() {
+    let positiveValuesArray = cloneDeep(this.state.data[0]).filter(d => d.y > 0);
+    positiveValuesArray = orderBy(positiveValuesArray, 'y', 'asc');
+    return positiveValuesArray;
+  }
   getBarChart(props) {
     if (this.state.data.length > 0) {
-      let data = cloneDeep(this.state.data[0]);
-      data = orderBy(data, 'y', 'asc');
+      const negativeValues = cloneDeep(this.getNegativeValuesArray());
+      const data = negativeValues.concat(cloneDeep(this.getPositiveValuesArray()));
       let currentValue = 0;
       return data.map((d, i) => {
         let d1 = [];
         d.x = 0;
         d.y = d.y - currentValue;
         d1.push(d);
-        currentValue = d.y + currentValue;
+        currentValue = d.y < 0 && i === negativeValues.length - 1 ? 0 : d.y + currentValue;
         return /*#__PURE__*/React.createElement(VictoryBar, {
           key: props.name + '_' + i,
           cornerRadius: {
-            bottomLeft: 3,
-            bottomRight: 3,
-            topLeft: 3,
-            topRight: 3
+            bottomLeft: 1,
+            bottomRight: 1,
+            topLeft: 1,
+            topRight: 1
           },
           data: d1
         });
@@ -64,7 +74,7 @@ export default class WmStackChart extends BaseChartComponent {
       const colorScaleArray = this.getColorCodes();
       const maxValue = Math.max(...data.map(o => o.y));
       data = orderBy(data, 'y', 'desc');
-      const radius = 170;
+      const radius = Math.min(this.state.chartWidth / 2, this.state.chartHeight - 50);
       return data.map((d, i) => {
         let d1 = [];
         d1.push(d);
@@ -93,7 +103,7 @@ export default class WmStackChart extends BaseChartComponent {
   }
   getArcAxis() {
     const ticks = this.getTickValues();
-    const radius = 170;
+    const radius = Math.min(this.state.chartWidth / 2, this.state.chartHeight - 50);
     const axisData = [];
     ticks.forEach((d, i) => {
       axisData.push({
@@ -126,9 +136,18 @@ export default class WmStackChart extends BaseChartComponent {
     if (this.state.data[0].length) {
       let data = cloneDeep(this.state.data[0]);
       const maxValue = Math.max(...data.map(o => o.y));
+      const minValue = Math.min(...data.map(o => o.y));
       const scale = Scale.getBaseScale({}, 'x');
-      scale.domain([0, maxValue]);
+      scale.domain([minValue > 0 ? 0 : minValue, maxValue]);
       ticks = Axis.getTicks({}, scale);
+      ticks[ticks.length - 1] = maxValue;
+      if (minValue < 0) {
+        if (ticks[0] === 0) {
+          ticks.unshift(minValue);
+        } else {
+          ticks[0] = minValue;
+        }
+      }
     }
     return ticks;
   }

app-rn-runtime/components/chart/stack-chart/stack-chart.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Svg","VictoryStack","VictoryBar","VictoryChart","VictoryPie","VictoryLegend","VictoryAxis","Axis","Scale","orderBy","cloneDeep","WmStackChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","WmStackChartState","constructor","arguments","_defineProperty","WmStackChart","props","e","viewWidth","nativeEvent","layout","width","updateState","chartWidth","componentDidMount","setHeightWidthOnChart","getBarChart","state","data","length","currentValue","map","d","i","d1","x","y","push","createElement","key","name","cornerRadius","bottomLeft","bottomRight","topLeft","topRight","getColorCodes","colors","reverse","getArcChart","colorScaleArray","maxValue","Math","max","o","radius","colorScale","startAngle","endAngle","standalone","origin","chartHeight","innerRadius","thickness","labels","getArcAxis","ticks","getTickValues","axisData","forEach","yunits","style","fontSize","paddingLeft","paddingRight","labelRadius","scale","getBaseScale","domain","getTicks","renderWidget","mindomain","xdomain","chartMinX","undefined","ydomain","chartMinY","styles","root","onLayout","onViewLayoutChange","viewtype","theme","minDomain","height","screenWidth","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","containerComponent","title","fontFamily","subheading","orientation","gutter","getLegendView","crossAxis","tickLabels","fill","showyaxis","axisLabel","grid","stroke","tickValues","tickFormat","t","abbreviateNumber","dependentAxis","horizontal","strokeWidth"],"sources":["stack-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, View } from 'react-native';\nimport { Svg } from 'react-native-svg';\nimport { VictoryStack, VictoryBar, VictoryChart, VictoryPie, VictoryLegend, VictoryAxis } from 'victory-native';\nimport { Axis, Scale } from 'victory-core';\nimport { orderBy, cloneDeep } from 'lodash';\n\nimport WmStackChartProps from './stack-chart.props';\nimport { DEFAULT_CLASS, WmStackChartStyles } from './stack-chart.styles';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from '@wavemaker/app-rn-runtime/components/chart/basechart.component';\n\nexport class WmStackChartState extends BaseChartComponentState<WmStackChartProps> {\n  chartWidth = 0;\n}\n\nexport default class WmStackChart extends BaseChartComponent<WmStackChartProps, WmStackChartState, WmStackChartStyles> {\n  constructor(props: WmStackChartProps) {\n    super(props, DEFAULT_CLASS, new WmStackChartProps(), new WmStackChartState());\n  }\n\n  componentDidMount() {\n    super.componentDidMount();\n    this.setHeightWidthOnChart();\n  }\n\n  getBarChart(props: WmStackChartProps) {\n    if ( this.state.data.length >0 ) {\n     let data = cloneDeep(this.state.data[0]);\n     data = orderBy(data, 'y', 'asc');\n     let currentValue = 0;\n      return data.map((d: any, i: number) => {\n        let d1: any = [];\n        d.x = 0;\n        d.y = d.y - currentValue;\n        d1.push(d);\n        currentValue = d.y + currentValue;\n        return <VictoryBar key={props.name + '_' + i}\n                           cornerRadius={{bottomLeft:(3), bottomRight:(3), topLeft:(3), topRight:(3)}}\n                           data={d1}/>\n      });\n    }\n  }\n\n  private getColorCodes() {\n      const colors = cloneDeep(this.state.colors);\n      return colors.reverse();\n  }\n\n  getArcChart(props: WmStackChartProps) {\n    if ( this.state.data.length > 0 ) {\n      let data = cloneDeep(this.state.data[0]);\n      const colorScaleArray = this.getColorCodes();\n      const maxValue = Math.max(...data.map((o: any) => o.y));\n      data = orderBy(data, 'y', 'desc');\n      const radius = 170;\n      return data.map((d: any, i: number) => {\n        let d1: any = [];\n        d1.push(d);\n        d1.push({x: d.x, y: maxValue - d.y})\n        return <VictoryPie key={props.name + '_' + i}\n                           radius={radius}\n                           colorScale={[colorScaleArray[i], '#fff0']}\n                           startAngle={-80}\n                           endAngle={80}\n                           cornerRadius={100}\n                           standalone={false}\n                           origin={{x: (this.state.chartWidth/2), y: (this.state.chartHeight - 50)}}\n                           innerRadius={radius - this.state.props.thickness}\n                           labels={[]}\n                           data={d1}/>\n      });\n    }\n  }\n\n  getArcAxis() {\n    const ticks = this.getTickValues();\n    const radius = 170;\n    const axisData: any = [];\n    ticks.forEach((d: any, i: any) => {\n      axisData.push({x:  `${this.state.props.yunits}${d}`, y: 1})\n    });\n    return <VictoryPie\n     style={{\n       labels: {\n         fontSize: 12, paddingLeft: 50, paddingRight: 80\n       }}\n     }\n      startAngle={-90}\n      endAngle={90}\n      standalone={false}\n      colorScale={['#fff0']}\n      origin={{x: (this.state.chartWidth/2 - 5), y: (this.state.chartHeight - 50)}}\n      labelRadius={radius - this.state.props.thickness - 20}\n      data={axisData}\n    />\n  }\n\n  onViewLayoutChange = (e: LayoutChangeEvent) => {\n    let viewWidth = e.nativeEvent.layout.width;\n    this.updateState({\n      chartWidth: viewWidth\n    } as WmStackChartState);\n  }\n\n  getTickValues() {\n    let ticks: any = [];\n    if (this.state.data[0].length) {\n      let data = cloneDeep(this.state.data[0]);\n      const maxValue = Math.max(...data.map((o: any) => o.y));\n      const scale = Scale.getBaseScale({}, 'x');\n      scale.domain([0, maxValue]);\n      ticks = Axis.getTicks({}, scale);\n    }\n    return ticks;\n  }\n\n  renderWidget(props: WmStackChartProps) {\n    if (!this.state.data.length) {\n      return null;\n    }\n    let mindomain={x: this.props.xdomain === 'Min' ? this.state.chartMinX: undefined, y: this.props.ydomain === 'Min' ? this.state.chartMinY: undefined};\n    const colorScale = this.state.colors.length === 1 ? this.state.colors[0] : this.state.colors;\n    return (\n      <View\n        style={this.styles.root} onLayout={this.onViewLayoutChange}\n      >{\n        props.viewtype === 'Bar' ?\n          <VictoryChart\n            theme={this.state.theme}\n            minDomain={mindomain}\n            height={this.styles.root.height as number}\n            width={this.styles.root.width as number || this.screenWidth}\n            padding={{\n              top: props.offsettop,\n              bottom: props.offsetbottom,\n              left: props.offsetleft,\n              right: props.offsetright\n            }}>\n            <VictoryLegend\n              name={'legend'}\n              containerComponent={<Svg />}\n              style={{title: {\n                fontFamily: \"'Helvetica Neue', 'Helvetica', sans-serif\",\n                fontSize: 18\n              }\n              }}\n              title={[props.title, props.subheading]}\n              orientation=\"horizontal\"\n              gutter={20}\n              data={[]}\n              theme={this.state.theme}\n            />\n            {this.getLegendView(colorScale)}\n            <VictoryAxis crossAxis\n                         style={{\n                           tickLabels: { fill: this.state.props.showyaxis === false ? 'transparent' : '#000000',  fontSize: 12, padding: this.state.props.thickness/2 + 5},\n                           axisLabel: { padding: (15 + this.state.props.thickness/2) },\n                           grid: {stroke: 'none'}\n                         }}\n                         theme={this.state.theme}\n                         tickValues={this.getTickValues()}\n                         tickFormat={(t) => this.state.props.yunits ? `${this.abbreviateNumber(t)}${this.state.props.yunits}` : `${this.abbreviateNumber(t)}`} dependentAxis />\n            <VictoryStack\n              colorScale={colorScale}\n              horizontal={true}\n              style={{\n                data: { strokeWidth: this.state.props.thickness }\n              }}\n            >\n              {\n                this.getBarChart(props)\n              }\n            </VictoryStack>\n          </VictoryChart> :\n          <Svg width={this.state.chartWidth} height={this.state.chartHeight}>\n            <VictoryLegend\n              name={'legend'}\n              containerComponent={<Svg />}\n              title={[props.title, props.subheading]}\n              orientation=\"horizontal\"\n              gutter={20}\n              data={[]}\n              theme={this.state.theme}\n            />\n            {this.getArcChart(props)}\n            {this.getArcAxis()}\n          </Svg>\n      }\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","View","Svg","VictoryStack","VictoryBar","VictoryChart","VictoryPie","VictoryLegend","VictoryAxis","Axis","Scale","orderBy","cloneDeep","WmStackChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","WmStackChartState","constructor","arguments","_defineProperty","WmStackChart","props","e","viewWidth","nativeEvent","layout","width","updateState","chartWidth","componentDidMount","setHeightWidthOnChart","getNegativeValuesArray","negativeValuesArray","state","data","filter","d","y","getPositiveValuesArray","positiveValuesArray","getBarChart","length","negativeValues","concat","currentValue","map","i","d1","x","push","createElement","key","name","cornerRadius","bottomLeft","bottomRight","topLeft","topRight","getColorCodes","colors","reverse","getArcChart","colorScaleArray","maxValue","Math","max","o","radius","min","chartHeight","colorScale","startAngle","endAngle","standalone","origin","innerRadius","thickness","labels","getArcAxis","ticks","getTickValues","axisData","forEach","yunits","style","fontSize","paddingLeft","paddingRight","labelRadius","minValue","scale","getBaseScale","domain","getTicks","unshift","renderWidget","mindomain","xdomain","chartMinX","undefined","ydomain","chartMinY","styles","root","onLayout","onViewLayoutChange","viewtype","theme","minDomain","height","screenWidth","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","containerComponent","title","fontFamily","subheading","orientation","gutter","getLegendView","crossAxis","tickLabels","fill","showyaxis","axisLabel","grid","stroke","tickValues","tickFormat","t","abbreviateNumber","dependentAxis","horizontal","strokeWidth"],"sources":["stack-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, View } from 'react-native';\nimport { Svg } from 'react-native-svg';\nimport { VictoryStack, VictoryBar, VictoryChart, VictoryPie, VictoryLegend, VictoryAxis } from 'victory-native';\nimport { Axis, Scale } from 'victory-core';\nimport { orderBy, cloneDeep } from 'lodash';\n\nimport WmStackChartProps from './stack-chart.props';\nimport { DEFAULT_CLASS, WmStackChartStyles } from './stack-chart.styles';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from '@wavemaker/app-rn-runtime/components/chart/basechart.component';\n\nexport class WmStackChartState extends BaseChartComponentState<WmStackChartProps> {\n  chartWidth = 0;\n}\n\nexport default class WmStackChart extends BaseChartComponent<WmStackChartProps, WmStackChartState, WmStackChartStyles> {\n  constructor(props: WmStackChartProps) {\n    super(props, DEFAULT_CLASS, new WmStackChartProps(), new WmStackChartState());\n  }\n\n  componentDidMount() {\n    super.componentDidMount();\n    this.setHeightWidthOnChart();\n  }\n\n  getNegativeValuesArray() {\n    let negativeValuesArray = cloneDeep(this.state.data[0]).filter((d: any) => d.y < 0);\n    negativeValuesArray = orderBy(negativeValuesArray, 'y', 'desc');\n    return negativeValuesArray;\n  }\n\n  getPositiveValuesArray() {\n    let positiveValuesArray = cloneDeep(this.state.data[0]).filter((d: any) => d.y > 0);\n    positiveValuesArray = orderBy(positiveValuesArray, 'y', 'asc');\n    return positiveValuesArray;\n  }\n\n  getBarChart(props: WmStackChartProps) {\n    if ( this.state.data.length > 0 ) {\n      const negativeValues = cloneDeep(this.getNegativeValuesArray());\n      const data = negativeValues.concat(cloneDeep(this.getPositiveValuesArray()));\n      let currentValue = 0;\n\n      return data.map((d: any, i: number) => {\n        let d1: any = [];\n        d.x = 0;\n        d.y = d.y - currentValue;\n        d1.push(d);\n        currentValue = d.y < 0 && i === negativeValues.length -1 ? 0 : d.y + currentValue;\n        return <VictoryBar key={props.name + '_' + i}\n                           cornerRadius={{bottomLeft:(1), bottomRight:(1), topLeft:(1), topRight:(1)}}\n                           data={d1}/>\n      });\n    }\n  }\n\n  private getColorCodes() {\n      const colors = cloneDeep(this.state.colors);\n      return colors.reverse();\n  }\n\n  getArcChart(props: WmStackChartProps) {\n    if ( this.state.data.length > 0 ) {\n      let data = cloneDeep(this.state.data[0]);\n      const colorScaleArray = this.getColorCodes();\n      const maxValue = Math.max(...data.map((o: any) => o.y));\n      data = orderBy(data, 'y', 'desc');\n      const radius = Math.min(this.state.chartWidth/2, this.state.chartHeight - 50);\n      return data.map((d: any, i: number) => {\n        let d1: any = [];\n        d1.push(d);\n        d1.push({x: d.x, y: maxValue - d.y})\n        return <VictoryPie key={props.name + '_' + i}\n                           radius={radius}\n                           colorScale={[colorScaleArray[i], '#fff0']}\n                           startAngle={-80}\n                           endAngle={80}\n                           cornerRadius={100}\n                           standalone={false}\n                           origin={{x: (this.state.chartWidth/2), y: (this.state.chartHeight - 50)}}\n                           innerRadius={radius - this.state.props.thickness}\n                           labels={[]}\n                           data={d1}/>\n      });\n    }\n  }\n\n  getArcAxis() {\n    const ticks = this.getTickValues();\n    const radius = Math.min(this.state.chartWidth/2, this.state.chartHeight-50);\n    const axisData: any = [];\n    ticks.forEach((d: any, i: any) => {\n      axisData.push({x:  `${this.state.props.yunits}${d}`, y: 1})\n    });\n    return <VictoryPie\n     style={{\n       labels: {\n         fontSize: 12, paddingLeft: 50, paddingRight: 80\n       }}\n     }\n      startAngle={-90}\n      endAngle={90}\n      standalone={false}\n      colorScale={['#fff0']}\n      origin={{x: (this.state.chartWidth/2 - 5), y: (this.state.chartHeight - 50)}}\n      labelRadius={radius - this.state.props.thickness - 20}\n      data={axisData}\n    />\n  }\n\n  onViewLayoutChange = (e: LayoutChangeEvent) => {\n    let viewWidth = e.nativeEvent.layout.width;\n    this.updateState({\n      chartWidth: viewWidth\n    } as WmStackChartState);\n  }\n\n  getTickValues() {\n    let ticks: any = [];\n    if (this.state.data[0].length) {\n      let data = cloneDeep(this.state.data[0]);\n      const maxValue = Math.max(...data.map((o: any) => o.y));\n      const minValue = Math.min(...data.map((o: any) => o.y));\n      const scale = Scale.getBaseScale({}, 'x');\n      scale.domain([minValue > 0 ? 0 : minValue, maxValue]);\n      ticks = Axis.getTicks({}, scale);\n      ticks[ticks.length -1] = maxValue;\n      if ( minValue < 0 ) {\n        if (ticks[0] === 0) {\n          ticks.unshift(minValue);\n        } else {\n          ticks[0] = minValue;\n        }\n      }\n    }\n    return ticks;\n  }\n\n  renderWidget(props: WmStackChartProps) {\n    if (!this.state.data.length) {\n      return null;\n    }\n    let mindomain={x: this.props.xdomain === 'Min' ? this.state.chartMinX: undefined, y: this.props.ydomain === 'Min' ? this.state.chartMinY: undefined};\n    const colorScale = this.state.colors.length === 1 ? this.state.colors[0] : this.state.colors;\n    return (\n      <View\n        style={this.styles.root} onLayout={this.onViewLayoutChange}\n      >{\n        props.viewtype === 'Bar' ?\n          <VictoryChart\n            theme={this.state.theme}\n            minDomain={mindomain}\n            height={this.styles.root.height as number}\n            width={this.styles.root.width as number || this.screenWidth}\n            padding={{\n              top: props.offsettop,\n              bottom: props.offsetbottom,\n              left: props.offsetleft,\n              right: props.offsetright\n            }}>\n            <VictoryLegend\n              name={'legend'}\n              containerComponent={<Svg />}\n              style={{title: {\n                fontFamily: \"'Helvetica Neue', 'Helvetica', sans-serif\",\n                fontSize: 18\n              }\n              }}\n              title={[props.title, props.subheading]}\n              orientation=\"horizontal\"\n              gutter={20}\n              data={[]}\n              theme={this.state.theme}\n            />\n            {this.getLegendView(colorScale)}\n            <VictoryAxis crossAxis\n                         style={{\n                           tickLabels: { fill: this.state.props.showyaxis === false ? 'transparent' : '#000000',  fontSize: 12, padding: this.state.props.thickness/2 + 5},\n                           axisLabel: { padding: (15 + this.state.props.thickness/2) },\n                           grid: {stroke: 'none'}\n                         }}\n                         theme={this.state.theme}\n                         tickValues={this.getTickValues()}\n                         tickFormat={(t) => this.state.props.yunits ? `${this.abbreviateNumber(t)}${this.state.props.yunits}` : `${this.abbreviateNumber(t)}`} dependentAxis />\n            <VictoryStack\n              colorScale={colorScale}\n              horizontal={true}\n              style={{\n                data: { strokeWidth: this.state.props.thickness }\n              }}\n            >\n              {\n                this.getBarChart(props)\n              }\n            </VictoryStack>\n          </VictoryChart> :\n          <Svg width={this.state.chartWidth} height={this.state.chartHeight}>\n            <VictoryLegend\n              name={'legend'}\n              containerComponent={<Svg />}\n              title={[props.title, props.subheading]}\n              orientation=\"horizontal\"\n              gutter={20}\n              data={[]}\n              theme={this.state.theme}\n            />\n            {this.getArcChart(props)}\n            {this.getArcAxis()}\n          </Svg>\n      }\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -19,6 +19,7 @@ export default class WmTabheader extends BaseComponent {
     _defineProperty(this, "headerScrollPosition", new Animated.Value(0));
     _defineProperty(this, "headerScrollPositionValue", 0);
     _defineProperty(this, "indicatorPosition", new Animated.Value(0));
+    _defineProperty(this, "reverseIndicatorWidth", new Animated.Value(0));
     _defineProperty(this, "indicatorWidth", new Animated.Value(0));
     this.headerScrollPosition.addListener(_ref => {
       let {
@@ -29,6 +30,7 @@ export default class WmTabheader extends BaseComponent {
   }
   setHeaderPanelPositon(nativeEvent) {
     this.headerPanelLayout = nativeEvent.nativeEvent.layout;
+    this.forceUpdate();
   }
   setHeaderPositon(index, nativeEvent) {
     this.headersLayout[index] = nativeEvent.nativeEvent.layout;
@@ -74,6 +76,11 @@ export default class WmTabheader extends BaseComponent {
       toValue: toIndicatorWidth / 100,
       duration: 200,
       easing: Easing.linear
+    }), Animated.timing(this.reverseIndicatorWidth, {
+      useNativeDriver: true,
+      toValue: toIndicatorWidth ? 100 / toIndicatorWidth : 0,
+      duration: 200,
+      easing: Easing.linear
     }), Animated.timing(this.indicatorPosition, {
       useNativeDriver: true,
       toValue: position,
@@ -124,10 +131,11 @@ export default class WmTabheader extends BaseComponent {
   }
   renderWidget(props) {
     this.setPosition();
-    const activeIndicator = this.styles.activeIndicator;
+    const arrowIndicator = this.styles.arrowIndicator;
     return /*#__PURE__*/React.createElement(View, {
       style: {
-        overflow: 'hidden'
+        overflow: 'hidden',
+        zIndex: 16
       }
     }, /*#__PURE__*/React.createElement(Animated.View, {
       style: {
@@ -165,18 +173,22 @@ export default class WmTabheader extends BaseComponent {
           scaleX: this.indicatorWidth
         }]
       }]
-    }, activeIndicator.backgroundImage ? /*#__PURE__*/React.createElement(BackgroundComponent, {
-      image: activeIndicator.backgroundImage,
-      position: activeIndicator.backgroundPosition,
-      size: activeIndicator.backgroundSize,
-      repeat: activeIndicator.backgroundRepeat,
-      resizeMode: activeIndicator.backgroundResizeMode,
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: [{
+        transform: [{
+          scaleX: this.reverseIndicatorWidth
+        }]
+      }, this.styles.arrowIndicator]
+    }, arrowIndicator.backgroundImage ? /*#__PURE__*/React.createElement(BackgroundComponent, {
+      image: arrowIndicator.backgroundImage,
+      position: arrowIndicator.backgroundPosition,
+      size: arrowIndicator.backgroundSize,
+      repeat: arrowIndicator.backgroundRepeat,
+      resizeMode: arrowIndicator.backgroundResizeMode,
       style: {
         borderRadius: this.styles.root.borderRadius
       }
     }) : null, /*#__PURE__*/React.createElement(View, {
-      style: this.styles.arrowIndicator
-    }, /*#__PURE__*/React.createElement(View, {
       style: this.styles.arrowIndicatorDot
     })))));
   }

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

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

@@ -42,10 +42,7 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       backgroundColor: themeVariables.tabActiveIndicatorBgColor,
       width: 100,
       height: 2,
-      marginTop: -4,
-      backgroundPosition: '0px center',
-      backgroundSize: '48px 48px',
-      backgroundRepeat: 'no-repeat'
+      marginTop: -4
     },
     activeHeaderIcon: {
       text: {
@@ -56,7 +53,11 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       color: themeVariables.tabActiveHeaderTextColor
     },
     arrowIndicator: {
-      display: 'none'
+      display: 'none',
+      backgroundImage: '',
+      backgroundSize: '100% 100%',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat'
     },
     arrowIndicatorDot: {
       display: 'none'

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","paddingTop","paddingBottom","paddingVertical","minHeight","justifyContent","flexGrow","headerIcon","color","tabHeaderIconColor","icon","fontSize","headerText","tabHeaderTextColor","fontFamily","baseFont","fontWeight","activeHeader","tabActiveHeaderBgColor","activeIndicator","tabActiveIndicatorBgColor","width","height","marginTop","backgroundPosition","backgroundSize","backgroundRepeat","activeHeaderIcon","tabActiveHeaderIconColor","activeHeaderText","tabActiveHeaderTextColor","arrowIndicator","display","arrowIndicatorDot","skeleton"],"sources":["tabheader.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { TextStyle, ViewStyle } from 'react-native';\nimport { WmIconStyles } from '@wavemaker/app-rn-runtime/components/basic/icon/icon.styles';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmTabheaderStyles = BaseStyles & {\n    activeIndicator: ViewStyle,\n    header: ViewStyle,\n    headerIcon: WmIconStyles,\n    headerText: TextStyle,\n    arrowIndicator: ViewStyle,\n    arrowIndicatorDot: ViewStyle,\n    activeHeader: ViewStyle,\n    activeHeaderIcon: WmIconStyles,\n    activeHeaderText: TextStyle,\n    skeleton: WmSkeletonStyles \n};\n\nexport const DEFAULT_CLASS = 'app-tabheader';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles = {\n        root: {\n            flexDirection: 'row',\n            minWidth: '100%',\n            overflow: 'visible',\n            backgroundColor: themeVariables.tabHeaderBgColor,\n        },\n        text: {},\n        header: {\n            backgroundColor: themeVariables.tabHeaderBgColor,\n            paddingTop: 16,\n            paddingBottom: 16,\n            paddingVertical: 12,\n            minWidth: 80,\n            minHeight:48,\n            flexDirection: 'row',\n            justifyContent: 'center',\n            flexGrow: 1\n        },\n        headerIcon: {\n            text: {\n                color: themeVariables.tabHeaderIconColor\n            },\n            icon: {\n                fontSize : 24\n             }\n        } as WmIconStyles,\n        headerText: {\n            color: themeVariables.tabHeaderTextColor,\n            overflow: 'visible',\n            fontFamily: themeVariables.baseFont,\n            fontWeight: '500',\n            fontSize: 14,\n        },\n        activeHeader: {\n            backgroundColor: themeVariables.tabActiveHeaderBgColor\n        },\n        activeIndicator: {\n            backgroundColor: themeVariables.tabActiveIndicatorBgColor,\n            width: 100,\n            height: 2,\n            marginTop: -4,\n            backgroundPosition: '0px center',\n            backgroundSize: '48px 48px',\n            backgroundRepeat: 'no-repeat'\n        },\n        activeHeaderIcon: {\n            text: {\n                color: themeVariables.tabActiveHeaderIconColor\n            }\n        } as WmIconStyles,\n        activeHeaderText: {\n            color: themeVariables.tabActiveHeaderTextColor \n        },\n        arrowIndicator: {\n            display: 'none'\n        },\n        arrowIndicatorDot: {\n            display: 'none'\n        },\n        skeleton: {} as WmSkeletonStyles\n    } as WmTabheaderStyles;\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAmB/D,OAAO,MAAMC,aAAa,GAAG,eAAe;AAC5CD,UAAU,CAACE,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAa,GAAG;IAClBC,IAAI,EAAE;MACFC,aAAa,EAAE,KAAK;MACpBC,QAAQ,EAAE,MAAM;MAChBC,QAAQ,EAAE,SAAS;MACnBC,eAAe,EAAEP,cAAc,CAACQ;IACpC,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,MAAM,EAAE;MACJH,eAAe,EAAEP,cAAc,CAACQ,gBAAgB;MAChDG,UAAU,EAAE,EAAE;MACdC,aAAa,EAAE,EAAE;MACjBC,eAAe,EAAE,EAAE;MACnBR,QAAQ,EAAE,EAAE;MACZS,SAAS,EAAC,EAAE;MACZV,aAAa,EAAE,KAAK;MACpBW,cAAc,EAAE,QAAQ;MACxBC,QAAQ,EAAE;IACd,CAAC;IACDC,UAAU,EAAE;MACRR,IAAI,EAAE;QACFS,KAAK,EAAElB,cAAc,CAACmB;MAC1B,CAAC;MACDC,IAAI,EAAE;QACFC,QAAQ,EAAG;MACd;IACL,CAAiB;IACjBC,UAAU,EAAE;MACRJ,KAAK,EAAElB,cAAc,CAACuB,kBAAkB;MACxCjB,QAAQ,EAAE,SAAS;MACnBkB,UAAU,EAAExB,cAAc,CAACyB,QAAQ;MACnCC,UAAU,EAAE,KAAK;MACjBL,QAAQ,EAAE;IACd,CAAC;IACDM,YAAY,EAAE;MACVpB,eAAe,EAAEP,cAAc,CAAC4B;IACpC,CAAC;IACDC,eAAe,EAAE;MACbtB,eAAe,EAAEP,cAAc,CAAC8B,yBAAyB;MACzDC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE,CAAC;MACTC,SAAS,EAAE,CAAC,CAAC;MACbC,kBAAkB,EAAE,YAAY;MAChCC,cAAc,EAAE,WAAW;MAC3BC,gBAAgB,EAAE;IACtB,CAAC;IACDC,gBAAgB,EAAE;MACd5B,IAAI,EAAE;QACFS,KAAK,EAAElB,cAAc,CAACsC;MAC1B;IACJ,CAAiB;IACjBC,gBAAgB,EAAE;MACdrB,KAAK,EAAElB,cAAc,CAACwC;IAC1B,CAAC;IACDC,cAAc,EAAE;MACZC,OAAO,EAAE;IACb,CAAC;IACDC,iBAAiB,EAAE;MACfD,OAAO,EAAE;IACb,CAAC;IACDE,QAAQ,EAAE,CAAC;EACf,CAAsB;EACtB3C,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","paddingTop","paddingBottom","paddingVertical","minHeight","justifyContent","flexGrow","headerIcon","color","tabHeaderIconColor","icon","fontSize","headerText","tabHeaderTextColor","fontFamily","baseFont","fontWeight","activeHeader","tabActiveHeaderBgColor","activeIndicator","tabActiveIndicatorBgColor","width","height","marginTop","activeHeaderIcon","tabActiveHeaderIconColor","activeHeaderText","tabActiveHeaderTextColor","arrowIndicator","display","backgroundImage","backgroundSize","backgroundPosition","backgroundRepeat","arrowIndicatorDot","skeleton"],"sources":["tabheader.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { TextStyle, ViewStyle } from 'react-native';\nimport { WmIconStyles } from '@wavemaker/app-rn-runtime/components/basic/icon/icon.styles';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmTabheaderStyles = BaseStyles & {\n    activeIndicator: ViewStyle,\n    header: ViewStyle,\n    headerIcon: WmIconStyles,\n    headerText: TextStyle,\n    arrowIndicator: ViewStyle,\n    arrowIndicatorDot: ViewStyle,\n    activeHeader: ViewStyle,\n    activeHeaderIcon: WmIconStyles,\n    activeHeaderText: TextStyle,\n    skeleton: WmSkeletonStyles \n};\n\nexport const DEFAULT_CLASS = 'app-tabheader';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles = {\n        root: {\n            flexDirection: 'row',\n            minWidth: '100%',\n            overflow: 'visible',\n            backgroundColor: themeVariables.tabHeaderBgColor,\n        },\n        text: {},\n        header: {\n            backgroundColor: themeVariables.tabHeaderBgColor,\n            paddingTop: 16,\n            paddingBottom: 16,\n            paddingVertical: 12,\n            minWidth: 80,\n            minHeight:48,\n            flexDirection: 'row',\n            justifyContent: 'center',\n            flexGrow: 1\n        },\n        headerIcon: {\n            text: {\n                color: themeVariables.tabHeaderIconColor\n            },\n            icon: {\n                fontSize : 24\n             }\n        } as WmIconStyles,\n        headerText: {\n            color: themeVariables.tabHeaderTextColor,\n            overflow: 'visible',\n            fontFamily: themeVariables.baseFont,\n            fontWeight: '500',\n            fontSize: 14,\n        },\n        activeHeader: {\n            backgroundColor: themeVariables.tabActiveHeaderBgColor\n        },\n        activeIndicator: {\n            backgroundColor: themeVariables.tabActiveIndicatorBgColor,\n            width: 100,\n            height: 2,\n            marginTop: -4\n        },\n        activeHeaderIcon: {\n            text: {\n                color: themeVariables.tabActiveHeaderIconColor\n            }\n        } as WmIconStyles,\n        activeHeaderText: {\n            color: themeVariables.tabActiveHeaderTextColor \n        },\n        arrowIndicator: {\n            display: 'none',\n            backgroundImage: '',\n            backgroundSize: '100% 100%',\n            backgroundPosition: 'center',\n            backgroundRepeat: 'no-repeat'\n        },\n        arrowIndicatorDot: {\n            display: 'none'\n        },\n        skeleton: {} as WmSkeletonStyles\n    } as WmTabheaderStyles;\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAmB/D,OAAO,MAAMC,aAAa,GAAG,eAAe;AAC5CD,UAAU,CAACE,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAa,GAAG;IAClBC,IAAI,EAAE;MACFC,aAAa,EAAE,KAAK;MACpBC,QAAQ,EAAE,MAAM;MAChBC,QAAQ,EAAE,SAAS;MACnBC,eAAe,EAAEP,cAAc,CAACQ;IACpC,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,MAAM,EAAE;MACJH,eAAe,EAAEP,cAAc,CAACQ,gBAAgB;MAChDG,UAAU,EAAE,EAAE;MACdC,aAAa,EAAE,EAAE;MACjBC,eAAe,EAAE,EAAE;MACnBR,QAAQ,EAAE,EAAE;MACZS,SAAS,EAAC,EAAE;MACZV,aAAa,EAAE,KAAK;MACpBW,cAAc,EAAE,QAAQ;MACxBC,QAAQ,EAAE;IACd,CAAC;IACDC,UAAU,EAAE;MACRR,IAAI,EAAE;QACFS,KAAK,EAAElB,cAAc,CAACmB;MAC1B,CAAC;MACDC,IAAI,EAAE;QACFC,QAAQ,EAAG;MACd;IACL,CAAiB;IACjBC,UAAU,EAAE;MACRJ,KAAK,EAAElB,cAAc,CAACuB,kBAAkB;MACxCjB,QAAQ,EAAE,SAAS;MACnBkB,UAAU,EAAExB,cAAc,CAACyB,QAAQ;MACnCC,UAAU,EAAE,KAAK;MACjBL,QAAQ,EAAE;IACd,CAAC;IACDM,YAAY,EAAE;MACVpB,eAAe,EAAEP,cAAc,CAAC4B;IACpC,CAAC;IACDC,eAAe,EAAE;MACbtB,eAAe,EAAEP,cAAc,CAAC8B,yBAAyB;MACzDC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE,CAAC;MACTC,SAAS,EAAE,CAAC;IAChB,CAAC;IACDC,gBAAgB,EAAE;MACdzB,IAAI,EAAE;QACFS,KAAK,EAAElB,cAAc,CAACmC;MAC1B;IACJ,CAAiB;IACjBC,gBAAgB,EAAE;MACdlB,KAAK,EAAElB,cAAc,CAACqC;IAC1B,CAAC;IACDC,cAAc,EAAE;MACZC,OAAO,EAAE,MAAM;MACfC,eAAe,EAAE,EAAE;MACnBC,cAAc,EAAE,WAAW;MAC3BC,kBAAkB,EAAE,QAAQ;MAC5BC,gBAAgB,EAAE;IACtB,CAAC;IACDC,iBAAiB,EAAE;MACfL,OAAO,EAAE;IACb,CAAC;IACDM,QAAQ,EAAE,CAAC;EACf,CAAsB;EACtB5C,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC"}

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

@@ -43,13 +43,6 @@ export default class WmTabs extends BaseComponent {
         this.onChange(this.state.selectedTabIndex + 1);
       }
     });
-    const selectedIndex = props.defaultpaneindex || 0;
-    const tabsShown = [];
-    tabsShown[selectedIndex] = true;
-    this.updateState({
-      selectedTabIndex: selectedIndex,
-      tabsShown: tabsShown
-    });
   }
   setTabLayout(event) {
     this.tabLayout = event.nativeEvent.layout;
@@ -165,6 +158,19 @@ export default class WmTabs extends BaseComponent {
       }, p);
     }))));
   }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    switch (name) {
+      case "defaultpaneindex":
+        const selectedIndex = $new || 0;
+        const tabsShown = [];
+        tabsShown[selectedIndex] = true;
+        this.updateState({
+          selectedTabIndex: selectedIndex,
+          tabsShown: tabsShown
+        });
+    }
+  }
   renderWidget(props) {
     const tabPanes = React.Children.toArray(props.children).filter((item, index) => item.props.show != false);
     const headerData = tabPanes.map((p, i) => ({
@@ -197,7 +203,7 @@ export default class WmTabs extends BaseComponent {
       } : {
         overflow: 'hidden',
         maxHeight: this.tabPaneHeights[this.state.selectedTabIndex]
-      }]
+      }, this.styles.tabContent]
     }, /*#__PURE__*/React.createElement(SwipeAnimation.View, {
       enableGestures: props.enablegestures,
       style: {