@wavemaker/app-rn-runtime 11.7.0-rc.161 → 11.7.0-rc.162

app-rn-runtime/components/basic/tooltip/tooltip.component.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Animated, Text, View } from "react-native";
+import { BaseComponent, BaseComponentState } from "@wavemaker/app-rn-runtime/core/base.component";
+import WmTooltipProps from "./tooltip.props";
+import { DEFAULT_CLASS } from "./tooltip.styles";
+
+// * default tooltip direction - up
+const directionConfig = {
+  up: {
+    rotate: '180deg',
+    styles: {
+      top: -60
+    },
+    triangleStyles: {
+      bottom: -10
+    }
+  },
+  down: {
+    rotate: '0deg',
+    styles: {
+      bottom: -40
+    },
+    triangleStyles: {
+      top: -10
+    }
+  },
+  left: {
+    rotate: '90deg',
+    styles: {
+      left: -40
+    },
+    triangleStyles: {
+      right: -10
+    }
+  },
+  right: {
+    rotate: '-90deg',
+    styles: {
+      right: -40
+    },
+    triangleStyles: {
+      left: -10
+    }
+  }
+};
+export class WmTooltipState extends BaseComponentState {}
+export default class WmTooltip extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmTooltipProps());
+  }
+  renderWidget(props) {
+    var _props$tooltipStyle;
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, props.showTooltip ? /*#__PURE__*/React.createElement(Animated.View, {
+      style: [this.styles.tooltip, props.direction ? {
+        ...directionConfig[props.direction].styles
+      } : {
+        top: -60
+      }, props.tooltipStyle]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [props.tooltipLabelStyle]
+    }, props.text), /*#__PURE__*/React.createElement(View, {
+      style: [this.styles.triangle, {
+        transform: [{
+          rotate: props.direction ? directionConfig[props.direction].rotate : '180deg'
+        }]
+      }, props.direction ? {
+        ...directionConfig[props.direction].triangleStyles
+      } : {
+        bottom: -10
+      }, props.tooltipTriangleStyle, {
+        borderBottomColor: ((_props$tooltipStyle = props.tooltipStyle) === null || _props$tooltipStyle === void 0 ? void 0 : _props$tooltipStyle.backgroundColor) || this.styles.tooltip.backgroundColor
+      }]
+    })) : null, props.children);
+  }
+}
+;
+//# sourceMappingURL=tooltip.component.js.map

app-rn-runtime/components/basic/tooltip/tooltip.component.js.map

@@ -0,0 +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":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACnD,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AACjG,OAAOC,cAAc,MAAM,iBAAiB;AAC5C,SAASC,aAAa,QAAyB,kBAAkB;;AAEjE;AACA,MAAMC,eAAe,GAAG;EACtBC,EAAE,EAAE;IAAEC,MAAM,EAAE,QAAQ;IAAEC,MAAM,EAAE;MAACC,GAAG,EAAE,CAAC;IAAE,CAAC;IAAEC,cAAc,EAAE;MAACC,MAAM,EAAE,CAAC;IAAE;EAAE,CAAC;EAC3EC,IAAI,EAAE;IAAEL,MAAM,EAAE,MAAM;IAAEC,MAAM,EAAE;MAACG,MAAM,EAAE,CAAC;IAAE,CAAC;IAAED,cAAc,EAAE;MAACD,GAAG,EAAE,CAAC;IAAE;EAAE,CAAC;EAC3EI,IAAI,EAAE;IAAEN,MAAM,EAAE,OAAO;IAAEC,MAAM,EAAE;MAACK,IAAI,EAAE,CAAC;IAAE,CAAC;IAAEH,cAAc,EAAE;MAACI,KAAK,EAAE,CAAC;IAAE;EAAE,CAAC;EAC5EA,KAAK,EAAE;IAAEP,MAAM,EAAE,QAAQ;IAAEC,MAAM,EAAE;MAACM,KAAK,EAAE,CAAC;IAAE,CAAC;IAAEJ,cAAc,EAAE;MAACG,IAAI,EAAE,CAAC;IAAE;EAAE;AAC/E,CAAC;AAED,OAAO,MAAME,cAAc,SAASb,kBAAkB,CAAiB;AAEvE,eAAe,MAAMc,SAAS,SAASf,aAAa,CAAkD;EACpGgB,WAAWA,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEd,aAAa,EAAE,IAAID,cAAc,CAAC,CAAC,CAAC;EACnD;EAEAgB,YAAYA,CAACD,KAAqB,EAAE;IAAA,IAAAE,mBAAA;IAClC,oBACEvB,KAAA,CAAAwB,aAAA,CAACrB,IAAI;MAACsB,KAAK,EAAE,IAAI,CAACd,MAAM,CAACe;IAAK,GAC7BL,KAAK,CAACM,WAAW,gBAChB3B,KAAA,CAAAwB,aAAA,CAACvB,QAAQ,CAACE,IAAI;MACZsB,KAAK,EAAE,CACL,IAAI,CAACd,MAAM,CAACiB,OAAO,EACnBP,KAAK,CAACQ,SAAS,GACX;QAAE,GAAGrB,eAAe,CAACa,KAAK,CAACQ,SAAS,CAAC,CAAClB;MAAO,CAAC,GAC9C;QAAEC,GAAG,EAAE,CAAC;MAAG,CAAC,EAChBS,KAAK,CAACS,YAAY;IAClB,gBAEF9B,KAAA,CAAAwB,aAAA,CAACtB,IAAI;MAACuB,KAAK,EAAE,CAACJ,KAAK,CAACU,iBAAiB;IAAE,GAAEV,KAAK,CAACW,IAAW,CAAC,eAC3DhC,KAAA,CAAAwB,aAAA,CAACrB,IAAI;MACHsB,KAAK,EAAE,CACL,IAAI,CAACd,MAAM,CAACsB,QAAQ,EACpB;QACEC,SAAS,EAAE,CACT;UACExB,MAAM,EAAEW,KAAK,CAACQ,SAAS,GACnBrB,eAAe,CAACa,KAAK,CAACQ,SAAS,CAAC,CAACnB,MAAM,GACvC;QACN,CAAC;MAEL,CAAC,EACDW,KAAK,CAACQ,SAAS,GACX;QAAE,GAAGrB,eAAe,CAACa,KAAK,CAACQ,SAAS,CAAC,CAAChB;MAAe,CAAC,GACtD;QAAEC,MAAM,EAAE,CAAC;MAAG,CAAC,EACnBO,KAAK,CAACc,oBAAoB,EAC1B;QAAEC,iBAAiB,EAAE,EAAAb,mBAAA,GAAAF,KAAK,CAACS,YAAY,cAAAP,mBAAA,uBAAlBA,mBAAA,CAAoBc,eAAe,KAAI,IAAI,CAAC1B,MAAM,CAACiB,OAAO,CAACS;MAAgB,CAAC;IACjG,CACH,CACY,CAAC,GACd,IAAI,EACPhB,KAAK,CAACiB,QACH,CAAC;EAET;AACF;AAAC","ignoreList":[]}

app-rn-runtime/components/basic/tooltip/tooltip.props.js

@@ -0,0 +1,18 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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 { BaseProps } from "@wavemaker/app-rn-runtime/core/base.component";
+export default class WmTooltipProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "showTooltip", false);
+    _defineProperty(this, "text", "");
+    _defineProperty(this, "tooltipStyle", void 0);
+    _defineProperty(this, "tooltipLabelStyle", void 0);
+    _defineProperty(this, "tooltipTriangleStyle", void 0);
+    _defineProperty(this, "direction", "up");
+    _defineProperty(this, "children", void 0);
+  }
+}
+;
+//# sourceMappingURL=tooltip.props.js.map

app-rn-runtime/components/basic/tooltip/tooltip.props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseProps","WmTooltipProps","constructor","args","_defineProperty"],"sources":["tooltip.props.ts"],"sourcesContent":["import { BaseProps } from \"@wavemaker/app-rn-runtime/core/base.component\";\nimport { ReactElement } from \"react\";\nimport { TextStyle, ViewStyle } from \"react-native\";\n\nexport type TooltipDirection = 'up' | 'down' | 'left' | 'right';\n\nexport default class WmTooltipProps extends BaseProps {\n  showTooltip?: boolean = false;\n  text: string | number = \"\";\n  tooltipStyle?: any;\n  tooltipLabelStyle?: TextStyle | TextStyle[];\n  tooltipTriangleStyle?: ViewStyle | ViewStyle[];\n  direction?: TooltipDirection = \"up\";\n  children?: ReactElement;\n};\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAMzE,eAAe,MAAMC,cAAc,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,sBAC5B,KAAK;IAAAA,eAAA,eACL,EAAE;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA,oBAIK,IAAI;IAAAA,eAAA;EAAA;AAErC;AAAC","ignoreList":[]}

app-rn-runtime/components/basic/tooltip/tooltip.styles.js

@@ -0,0 +1,49 @@
+import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+import { defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';
+export const DEFAULT_CLASS = 'app-tooltip';
+BASE_THEME.registerStyle((themeVariables, addStyle) => {
+  const defaultStyles = defineStyles({
+    root: {
+      position: 'relative'
+    },
+    text: {
+      fontSize: 16
+    },
+    tooltip: {
+      position: 'absolute',
+      left: -30,
+      minWidth: 60,
+      minHeight: 25,
+      paddingHorizontal: 10,
+      borderRadius: 20,
+      backgroundColor: 'lightblue',
+      justifyContent: 'center',
+      alignItems: 'center',
+      // * shadow
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 1
+      },
+      shadowOpacity: 0.22,
+      shadowRadius: 2.22,
+      elevation: 3
+    },
+    triangle: {
+      position: 'absolute',
+      width: 0,
+      height: 0,
+      backgroundColor: 'transparent',
+      borderStyle: 'solid',
+      borderLeftWidth: 8,
+      borderRightWidth: 8,
+      borderBottomWidth: 12,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+      borderBottomColor: 'lightblue',
+      overflow: 'hidden'
+    }
+  });
+  addStyle(DEFAULT_CLASS, '', defaultStyles);
+});
+//# sourceMappingURL=tooltip.styles.js.map

app-rn-runtime/components/basic/tooltip/tooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","position","text","fontSize","tooltip","left","minWidth","minHeight","paddingHorizontal","borderRadius","backgroundColor","justifyContent","alignItems","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","triangle","borderStyle","borderLeftWidth","borderRightWidth","borderBottomWidth","borderLeftColor","borderRightColor","borderBottomColor","overflow"],"sources":["tooltip.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 { ViewStyle } from 'react-native';\n\nexport type WmTooltipStyles = BaseStyles & {\n  tooltip: ViewStyle;\n  triangle: ViewStyle;\n};\n\nexport const DEFAULT_CLASS = 'app-tooltip';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmTooltipStyles = defineStyles({\n    root: {\n      position: 'relative',\n    },\n    text: {\n      fontSize: 16\n    },\n    tooltip: {\n      position: 'absolute',\n      left: -30,\n      minWidth: 60,\n      minHeight: 25,\n      paddingHorizontal: 10,\n      borderRadius: 20,\n      backgroundColor: 'lightblue',\n      justifyContent: 'center',\n      alignItems: 'center',\n  \n      // * shadow\n      shadowColor: '#000',\n      shadowOffset: {\n        width: 0,\n        height: 1,\n      },\n      shadowOpacity: 0.22,\n      shadowRadius: 2.22,\n  \n      elevation: 3,\n    },\n    triangle: {\n      position: 'absolute',\n      width: 0,\n      height: 0,\n      backgroundColor: 'transparent',\n      borderStyle: 'solid',\n      borderLeftWidth: 8,\n      borderRightWidth: 8,\n      borderBottomWidth: 12,\n      borderLeftColor: 'transparent',\n      borderRightColor: 'transparent',\n      borderBottomColor: 'lightblue',\n      overflow: 'hidden',\n    },\n  })\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAQxF,OAAO,MAAMC,aAAa,GAAG,aAAa;AAC1CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACrD,MAAMC,aAA8B,GAAGL,YAAY,CAAC;IAClDM,IAAI,EAAE;MACJC,QAAQ,EAAE;IACZ,CAAC;IACDC,IAAI,EAAE;MACJC,QAAQ,EAAE;IACZ,CAAC;IACDC,OAAO,EAAE;MACPH,QAAQ,EAAE,UAAU;MACpBI,IAAI,EAAE,CAAC,EAAE;MACTC,QAAQ,EAAE,EAAE;MACZC,SAAS,EAAE,EAAE;MACbC,iBAAiB,EAAE,EAAE;MACrBC,YAAY,EAAE,EAAE;MAChBC,eAAe,EAAE,WAAW;MAC5BC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE,QAAQ;MAEpB;MACAC,WAAW,EAAE,MAAM;MACnBC,YAAY,EAAE;QACZC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACV,CAAC;MACDC,aAAa,EAAE,IAAI;MACnBC,YAAY,EAAE,IAAI;MAElBC,SAAS,EAAE;IACb,CAAC;IACDC,QAAQ,EAAE;MACRnB,QAAQ,EAAE,UAAU;MACpBc,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE,CAAC;MACTN,eAAe,EAAE,aAAa;MAC9BW,WAAW,EAAE,OAAO;MACpBC,eAAe,EAAE,CAAC;MAClBC,gBAAgB,EAAE,CAAC;MACnBC,iBAAiB,EAAE,EAAE;MACrBC,eAAe,EAAE,aAAa;MAC9BC,gBAAgB,EAAE,aAAa;MAC/BC,iBAAiB,EAAE,WAAW;MAC9BC,QAAQ,EAAE;IACZ;EACF,CAAC,CAAC;EAEF9B,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC5C,CAAC,CAAC","ignoreList":[]}

app-rn-runtime/components/basic/video/video.component.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
 import { View } from 'react-native';
 import { ResizeMode, Video } from 'expo-av';
@@ -15,6 +15,13 @@ export default class WmVideo extends BaseComponent {
   constructor(props) {
     super(props, DEFAULT_CLASS, new WmVideoProps(), new WmVideoState());
     _defineProperty(this, "video", null);
+    _defineProperty(this, "handlePlaybackStatus", status => {
+      if ('isPlaying' in status && typeof status === 'object') {
+        console.log(status.isPlaying ? 'Playing' : 'Paused');
+      } else if ('error' in status) {
+        console.error(`Encountered a fatal error during playback: ${status.error}`);
+      }
+    });
   }
   getSource(path) {
     if (!path) {
@@ -28,12 +35,6 @@ export default class WmVideo extends BaseComponent {
     }
     return resource;
   }
-  componentDidMount() {
-    if (this.state.props.autoplay) {
-      var _this$video;
-      (_this$video = this.video) === null || _this$video === void 0 ? void 0 : _this$video.playAsync();
-    }
-  }
   renderWidget(props) {
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
@@ -46,6 +47,8 @@ export default class WmVideo extends BaseComponent {
         height: '100%',
         flex: 1
       },
+      shouldPlay: props.autoplay,
+      onPlaybackStatusUpdate: this.handlePlaybackStatus,
       source: this.getSource(props.mp4format || props.webmformat),
       posterSource: this.getSource(props.videoposter),
       useNativeControls: props.controls,

app-rn-runtime/components/basic/video/video.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","ResizeMode","Video","BaseComponent","BaseComponentState","WmVideoProps","DEFAULT_CLASS","AccessibilityWidgetType","getAccessibilityProps","isFullPathUrl","WmVideoState","WmVideo","constructor","props","_defineProperty","getSource","path","resource","loadAsset","uri","componentDidMount","state","autoplay","_this$video","video","playAsync","renderWidget","createElement","style","styles","root","_background","_extends","VIDEO","ref","width","height","flex","source","mp4format","webmformat","posterSource","videoposter","useNativeControls","controls","resizeMode","CONTAIN","isLooping","loop","isMuted","muted","testID","getTestId"],"sources":["video.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { ResizeMode, Video } from 'expo-av';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmVideoProps from './video.props';\nimport { DEFAULT_CLASS, WmVideoStyles } from './video.styles';\nimport { isString } from 'lodash-es';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \nimport { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';\n\nexport class WmVideoState extends BaseComponentState<WmVideoProps> {}\n\nexport default class WmVideo extends BaseComponent<WmVideoProps, WmVideoState, WmVideoStyles> {\n\n  private video: Video | null = null as 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(path);\n    if (isFullPathUrl(resource as string)) {\n      return {\n        uri: resource\n      };\n    }\n    return resource;\n  }\n\n  componentDidMount(): void {\n    if (this.state.props.autoplay) {\n      this.video?.playAsync();\n    }\n  }\n\n  renderWidget(props: WmVideoProps) {\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        <Video\n          {...getAccessibilityProps(AccessibilityWidgetType.VIDEO, props)}\n          ref={(video) => { this.video = video; }}\n          style={{ width: '100%', height: '100%', flex: 1 }}\n          source={this.getSource(\n            props.mp4format\n            || props.webmformat) as any}\n          posterSource={ this.getSource(props.videoposter) as any }\n          useNativeControls={props.controls}\n          resizeMode={ResizeMode.CONTAIN}\n          isLooping={props.loop}\n          isMuted={props.muted}\n          testID={this.getTestId('video')}\n        />\n      </View>); \n  }\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAeC,IAAI,QAAQ,cAAc;AACzC,SAASC,UAAU,EAAEC,KAAK,QAAQ,SAAS;AAC3C,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,YAAY,MAAM,eAAe;AACxC,SAASC,aAAa,QAAuB,gBAAgB;AAE7D,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,8CAA8C;AAC7G,SAASC,aAAa,QAAQ,sCAAsC;AAEpE,OAAO,MAAMC,YAAY,SAASN,kBAAkB,CAAe;AAEnE,eAAe,MAAMO,OAAO,SAASR,aAAa,CAA4C;EAI5FS,WAAWA,CAACC,KAAmB,EAAE;IAC/B,KAAK,CAACA,KAAK,EAAEP,aAAa,EAAE,IAAID,YAAY,CAAC,CAAC,EAAE,IAAIK,YAAY,CAAC,CAAC,CAAC;IAACI,eAAA,gBAHxC,IAAI;EAIlC;EAEAC,SAASA,CAACC,IAAY,EAAE;IACtB,IAAI,CAACA,IAAI,EAAE;MACT,OAAO,IAAI;IACb;IACA,MAAMC,QAAQ,GAAG,IAAI,CAACC,SAAS,CAACF,IAAI,CAAC;IACrC,IAAIP,aAAa,CAACQ,QAAkB,CAAC,EAAE;MACrC,OAAO;QACLE,GAAG,EAAEF;MACP,CAAC;IACH;IACA,OAAOA,QAAQ;EACjB;EAEAG,iBAAiBA,CAAA,EAAS;IACxB,IAAI,IAAI,CAACC,KAAK,CAACR,KAAK,CAACS,QAAQ,EAAE;MAAA,IAAAC,WAAA;MAC7B,CAAAA,WAAA,OAAI,CAACC,KAAK,cAAAD,WAAA,uBAAVA,WAAA,CAAYE,SAAS,CAAC,CAAC;IACzB;EACF;EAEAC,YAAYA,CAACb,KAAmB,EAAE;IAChC,oBACEd,KAAA,CAAA4B,aAAA,CAAC3B,IAAI;MAAC4B,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAC3B,IAAI,CAACC,WAAW,eACjBhC,KAAA,CAAA4B,aAAA,CAACzB,KAAK,EAAA8B,QAAA,KACAxB,qBAAqB,CAACD,uBAAuB,CAAC0B,KAAK,EAAEpB,KAAK,CAAC;MAC/DqB,GAAG,EAAGV,KAAK,IAAK;QAAE,IAAI,CAACA,KAAK,GAAGA,KAAK;MAAE,CAAE;MACxCI,KAAK,EAAE;QAAEO,KAAK,EAAE,MAAM;QAAEC,MAAM,EAAE,MAAM;QAAEC,IAAI,EAAE;MAAE,CAAE;MAClDC,MAAM,EAAE,IAAI,CAACvB,SAAS,CACpBF,KAAK,CAAC0B,SAAS,IACZ1B,KAAK,CAAC2B,UAAU,CAAS;MAC9BC,YAAY,EAAG,IAAI,CAAC1B,SAAS,CAACF,KAAK,CAAC6B,WAAW,CAAU;MACzDC,iBAAiB,EAAE9B,KAAK,CAAC+B,QAAS;MAClCC,UAAU,EAAE5C,UAAU,CAAC6C,OAAQ;MAC/BC,SAAS,EAAElC,KAAK,CAACmC,IAAK;MACtBC,OAAO,EAAEpC,KAAK,CAACqC,KAAM;MACrBC,MAAM,EAAE,IAAI,CAACC,SAAS,CAAC,OAAO;IAAE,EACjC,CACG,CAAC;EACX;AACF"}
+{"version":3,"names":["React","View","ResizeMode","Video","BaseComponent","BaseComponentState","WmVideoProps","DEFAULT_CLASS","AccessibilityWidgetType","getAccessibilityProps","isFullPathUrl","WmVideoState","WmVideo","constructor","props","_defineProperty","status","console","log","isPlaying","error","getSource","path","resource","loadAsset","uri","renderWidget","createElement","style","styles","root","_background","_extends","VIDEO","ref","video","width","height","flex","shouldPlay","autoplay","onPlaybackStatusUpdate","handlePlaybackStatus","source","mp4format","webmformat","posterSource","videoposter","useNativeControls","controls","resizeMode","CONTAIN","isLooping","loop","isMuted","muted","testID","getTestId"],"sources":["video.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { ResizeMode, Video, AVPlaybackStatus } from 'expo-av';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmVideoProps from './video.props';\nimport { DEFAULT_CLASS, WmVideoStyles } from './video.styles';\nimport { isString } from 'lodash-es';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \nimport { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';\n\nexport class WmVideoState extends BaseComponentState<WmVideoProps> {}\n\nexport default class WmVideo extends BaseComponent<WmVideoProps, WmVideoState, WmVideoStyles> {\n\n  private video: Video | null = null as 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(path);\n    if (isFullPathUrl(resource as string)) {\n      return {\n        uri: resource\n      };\n    }\n    return resource;\n  }\n\n   handlePlaybackStatus = (status: AVPlaybackStatus) => {\n    if ('isPlaying' in status && typeof status === 'object') {\n      console.log(status.isPlaying? 'Playing' : 'Paused');\n    } else if ('error' in status) {\n      console.error(`Encountered a fatal error during playback: ${status.error}`);\n    }\n  };\n\n  renderWidget(props: WmVideoProps) {\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        <Video\n          {...getAccessibilityProps(AccessibilityWidgetType.VIDEO, props)}\n          ref={(video) => { this.video = video; }}\n          style={{ width: '100%', height: '100%', flex: 1 }}\n          shouldPlay={props.autoplay}\n          onPlaybackStatusUpdate={this.handlePlaybackStatus}\n          source={this.getSource(\n            props.mp4format\n            || props.webmformat) as any}\n          posterSource={ this.getSource(props.videoposter) as any }\n          useNativeControls={props.controls}\n          resizeMode={ResizeMode.CONTAIN}\n          isLooping={props.loop}\n          isMuted={props.muted}\n          testID={this.getTestId('video')}\n        />\n      </View>); \n  }\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAeC,IAAI,QAAQ,cAAc;AACzC,SAASC,UAAU,EAAEC,KAAK,QAA0B,SAAS;AAC7D,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,YAAY,MAAM,eAAe;AACxC,SAASC,aAAa,QAAuB,gBAAgB;AAE7D,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,8CAA8C;AAC7G,SAASC,aAAa,QAAQ,sCAAsC;AAEpE,OAAO,MAAMC,YAAY,SAASN,kBAAkB,CAAe;AAEnE,eAAe,MAAMO,OAAO,SAASR,aAAa,CAA4C;EAI5FS,WAAWA,CAACC,KAAmB,EAAE;IAC/B,KAAK,CAACA,KAAK,EAAEP,aAAa,EAAE,IAAID,YAAY,CAAC,CAAC,EAAE,IAAIK,YAAY,CAAC,CAAC,CAAC;IAACI,eAAA,gBAHxC,IAAI;IAAAA,eAAA,+BAmBTC,MAAwB,IAAK;MACpD,IAAI,WAAW,IAAIA,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;QACvDC,OAAO,CAACC,GAAG,CAACF,MAAM,CAACG,SAAS,GAAE,SAAS,GAAG,QAAQ,CAAC;MACrD,CAAC,MAAM,IAAI,OAAO,IAAIH,MAAM,EAAE;QAC5BC,OAAO,CAACG,KAAK,CAAC,8CAA8CJ,MAAM,CAACI,KAAK,EAAE,CAAC;MAC7E;IACF,CAAC;EArBD;EAEAC,SAASA,CAACC,IAAY,EAAE;IACtB,IAAI,CAACA,IAAI,EAAE;MACT,OAAO,IAAI;IACb;IACA,MAAMC,QAAQ,GAAG,IAAI,CAACC,SAAS,CAACF,IAAI,CAAC;IACrC,IAAIZ,aAAa,CAACa,QAAkB,CAAC,EAAE;MACrC,OAAO;QACLE,GAAG,EAAEF;MACP,CAAC;IACH;IACA,OAAOA,QAAQ;EACjB;EAUAG,YAAYA,CAACZ,KAAmB,EAAE;IAChC,oBACEd,KAAA,CAAA2B,aAAA,CAAC1B,IAAI;MAAC2B,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAC3B,IAAI,CAACC,WAAW,eACjB/B,KAAA,CAAA2B,aAAA,CAACxB,KAAK,EAAA6B,QAAA,KACAvB,qBAAqB,CAACD,uBAAuB,CAACyB,KAAK,EAAEnB,KAAK,CAAC;MAC/DoB,GAAG,EAAGC,KAAK,IAAK;QAAE,IAAI,CAACA,KAAK,GAAGA,KAAK;MAAE,CAAE;MACxCP,KAAK,EAAE;QAAEQ,KAAK,EAAE,MAAM;QAAEC,MAAM,EAAE,MAAM;QAAEC,IAAI,EAAE;MAAE,CAAE;MAClDC,UAAU,EAAEzB,KAAK,CAAC0B,QAAS;MAC3BC,sBAAsB,EAAE,IAAI,CAACC,oBAAqB;MAClDC,MAAM,EAAE,IAAI,CAACtB,SAAS,CACpBP,KAAK,CAAC8B,SAAS,IACZ9B,KAAK,CAAC+B,UAAU,CAAS;MAC9BC,YAAY,EAAG,IAAI,CAACzB,SAAS,CAACP,KAAK,CAACiC,WAAW,CAAU;MACzDC,iBAAiB,EAAElC,KAAK,CAACmC,QAAS;MAClCC,UAAU,EAAEhD,UAAU,CAACiD,OAAQ;MAC/BC,SAAS,EAAEtC,KAAK,CAACuC,IAAK;MACtBC,OAAO,EAAExC,KAAK,CAACyC,KAAM;MACrBC,MAAM,EAAE,IAAI,CAACC,SAAS,CAAC,OAAO;IAAE,EACjC,CACG,CAAC;EACX;AACF","ignoreList":[]}

app-rn-runtime/components/basic/video/video.props.js

@@ -1,10 +1,10 @@
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
 export default class WmVideoProps extends BaseProps {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "autoplay", false);
     _defineProperty(this, "controls", false);
     _defineProperty(this, "loop", false);
@@ -19,7 +19,7 @@ export default class WmVideoProps extends BaseProps {
     _defineProperty(this, "webmformat", null);
     _defineProperty(this, "accessibilitylabel", undefined);
     _defineProperty(this, "hint", undefined);
-    _defineProperty(this, "accessibilityrole", 'none');
+    _defineProperty(this, "accessibilityrole", void 0);
   }
 }
 //# sourceMappingURL=video.props.js.map

app-rn-runtime/components/basic/video/video.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmVideoProps","constructor","arguments","_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 = 'none';\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,YAAY,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;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,4BACe,MAAM;EAAA;AAClD"}
+{"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}"],"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;EAAA;AAE7B","ignoreList":[]}

app-rn-runtime/components/basic/video/video.styles.js

@@ -3,7 +3,10 @@ import { defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';
 export const DEFAULT_CLASS = 'app-video';
 BASE_THEME.registerStyle((themeVariables, addStyle) => {
   const defaultStyles = defineStyles({
-    root: {},
+    root: {
+      height: 300,
+      width: "100%"
+    },
     text: {}
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);

app-rn-runtime/components/basic/video/video.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","text"],"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';\n\nexport type WmVideoStyles = BaseStyles & {};\n\nexport const DEFAULT_CLASS = 'app-video';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles = defineStyles<WmVideoStyles>({\n        root: {},\n        text: {}\n    });\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAIxF,OAAO,MAAMC,aAAa,GAAG,WAAW;AACxCF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAa,GAAGL,YAAY,CAAgB;IAC9CM,IAAI,EAAE,CAAC,CAAC;IACRC,IAAI,EAAE,CAAC;EACX,CAAC,CAAC;EACFH,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC"}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","height","width","text"],"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';\n\nexport type WmVideoStyles = BaseStyles & {};\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    });\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAIxF,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;EACX,CAAC,CAAC;EACFL,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 Color from "color";
 import { View, Text, Platform } from 'react-native';
@@ -14,8 +14,8 @@ import WmIcon from "@wavemaker/app-rn-runtime/components/basic/icon/icon.compone
 import { isNumber } from 'lodash-es';
 import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
 export class WmAreaChartState extends BaseChartComponentState {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "chartWidth", 0);
   }
 }
@@ -33,16 +33,27 @@ export default class WmAreaChart extends BaseChartComponent {
     let value = data.data[data.index].y;
     let label = this.state.xaxisDatakeyArr[data.datum.x];
     let selectedItem = this.props.dataset[data.index];
+    const nativeEvent = event.nativeEvent;
+    this.setTooltipPosition(nativeEvent);
     let selectedChartItem = [{
       series: 0,
       x: data.index,
       y: value,
       _dataObj: selectedItem
     }, data.index];
+    this.updateState({
+      tooltipXaxis: label,
+      tooltipYaxis: value,
+      isTooltipOpen: true,
+      selectedItem: {
+        ...selectedItem,
+        index: data.index
+      }
+    });
     this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
   }
   renderWidget(props) {
-    var _this$state$data;
+    var _this$state$data, _this$props$name;
     this.invokeEventCallback('onBeforerender', [this.proxy, null]);
     if (!((_this$state$data = this.state.data) !== null && _this$state$data !== void 0 && _this$state$data.length)) {
       return null;
@@ -51,15 +62,16 @@ export default class WmAreaChart extends BaseChartComponent {
       x: props.xdomain === 'Min' ? this.state.chartMinX : undefined,
       y: props.ydomain === 'Min' ? this.state.chartMinY : undefined
     };
-    const chartName = this.props.name ?? 'nonameAreachart';
+    const chartName = (_this$props$name = this.props.name) !== null && _this$props$name !== void 0 ? _this$props$name : 'nonameAreachart';
     let gradientStop = '100%';
     if (isNumber(this.state.chartMaxY) && isNumber(this.state.chartMinY) && this.state.chartMaxY > 0) {
       gradientStop = (this.state.chartMaxY - this.state.chartMinY) * 100 / this.state.chartMaxY + '%';
     }
     return /*#__PURE__*/React.createElement(View, _extends({}, getAccessibilityProps(AccessibilityWidgetType.LINECHART, props), {
       style: this.styles.root,
-      onLayout: this.onViewLayoutChange.bind(this)
-    }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+      onLayout: this.onViewLayoutChange.bind(this),
+      key: `${props.title}_area_chart`
+    }), this.getTooltip(), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center'
@@ -81,8 +93,7 @@ export default class WmAreaChart extends BaseChartComponent {
         left: props.offsetleft,
         right: props.offsetright
       },
-      minDomain: mindomain,
-      containerComponent: this.getTooltip(props)
+      minDomain: mindomain
     }, this.getLegendView(), this.getXaxis(), this.getYAxis(), /*#__PURE__*/React.createElement(VictoryStack, null, this.state.data.map((d, i) => {
       return /*#__PURE__*/React.createElement(VictoryGroup, {
         key: props.name + '_area_group_' + i

app-rn-runtime/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","arguments","_defineProperty","WmAreaChart","props","e","viewWidth","nativeEvent","layout","width","updateState","chartWidth","onSelect","event","data","value","index","y","label","state","xaxisDatakeyArr","datum","x","selectedItem","dataset","selectedChartItem","series","_dataObj","invokeEventCallback","proxy","renderWidget","_this$state$data","length","mindomain","xdomain","chartMinX","undefined","ydomain","chartMinY","chartName","name","gradientStop","chartMaxY","createElement","_extends","LINECHART","style","styles","root","onLayout","onViewLayoutChange","bind","flexDirection","alignItems","iconclass","icon","title","subHeading","subheading","theme","height","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","minDomain","containerComponent","getTooltip","getLegendView","getXaxis","getYAxis","map","d","i","key","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'; \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    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    let selectedChartItem = [{series: 0, x: data.index, y: value,_dataObj: selectedItem},data.index];\n    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem ]);\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      >\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          <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            containerComponent={\n              this.getTooltip(props)\n            }\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        )\n      : null}\n    </View>);\n  }\n}\n"],"mappings":"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"}
+{"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","value","index","y","label","state","xaxisDatakeyArr","datum","x","selectedItem","dataset","setTooltipPosition","selectedChartItem","series","_dataObj","tooltipXaxis","tooltipYaxis","isTooltipOpen","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","getTooltip","flexDirection","alignItems","iconclass","icon","subHeading","subheading","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'; \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    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    this.setTooltipPosition(nativeEvent);\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    } as WmAreaChartState)\n    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem ]);\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        {this.getTooltip()}\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          <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        )\n      : null}\n    </View>);\n  }\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,KAAK,MAAM,OAAO;AACzB,SAA4BC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AACtE,SAASC,IAAI,EAAEC,cAAc,EAAEC,IAAI,QAAa,kBAAkB;AAClE,SAASC,WAAW,EAAeC,YAAY,EAAiBC,YAAY,EAAEC,cAAc,EAAEC,YAAY,QAAQ,gBAAgB;AAElI,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,SAASC,aAAa,QAA2B,qBAAqB;AACtE,SACEC,kBAAkB,EAClBC,uBAAuB,QAClB,gEAAgE;AACvE,OAAOC,MAAM,MAAM,gEAAgE;AAGnF,SAAgBC,QAAQ,QAAQ,WAAW;AAC3C,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,8CAA8C;AAE7G,OAAO,MAAMC,gBAAgB,SAASL,uBAAuB,CAAmB;EAAAM,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,qBACjE,CAAC;EAAA;AAChB;AAEA,eAAe,MAAMC,WAAW,SAASV,kBAAkB,CAAwD;EAEjHO,WAAWA,CAACI,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,EAAEZ,aAAa,EAAE,IAAID,gBAAgB,CAAC,CAAC,EAAE,IAAIQ,gBAAgB,CAAC,CAAC,CAAC;IAACG,eAAA,6BAGxDG,CAAoB,IAAK;MAC7C,IAAIC,SAAS,GAAGD,CAAC,CAACE,WAAW,CAACC,MAAM,CAACC,KAAK;MAC1C,IAAI,CAACC,WAAW,CAAC;QACfC,UAAU,EAAEL;MACd,CAAqB,CAAC;IACxB,CAAC;EAPD;EASAM,QAAQA,CAACC,KAAU,EAAEC,IAAS,EAAC;IAC7B,IAAIC,KAAK,GAAGD,IAAI,CAACA,IAAI,CAACA,IAAI,CAACE,KAAK,CAAC,CAACC,CAAC;IACnC,IAAIC,KAAK,GAAG,IAAI,CAACC,KAAK,CAACC,eAAe,CAACN,IAAI,CAACO,KAAK,CAACC,CAAC,CAAC;IACpD,IAAIC,YAAY,GAAG,IAAI,CAACnB,KAAK,CAACoB,OAAO,CAACV,IAAI,CAACE,KAAK,CAAC;IACjD,MAAMT,WAAW,GAAGM,KAAK,CAACN,WAAW;IACrC,IAAI,CAACkB,kBAAkB,CAAClB,WAAW,CAAC;IACpC,IAAImB,iBAAiB,GAAG,CAAC;MAACC,MAAM,EAAE,CAAC;MAAEL,CAAC,EAAER,IAAI,CAACE,KAAK;MAAEC,CAAC,EAAEF,KAAK;MAACa,QAAQ,EAAEL;IAAY,CAAC,EAACT,IAAI,CAACE,KAAK,CAAC;IAChG,IAAI,CAACN,WAAW,CAAC;MACfmB,YAAY,EAAEX,KAAK;MACnBY,YAAY,EAAEf,KAAK;MACnBgB,aAAa,EAAE,IAAI;MACnBR,YAAY,EAAE;QAAC,GAAGA,YAAY;QAAEP,KAAK,EAAEF,IAAI,CAACE;MAAK;IACnD,CAAqB,CAAC;IACtB,IAAI,CAACgB,mBAAmB,CAAC,UAAU,EAAE,CAACnB,KAAK,CAACN,WAAW,EAAE,IAAI,CAAC0B,KAAK,EAAEV,YAAY,EAAEG,iBAAiB,CAAE,CAAC;EACzG;EAEAQ,YAAYA,CAAC9B,KAAuB,EAAE;IAAA,IAAA+B,gBAAA,EAAAC,gBAAA;IACpC,IAAI,CAACJ,mBAAmB,CAAC,gBAAgB,EAAE,CAAC,IAAI,CAACC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC9D,IAAI,GAAAE,gBAAA,GAAC,IAAI,CAAChB,KAAK,CAACL,IAAI,cAAAqB,gBAAA,eAAfA,gBAAA,CAAiBE,MAAM,GAAE;MAC5B,OAAO,IAAI;IACb;IACA,IAAIC,SAAS,GAAC;MACZhB,CAAC,EAAElB,KAAK,CAACmC,OAAO,KAAK,KAAK,GAAG,IAAI,CAACpB,KAAK,CAACqB,SAAS,GAAEC,SAAS;MAC5DxB,CAAC,EAAEb,KAAK,CAACsC,OAAO,KAAK,KAAK,GAAG,IAAI,CAACvB,KAAK,CAACwB,SAAS,GAAEF;IACrD,CAAC;IACD,MAAMG,SAAS,IAAAR,gBAAA,GAAG,IAAI,CAAChC,KAAK,CAACyC,IAAI,cAAAT,gBAAA,cAAAA,gBAAA,GAAI,iBAAiB;IACtD,IAAIU,YAAY,GAAG,MAAM;IACzB,IAAIlD,QAAQ,CAAC,IAAI,CAACuB,KAAK,CAAC4B,SAAS,CAAC,IAAInD,QAAQ,CAAC,IAAI,CAACuB,KAAK,CAACwB,SAAS,CAAC,IAAI,IAAI,CAACxB,KAAK,CAAC4B,SAAS,GAAG,CAAC,EAAE;MAChGD,YAAY,GAAG,CAAC,IAAI,CAAC3B,KAAK,CAAC4B,SAAS,GAAG,IAAI,CAAC5B,KAAK,CAACwB,SAAS,IAAI,GAAG,GAAG,IAAI,CAACxB,KAAK,CAAC4B,SAAS,GAAG,GAAG;IACjG;IACA,oBACErE,KAAA,CAAAsE,aAAA,CAACpE,IAAI,EAAAqE,QAAA,KACCnD,qBAAqB,CAACD,uBAAuB,CAACqD,SAAS,EAAE9C,KAAK,CAAC;MACnE+C,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC,IAAK;MACxBC,QAAQ,EAAE,IAAI,CAACC,kBAAkB,CAACC,IAAI,CAAC,IAAI,CAAE;MAC7CC,GAAG,EAAE,GAAGrD,KAAK,CAACsD,KAAK;IAAc,IAEhC,IAAI,CAACC,UAAU,CAAC,CAAC,eAClBjF,KAAA,CAAAsE,aAAA,CAACpE,IAAI,qBACHF,KAAA,CAAAsE,aAAA,CAACpE,IAAI;MAACuE,KAAK,EAAE;QAACS,aAAa,EAAE,KAAK;QAAEC,UAAU,EAAE;MAAQ;IAAE,GACvDzD,KAAK,CAAC0D,SAAS,gBAAIpF,KAAA,CAAAsE,aAAA,CAACrD,MAAM;MAACmE,SAAS,EAAE1D,KAAK,CAAC0D,SAAU;MAACV,MAAM,EAAE,IAAI,CAACA,MAAM,CAACW;IAAK,CAAS,CAAC,GAAI,IAAI,eACnGrF,KAAA,CAAAsE,aAAA,CAACnE,IAAI;MAACsE,KAAK,EAAE,IAAI,CAACC,MAAM,CAACM;IAAM,GAAEtD,KAAK,CAACsD,KAAY,CAC/C,CAAC,eACPhF,KAAA,CAAAsE,aAAA,CAACnE,IAAI;MAACsE,KAAK,EAAE,IAAI,CAACC,MAAM,CAACY;IAAW,GAAE5D,KAAK,CAAC6D,UAAiB,CACzD,CAAC,EACN,IAAI,CAAC9C,KAAK,CAACR,UAAU,gBAEpBjC,KAAA,CAAAsE,aAAA,CAAC7D,YAAY;MACX+E,KAAK,EAAE,IAAI,CAAC/C,KAAK,CAAC+C,KAAM;MACxBC,MAAM,EAAE,IAAI,CAACf,MAAM,CAACC,IAAI,CAACc,MAAiB;MAC1C1D,KAAK,EAAE,IAAI,CAACU,KAAK,CAACR,UAAU,IAAI,GAAI;MACpCyD,OAAO,EAAE;QAAEC,GAAG,EAAEjE,KAAK,CAACkE,SAAS;QAAEC,MAAM,EAAEnE,KAAK,CAACoE,YAAY;QAAEC,IAAI,EAAErE,KAAK,CAACsE,UAAU;QAAEC,KAAK,EAAEvE,KAAK,CAACwE;MAAY,CAAE;MAChHC,SAAS,EAAEvC;IAAU,GAEpB,IAAI,CAACwC,aAAa,CAAC,CAAC,EACpB,IAAI,CAACC,QAAQ,CAAC,CAAC,EACf,IAAI,CAACC,QAAQ,CAAC,CAAC,eAChBtG,KAAA,CAAAsE,aAAA,CAAC5D,YAAY,QAEX,IAAI,CAAC+B,KAAK,CAACL,IAAI,CAACmE,GAAG,CAAC,CAACC,CAAM,EAAEC,CAAS,KAAK;MACzC,oBAAOzG,KAAA,CAAAsE,aAAA,CAAC1D,YAAY;QAACmE,GAAG,EAAErD,KAAK,CAACyC,IAAI,GAAG,cAAc,GAAGsC;MAAE,gBACxDzG,KAAA,CAAAsE,aAAA,CAACjE,IAAI,qBACHL,KAAA,CAAAsE,aAAA,CAAChE,cAAc;QAACoG,EAAE,EAAE,GAAGxC,SAAS,WAAWuC,CAAC,EAAG;QAACE,EAAE,EAAC,IAAI;QAACC,EAAE,EAAC,IAAI;QAACC,EAAE,EAAC,IAAI;QAACC,EAAE,EAAC;MAAM,gBAC/E9G,KAAA,CAAAsE,aAAA,CAAC/D,IAAI;QAACwG,MAAM,EAAC,IAAI;QAACC,SAAS,EAAE/G,KAAK,CAAC,IAAI,CAACwC,KAAK,CAACwE,MAAM,CAACR,CAAC,CAAC,CAAC,CAACS,OAAO,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,CAAC,CAACC,QAAQ,CAAC;MAAE,CAAC,CAAC,eACzFpH,KAAA,CAAAsE,aAAA,CAAC/D,IAAI;QAACwG,MAAM,EAAE3C,YAAa;QAAC4C,SAAS,EAAE/G,KAAK,CAAC,IAAI,CAACwC,KAAK,CAACwE,MAAM,CAACR,CAAC,CAAC,CAAC,CAACS,OAAO,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,CAAC,CAACC,QAAQ,CAAC;MAAE,CAAC,CACpF,CACZ,CAAC,eACPpH,KAAA,CAAAsE,aAAA,CAAC9D,WAAW;QACV6G,aAAa,EAAE3F,KAAK,CAAC2F,aAAuC;QAC5DtC,GAAG,EAAErD,KAAK,CAACyC,IAAI,GAAG,GAAG,GAAGsC,CAAE;QAC1BtC,IAAI,EAAEzC,KAAK,CAACyC,IAAI,GAAG,GAAG,GAAGsC,CAAE;QAC3BhC,KAAK,EAAE;UACLrC,IAAI,EAAE;YACJkF,IAAI,EAAE,QAAQpD,SAAS,WAAWuC,CAAC,GAAG;YACtCc,MAAM,EAAE,IAAI,CAAC9E,KAAK,CAACwE,MAAM,CAACR,CAAC,CAAC;YAC5Be,WAAW,EAAE9F,KAAK,CAAC+F;UACrB;QACF,CAAE;QACFrF,IAAI,EAAE,IAAI,CAACsF,KAAK,GAAClB,CAAC,CAACmB,UAAU,CAAC,CAAC,GAACnB;MAAE,CACnC,CAAC,eACAxG,KAAA,CAAAsE,aAAA,CAAC3D,cAAc;QACbiH,IAAI,EAAE,CAAE;QACR7C,GAAG,EAAErD,KAAK,CAACyC,IAAI,GAAG,UAAU,GAAGsC,CAAE;QACjChC,KAAK,EAAE;UACLrC,IAAI,EAAEV,KAAK,CAACmG,eAAe,GAAG;YAACP,IAAI,EAAE,IAAI,CAAC7E,KAAK,CAACwE,MAAM,CAACR,CAAC,CAAC;YAAEqB,OAAO,EAAE;UAAG,CAAC,GAAC;YAACA,OAAO,EAAE;UAAC;QACtF,CAAE;QACF1F,IAAI,EAAE,IAAI,CAACsF,KAAK,GAAClB,CAAC,CAACmB,UAAU,CAAC,CAAC,GAACnB,CAAE;QAClCuB,MAAM,EAAE,CAAC;UACPC,MAAM,EAAE,MAAM;UACdC,aAAa,EAAE7H,QAAQ,CAAC8H,EAAE,IAAI,KAAK,GAAG;YACpCC,OAAO,EAAE,IAAI,CAACjG,QAAQ,CAAC4C,IAAI,CAAC,IAAI;UAClC,CAAC,GAAC;YACAsD,OAAO,EAAE,IAAI,CAAClG,QAAQ,CAAC4C,IAAI,CAAC,IAAI;UAClC;QACF,CAAC;MAAE,CACF,CACO,CAAC;IACjB,CAAC,CAEW,CACF,CAAC,GAEjB,IACE,CAAC;EACT;AACF","ignoreList":[]}

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

@@ -1,10 +1,10 @@
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 BaseChartComponentProps from "@wavemaker/app-rn-runtime/components/chart/basechart.props";
 export default class WmAreaChartProps extends BaseChartComponentProps {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "linethickness", 2);
     _defineProperty(this, "onSelect", void 0);
   }

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

@@ -1 +1 @@
-{"version":3,"names":["BaseChartComponentProps","WmAreaChartProps","constructor","arguments","_defineProperty"],"sources":["area-chart.props.ts"],"sourcesContent":["import BaseChartComponentProps from \"@wavemaker/app-rn-runtime/components/chart/basechart.props\";\n\nexport default class WmAreaChartProps extends BaseChartComponentProps {\n    linethickness: number = 2;\n    onSelect?: any;\n}\n"],"mappings":";;;AAAA,OAAOA,uBAAuB,MAAM,4DAA4D;AAEhG,eAAe,MAAMC,gBAAgB,SAASD,uBAAuB,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,wBAC1C,CAAC;IAAAA,eAAA;EAAA;AAE7B"}
+{"version":3,"names":["BaseChartComponentProps","WmAreaChartProps","constructor","args","_defineProperty"],"sources":["area-chart.props.ts"],"sourcesContent":["import BaseChartComponentProps from \"@wavemaker/app-rn-runtime/components/chart/basechart.props\";\n\nexport default class WmAreaChartProps extends BaseChartComponentProps {\n    linethickness: number = 2;\n    onSelect?: any;\n}\n"],"mappings":";;;AAAA,OAAOA,uBAAuB,MAAM,4DAA4D;AAEhG,eAAe,MAAMC,gBAAgB,SAASD,uBAAuB,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,wBAC1C,CAAC;IAAAA,eAAA;EAAA;AAE7B","ignoreList":[]}

app-rn-runtime/components/chart/area-chart/area-chart.styles.js

@@ -2,6 +2,12 @@ import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
 import { DEFAULT_CLASS as BASE_CHART_DEFAULT_CLASS } from '../basechart.styles';
 export const DEFAULT_CLASS = 'app-area-chart';
 BASE_THEME.registerStyle((themeVariables, addStyle) => {
-  addStyle(DEFAULT_CLASS, BASE_CHART_DEFAULT_CLASS, {});
+  addStyle(DEFAULT_CLASS, BASE_CHART_DEFAULT_CLASS, {
+    skeleton: {
+      root: {
+        height: 200
+      }
+    }
+  });
 });
 //# sourceMappingURL=area-chart.styles.js.map

app-rn-runtime/components/chart/area-chart/area-chart.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","DEFAULT_CLASS","BASE_CHART_DEFAULT_CLASS","registerStyle","themeVariables","addStyle"],"sources":["area-chart.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 {BaseChartComponentStyles, DEFAULT_CLASS as BASE_CHART_DEFAULT_CLASS } from '../basechart.styles';\n\nexport type WmAreaChartStyles = BaseStyles & BaseChartComponentStyles;\n\nexport const DEFAULT_CLASS = 'app-area-chart';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    addStyle(DEFAULT_CLASS, BASE_CHART_DEFAULT_CLASS, {});\n});\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAE/D,SAAkCC,aAAa,IAAIC,wBAAwB,QAAQ,qBAAqB;AAIxG,OAAO,MAAMD,aAAa,GAAG,gBAAgB;AAC7CD,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnDA,QAAQ,CAACJ,aAAa,EAAEC,wBAAwB,EAAE,CAAC,CAAC,CAAC;AACzD,CAAC,CAAC"}
+{"version":3,"names":["BASE_THEME","DEFAULT_CLASS","BASE_CHART_DEFAULT_CLASS","registerStyle","themeVariables","addStyle","skeleton","root","height"],"sources":["area-chart.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 {BaseChartComponentStyles, DEFAULT_CLASS as BASE_CHART_DEFAULT_CLASS } from '../basechart.styles';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmAreaChartStyles = BaseStyles & BaseChartComponentStyles;\n\nexport const DEFAULT_CLASS = 'app-area-chart';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    addStyle(DEFAULT_CLASS, BASE_CHART_DEFAULT_CLASS, {\n        skeleton: {\n            root: {\n                height: 200\n            }\n        } as WmSkeletonStyles\n    });\n});\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAE/D,SAAkCC,aAAa,IAAIC,wBAAwB,QAAQ,qBAAqB;AAKxG,OAAO,MAAMD,aAAa,GAAG,gBAAgB;AAC7CD,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnDA,QAAQ,CAACJ,aAAa,EAAEC,wBAAwB,EAAE;IAC9CI,QAAQ,EAAE;MACNC,IAAI,EAAE;QACFC,MAAM,EAAE;MACZ;IACJ;EACJ,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

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

@@ -26,11 +26,11 @@ export default class WmBarChart extends BaseChartComponent {
         alignment: "start",
         style: props.customcolors ? {
           data: {
-            fill: _ref => {
-              let {
-                datum
-              } = _ref;
-              return this.state.colors[datum.x] ?? this.state.colors[datum.x % this.state.colors.length];
+            fill: ({
+              datum
+            }) => {
+              var _this$state$colors$da;
+              return (_this$state$colors$da = this.state.colors[datum.x]) !== null && _this$state$colors$da !== void 0 ? _this$state$colors$da : this.state.colors[datum.x % this.state.colors.length];
             }
           }
         } : {},
@@ -55,12 +55,23 @@ export default class WmBarChart extends BaseChartComponent {
     let value = data.data[data.index].y;
     let label = this.state.xaxisDatakeyArr[data.datum.x];
     let selectedItem = this.props.dataset[data.index];
+    const nativeEvent = event.nativeEvent;
+    this.setTooltipPosition(nativeEvent);
     let selectedChartItem = [{
       series: 0,
       x: data.index,
       y: value,
       _dataObj: selectedItem
     }, data.index];
+    this.updateState({
+      tooltipXaxis: label,
+      tooltipYaxis: value,
+      isTooltipOpen: true,
+      selectedItem: {
+        ...selectedItem,
+        index: data.index
+      }
+    });
     this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
   }
   renderWidget(props) {
@@ -73,8 +84,9 @@ export default class WmBarChart extends BaseChartComponent {
       y: this.props.ydomain === 'Min' ? this.state.chartMinY : undefined
     };
     return /*#__PURE__*/React.createElement(View, _extends({}, getAccessibilityProps(AccessibilityWidgetType.LINECHART, props), {
-      style: this.styles.root
-    }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root,
+      onLayout: this.onViewLayoutChange.bind(this)
+    }), this.getTooltip(), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center'
@@ -89,15 +101,14 @@ export default class WmBarChart extends BaseChartComponent {
     }, props.subheading)), /*#__PURE__*/React.createElement(VictoryChart, {
       theme: this.state.theme,
       height: this.styles.root.height,
-      width: this.styles.root.width || this.screenWidth,
+      width: this.state.chartWidth || this.screenWidth,
       minDomain: mindomain,
       padding: {
         top: props.offsettop,
         bottom: props.offsetbottom,
         left: props.offsetleft,
         right: props.offsetright
-      },
-      containerComponent: this.getTooltip(props)
+      }
     }, this.getLegendView(), this.getXaxis(), this.getYAxis(), props.viewtype === 'Stacked' ? /*#__PURE__*/React.createElement(VictoryStack, {
       colorScale: this.state.colors
     }, this.getBarChart(props)) : /*#__PURE__*/React.createElement(VictoryGroup, {