@wavemaker/app-rn-runtime 11.5.1-rc.5402 → 11.5.2-next.26257

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

@@ -64,7 +64,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 +93,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({

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","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","min","chartHeight","colorScale","startAngle","endAngle","standalone","origin","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 = 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 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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"}

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 {
@@ -74,6 +75,11 @@ export default class WmTabheader extends BaseComponent {
       toValue: toIndicatorWidth / 100,
       duration: 200,
       easing: Easing.linear
+    }), Animated.timing(this.reverseIndicatorWidth, {
+      useNativeDriver: true,
+      toValue: 100 / toIndicatorWidth,
+      duration: 200,
+      easing: Easing.linear
     }), Animated.timing(this.indicatorPosition, {
       useNativeDriver: true,
       toValue: position,
@@ -124,10 +130,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 +172,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","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","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  }\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:  100 / toIndicatorWidth,\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: {

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

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

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

@@ -11,6 +11,7 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       borderColor: themeVariables.tabBorderColor
     },
     text: {},
+    tabContent: {},
     tabHeader: {}
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);

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

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","minHeight","elevation","borderBottomWidth","borderStyle","borderColor","tabBorderColor","text","tabHeader","backgroundColor","transparent","header","marginBottom","activeIndicator","justifyContent","alignItems","marginTop","height","arrowIndicator","display","tabArrowIndicatorBgColor","width","transform","rotateZ","arrowIndicatorDot","tabArrowIndicatorDotColor","borderRadius","translateX","translateY"],"sources":["tabs.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmTabheaderStyles } from './tabheader/tabheader.styles';\n\nexport type WmTabsStyles = BaseStyles & {\n  tabHeader: WmTabheaderStyles\n};\n\nexport const DEFAULT_CLASS = 'app-tabs';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmTabsStyles = defineStyles({\n      root: {\n        minHeight: 240,\n        elevation: 0,\n        borderBottomWidth: 1,\n        borderStyle: 'solid',\n        borderColor: themeVariables.tabBorderColor\n      },\n      text: {},\n      tabHeader: {} as WmTabheaderStyles\n  });\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n  addStyle('tabs-with-arrow-indicator', '', {\n    tabHeader: {\n      root: {\n        backgroundColor: themeVariables.transparent\n      },\n      header: {\n        marginBottom: 16\n      },\n      activeIndicator: {\n        justifyContent: 'center',\n        alignItems: 'center',\n        marginTop: 2,\n        height: 0\n      },\n      arrowIndicator: {\n        display: 'flex',\n        backgroundColor: themeVariables.tabArrowIndicatorBgColor,\n        width: 24,\n        height: 24,\n        justifyContent: 'center',\n        alignItems: 'center',\n        transform: [{\n          rotateZ: '45deg'\n        }]\n      },\n      arrowIndicatorDot: {\n        display: 'flex',\n        backgroundColor: themeVariables.tabArrowIndicatorDotColor,\n        width: 4,\n        height: 4, \n        borderRadius: 8,\n        transform: [{\n          translateX: -2\n        }, {\n          translateY: -2\n        }]\n      }\n    } as WmTabheaderStyles\n  });\n});\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAOxF,OAAO,MAAMC,aAAa,GAAG,UAAU;AACvCF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACrD,MAAMC,aAA2B,GAAGL,YAAY,CAAC;IAC7CM,IAAI,EAAE;MACJC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE,CAAC;MACZC,iBAAiB,EAAE,CAAC;MACpBC,WAAW,EAAE,OAAO;MACpBC,WAAW,EAAER,cAAc,CAACS;IAC9B,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,SAAS,EAAE,CAAC;EAChB,CAAC,CAAC;EACFV,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,2BAA2B,EAAE,EAAE,EAAE;IACxCU,SAAS,EAAE;MACTR,IAAI,EAAE;QACJS,eAAe,EAAEZ,cAAc,CAACa;MAClC,CAAC;MACDC,MAAM,EAAE;QACNC,YAAY,EAAE;MAChB,CAAC;MACDC,eAAe,EAAE;QACfC,cAAc,EAAE,QAAQ;QACxBC,UAAU,EAAE,QAAQ;QACpBC,SAAS,EAAE,CAAC;QACZC,MAAM,EAAE;MACV,CAAC;MACDC,cAAc,EAAE;QACdC,OAAO,EAAE,MAAM;QACfV,eAAe,EAAEZ,cAAc,CAACuB,wBAAwB;QACxDC,KAAK,EAAE,EAAE;QACTJ,MAAM,EAAE,EAAE;QACVH,cAAc,EAAE,QAAQ;QACxBC,UAAU,EAAE,QAAQ;QACpBO,SAAS,EAAE,CAAC;UACVC,OAAO,EAAE;QACX,CAAC;MACH,CAAC;MACDC,iBAAiB,EAAE;QACjBL,OAAO,EAAE,MAAM;QACfV,eAAe,EAAEZ,cAAc,CAAC4B,yBAAyB;QACzDJ,KAAK,EAAE,CAAC;QACRJ,MAAM,EAAE,CAAC;QACTS,YAAY,EAAE,CAAC;QACfJ,SAAS,EAAE,CAAC;UACVK,UAAU,EAAE,CAAC;QACf,CAAC,EAAE;UACDC,UAAU,EAAE,CAAC;QACf,CAAC;MACH;IACF;EACF,CAAC,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","minHeight","elevation","borderBottomWidth","borderStyle","borderColor","tabBorderColor","text","tabContent","tabHeader","backgroundColor","transparent","header","marginBottom","activeIndicator","justifyContent","alignItems","marginTop","height","arrowIndicator","display","tabArrowIndicatorBgColor","width","transform","rotateZ","arrowIndicatorDot","tabArrowIndicatorDotColor","borderRadius","translateX","translateY"],"sources":["tabs.styles.ts"],"sourcesContent":["import { ViewStyle } from 'react-native';\nimport BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmTabheaderStyles } from './tabheader/tabheader.styles';\n\nexport type WmTabsStyles = BaseStyles & {\n  tabHeader: WmTabheaderStyles,\n  tabContent: ViewStyle\n};\n\nexport const DEFAULT_CLASS = 'app-tabs';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmTabsStyles = defineStyles({\n      root: {\n        minHeight: 240,\n        elevation: 0,\n        borderBottomWidth: 1,\n        borderStyle: 'solid',\n        borderColor: themeVariables.tabBorderColor\n      },\n      text: {},\n      tabContent: {},\n      tabHeader: {} as WmTabheaderStyles\n  });\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n  addStyle('tabs-with-arrow-indicator', '', {\n    tabHeader: {\n      root: {\n        backgroundColor: themeVariables.transparent\n      },\n      header: {\n        marginBottom: 16\n      },\n      activeIndicator: {\n        justifyContent: 'center',\n        alignItems: 'center',\n        marginTop: 2,\n        height: 0\n      },\n      arrowIndicator: {\n        display: 'flex',\n        backgroundColor: themeVariables.tabArrowIndicatorBgColor,\n        width: 24,\n        height: 24,\n        justifyContent: 'center',\n        alignItems: 'center',\n        transform: [{\n          rotateZ: '45deg'\n        }]\n      },\n      arrowIndicatorDot: {\n        display: 'flex',\n        backgroundColor: themeVariables.tabArrowIndicatorDotColor,\n        width: 4,\n        height: 4, \n        borderRadius: 8,\n        transform: [{\n          translateX: -2\n        }, {\n          translateY: -2\n        }]\n      }\n    } as WmTabheaderStyles\n  });\n});\n"],"mappings":"AACA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAQxF,OAAO,MAAMC,aAAa,GAAG,UAAU;AACvCF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACrD,MAAMC,aAA2B,GAAGL,YAAY,CAAC;IAC7CM,IAAI,EAAE;MACJC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE,CAAC;MACZC,iBAAiB,EAAE,CAAC;MACpBC,WAAW,EAAE,OAAO;MACpBC,WAAW,EAAER,cAAc,CAACS;IAC9B,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,UAAU,EAAE,CAAC,CAAC;IACdC,SAAS,EAAE,CAAC;EAChB,CAAC,CAAC;EACFX,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,2BAA2B,EAAE,EAAE,EAAE;IACxCW,SAAS,EAAE;MACTT,IAAI,EAAE;QACJU,eAAe,EAAEb,cAAc,CAACc;MAClC,CAAC;MACDC,MAAM,EAAE;QACNC,YAAY,EAAE;MAChB,CAAC;MACDC,eAAe,EAAE;QACfC,cAAc,EAAE,QAAQ;QACxBC,UAAU,EAAE,QAAQ;QACpBC,SAAS,EAAE,CAAC;QACZC,MAAM,EAAE;MACV,CAAC;MACDC,cAAc,EAAE;QACdC,OAAO,EAAE,MAAM;QACfV,eAAe,EAAEb,cAAc,CAACwB,wBAAwB;QACxDC,KAAK,EAAE,EAAE;QACTJ,MAAM,EAAE,EAAE;QACVH,cAAc,EAAE,QAAQ;QACxBC,UAAU,EAAE,QAAQ;QACpBO,SAAS,EAAE,CAAC;UACVC,OAAO,EAAE;QACX,CAAC;MACH,CAAC;MACDC,iBAAiB,EAAE;QACjBL,OAAO,EAAE,MAAM;QACfV,eAAe,EAAEb,cAAc,CAAC6B,yBAAyB;QACzDJ,KAAK,EAAE,CAAC;QACRJ,MAAM,EAAE,CAAC;QACTS,YAAY,EAAE,CAAC;QACfJ,SAAS,EAAE,CAAC;UACVK,UAAU,EAAE,CAAC;QACf,CAAC,EAAE;UACDC,UAAU,EAAE,CAAC;QACf,CAAC;MACH;IACF;EACF,CAAC,CAAC;AACJ,CAAC,CAAC"}

app-rn-runtime/components/input/slider/slider.component.js

@@ -6,6 +6,7 @@ import React from 'react';
 import { View, Text, TouchableOpacity, Animated } from 'react-native';
 import { debounce, isNumber, isNil } from 'lodash';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { BackgroundComponent } from '@wavemaker/app-rn-runtime/styles/background.component';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
 import WmSliderProps from './slider.props';
 import { DEFAULT_CLASS } from './slider.styles';
@@ -142,7 +143,11 @@ export default class WmSlider extends BaseComponent {
           translateX: this.position
         }]
       }]
-    })));
+    }, /*#__PURE__*/React.createElement(BackgroundComponent, {
+      size: this.styles.thumb.backgroundSize,
+      position: this.styles.thumb.backgroundPosition,
+      image: this.styles.thumb.backgroundImage
+    }))));
   }
 }
 //# sourceMappingURL=slider.component.js.map