@wavemaker/app-rn-runtime 11.10.3-rc.205 → 11.10.4-next.27841

package/components/basic/spinner/spinner.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","Platform","Color","BaseComponent","BaseComponentState","WmSpinnerProps","DEFAULT_CLASS","WmIcon","WmPicture","LottieView","ThemeVariables","WmSpinnerState","WmSpinner","constructor","props","_defineProperty","obj","colors","Object","keys","forEach","key","value","ind","Math","floor","random","length","toLowerCase","includes","shape","recursiveSearch","prepareIcon","createElement","id","getTestId","styles","icon","iconclass","iconsize","prepareImage","image","picturesource","toRgbArray","color","red","green","blue","addClasstoLottie","lottiePath","primaryColor","INSTANCE","darken","json","loader","prepareLottie","_Lottie","Lottie","OS","require","default","animationData","lottie","loop","play","style","_extends","getTestProps","source","resizeMode","autoPlay","renderWidget","root","_background","caption","getTestPropsForLabel","text"],"sources":["spinner.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View, Platform } from 'react-native';\nimport Color from \"color\";\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmSpinnerProps from './spinner.props';\nimport { DEFAULT_CLASS, WmSpinnerStyles } from './spinner.styles';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport WmPicture from '@wavemaker/app-rn-runtime/components/basic/picture/picture.component';\nimport LottieView from 'lottie-react-native';\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\n\nexport class WmSpinnerState extends BaseComponentState<WmSpinnerProps> {\n\n}\n\nexport default class WmSpinner extends BaseComponent<WmSpinnerProps, WmSpinnerState, WmSpinnerStyles> {\n\n  constructor(props: WmSpinnerProps) {\n    super(props, DEFAULT_CLASS, new WmSpinnerProps());\n  }\n\n  private prepareIcon(props: any) {\n    return (<WmIcon\n      id={this.getTestId('icon')}\n      styles={this.styles.icon}\n      iconclass={props.iconclass + ' fa-spin'} iconsize={props.iconsize}></WmIcon>);\n  }\n\n  private prepareImage(props: any) {\n    return (<WmPicture\n        id={this.getTestId('picture')}\n        styles={this.styles.image}\n        picturesource={props.image}></WmPicture>);\n  }\n\n  private recursiveSearch = (obj: any, colors: any) => {\n    obj && Object.keys(obj).forEach(key => {\n        let value = obj[key];\n        let ind = Math.floor(Math.random() * (0 - colors.length ) + colors.length);\n        if (key == \"nm\" && (value.toLowerCase().includes('fill ') || value.toLowerCase().includes('stroke '))) {\n            if (obj[\"c\"] && obj[\"c\"][\"k\"] \n              && (obj[\"c\"][\"k\"].length == 4\n                || (obj[\"c\"][\"k\"].length ==3 \n                  && typeof obj[\"c\"][\"k\"][0] == 'number'))) {\n                obj[\"c\"][\"k\"] = colors[ind];\n            }\n            else {\n                if (obj[\"c\"] && obj[\"c\"][\"k\"]){\n                    for (let shape in obj[\"c\"][\"k\"]) {\n                      if(obj[\"c\"][\"k\"][shape] && obj[\"c\"][\"k\"][shape][\"s\"]){\n                        obj[\"c\"][\"k\"][shape][\"s\"] = colors[ind];\n                      }\n                    }\n                }\n            }\n        } else if (typeof value === 'object') {\n            this.recursiveSearch(value, colors);\n        }\n      });\n      return obj;\n  };\n\n  private toRgbArray(color: Color) {\n    return [\n      color.red()/255,\n      color.green()/255,\n      color.blue()/255,\n      1\n    ]\n  }\n\n  private addClasstoLottie(lottiePath: any) {\n    let primaryColor = Color(ThemeVariables.INSTANCE.primaryColor);\n    let colors = [this.toRgbArray(primaryColor), \n      this.toRgbArray(primaryColor.darken(0.2)), \n      this.toRgbArray(primaryColor.darken(0.4)), \n      this.toRgbArray(primaryColor.darken(0.6)), \n      this.toRgbArray(primaryColor.darken(0.8))];\n    return this.recursiveSearch(lottiePath.json, lottiePath.loader == 'circleSpinner' ? [colors[0]] : colors);\n  }\n\n  private prepareLottie(props: any) {\n    let Lottie = Platform.OS == 'web' ? require('react-lottie-player') : null;\n    Lottie = Lottie?.default || Lottie;\n    return (\n      Platform.OS == 'web' ? <Lottie animationData={this.addClasstoLottie(props.lottie)} loop={true} play={true} style={this.styles.lottie} /> : <LottieView\n        {...this.getTestProps('loader')}\n        source={this.addClasstoLottie(props.lottie)}\n        resizeMode='contain'\n        autoPlay={true}\n        loop={true}\n        style={this.styles.lottie}\n      />\n    )\n  }\n\n  renderWidget(props: WmSpinnerProps) {\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        {props.lottie ? this.prepareLottie(props) : props.image ? this.prepareImage(props) : this.prepareIcon(props)}\n        {props.caption ? <Text {...this.getTestPropsForLabel()} style={this.styles.text}>{props.caption}</Text> : null}\n      </View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Text","View","Platform","Color","BaseComponent","BaseComponentState","WmSpinnerProps","DEFAULT_CLASS","WmIcon","WmPicture","LottieView","ThemeVariables","WmSpinnerState","WmSpinner","constructor","props","_defineProperty","obj","colors","Object","keys","forEach","key","value","ind","Math","floor","random","length","toLowerCase","includes","shape","recursiveSearch","prepareIcon","createElement","id","getTestId","styles","icon","iconclass","iconsize","prepareImage","image","picturesource","toRgbArray","color","red","green","blue","addClasstoLottie","lottiePath","primaryColor","INSTANCE","darken","json","loader","prepareLottie","_Lottie","Lottie","OS","require","default","animationData","lottie","loop","play","style","_extends","getTestProps","source","resizeMode","autoPlay","renderWidget","root","onLayout","event","handleLayout","_background","caption","getTestPropsForLabel","text"],"sources":["spinner.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View, Platform } from 'react-native';\nimport Color from \"color\";\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmSpinnerProps from './spinner.props';\nimport { DEFAULT_CLASS, WmSpinnerStyles } from './spinner.styles';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport WmPicture from '@wavemaker/app-rn-runtime/components/basic/picture/picture.component';\nimport LottieView from 'lottie-react-native';\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\n\nexport class WmSpinnerState extends BaseComponentState<WmSpinnerProps> {\n\n}\n\nexport default class WmSpinner extends BaseComponent<WmSpinnerProps, WmSpinnerState, WmSpinnerStyles> {\n\n  constructor(props: WmSpinnerProps) {\n    super(props, DEFAULT_CLASS, new WmSpinnerProps());\n  }\n\n  private prepareIcon(props: any) {\n    return (<WmIcon\n      id={this.getTestId('icon')}\n      styles={this.styles.icon}\n      iconclass={props.iconclass + ' fa-spin'} iconsize={props.iconsize}></WmIcon>);\n  }\n\n  private prepareImage(props: any) {\n    return (<WmPicture\n        id={this.getTestId('picture')}\n        styles={this.styles.image}\n        picturesource={props.image}></WmPicture>);\n  }\n\n  private recursiveSearch = (obj: any, colors: any) => {\n    obj && Object.keys(obj).forEach(key => {\n        let value = obj[key];\n        let ind = Math.floor(Math.random() * (0 - colors.length ) + colors.length);\n        if (key == \"nm\" && (value.toLowerCase().includes('fill ') || value.toLowerCase().includes('stroke '))) {\n            if (obj[\"c\"] && obj[\"c\"][\"k\"] \n              && (obj[\"c\"][\"k\"].length == 4\n                || (obj[\"c\"][\"k\"].length ==3 \n                  && typeof obj[\"c\"][\"k\"][0] == 'number'))) {\n                obj[\"c\"][\"k\"] = colors[ind];\n            }\n            else {\n                if (obj[\"c\"] && obj[\"c\"][\"k\"]){\n                    for (let shape in obj[\"c\"][\"k\"]) {\n                      if(obj[\"c\"][\"k\"][shape] && obj[\"c\"][\"k\"][shape][\"s\"]){\n                        obj[\"c\"][\"k\"][shape][\"s\"] = colors[ind];\n                      }\n                    }\n                }\n            }\n        } else if (typeof value === 'object') {\n            this.recursiveSearch(value, colors);\n        }\n      });\n      return obj;\n  };\n\n  private toRgbArray(color: Color) {\n    return [\n      color.red()/255,\n      color.green()/255,\n      color.blue()/255,\n      1\n    ]\n  }\n\n  private addClasstoLottie(lottiePath: any) {\n    let primaryColor = Color(ThemeVariables.INSTANCE.primaryColor);\n    let colors = [this.toRgbArray(primaryColor), \n      this.toRgbArray(primaryColor.darken(0.2)), \n      this.toRgbArray(primaryColor.darken(0.4)), \n      this.toRgbArray(primaryColor.darken(0.6)), \n      this.toRgbArray(primaryColor.darken(0.8))];\n    return this.recursiveSearch(lottiePath.json, lottiePath.loader == 'circleSpinner' ? [colors[0]] : colors);\n  }\n\n  private prepareLottie(props: any) {\n    let Lottie = Platform.OS == 'web' ? require('react-lottie-player') : null;\n    Lottie = Lottie?.default || Lottie;\n    return (\n      Platform.OS == 'web' ? <Lottie animationData={this.addClasstoLottie(props.lottie)} loop={true} play={true} style={this.styles.lottie} /> : <LottieView\n        {...this.getTestProps('loader')}\n        source={this.addClasstoLottie(props.lottie)}\n        resizeMode='contain'\n        autoPlay={true}\n        loop={true}\n        style={this.styles.lottie}\n      />\n    )\n  }\n\n  renderWidget(props: WmSpinnerProps) {\n    return (\n      <View \n        style={this.styles.root}\n        onLayout={(event) => this.handleLayout(event)}\n      >\n        {this._background}\n        {props.lottie ? this.prepareLottie(props) : props.image ? this.prepareImage(props) : this.prepareIcon(props)}\n        {props.caption ? <Text {...this.getTestPropsForLabel()} style={this.styles.text}>{props.caption}</Text> : null}\n      </View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/basic/tooltip/tooltip.component.js

@@ -51,7 +51,8 @@ export default class WmTooltip extends BaseComponent {
   renderWidget(props) {
     var _props$tooltipStyle;
     return /*#__PURE__*/React.createElement(View, {
-      style: this.styles.root
+      style: this.styles.root,
+      onLayout: event => this.handleLayout(event)
     }, props.showTooltip ? /*#__PURE__*/React.createElement(Animated.View, {
       style: [this.styles.tooltip, props.direction ? {
         ...directionConfig[props.direction].styles

package/components/basic/tooltip/tooltip.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","Text","View","BaseComponent","BaseComponentState","WmTooltipProps","DEFAULT_CLASS","directionConfig","up","rotate","styles","top","triangleStyles","bottom","down","left","right","WmTooltipState","WmTooltip","constructor","props","renderWidget","_props$tooltipStyle","createElement","style","root","showTooltip","tooltip","direction","tooltipStyle","tooltipLabelStyle","text","triangle","transform","tooltipTriangleStyle","borderBottomColor","backgroundColor","children"],"sources":["tooltip.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, Text, View } from \"react-native\";\nimport { BaseComponent, BaseComponentState } from \"@wavemaker/app-rn-runtime/core/base.component\";\nimport WmTooltipProps from \"./tooltip.props\";\nimport { DEFAULT_CLASS, WmTooltipStyles } from \"./tooltip.styles\";\n\n// * default tooltip direction - up\nconst directionConfig = {\n  up: { rotate: '180deg', styles: {top: -60}, triangleStyles: {bottom: -10} },\n  down: { rotate: '0deg', styles: {bottom: -40}, triangleStyles: {top: -10} },\n  left: { rotate: '90deg', styles: {left: -40}, triangleStyles: {right: -10} },\n  right: { rotate: '-90deg', styles: {right: -40}, triangleStyles: {left: -10} },\n};\n\nexport class WmTooltipState extends BaseComponentState<WmTooltipProps> {}\n\nexport default class WmTooltip extends BaseComponent<WmTooltipProps, WmTooltipState, WmTooltipStyles> {\n  constructor(props: WmTooltipProps) {\n    super(props, DEFAULT_CLASS, new WmTooltipProps());\n  }\n  \n  renderWidget(props: WmTooltipProps) {\n    return (\n      <View style={this.styles.root}>\n      {props.showTooltip ? (\n        <Animated.View\n          style={[\n            this.styles.tooltip,\n            props.direction\n              ? { ...directionConfig[props.direction].styles }\n              : { top: -60 },\n            props.tooltipStyle,\n          ]}\n        >\n          <Text style={[props.tooltipLabelStyle]}>{props.text}</Text>\n          <View\n            style={[\n              this.styles.triangle,\n              {\n                transform: [\n                  {\n                    rotate: props.direction\n                      ? directionConfig[props.direction].rotate\n                      : '180deg',\n                  },\n                ],\n              },\n              props.direction\n                ? { ...directionConfig[props.direction].triangleStyles }\n                : { bottom: -10 },\n              props.tooltipTriangleStyle,\n              { borderBottomColor: props.tooltipStyle?.backgroundColor || this.styles.tooltip.backgroundColor }\n            ]}\n          />\n        </Animated.View>\n      ) : null}\n      {props.children}\n    </View>\n    )\n  }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Animated","Text","View","BaseComponent","BaseComponentState","WmTooltipProps","DEFAULT_CLASS","directionConfig","up","rotate","styles","top","triangleStyles","bottom","down","left","right","WmTooltipState","WmTooltip","constructor","props","renderWidget","_props$tooltipStyle","createElement","style","root","onLayout","event","handleLayout","showTooltip","tooltip","direction","tooltipStyle","tooltipLabelStyle","text","triangle","transform","tooltipTriangleStyle","borderBottomColor","backgroundColor","children"],"sources":["tooltip.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, Text, View } from \"react-native\";\nimport { BaseComponent, BaseComponentState } from \"@wavemaker/app-rn-runtime/core/base.component\";\nimport WmTooltipProps from \"./tooltip.props\";\nimport { DEFAULT_CLASS, WmTooltipStyles } from \"./tooltip.styles\";\n\n// * default tooltip direction - up\nconst directionConfig = {\n  up: { rotate: '180deg', styles: {top: -60}, triangleStyles: {bottom: -10} },\n  down: { rotate: '0deg', styles: {bottom: -40}, triangleStyles: {top: -10} },\n  left: { rotate: '90deg', styles: {left: -40}, triangleStyles: {right: -10} },\n  right: { rotate: '-90deg', styles: {right: -40}, triangleStyles: {left: -10} },\n};\n\nexport class WmTooltipState extends BaseComponentState<WmTooltipProps> {}\n\nexport default class WmTooltip extends BaseComponent<WmTooltipProps, WmTooltipState, WmTooltipStyles> {\n  constructor(props: WmTooltipProps) {\n    super(props, DEFAULT_CLASS, new WmTooltipProps());\n  }\n  \n  renderWidget(props: WmTooltipProps) {\n    return (\n      <View \n        style={this.styles.root}\n        onLayout={(event) => this.handleLayout(event)}\n      >\n      {props.showTooltip ? (\n        <Animated.View\n          style={[\n            this.styles.tooltip,\n            props.direction\n              ? { ...directionConfig[props.direction].styles }\n              : { top: -60 },\n            props.tooltipStyle,\n          ]}\n        >\n          <Text style={[props.tooltipLabelStyle]}>{props.text}</Text>\n          <View\n            style={[\n              this.styles.triangle,\n              {\n                transform: [\n                  {\n                    rotate: props.direction\n                      ? directionConfig[props.direction].rotate\n                      : '180deg',\n                  },\n                ],\n              },\n              props.direction\n                ? { ...directionConfig[props.direction].triangleStyles }\n                : { bottom: -10 },\n              props.tooltipTriangleStyle,\n              { borderBottomColor: props.tooltipStyle?.backgroundColor || this.styles.tooltip.backgroundColor }\n            ]}\n          />\n        </Animated.View>\n      ) : null}\n      {props.children}\n    </View>\n    )\n  }\n};\n"],"mappings":"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","ignoreList":[]}

package/components/basic/video/video.component.js

@@ -3,7 +3,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
-import { View, Image, TouchableWithoutFeedback } from 'react-native';
+import { View, Image, TouchableWithoutFeedback, Platform, Text } from 'react-native';
 import { VideoView, createVideoPlayer } from 'expo-video';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
 import WmVideoProps from './video.props';
@@ -16,6 +16,7 @@ export class WmVideoState extends BaseComponentState {
     super(...args);
     _defineProperty(this, "isVideoReady", false);
     _defineProperty(this, "playStarted", false);
+    _defineProperty(this, "videoPosterDismissed", false);
   }
 }
 export default class WmVideo extends BaseComponent {
@@ -104,6 +105,12 @@ export default class WmVideo extends BaseComponent {
     this.player.addListener('statusChange', this.playerReadyStatusChange.bind(this));
     this.initializeProps();
   }
+  onPlayIconTap() {
+    this.updateState({
+      videoPosterDismissed: true
+    });
+    this.player.play();
+  }
   componentWillUnmount() {
     super.componentWillUnmount();
     this.player.removeListener('playingChange', this.playingStatusChange);
@@ -116,14 +123,17 @@ export default class WmVideo extends BaseComponent {
       videoposter,
       onFullscreenEnter,
       onFullscreenExit,
-      requiresLinearPlayback
+      requiresLinearPlayback,
+      showdefaultvideoposter
     } = props;
     const {
       playStarted
     } = this.state;
     const isPlaying = playStarted || this.state.props.autoplay;
+    const showOverlay = !showdefaultvideoposter && !this.state.videoPosterDismissed;
     return /*#__PURE__*/React.createElement(View, {
-      style: this.styles.root
+      style: this.styles.root,
+      onLayout: event => this.handleLayout(event)
     }, this._background, /*#__PURE__*/React.createElement(VideoView, _extends({}, getAccessibilityProps(AccessibilityWidgetType.VIDEO, props), {
       style: {
         width: '100%',
@@ -131,14 +141,35 @@ export default class WmVideo extends BaseComponent {
         flex: 1
       },
       player: this.player,
-      nativeControls: props.controls,
+      nativeControls: props.controls || showOverlay,
       contentFit: 'contain',
       testID: this.getTestId('video'),
       allowsPictureInPicture: allowsPictureInPicture,
       onFullscreenEnter: onFullscreenEnter,
       onFullscreenExit: onFullscreenExit,
       requiresLinearPlayback: requiresLinearPlayback
-    })), !isPlaying && videoposter ? this.renderVideoPoster(props) : /*#__PURE__*/React.createElement(React.Fragment, null));
+    })), !isPlaying && videoposter && showdefaultvideoposter ? this.renderVideoPoster(props) : /*#__PURE__*/React.createElement(React.Fragment, null), !isPlaying && !showdefaultvideoposter && !this.state.videoPosterDismissed ? /*#__PURE__*/React.createElement(View, {
+      style: this.styles.playIconContainer
+    }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+      style: {
+        width: 80,
+        height: 80
+      },
+      onPress: this.onPlayIconTap.bind(this)
+    }, Platform.OS === 'android' ? /*#__PURE__*/React.createElement(Image, _extends({}, this.getTestProps('video_play_button'), {
+      style: {
+        width: 80,
+        height: 80
+      },
+      resizeMode: 'contain',
+      source: this.getSource('resources/images/imagelists/play.png')
+    })) : /*#__PURE__*/React.createElement(Text, {
+      style: {
+        fontSize: 80,
+        fontWeight: 'bold',
+        color: 'white'
+      }
+    }, "\u25B6"))) : /*#__PURE__*/React.createElement(React.Fragment, null));
   }
 }
 //# sourceMappingURL=video.component.js.map

package/components/basic/video/video.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Image","TouchableWithoutFeedback","VideoView","createVideoPlayer","BaseComponent","BaseComponentState","WmVideoProps","DEFAULT_CLASS","AccessibilityWidgetType","getAccessibilityProps","isFullPathUrl","createSkeleton","WmVideoState","constructor","args","_defineProperty","WmVideo","props","getSource","path","resource","loadAsset","uri","renderVideoPoster","accessibilityImageProps","accessibilitylabel","hint","accessibilityrole","createElement","onPress","player","play","_extends","getTestProps","style","position","top","bottom","left","right","width","height","resizeMode","source","videoposter","PICTURE","renderSkeleton","theme","styles","skeleton","root","playingStatusChange","isPlaying","state","playStarted","updateState","autoplay","playerReadyStatusChange","statusObj","videoReady","status","isVideoReady","initializeProps","loop","muted","showNowPlayingNotification","componentDidMount","mp4format","webmformat","videoSource","addListener","bind","componentWillUnmount","removeListener","release","renderWidget","allowsPictureInPicture","onFullscreenEnter","onFullscreenExit","requiresLinearPlayback","_background","VIDEO","flex","nativeControls","controls","contentFit","testID","getTestId","Fragment"],"sources":["video.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Image, TouchableWithoutFeedback } from 'react-native';\nimport { VideoView, createVideoPlayer } from 'expo-video';\nimport {\n  BaseComponent,\n  BaseComponentState,\n} from '@wavemaker/app-rn-runtime/core/base.component';\nimport WmVideoProps from './video.props';\nimport { DEFAULT_CLASS, WmVideoStyles } from './video.styles';\nimport {\n  AccessibilityWidgetType,\n  getAccessibilityProps,\n} from '@wavemaker/app-rn-runtime/core/accessibility';\nimport { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';\nimport { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';\n\nexport class WmVideoState extends BaseComponentState<WmVideoProps> {\n  isVideoReady: boolean = false;\n  playStarted: boolean = false;\n}\n\nexport default class WmVideo extends BaseComponent<\n  WmVideoProps,\n  WmVideoState,\n  WmVideoStyles\n> {\n  private player: any;\n\n  constructor(props: WmVideoProps) {\n    super(props, DEFAULT_CLASS, new WmVideoProps(), new WmVideoState());\n  }\n\n  getSource(path: string) {\n    if (!path) {\n      return null;\n    }\n    const resource = this.loadAsset && this.loadAsset(path);\n    if (isFullPathUrl(resource as string)) {\n      return {\n        uri: resource as string,\n      };\n    }\n    return resource || {\n      uri: ''\n    };\n  }\n\n  renderVideoPoster(props: WmVideoProps) {\n    const accessibilityImageProps = {...props, \n      accessibilitylabel : `${props.accessibilitylabel}_poster`,\n      hint: `${props.hint}_poster`,\n      accessibilityrole: `${props.accessibilityrole}_poster`,\n    }\n    return (\n      <TouchableWithoutFeedback onPress={() => this.player.play()}>\n        <Image\n          {...this.getTestProps('video_poster')}\n          style={{\n            position: 'absolute',\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n            width: '100%',\n            height: '100%',\n          }}\n          resizeMode={'cover'}\n          source={this.getSource(props.videoposter) as any}\n          {...getAccessibilityProps(AccessibilityWidgetType.PICTURE, accessibilityImageProps)}\n        />\n      </TouchableWithoutFeedback>\n    );\n  }\n\n  public renderSkeleton(props: WmVideoProps): React.ReactNode {\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n    });\n  }\n\n  public playingStatusChange(isPlaying: boolean) {\n    if (!this.state.playStarted) {\n      this.updateState({\n        playStarted: this.state.props.autoplay || isPlaying,\n      } as WmVideoState);\n    }\n  }\n\n  playerReadyStatusChange(statusObj: any) {\n    const videoReady = statusObj.status === 'readyToPlay'\n    if (this.state.props.autoplay && videoReady) {\n        this.player.play();\n    }\n    this.updateState({\n      isVideoReady: videoReady,\n    } as WmVideoState);\n  }\n\n  initializeProps(){\n    const {\n      loop,\n      muted,\n      showNowPlayingNotification,\n    } = this.state.props\n\n    this.player.muted = muted; \n    this.player.loop = loop; \n    this.player.showNowPlayingNotification = showNowPlayingNotification; \n  }\n\n  componentDidMount(): void {\n    super.componentDidMount();\n    const { mp4format, webmformat, autoplay } = this.state.props;\n    const videoSource = this.getSource(mp4format || webmformat) ;\n\n    this.player = createVideoPlayer(videoSource);\n    this.player.addListener(\n      'playingChange',\n      this.playingStatusChange.bind(this)\n    );\n    this.player.addListener(\n      'statusChange',\n      this.playerReadyStatusChange.bind(this)\n    );\n\n    this.initializeProps()\n  }\n\n  componentWillUnmount(): void {\n    super.componentWillUnmount();\n    this.player.removeListener('playingChange', this.playingStatusChange);\n    this.player.removeListener('statusChange', this.playerReadyStatusChange);\n    this.player.release();\n  }\n\n\n  renderWidget(props: WmVideoProps) {\n    const {\n      allowsPictureInPicture,\n      videoposter,\n      onFullscreenEnter,\n      onFullscreenExit,\n      requiresLinearPlayback\n    } = props;\n\n    const { playStarted } = this.state;\n    const isPlaying = playStarted || this.state.props.autoplay;\n\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        <VideoView\n          {...getAccessibilityProps(AccessibilityWidgetType.VIDEO, props)}\n          style={{ width: '100%', height: '100%', flex: 1 }}\n          player={this.player}\n          nativeControls={props.controls}\n          contentFit={'contain'}\n          testID={this.getTestId('video')}\n          allowsPictureInPicture={allowsPictureInPicture}\n          onFullscreenEnter={onFullscreenEnter}\n          onFullscreenExit={onFullscreenExit}\n          requiresLinearPlayback={requiresLinearPlayback}\n        />\n        {!isPlaying && videoposter ? (\n          this.renderVideoPoster(props)\n        ) : (\n          <></>\n        )}\n      </View>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","Image","TouchableWithoutFeedback","Platform","Text","VideoView","createVideoPlayer","BaseComponent","BaseComponentState","WmVideoProps","DEFAULT_CLASS","AccessibilityWidgetType","getAccessibilityProps","isFullPathUrl","createSkeleton","WmVideoState","constructor","args","_defineProperty","WmVideo","props","getSource","path","resource","loadAsset","uri","renderVideoPoster","accessibilityImageProps","accessibilitylabel","hint","accessibilityrole","createElement","onPress","player","play","_extends","getTestProps","style","position","top","bottom","left","right","width","height","resizeMode","source","videoposter","PICTURE","renderSkeleton","theme","styles","skeleton","root","playingStatusChange","isPlaying","state","playStarted","updateState","autoplay","playerReadyStatusChange","statusObj","videoReady","status","isVideoReady","initializeProps","loop","muted","showNowPlayingNotification","componentDidMount","mp4format","webmformat","videoSource","addListener","bind","onPlayIconTap","videoPosterDismissed","componentWillUnmount","removeListener","release","renderWidget","allowsPictureInPicture","onFullscreenEnter","onFullscreenExit","requiresLinearPlayback","showdefaultvideoposter","showOverlay","onLayout","event","handleLayout","_background","VIDEO","flex","nativeControls","controls","contentFit","testID","getTestId","Fragment","playIconContainer","OS","fontSize","fontWeight","color"],"sources":["video.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Image, TouchableWithoutFeedback, Platform, Text } from 'react-native';\nimport { VideoView, createVideoPlayer } from 'expo-video';\nimport {\n  BaseComponent,\n  BaseComponentState,\n} from '@wavemaker/app-rn-runtime/core/base.component';\nimport WmVideoProps from './video.props';\nimport { DEFAULT_CLASS, WmVideoStyles } from './video.styles';\nimport {\n  AccessibilityWidgetType,\n  getAccessibilityProps,\n} from '@wavemaker/app-rn-runtime/core/accessibility';\nimport { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';\nimport { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';\n\nexport class WmVideoState extends BaseComponentState<WmVideoProps> {\n  isVideoReady: boolean = false;\n  playStarted: boolean = false;\n  videoPosterDismissed: boolean = false;\n}\n\nexport default class WmVideo extends BaseComponent<\n  WmVideoProps,\n  WmVideoState,\n  WmVideoStyles\n> {\n  private player: any;\n\n  constructor(props: WmVideoProps) {\n    super(props, DEFAULT_CLASS, new WmVideoProps(), new WmVideoState());\n  }\n\n  getSource(path: string) {\n    if (!path) {\n      return null;\n    }\n    const resource = this.loadAsset && this.loadAsset(path);\n    if (isFullPathUrl(resource as string)) {\n      return {\n        uri: resource as string,\n      };\n    }\n    return resource || {\n      uri: ''\n    };\n  }\n\n  renderVideoPoster(props: WmVideoProps) {\n    const accessibilityImageProps = {...props, \n      accessibilitylabel : `${props.accessibilitylabel}_poster`,\n      hint: `${props.hint}_poster`,\n      accessibilityrole: `${props.accessibilityrole}_poster`,\n    }\n    return (\n      <TouchableWithoutFeedback onPress={() => this.player.play()}>\n        <Image\n          {...this.getTestProps('video_poster')}\n          style={{\n            position: 'absolute',\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n            width: '100%',\n            height: '100%',\n          }}\n          resizeMode={'cover'}\n          source={this.getSource(props.videoposter) as any}\n          {...getAccessibilityProps(AccessibilityWidgetType.PICTURE, accessibilityImageProps)}\n        />\n      </TouchableWithoutFeedback>\n    );\n  }\n\n\n  public renderSkeleton(props: WmVideoProps): React.ReactNode {\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n    });\n  }\n\n  public playingStatusChange(isPlaying: boolean) {\n    if (!this.state.playStarted) {\n      this.updateState({\n        playStarted: this.state.props.autoplay || isPlaying,\n      } as WmVideoState);\n    }\n  }\n\n  playerReadyStatusChange(statusObj: any) {\n    const videoReady = statusObj.status === 'readyToPlay'\n    if (this.state.props.autoplay && videoReady) {\n        this.player.play();\n    }\n    this.updateState({\n      isVideoReady: videoReady,\n    } as WmVideoState);\n  }\n\n  initializeProps(){\n    const {\n      loop,\n      muted,\n      showNowPlayingNotification,\n    } = this.state.props\n\n    this.player.muted = muted; \n    this.player.loop = loop; \n    this.player.showNowPlayingNotification = showNowPlayingNotification; \n  }\n\n  componentDidMount(): void {\n    super.componentDidMount();\n    const { mp4format, webmformat, autoplay } = this.state.props;\n    const videoSource = this.getSource(mp4format || webmformat) ;\n\n    this.player = createVideoPlayer(videoSource);\n    this.player.addListener(\n      'playingChange',\n      this.playingStatusChange.bind(this)\n    );\n    this.player.addListener(\n      'statusChange',\n      this.playerReadyStatusChange.bind(this)\n    ); \n    this.initializeProps()\n  }\n\n  onPlayIconTap() {\n    this.updateState({\n      videoPosterDismissed: true\n    } as WmVideoState)\n    this.player.play()\n  }\n\n  componentWillUnmount(): void {\n    super.componentWillUnmount();\n    this.player.removeListener('playingChange', this.playingStatusChange);\n    this.player.removeListener('statusChange', this.playerReadyStatusChange);\n    this.player.release();\n  }\n\n  renderWidget(props: WmVideoProps) {\n    const {\n      allowsPictureInPicture,\n      videoposter,\n      onFullscreenEnter,\n      onFullscreenExit,\n      requiresLinearPlayback,\n      showdefaultvideoposter\n    } = props;\n\n    const { playStarted } = this.state;\n    const isPlaying = playStarted || this.state.props.autoplay;\n    const showOverlay = !showdefaultvideoposter && !this.state.videoPosterDismissed\n\n    return (\n      <View \n        style={this.styles.root}\n        onLayout={(event) => this.handleLayout(event)}\n      >\n        {this._background}\n        <VideoView\n          {...getAccessibilityProps(AccessibilityWidgetType.VIDEO, props)}\n          style={{ width: '100%', height: '100%', flex: 1 }}\n          player={this.player}\n          nativeControls={props.controls || showOverlay}\n          contentFit={'contain'}\n          testID={this.getTestId('video')}\n          allowsPictureInPicture={allowsPictureInPicture}\n          onFullscreenEnter={onFullscreenEnter}\n          onFullscreenExit={onFullscreenExit}\n          requiresLinearPlayback={requiresLinearPlayback}\n        />\n        {!isPlaying && videoposter && showdefaultvideoposter ? (\n          this.renderVideoPoster(props)\n        ) : (\n          <></>\n        )}\n        {\n          !isPlaying && !showdefaultvideoposter && !this.state.videoPosterDismissed ? (\n            <View style={this.styles.playIconContainer}>\n              <TouchableWithoutFeedback style={{width: 80, height: 80 }} onPress={this.onPlayIconTap.bind(this)}>\n                {Platform.OS === 'android' ? <Image\n                {...this.getTestProps('video_play_button')}\n                style={{\n                  width: 80, \n                  height: 80,\n                }}\n                resizeMode={'contain'}\n                source={this.getSource('resources/images/imagelists/play.png') as any}\n              /> : <Text style={{ fontSize: 80, fontWeight: 'bold', color: 'white'}} >▶</Text> } \n              </TouchableWithoutFeedback>\n            </View>            \n          ) : (\n            <></>\n          )\n        }\n      </View>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/components/basic/video/video.props.js

@@ -14,6 +14,7 @@ export default class WmVideoProps extends BaseProps {
     _defineProperty(this, "subtitlelang", 'en');
     _defineProperty(this, "subtitlesource", null);
     _defineProperty(this, "videoposter", 'resources/images/imagelists/default-image.png');
+    _defineProperty(this, "showdefaultvideoposter", true);
     _defineProperty(this, "videopreload", 'none');
     _defineProperty(this, "videosupportmessage", 'Your browser does not support the video tag.');
     _defineProperty(this, "webmformat", null);

package/components/basic/video/video.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmVideoProps","constructor","args","_defineProperty","undefined"],"sources":["video.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AccessibilityRole } from 'react-native';\nexport default class WmVideoProps extends BaseProps {\n    autoplay = false;\n    controls = false;\n    loop = false;\n    mp4format: string = null as any;\n    muted = false;\n    oggformat: string = null as any;\n    subtitlelang = 'en';\n    subtitlesource: string = null as any;\n    videoposter = 'resources/images/imagelists/default-image.png';\n    videopreload = 'none';\n    videosupportmessage = 'Your browser does not support the video tag.';\n    webmformat: string = null as any;\n    accessibilitylabel?: string = undefined;\n    hint?: string = undefined;\n    accessibilityrole?: AccessibilityRole;\n    onFullscreenEnter: (() => void) | null = null;\n    onFullscreenExit: (() => void) | null = null;\n    requiresLinearPlayback: boolean = true;\n    isLive: boolean = false;\n    playing: boolean = false;\n    showNowPlayingNotification: boolean = false;\n    allowsPictureInPicture: boolean = false;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,YAAY,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,mBACrC,KAAK;IAAAA,eAAA,mBACL,KAAK;IAAAA,eAAA,eACT,KAAK;IAAAA,eAAA,oBACQ,IAAI;IAAAA,eAAA,gBAChB,KAAK;IAAAA,eAAA,oBACO,IAAI;IAAAA,eAAA,uBACT,IAAI;IAAAA,eAAA,yBACM,IAAI;IAAAA,eAAA,sBACf,+CAA+C;IAAAA,eAAA,uBAC9C,MAAM;IAAAA,eAAA,8BACC,8CAA8C;IAAAA,eAAA,qBAC/C,IAAI;IAAAA,eAAA,6BACKC,SAAS;IAAAD,eAAA,eACvBC,SAAS;IAAAD,eAAA;IAAAA,eAAA,4BAEgB,IAAI;IAAAA,eAAA,2BACL,IAAI;IAAAA,eAAA,iCACV,IAAI;IAAAA,eAAA,iBACpB,KAAK;IAAAA,eAAA,kBACJ,KAAK;IAAAA,eAAA,qCACc,KAAK;IAAAA,eAAA,iCACT,KAAK;EAAA;AAC3C","ignoreList":[]}
+{"version":3,"names":["BaseProps","WmVideoProps","constructor","args","_defineProperty","undefined"],"sources":["video.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AccessibilityRole } from 'react-native';\nexport default class WmVideoProps extends BaseProps {\n    autoplay = false;\n    controls = false;\n    loop = false;\n    mp4format: string = null as any;\n    muted = false;\n    oggformat: string = null as any;\n    subtitlelang = 'en';\n    subtitlesource: string = null as any;\n    videoposter = 'resources/images/imagelists/default-image.png';\n    showdefaultvideoposter = true;\n    videopreload = 'none';\n    videosupportmessage = 'Your browser does not support the video tag.';\n    webmformat: string = null as any;\n    accessibilitylabel?: string = undefined;\n    hint?: string = undefined;\n    accessibilityrole?: AccessibilityRole;\n    onFullscreenEnter: (() => void) | null = null;\n    onFullscreenExit: (() => void) | null = null;\n    requiresLinearPlayback: boolean = true;\n    isLive: boolean = false;\n    playing: boolean = false;\n    showNowPlayingNotification: boolean = false;\n    allowsPictureInPicture: boolean = false;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,YAAY,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,mBACrC,KAAK;IAAAA,eAAA,mBACL,KAAK;IAAAA,eAAA,eACT,KAAK;IAAAA,eAAA,oBACQ,IAAI;IAAAA,eAAA,gBAChB,KAAK;IAAAA,eAAA,oBACO,IAAI;IAAAA,eAAA,uBACT,IAAI;IAAAA,eAAA,yBACM,IAAI;IAAAA,eAAA,sBACf,+CAA+C;IAAAA,eAAA,iCACpC,IAAI;IAAAA,eAAA,uBACd,MAAM;IAAAA,eAAA,8BACC,8CAA8C;IAAAA,eAAA,qBAC/C,IAAI;IAAAA,eAAA,6BACKC,SAAS;IAAAD,eAAA,eACvBC,SAAS;IAAAD,eAAA;IAAAA,eAAA,4BAEgB,IAAI;IAAAA,eAAA,2BACL,IAAI;IAAAA,eAAA,iCACV,IAAI;IAAAA,eAAA,iBACpB,KAAK;IAAAA,eAAA,kBACJ,KAAK;IAAAA,eAAA,qCACc,KAAK;IAAAA,eAAA,iCACT,KAAK;EAAA;AAC3C","ignoreList":[]}

package/components/basic/video/video.styles.js

@@ -13,6 +13,19 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
         height: 300,
         width: "100%"
       }
+    },
+    playIconContainer: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: '100%',
+      width: '100%',
+      backgroundColor: 'rgba(0,0,0,0.1)',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
     }
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);

package/components/basic/video/video.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","height","width","text","skeleton"],"sources":["video.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 { WmSkeletonStyles } from '../skeleton/skeleton.styles';\n\nexport type WmVideoStyles = BaseStyles & {\n    skeleton: WmSkeletonStyles;\n};\n\nexport const DEFAULT_CLASS = 'app-video';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles = defineStyles<WmVideoStyles>({\n        root: {\n            height: 300,\n            width : \"100%\"\n        },\n        text: {},\n        skeleton: {\n            root: {\n                height: 300,\n                width : \"100%\"    \n            }\n        } as any as WmSkeletonStyles\n    });\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAOxF,OAAO,MAAMC,aAAa,GAAG,WAAW;AACxCF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAa,GAAGL,YAAY,CAAgB;IAC9CM,IAAI,EAAE;MACFC,MAAM,EAAE,GAAG;MACXC,KAAK,EAAG;IACZ,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACNJ,IAAI,EAAE;QACFC,MAAM,EAAE,GAAG;QACXC,KAAK,EAAG;MACZ;IACJ;EACJ,CAAC,CAAC;EACFJ,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","height","width","text","skeleton","playIconContainer","position","top","bottom","left","right","backgroundColor","display","justifyContent","alignItems"],"sources":["video.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 { WmSkeletonStyles } from '../skeleton/skeleton.styles';\nimport { WmPictureStyles } from '../picture/picture.styles';\nimport { ViewStyle } from 'react-native';\n\nexport type WmVideoStyles = BaseStyles & {\n    skeleton: WmSkeletonStyles;\n    playIconContainer: ViewStyle;\n};\n\nexport const DEFAULT_CLASS = 'app-video';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles = defineStyles<WmVideoStyles>({\n        root: {\n            height: 300,\n            width : \"100%\"\n        },\n        text: {},\n        skeleton: {\n            root: {\n                height: 300,\n                width : \"100%\"    \n            }\n        } as any as WmSkeletonStyles,\n        playIconContainer: {\n            position: 'absolute', \n            top: 0, \n            bottom: 0, \n            left: 0, \n            right: 0, \n            height: '100%', \n            width: '100%',\n            backgroundColor: 'rgba(0,0,0,0.1)',\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center'\n} \n    });\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAUxF,OAAO,MAAMC,aAAa,GAAG,WAAW;AACxCF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAa,GAAGL,YAAY,CAAgB;IAC9CM,IAAI,EAAE;MACFC,MAAM,EAAE,GAAG;MACXC,KAAK,EAAG;IACZ,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACNJ,IAAI,EAAE;QACFC,MAAM,EAAE,GAAG;QACXC,KAAK,EAAG;MACZ;IACJ,CAA4B;IAC5BG,iBAAiB,EAAE;MACfC,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,CAAC;MACNC,MAAM,EAAE,CAAC;MACTC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRT,MAAM,EAAE,MAAM;MACdC,KAAK,EAAE,MAAM;MACbS,eAAe,EAAE,iBAAiB;MAClCC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE;IACxB;EACI,CAAC,CAAC;EACFhB,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}

package/components/chart/area-chart/area-chart.component.js

@@ -24,6 +24,7 @@ export default class WmAreaChart extends BaseChartComponent {
     super(props, DEFAULT_CLASS, new WmAreaChartProps(), new WmAreaChartState());
     _defineProperty(this, "onViewLayoutChange", e => {
       let viewWidth = e.nativeEvent.layout.width;
+      this.handleLayout(e);
       this.updateState({
         chartWidth: viewWidth
       });

package/components/chart/area-chart/area-chart.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Color","View","Text","Platform","Defs","LinearGradient","Stop","VictoryArea","VictoryChart","VictoryStack","VictoryScatter","VictoryGroup","WmAreaChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","WmIcon","isNumber","AccessibilityWidgetType","getAccessibilityProps","WmAreaChartState","constructor","args","_defineProperty","WmAreaChart","props","e","viewWidth","nativeEvent","layout","width","updateState","chartWidth","onSelect","event","data","viewRef","current","measureInWindow","chartX","chartY","value","index","y","label","state","xaxisDatakeyArr","datum","x","selectedItem","dataset","tooltipX","pageX","tooltipY","pageY","selectedChartItem","series","_dataObj","tooltipXaxis","tooltipYaxis","isTooltipOpen","tooltipXPosition","tooltipoffsetx","tooltipYPosition","tooltipoffsety","invokeEventCallback","proxy","renderWidget","_this$state$data","_this$props$name","length","mindomain","xdomain","chartMinX","undefined","ydomain","chartMinY","chartName","name","gradientStop","chartMaxY","createElement","_extends","LINECHART","style","styles","root","onLayout","onViewLayoutChange","bind","key","title","flexDirection","alignItems","iconclass","icon","subHeading","subheading","ref","getTooltip","theme","height","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","minDomain","getLegendView","getXaxis","getYAxis","map","d","i","id","x1","y1","x2","y2","offset","stopColor","colors","lighten","rgb","toString","interpolation","fill","stroke","strokeWidth","linethickness","isRTL","toReversed","size","highlightpoints","opacity","events","target","eventHandlers","OS","onClick","onPress"],"sources":["area-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport Color from \"color\";\nimport { LayoutChangeEvent, View, Text, Platform } from 'react-native';\nimport { Defs, LinearGradient, Stop, Svg } from 'react-native-svg';\nimport { VictoryArea, VictoryLine, VictoryChart, VictoryLegend, VictoryStack, VictoryScatter, VictoryGroup } from \"victory-native\";\nimport { InterpolationPropType } from 'victory-core';\nimport WmAreaChartProps from './area-chart.props';\nimport { DEFAULT_CLASS, WmAreaChartStyles } from './area-chart.styles';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from \"@wavemaker/app-rn-runtime/components/chart/basechart.component\";\nimport WmIcon from \"@wavemaker/app-rn-runtime/components/basic/icon/icon.component\";\n\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\nimport { isNil, isNumber } from 'lodash-es';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\n\nexport class WmAreaChartState extends BaseChartComponentState<WmAreaChartProps> {\n  chartWidth = 0;\n}\n\nexport default class WmAreaChart extends BaseChartComponent<WmAreaChartProps, WmAreaChartState, WmAreaChartStyles> {\n\n  constructor(props: WmAreaChartProps) {\n    super(props, DEFAULT_CLASS, new WmAreaChartProps(), new WmAreaChartState());\n  }\n\n  onViewLayoutChange = (e: LayoutChangeEvent) => {\n    let viewWidth = e.nativeEvent.layout.width;\n    this.updateState({\n      chartWidth: viewWidth\n    } as WmAreaChartState)\n  }\n\n  onSelect(event: any, data: any){\n    if (!this.viewRef.current) return;\n    this.viewRef.current.measureInWindow((chartX: number, chartY: number) => {\n    let value = data.data[data.index].y;\n    let label = this.state.xaxisDatakeyArr[data.datum.x];\n    let selectedItem = this.props.dataset[data.index];\n    const nativeEvent = event.nativeEvent;\n    let tooltipX = nativeEvent.pageX - chartX;\n    let tooltipY = nativeEvent.pageY - chartY;\n    let selectedChartItem = [{series: 0, x: data.index, y: value,_dataObj: selectedItem},data.index];\n    this.updateState({\n      tooltipXaxis: label,\n      tooltipYaxis: value,\n      isTooltipOpen: true,\n      selectedItem: {...selectedItem, index: data.index},\n      tooltipXPosition: tooltipX - this.state.tooltipoffsetx, \n      tooltipYPosition: tooltipY - this.state.tooltipoffsety\n    } as WmAreaChartState)\n    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem ]);\n  });\n  }\n\n  renderWidget(props: WmAreaChartProps) {\n    this.invokeEventCallback('onBeforerender', [this.proxy, null]);\n    if (!this.state.data?.length) {\n      return null;\n    }\n    let mindomain={\n      x: props.xdomain === 'Min' ? this.state.chartMinX: undefined,\n      y: props.ydomain === 'Min' ? this.state.chartMinY: undefined\n    };\n    const chartName = this.props.name ?? 'nonameAreachart';\n    let gradientStop = '100%';\n    if (isNumber(this.state.chartMaxY) && isNumber(this.state.chartMinY) && this.state.chartMaxY > 0) {\n      gradientStop = (this.state.chartMaxY - this.state.chartMinY) * 100 / this.state.chartMaxY + '%';\n    }\n    return (\n      <View\n        {...getAccessibilityProps(AccessibilityWidgetType.LINECHART, props)}\n        style={this.styles.root}\n        onLayout={this.onViewLayoutChange.bind(this)}\n        key={`${props.title}_area_chart`}\n      >\n        <View>\n          <View style={{flexDirection: 'row', alignItems: 'center'}}>\n            {props.iconclass ? (<WmIcon iconclass={props.iconclass} styles={this.styles.icon}></WmIcon>) : null }\n            <Text style={this.styles.title}>{props.title}</Text>\n          </View>\n          <Text style={this.styles.subHeading}>{props.subheading}</Text>\n        </View>\n        {this.state.chartWidth ? \n        (\n          <View ref={this.viewRef}>\n          {this.getTooltip()}\n          <VictoryChart\n            theme={this.state.theme}\n            height={this.styles.root.height as number}\n            width={this.state.chartWidth || 120}\n            padding={{ top: props.offsettop, bottom: props.offsetbottom, left: props.offsetleft, right: props.offsetright }}\n            minDomain={mindomain}\n          > \n            {this.getLegendView()}\n            {this.getXaxis()}\n            {this.getYAxis()}\n            <VictoryStack>\n            {\n              this.state.data.map((d: any, i: number) => {\n                return <VictoryGroup key={props.name + '_area_group_' + i}>\n                  <Defs>\n                    <LinearGradient id={`${chartName}Gradient${i}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n                      <Stop offset=\"0%\" stopColor={Color(this.state.colors[i]).lighten(0.2).rgb().toString()}/>\n                      <Stop offset={gradientStop} stopColor={Color(this.state.colors[i]).lighten(0.6).rgb().toString()}/>\n                    </LinearGradient>\n                  </Defs>\n                  <VictoryArea\n                    interpolation={props.interpolation as InterpolationPropType}\n                    key={props.name + '_' + i}\n                    name={props.name + '_' + i}\n                    style={{\n                      data: {\n                        fill: `url(#${chartName}Gradient${i})`,\n                        stroke: this.state.colors[i],\n                        strokeWidth: props.linethickness,\n                      }\n                    }}\n                    data={this.isRTL?d.toReversed():d}\n                  />\n                    <VictoryScatter\n                      size={5}\n                      key={props.name + '_scatter' + i}\n                      style={{\n                        data: props.highlightpoints ? {fill: this.state.colors[i], opacity: 0.8}:{opacity: 0}\n                      }}        \n                      data={this.isRTL?d.toReversed():d}\n                      events={[{\n                        target: 'data',\n                        eventHandlers: Platform.OS == \"web\" ? {\n                          onClick: this.onSelect.bind(this)\n                        }:{\n                          onPress: this.onSelect.bind(this)\n                        }\n                      }]}\n                      />\n                </VictoryGroup>\n              })\n            }\n            </VictoryStack>\n          </VictoryChart>\n          </View>\n        )\n      : null}\n    </View>);\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Color","View","Text","Platform","Defs","LinearGradient","Stop","VictoryArea","VictoryChart","VictoryStack","VictoryScatter","VictoryGroup","WmAreaChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","WmIcon","isNumber","AccessibilityWidgetType","getAccessibilityProps","WmAreaChartState","constructor","args","_defineProperty","WmAreaChart","props","e","viewWidth","nativeEvent","layout","width","handleLayout","updateState","chartWidth","onSelect","event","data","viewRef","current","measureInWindow","chartX","chartY","value","index","y","label","state","xaxisDatakeyArr","datum","x","selectedItem","dataset","tooltipX","pageX","tooltipY","pageY","selectedChartItem","series","_dataObj","tooltipXaxis","tooltipYaxis","isTooltipOpen","tooltipXPosition","tooltipoffsetx","tooltipYPosition","tooltipoffsety","invokeEventCallback","proxy","renderWidget","_this$state$data","_this$props$name","length","mindomain","xdomain","chartMinX","undefined","ydomain","chartMinY","chartName","name","gradientStop","chartMaxY","createElement","_extends","LINECHART","style","styles","root","onLayout","onViewLayoutChange","bind","key","title","flexDirection","alignItems","iconclass","icon","subHeading","subheading","ref","getTooltip","theme","height","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","minDomain","getLegendView","getXaxis","getYAxis","map","d","i","id","x1","y1","x2","y2","offset","stopColor","colors","lighten","rgb","toString","interpolation","fill","stroke","strokeWidth","linethickness","isRTL","toReversed","size","highlightpoints","opacity","events","target","eventHandlers","OS","onClick","onPress"],"sources":["area-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport Color from \"color\";\nimport { LayoutChangeEvent, View, Text, Platform } from 'react-native';\nimport { Defs, LinearGradient, Stop, Svg } from 'react-native-svg';\nimport { VictoryArea, VictoryLine, VictoryChart, VictoryLegend, VictoryStack, VictoryScatter, VictoryGroup } from \"victory-native\";\nimport { InterpolationPropType } from 'victory-core';\nimport WmAreaChartProps from './area-chart.props';\nimport { DEFAULT_CLASS, WmAreaChartStyles } from './area-chart.styles';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from \"@wavemaker/app-rn-runtime/components/chart/basechart.component\";\nimport WmIcon from \"@wavemaker/app-rn-runtime/components/basic/icon/icon.component\";\n\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\nimport { isNil, isNumber } from 'lodash-es';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\n\nexport class WmAreaChartState extends BaseChartComponentState<WmAreaChartProps> {\n  chartWidth = 0;\n}\n\nexport default class WmAreaChart extends BaseChartComponent<WmAreaChartProps, WmAreaChartState, WmAreaChartStyles> {\n\n  constructor(props: WmAreaChartProps) {\n    super(props, DEFAULT_CLASS, new WmAreaChartProps(), new WmAreaChartState());\n  }\n\n  onViewLayoutChange = (e: LayoutChangeEvent) => {\n    let viewWidth = e.nativeEvent.layout.width;\n\n    this.handleLayout(e);\n\n    this.updateState({\n      chartWidth: viewWidth\n    } as WmAreaChartState)\n  }\n\n  onSelect(event: any, data: any){\n    if (!this.viewRef.current) return;\n    this.viewRef.current.measureInWindow((chartX: number, chartY: number) => {\n    let value = data.data[data.index].y;\n    let label = this.state.xaxisDatakeyArr[data.datum.x];\n    let selectedItem = this.props.dataset[data.index];\n    const nativeEvent = event.nativeEvent;\n    let tooltipX = nativeEvent.pageX - chartX;\n    let tooltipY = nativeEvent.pageY - chartY;\n    let selectedChartItem = [{series: 0, x: data.index, y: value,_dataObj: selectedItem},data.index];\n    this.updateState({\n      tooltipXaxis: label,\n      tooltipYaxis: value,\n      isTooltipOpen: true,\n      selectedItem: {...selectedItem, index: data.index},\n      tooltipXPosition: tooltipX - this.state.tooltipoffsetx, \n      tooltipYPosition: tooltipY - this.state.tooltipoffsety\n    } as WmAreaChartState)\n    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem ]);\n  });\n  }\n\n  renderWidget(props: WmAreaChartProps) {\n    this.invokeEventCallback('onBeforerender', [this.proxy, null]);\n    if (!this.state.data?.length) {\n      return null;\n    }\n    let mindomain={\n      x: props.xdomain === 'Min' ? this.state.chartMinX: undefined,\n      y: props.ydomain === 'Min' ? this.state.chartMinY: undefined\n    };\n    const chartName = this.props.name ?? 'nonameAreachart';\n    let gradientStop = '100%';\n    if (isNumber(this.state.chartMaxY) && isNumber(this.state.chartMinY) && this.state.chartMaxY > 0) {\n      gradientStop = (this.state.chartMaxY - this.state.chartMinY) * 100 / this.state.chartMaxY + '%';\n    }\n    return (\n      <View\n        {...getAccessibilityProps(AccessibilityWidgetType.LINECHART, props)}\n        style={this.styles.root}\n        onLayout={this.onViewLayoutChange.bind(this)}\n        key={`${props.title}_area_chart`}\n      >\n        <View>\n          <View style={{flexDirection: 'row', alignItems: 'center'}}>\n            {props.iconclass ? (<WmIcon iconclass={props.iconclass} styles={this.styles.icon}></WmIcon>) : null }\n            <Text style={this.styles.title}>{props.title}</Text>\n          </View>\n          <Text style={this.styles.subHeading}>{props.subheading}</Text>\n        </View>\n        {this.state.chartWidth ? \n        (\n          <View ref={this.viewRef}>\n          {this.getTooltip()}\n          <VictoryChart\n            theme={this.state.theme}\n            height={this.styles.root.height as number}\n            width={this.state.chartWidth || 120}\n            padding={{ top: props.offsettop, bottom: props.offsetbottom, left: props.offsetleft, right: props.offsetright }}\n            minDomain={mindomain}\n          > \n            {this.getLegendView()}\n            {this.getXaxis()}\n            {this.getYAxis()}\n            <VictoryStack>\n            {\n              this.state.data.map((d: any, i: number) => {\n                return <VictoryGroup key={props.name + '_area_group_' + i}>\n                  <Defs>\n                    <LinearGradient id={`${chartName}Gradient${i}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n                      <Stop offset=\"0%\" stopColor={Color(this.state.colors[i]).lighten(0.2).rgb().toString()}/>\n                      <Stop offset={gradientStop} stopColor={Color(this.state.colors[i]).lighten(0.6).rgb().toString()}/>\n                    </LinearGradient>\n                  </Defs>\n                  <VictoryArea\n                    interpolation={props.interpolation as InterpolationPropType}\n                    key={props.name + '_' + i}\n                    name={props.name + '_' + i}\n                    style={{\n                      data: {\n                        fill: `url(#${chartName}Gradient${i})`,\n                        stroke: this.state.colors[i],\n                        strokeWidth: props.linethickness,\n                      }\n                    }}\n                    data={this.isRTL?d.toReversed():d}\n                  />\n                    <VictoryScatter\n                      size={5}\n                      key={props.name + '_scatter' + i}\n                      style={{\n                        data: props.highlightpoints ? {fill: this.state.colors[i], opacity: 0.8}:{opacity: 0}\n                      }}        \n                      data={this.isRTL?d.toReversed():d}\n                      events={[{\n                        target: 'data',\n                        eventHandlers: Platform.OS == \"web\" ? {\n                          onClick: this.onSelect.bind(this)\n                        }:{\n                          onPress: this.onSelect.bind(this)\n                        }\n                      }]}\n                      />\n                </VictoryGroup>\n              })\n            }\n            </VictoryStack>\n          </VictoryChart>\n          </View>\n        )\n      : null}\n    </View>);\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/chart/basechart.component.js

@@ -80,6 +80,7 @@ export class BaseChartComponent extends BaseComponent {
   onViewLayoutChange(e) {
     let viewWidth = e.nativeEvent.layout.width;
     let viewHeight = e.nativeEvent.layout.height;
+    this.handleLayout(e);
     if (this !== null && this !== void 0 && this.state && viewWidth !== this.state.chartWidth) {
       this.updateState({
         chartWidth: Number(viewWidth),