@wavemaker/app-rn-runtime 11.5.0-next.40002 → 11.5.0-next.40301

app-rn-runtime/components/advanced/carousel/carousel-template/carousel-template.component.js

@@ -9,11 +9,8 @@ export default class WmCarouselTemplate extends BaseComponent {
     super(props, DEFAULT_CLASS, new WmCarouselTemplateProps());
   }
   renderWidget(props) {
-    var _this$parent;
     return /*#__PURE__*/React.createElement(View, {
-      style: [this.styles.root, {
-        height: this.styles.root.height || ((_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : _this$parent.styles.root.height) && '100%'
-      }]
+      style: this.styles.root
     }, this._background, props.children);
   }
 }

app-rn-runtime/components/advanced/carousel/carousel-template/carousel-template.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmCarouselTemplateProps","DEFAULT_CLASS","WmCarouselTemplateState","WmCarouselTemplate","constructor","props","renderWidget","_this$parent","createElement","style","styles","root","height","parent","_background","children"],"sources":["carousel-template.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmCarouselTemplateProps from './carousel-template.props';\nimport { DEFAULT_CLASS, WmCarouselTemplateStyles } from './carousel-template.styles';\n\nexport class WmCarouselTemplateState extends BaseComponentState<WmCarouselTemplateProps> {}\n\nexport default class WmCarouselTemplate extends BaseComponent<WmCarouselTemplateProps, WmCarouselTemplateState, WmCarouselTemplateStyles> {\n\n  constructor(props: WmCarouselTemplateProps) {\n    super(props, DEFAULT_CLASS, new WmCarouselTemplateProps());\n  }\n\n  renderWidget(props: WmCarouselTemplateProps) {\n    return (<View style={[this.styles.root, {\n      height: this.styles.root.height || (this.parent?.styles.root.height && '100%')\n    }]}>{this._background}{props.children}</View>);  \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,uBAAuB,MAAM,2BAA2B;AAC/D,SAASC,aAAa,QAAkC,4BAA4B;AAEpF,OAAO,MAAMC,uBAAuB,SAASH,kBAAkB,CAA0B;AAEzF,eAAe,MAAMI,kBAAkB,SAASL,aAAa,CAA6E;EAExIM,WAAWA,CAACC,KAA8B,EAAE;IAC1C,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,uBAAuB,CAAC,CAAC,CAAC;EAC5D;EAEAM,YAAYA,CAACD,KAA8B,EAAE;IAAA,IAAAE,YAAA;IAC3C,oBAAQX,KAAA,CAAAY,aAAA,CAACX,IAAI;MAACY,KAAK,EAAE,CAAC,IAAI,CAACC,MAAM,CAACC,IAAI,EAAE;QACtCC,MAAM,EAAE,IAAI,CAACF,MAAM,CAACC,IAAI,CAACC,MAAM,IAAK,EAAAL,YAAA,OAAI,CAACM,MAAM,cAAAN,YAAA,uBAAXA,YAAA,CAAaG,MAAM,CAACC,IAAI,CAACC,MAAM,KAAI;MACzE,CAAC;IAAE,GAAE,IAAI,CAACE,WAAW,EAAET,KAAK,CAACU,QAAe,CAAC;EAC/C;AACF"}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmCarouselTemplateProps","DEFAULT_CLASS","WmCarouselTemplateState","WmCarouselTemplate","constructor","props","renderWidget","createElement","style","styles","root","_background","children"],"sources":["carousel-template.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmCarouselTemplateProps from './carousel-template.props';\nimport { DEFAULT_CLASS, WmCarouselTemplateStyles } from './carousel-template.styles';\n\nexport class WmCarouselTemplateState extends BaseComponentState<WmCarouselTemplateProps> {}\n\nexport default class WmCarouselTemplate extends BaseComponent<WmCarouselTemplateProps, WmCarouselTemplateState, WmCarouselTemplateStyles> {\n\n  constructor(props: WmCarouselTemplateProps) {\n    super(props, DEFAULT_CLASS, new WmCarouselTemplateProps());\n  }\n\n  renderWidget(props: WmCarouselTemplateProps) {\n    return (<View style={this.styles.root}>{this._background}{props.children}</View>);  \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,uBAAuB,MAAM,2BAA2B;AAC/D,SAASC,aAAa,QAAkC,4BAA4B;AAEpF,OAAO,MAAMC,uBAAuB,SAASH,kBAAkB,CAA0B;AAEzF,eAAe,MAAMI,kBAAkB,SAASL,aAAa,CAA6E;EAExIM,WAAWA,CAACC,KAA8B,EAAE;IAC1C,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,uBAAuB,CAAC,CAAC,CAAC;EAC5D;EAEAM,YAAYA,CAACD,KAA8B,EAAE;IAC3C,oBAAQT,KAAA,CAAAW,aAAA,CAACV,IAAI;MAACW,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAAE,IAAI,CAACC,WAAW,EAAEN,KAAK,CAACO,QAAe,CAAC;EAClF;AACF"}

app-rn-runtime/components/advanced/carousel/carousel-template/carousel-template.styles.js

@@ -7,7 +7,8 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
-      width: '100%'
+      width: '100%',
+      height: '100%'
     },
     text: {}
   });

app-rn-runtime/components/advanced/carousel/carousel-template/carousel-template.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","flexDirection","justifyContent","alignItems","width","text"],"sources":["carousel-template.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 WmCarouselTemplateStyles = BaseStyles & {};\n\nexport const DEFAULT_CLASS = 'app-carousel-template';\n\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmCarouselTemplateStyles = defineStyles({\n        root: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            width: '100%'\n        },\n        text: {}\n    });\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,uBAAuB;AAEpDF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAuC,GAAGL,YAAY,CAAC;IACzDM,IAAI,EAAE;MACFC,aAAa,EAAE,QAAQ;MACvBC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE,QAAQ;MACpBC,KAAK,EAAE;IACX,CAAC;IACDC,IAAI,EAAE,CAAC;EACX,CAAC,CAAC;EAEFP,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC"}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","flexDirection","justifyContent","alignItems","width","height","text"],"sources":["carousel-template.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 WmCarouselTemplateStyles = BaseStyles & {};\n\nexport const DEFAULT_CLASS = 'app-carousel-template';\n\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmCarouselTemplateStyles = defineStyles({\n        root: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            width: '100%',\n            height: '100%'\n        },\n        text: {}\n    });\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,uBAAuB;AAEpDF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAuC,GAAGL,YAAY,CAAC;IACzDM,IAAI,EAAE;MACFC,aAAa,EAAE,QAAQ;MACvBC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE,QAAQ;MACpBC,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE;IACZ,CAAC;IACDC,IAAI,EAAE,CAAC;EACX,CAAC,CAAC;EAEFR,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC"}

app-rn-runtime/components/advanced/carousel/carousel.component.js

@@ -2,121 +2,87 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React from 'react';
-import { isArray } from 'lodash-es';
-import { Animated, View } from 'react-native';
-import { DefaultKeyExtractor } from '@wavemaker/app-rn-runtime/core/key.extractor';
+import { View, Text } from 'react-native';
+import Carousel, { Pagination } from 'react-native-snap-carousel';
 import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
-import * as SwipeAnimation from '@wavemaker/app-rn-runtime/gestures/swipe.animation';
 import WmCarouselProps from './carousel.props';
 import { DEFAULT_CLASS } from './carousel.styles';
 export class WmCarouselState extends BaseComponentState {
   constructor() {
     super(...arguments);
-    _defineProperty(this, "activeIndex", 1);
+    _defineProperty(this, "activeIndex", 0);
+    _defineProperty(this, "sliderWidth", 0);
   }
 }
 export default class WmCarousel extends BaseComponent {
   constructor(_props) {
     super(_props, DEFAULT_CLASS, new WmCarouselProps(), new WmCarouselState());
+    _defineProperty(this, "carouselRef", null);
     _defineProperty(this, "noOfSlides", 0);
-    _defineProperty(this, "slideLayout", null);
-    _defineProperty(this, "keyExtractor", new DefaultKeyExtractor());
     _defineProperty(this, "stopPlay", null);
-    _defineProperty(this, "animationView", null);
-    _defineProperty(this, "animationHandlers", {
-      bounds: e => {
-        var _this$slideLayout;
-        const activeTabIndex = this.state.activeIndex - 1,
-          w = ((_this$slideLayout = this.slideLayout) === null || _this$slideLayout === void 0 ? void 0 : _this$slideLayout.width) || 0,
-          noOfTabs = this.state.props.dataset.length;
-        return {
-          lower: -1 * (activeTabIndex - (activeTabIndex === 0 ? 0 : 1)) * w,
-          center: -1 * activeTabIndex * w,
-          upper: -1 * (activeTabIndex + (activeTabIndex === noOfTabs - 1 ? 0 : 1)) * w
-        };
-      },
-      computePhase: value => {
-        var _this$slideLayout2;
-        const w = ((_this$slideLayout2 = this.slideLayout) === null || _this$slideLayout2 === void 0 ? void 0 : _this$slideLayout2.width) || 0;
-        return w && Math.abs(value / w);
-      },
-      onLower: e => {
-        this.onSlideChange(this.state.activeIndex - 1);
-      },
-      onUpper: e => {
-        this.onSlideChange(this.state.activeIndex + 1);
-      }
-    });
     _defineProperty(this, "onSlideChange", index => {
       const prevIndex = this.state.activeIndex;
       this.updateState({
         activeIndex: index
       }, () => this.invokeEventCallback('onChange', [this, index, prevIndex]));
     });
-    _defineProperty(this, "renderItem", (item, index) => {
+    _defineProperty(this, "renderItem", data => {
       const props = this.state.props;
       if (props.type === 'dynamic') {
-        return props.renderSlide ? props.renderSlide(item, index) : null;
+        return props.renderSlide ? props.renderSlide(data.item, data.index) : null;
       }
-      return props.children[index];
+      return props.children[data.index];
+    });
+    _defineProperty(this, "onLayoutChange", e => {
+      this.updateState({
+        sliderWidth: e.nativeEvent.layout.width
+      });
+    });
+    _defineProperty(this, "getDotElement", _ref => {
+      let {
+        active,
+        index
+      } = _ref;
+      return /*#__PURE__*/React.createElement(Text, {
+        style: active ? this.styles.activeDotStyle : this.styles.dotStyle
+      }, index);
     });
     _defineProperty(this, "next", () => {
-      if (this.state.activeIndex >= this.state.props.dataset.length) {
-        var _this$animationView;
-        this.onSlideChange(1);
-        (_this$animationView = this.animationView) === null || _this$animationView === void 0 ? void 0 : _this$animationView.setPosition(0);
+      if (this.carouselRef && this.carouselRef.currentIndex < this.noOfSlides - 1) {
+        var _this$carouselRef;
+        (_this$carouselRef = this.carouselRef) === null || _this$carouselRef === void 0 ? void 0 : _this$carouselRef.snapToNext();
       } else {
-        var _this$animationView2;
-        (_this$animationView2 = this.animationView) === null || _this$animationView2 === void 0 ? void 0 : _this$animationView2.goToUpper();
+        var _this$carouselRef2;
+        (_this$carouselRef2 = this.carouselRef) === null || _this$carouselRef2 === void 0 ? void 0 : _this$carouselRef2.snapToItem(0);
       }
     });
     _defineProperty(this, "prev", () => {
-      var _this$animationView3;
-      (_this$animationView3 = this.animationView) === null || _this$animationView3 === void 0 ? void 0 : _this$animationView3.goToLower();
+      if (this.carouselRef && this.carouselRef.currentIndex > 0) {
+        var _this$carouselRef3;
+        (_this$carouselRef3 = this.carouselRef) === null || _this$carouselRef3 === void 0 ? void 0 : _this$carouselRef3.snapToPrev();
+      } else {
+        var _this$carouselRef4;
+        (_this$carouselRef4 = this.carouselRef) === null || _this$carouselRef4 === void 0 ? void 0 : _this$carouselRef4.snapToItem(this.noOfSlides - 1);
+      }
     });
     this.cleanup.push(() => {
       this.stopPlay && this.stopPlay();
     });
   }
-  generateItemKey(item, index, props) {
-    if (props.itemkey && item && !this._showSkeleton) {
-      return props.itemkey(item, index);
-    }
-    return 'list_item_' + this.keyExtractor.getKey(item, true);
-  }
-  setSlideLayout(event) {
-    this.slideLayout = event.nativeEvent.layout;
-    this.forceUpdate();
-  }
   autoPlay() {
     const props = this.state.props;
     this.stopPlay && this.stopPlay();
-    if (props.animation === 'auto' && props.animationinterval) {
+    if (props.animation && props.animationinterval) {
       const intervalId = setInterval(() => {
         this.next();
       }, props.animationinterval * 1000);
       this.stopPlay = () => clearInterval(intervalId);
-    } else {
-      setTimeout(() => {
-        var _this$animationView4;
-        this.onSlideChange(1);
-        (_this$animationView4 = this.animationView) === null || _this$animationView4 === void 0 ? void 0 : _this$animationView4.setPosition(0);
-      }, 1000);
     }
   }
   onPropertyChange(name, $new, $old) {
     super.onPropertyChange(name, $new, $old);
     switch (name) {
-      case 'dataset':
-        {
-          var _this$keyExtractor;
-          (_this$keyExtractor = this.keyExtractor) === null || _this$keyExtractor === void 0 ? void 0 : _this$keyExtractor.clear();
-          this.updateState({
-            activeIndex: Math.min(this.state.activeIndex, ($new === null || $new === void 0 ? void 0 : $new.length) || 0)
-          });
-          break;
-        }
       case 'animation':
       case 'animationinterval':
         {
@@ -124,68 +90,48 @@ export default class WmCarousel extends BaseComponent {
         }
     }
   }
-  renderPagination(data) {
-    const maxNoOfDots = this.state.props.maxnoofdots;
-    let minIndex = Math.max(this.state.activeIndex - maxNoOfDots + 1, 0);
-    let maxIndex = Math.min(minIndex + maxNoOfDots - 1, data.length);
-    if (maxIndex === data.length) {
-      minIndex = maxIndex - maxNoOfDots;
-    }
-    return /*#__PURE__*/React.createElement(View, {
-      style: this.styles.dotsWrapperStyle
-    }, data.map((item, index) => {
-      return index >= minIndex && index <= maxIndex ? /*#__PURE__*/React.createElement(View, {
-        key: 'dots_' + this.generateItemKey(item, index, this.state.props),
-        style: [this.styles.dotStyle, index === this.state.activeIndex - 1 ? this.styles.activeDotStyle : null]
-      }) : null;
-    }));
+  renderPagination(props, styles) {
+    return /*#__PURE__*/React.createElement(Pagination, {
+      carouselRef: this.carouselRef,
+      dotsLength: this.noOfSlides,
+      activeDotIndex: this.state.activeIndex,
+      containerStyle: styles.dotsWrapperStyle,
+      dotStyle: styles.activeDotStyle,
+      inactiveDotStyle: styles.dotStyle,
+      inactiveDotScale: 0.8,
+      tappableDots: true
+    });
   }
   renderWidget(props) {
-    var _data;
     const hasNavs = props.controls === 'both' || props.controls === 'navs';
     const hasDots = props.controls === 'both' || props.controls === 'indicators';
     let styles = this.styles;
-    let data = props.type === 'dynamic' ? props.dataset : props.children;
-    data = isArray(data) ? data : [];
-    this.noOfSlides = ((_data = data) === null || _data === void 0 ? void 0 : _data.length) || 0;
+    const data = props.type === 'dynamic' ? props.dataset : props.children;
+    this.noOfSlides = (data === null || data === void 0 ? void 0 : data.length) || 0;
+    const autoPlay = props.animation === 'auto';
     // TODO: loop prop on Carousel is not working Refer: https://github.com/meliorence/react-native-snap-carousel/issues/608
     return /*#__PURE__*/React.createElement(View, {
       style: styles.root,
-      onLayout: this.setSlideLayout.bind(this)
-    }, this._background, /*#__PURE__*/React.createElement(SwipeAnimation.View, {
-      enableGestures: props.enablegestures,
+      onLayout: this.onLayoutChange
+    }, this._background, this.state.sliderWidth > 0 ? /*#__PURE__*/React.createElement(Carousel, {
+      ref: ref => this.carouselRef = ref,
+      data: data || [],
+      firstItem: 0,
       style: {
-        flexDirection: 'row',
-        flexWrap: 'nowrap',
-        alignItems: 'center'
-      },
-      direction: "horizontal",
-      ref: r => {
-        this.animationView = r;
+        width: '100%',
+        height: '100%'
       },
-      handlers: this.animationHandlers
-    }, data.map((item, index) => {
-      var _this$animationView5, _this$animationView6;
-      const isActive = index === this.state.activeIndex - 1;
-      let scale = (_this$animationView5 = this.animationView) === null || _this$animationView5 === void 0 ? void 0 : _this$animationView5.animationPhase.interpolate({
-        inputRange: [-2000, index - 1, index, index + 1, 2000],
-        outputRange: [0.8, 0.8, 1, 0.8, 0.8]
-      });
-      let translateX = (_this$animationView6 = this.animationView) === null || _this$animationView6 === void 0 ? void 0 : _this$animationView6.animationPhase.interpolate({
-        inputRange: [-2000, index - 1, index, index + 1, 2000],
-        outputRange: [-56, -56, 0, 56, 56]
-      });
-      return /*#__PURE__*/React.createElement(Animated.View, {
-        key: this.generateItemKey(item, index, props),
-        style: [this.styles.slide, index === 0 ? this.styles.firstSlide : null, index === data.length - 1 ? this.styles.lastSlide : null, isActive ? this.styles.activeSlide : null, translateX && scale ? {
-          transform: [{
-            translateX: translateX
-          }, {
-            scale: scale
-          }]
-        } : null]
-      }, this.renderItem(item, index));
-    })), hasNavs ? /*#__PURE__*/React.createElement(View, {
+      enableSnap: true,
+      loopClonesPerSide: 1,
+      autoplay: false,
+      activeSlideAlignment: "start",
+      renderItem: this.renderItem,
+      sliderWidth: this.state.sliderWidth,
+      itemWidth: this.state.sliderWidth,
+      lockScrollWhileSnapping: false,
+      scrollEnabled: false,
+      onSnapToItem: this.onSlideChange
+    }) : null, hasNavs ? /*#__PURE__*/React.createElement(View, {
       style: styles.btnPanel
     }, /*#__PURE__*/React.createElement(WmIcon, {
       iconclass: "wi wi-chevron-left fa-2x",
@@ -195,7 +141,7 @@ export default class WmCarousel extends BaseComponent {
       iconclass: "wi wi-chevron-right fa-2x",
       styles: styles.nextBtn,
       onTap: this.next
-    })) : null, hasDots && data ? this.renderPagination(data) : null);
+    })) : null, this.state.sliderWidth > 0 && hasDots && data ? this.renderPagination(props, styles) : null);
   }
 }
 //# sourceMappingURL=carousel.component.js.map

app-rn-runtime/components/advanced/carousel/carousel.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","isArray","Animated","View","DefaultKeyExtractor","WmIcon","BaseComponent","BaseComponentState","SwipeAnimation","WmCarouselProps","DEFAULT_CLASS","WmCarouselState","constructor","arguments","_defineProperty","WmCarousel","props","bounds","e","_this$slideLayout","activeTabIndex","state","activeIndex","w","slideLayout","width","noOfTabs","dataset","length","lower","center","upper","computePhase","value","_this$slideLayout2","Math","abs","onLower","onSlideChange","onUpper","index","prevIndex","updateState","invokeEventCallback","item","type","renderSlide","children","_this$animationView","animationView","setPosition","_this$animationView2","goToUpper","_this$animationView3","goToLower","cleanup","push","stopPlay","generateItemKey","itemkey","_showSkeleton","keyExtractor","getKey","setSlideLayout","event","nativeEvent","layout","forceUpdate","autoPlay","animation","animationinterval","intervalId","setInterval","next","clearInterval","setTimeout","_this$animationView4","onPropertyChange","name","$new","$old","_this$keyExtractor","clear","min","renderPagination","data","maxNoOfDots","maxnoofdots","minIndex","max","maxIndex","createElement","style","styles","dotsWrapperStyle","map","key","dotStyle","activeDotStyle","renderWidget","_data","hasNavs","controls","hasDots","noOfSlides","root","onLayout","bind","_background","enableGestures","enablegestures","flexDirection","flexWrap","alignItems","direction","ref","r","handlers","animationHandlers","_this$animationView5","_this$animationView6","isActive","scale","animationPhase","interpolate","inputRange","outputRange","translateX","slide","firstSlide","lastSlide","activeSlide","transform","renderItem","btnPanel","iconclass","prevBtn","onTap","prev","nextBtn"],"sources":["carousel.component.tsx"],"sourcesContent":["import React from 'react';\nimport { isArray } from 'lodash-es';\nimport { Animated, View, Text, LayoutChangeEvent, LayoutRectangle } from 'react-native';\nimport { DefaultKeyExtractor } from '@wavemaker/app-rn-runtime/core/key.extractor';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport * as SwipeAnimation from '@wavemaker/app-rn-runtime/gestures/swipe.animation';\n\nimport WmCarouselProps from './carousel.props';\nimport { DEFAULT_CLASS, WmCarouselStyles } from './carousel.styles';\n\nexport class WmCarouselState extends BaseComponentState<WmCarouselProps> {\n  activeIndex = 1;\n}\n\nexport default class WmCarousel extends BaseComponent<WmCarouselProps, WmCarouselState, WmCarouselStyles> {\n\n  noOfSlides: number = 0;\n  private slideLayout: LayoutRectangle = null as any;\n  private keyExtractor = new DefaultKeyExtractor();\n  stopPlay: Function = null as any;\n  private animationView: SwipeAnimation.View | null = null as any;\n  private animationHandlers = {\n    bounds: (e) => {\n      const activeTabIndex = this.state.activeIndex - 1,\n            w = this.slideLayout?.width || 0,\n            noOfTabs = this.state.props.dataset.length;\n      return {\n        lower: -1 * (activeTabIndex - (activeTabIndex === 0 ? 0 : 1)) * w,\n        center: -1 * activeTabIndex * w,\n        upper:  -1 * (activeTabIndex + (activeTabIndex === noOfTabs - 1 ? 0 : 1)) * w\n      };\n    },\n    computePhase: (value) => {\n      const w = this.slideLayout?.width || 0;\n      return w && Math.abs(value / w);\n    },\n    onLower: (e) => {\n      this.onSlideChange(this.state.activeIndex - 1);\n    },\n    onUpper: (e) => {\n      this.onSlideChange(this.state.activeIndex + 1);\n    }\n  } as SwipeAnimation.Handlers;\n\n  constructor(props: WmCarouselProps) {\n    super(props, DEFAULT_CLASS, new WmCarouselProps(), new WmCarouselState());\n    this.cleanup.push(() => {\n      this.stopPlay && this.stopPlay();\n    })\n  }\n\n  private generateItemKey(item: any, index: number, props: WmCarouselProps) {\n    if (props.itemkey && item && !this._showSkeleton) {\n      return props.itemkey(item, index);\n    }\n    return 'list_item_' +  this.keyExtractor.getKey(item, true);\n  }\n\n  setSlideLayout(event: LayoutChangeEvent) {\n    this.slideLayout = event.nativeEvent.layout;\n    this.forceUpdate();\n  }\n\n  autoPlay() {\n    const props = this.state.props;\n    this.stopPlay && this.stopPlay();\n    if (props.animation === 'auto' && props.animationinterval) {\n      const intervalId = setInterval(() => {\n        this.next();\n      }, props.animationinterval * 1000);\n      this.stopPlay = () => clearInterval(intervalId);\n    } else {\n      setTimeout(() => {\n        this.onSlideChange(1);\n        this.animationView?.setPosition(0);\n      }, 1000);\n    }\n  }\n\n  onPropertyChange(name: string, $new: any, $old: any): void {\n      super.onPropertyChange(name, $new, $old);\n      switch (name) {\n        case 'dataset': {\n          this.keyExtractor?.clear();\n          this.updateState({\n            activeIndex: Math.min(this.state.activeIndex, $new?.length || 0)\n          } as WmCarouselState);\n          break;\n        }\n        case 'animation':\n        case 'animationinterval' : {\n          this.autoPlay();\n        }\n      }\n  }\n\n  onSlideChange = (index: number) => {\n    const prevIndex = this.state.activeIndex;\n    this.updateState({\n      activeIndex: index\n    } as WmCarouselState,\n    () => this.invokeEventCallback('onChange', [this, index, prevIndex]));\n  }\n\n  renderItem = (item: any, index: number) => {\n    const props = this.state.props;\n    if (props.type === 'dynamic') {\n      return props.renderSlide ? props.renderSlide(item, index) : null;\n    }\n    return props.children[index];\n  }\n\n  next = () => {\n    if (this.state.activeIndex >= this.state.props.dataset.length) {\n      this.onSlideChange(1);\n      this.animationView?.setPosition(0);\n    } else {\n      this.animationView?.goToUpper();\n    }\n  }\n\n  prev = () => {\n    this.animationView?.goToLower();\n  }\n\n  renderPagination(data: any) {\n    const maxNoOfDots = this.state.props.maxnoofdots;\n    let minIndex = Math.max(this.state.activeIndex - maxNoOfDots + 1, 0);\n    let maxIndex = Math.min(minIndex + maxNoOfDots - 1, data.length);\n    if (maxIndex === data.length) {\n      minIndex = maxIndex - maxNoOfDots;\n    }\n    return (<View style={this.styles.dotsWrapperStyle}>\n      {\n        data.map((item: any, index: number) => {\n          return index >= minIndex && index <= maxIndex ? (\n            <View key={'dots_' + this.generateItemKey(item, index, this.state.props)} \n              style={[\n                this.styles.dotStyle,\n                index === this.state.activeIndex - 1 ? this.styles.activeDotStyle: null]}>\n            </View>) : null;\n        })\n      }\n    </View>);\n  }\n\n  renderWidget(props: WmCarouselProps) {\n    const hasNavs = props.controls === 'both' || props.controls ==='navs';\n    const hasDots = props.controls === 'both' || props.controls ==='indicators';\n    let styles = this.styles;\n    let data = props.type === 'dynamic' ? props.dataset : props.children;\n    data = isArray(data) ? data : [];\n    this.noOfSlides = data?.length || 0;\n    // TODO: loop prop on Carousel is not working Refer: https://github.com/meliorence/react-native-snap-carousel/issues/608\n    return (\n      <View style={styles.root} onLayout={this.setSlideLayout.bind(this)}>\n        {this._background}\n        <SwipeAnimation.View \n            enableGestures={props.enablegestures}\n            style={{\n              flexDirection: 'row',\n              flexWrap: 'nowrap',\n              alignItems: 'center'\n            }}\n            direction='horizontal'\n            ref={(r) => {this.animationView = r}}\n            handlers = {this.animationHandlers}\n          >\n          {data.map((item: any, index: number) => {\n            const isActive = index === this.state.activeIndex - 1;\n            let scale = this.animationView?.animationPhase.interpolate({\n              inputRange: [-2000, index - 1, index, index + 1, 2000],\n              outputRange: [0.8, 0.8, 1, 0.8, 0.8]\n            });\n            let translateX = this.animationView?.animationPhase.interpolate({\n              inputRange: [-2000, index - 1, index, index + 1, 2000],\n              outputRange: [-56, -56, 0, 56, 56]\n            });\n            return (\n              <Animated.View key={this.generateItemKey(item, index, props)}\n                style={[this.styles.slide,\n                  index === 0 ? this.styles.firstSlide : null,\n                  index === data.length - 1 ? this.styles.lastSlide: null,\n                  isActive ? this.styles.activeSlide: null,\n                  translateX && scale ? {\n                    transform: [\n                      {\n                        translateX: translateX\n                      },\n                      {\n                        scale: scale\n                      }\n                    ]\n                  } : null]}>\n                {this.renderItem(item, index)}\n              </Animated.View>\n            );\n          })}\n        </SwipeAnimation.View>\n        {hasNavs ? (\n          <View style={styles.btnPanel}>\n            <WmIcon\n              iconclass=\"wi wi-chevron-left fa-2x\"\n              styles={styles.prevBtn}\n              onTap={this.prev}/>\n            <WmIcon\n              iconclass=\"wi wi-chevron-right fa-2x\"\n              styles={styles.nextBtn}\n              onTap={this.next}/>\n          </View>): null}\n          {hasDots && data ? this.renderPagination(data) : null}\n      </View>);\n  }\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,QAAQ,EAAEC,IAAI,QAAkD,cAAc;AACvF,SAASC,mBAAmB,QAAQ,8CAA8C;AAClF,OAAOC,MAAM,MAAM,gEAAgE;AACnF,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AACjG,OAAO,KAAKC,cAAc,MAAM,oDAAoD;AAEpF,OAAOC,eAAe,MAAM,kBAAkB;AAC9C,SAASC,aAAa,QAA0B,mBAAmB;AAEnE,OAAO,MAAMC,eAAe,SAASJ,kBAAkB,CAAkB;EAAAK,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,sBACzD,CAAC;EAAA;AACjB;AAEA,eAAe,MAAMC,UAAU,SAAST,aAAa,CAAqD;EA8BxGM,WAAWA,CAACI,MAAsB,EAAE;IAClC,KAAK,CAACA,MAAK,EAAEN,aAAa,EAAE,IAAID,eAAe,CAAC,CAAC,EAAE,IAAIE,eAAe,CAAC,CAAC,CAAC;IAACG,eAAA,qBA7BvD,CAAC;IAAAA,eAAA,sBACiB,IAAI;IAAAA,eAAA,uBACpB,IAAIV,mBAAmB,CAAC,CAAC;IAAAU,eAAA,mBAC3B,IAAI;IAAAA,eAAA,wBAC2B,IAAI;IAAAA,eAAA,4BAC5B;MAC1BG,MAAM,EAAGC,CAAC,IAAK;QAAA,IAAAC,iBAAA;QACb,MAAMC,cAAc,GAAG,IAAI,CAACC,KAAK,CAACC,WAAW,GAAG,CAAC;UAC3CC,CAAC,GAAG,EAAAJ,iBAAA,OAAI,CAACK,WAAW,cAAAL,iBAAA,uBAAhBA,iBAAA,CAAkBM,KAAK,KAAI,CAAC;UAChCC,QAAQ,GAAG,IAAI,CAACL,KAAK,CAACL,KAAK,CAACW,OAAO,CAACC,MAAM;QAChD,OAAO;UACLC,KAAK,EAAE,CAAC,CAAC,IAAIT,cAAc,IAAIA,cAAc,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAGG,CAAC;UACjEO,MAAM,EAAE,CAAC,CAAC,GAAGV,cAAc,GAAGG,CAAC;UAC/BQ,KAAK,EAAG,CAAC,CAAC,IAAIX,cAAc,IAAIA,cAAc,KAAKM,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAGH;QAC9E,CAAC;MACH,CAAC;MACDS,YAAY,EAAGC,KAAK,IAAK;QAAA,IAAAC,kBAAA;QACvB,MAAMX,CAAC,GAAG,EAAAW,kBAAA,OAAI,CAACV,WAAW,cAAAU,kBAAA,uBAAhBA,kBAAA,CAAkBT,KAAK,KAAI,CAAC;QACtC,OAAOF,CAAC,IAAIY,IAAI,CAACC,GAAG,CAACH,KAAK,GAAGV,CAAC,CAAC;MACjC,CAAC;MACDc,OAAO,EAAGnB,CAAC,IAAK;QACd,IAAI,CAACoB,aAAa,CAAC,IAAI,CAACjB,KAAK,CAACC,WAAW,GAAG,CAAC,CAAC;MAChD,CAAC;MACDiB,OAAO,EAAGrB,CAAC,IAAK;QACd,IAAI,CAACoB,aAAa,CAAC,IAAI,CAACjB,KAAK,CAACC,WAAW,GAAG,CAAC,CAAC;MAChD;IACF,CAAC;IAAAR,eAAA,wBAsDgB0B,KAAa,IAAK;MACjC,MAAMC,SAAS,GAAG,IAAI,CAACpB,KAAK,CAACC,WAAW;MACxC,IAAI,CAACoB,WAAW,CAAC;QACfpB,WAAW,EAAEkB;MACf,CAAC,EACD,MAAM,IAAI,CAACG,mBAAmB,CAAC,UAAU,EAAE,CAAC,IAAI,EAAEH,KAAK,EAAEC,SAAS,CAAC,CAAC,CAAC;IACvE,CAAC;IAAA3B,eAAA,qBAEY,CAAC8B,IAAS,EAAEJ,KAAa,KAAK;MACzC,MAAMxB,KAAK,GAAG,IAAI,CAACK,KAAK,CAACL,KAAK;MAC9B,IAAIA,KAAK,CAAC6B,IAAI,KAAK,SAAS,EAAE;QAC5B,OAAO7B,KAAK,CAAC8B,WAAW,GAAG9B,KAAK,CAAC8B,WAAW,CAACF,IAAI,EAAEJ,KAAK,CAAC,GAAG,IAAI;MAClE;MACA,OAAOxB,KAAK,CAAC+B,QAAQ,CAACP,KAAK,CAAC;IAC9B,CAAC;IAAA1B,eAAA,eAEM,MAAM;MACX,IAAI,IAAI,CAACO,KAAK,CAACC,WAAW,IAAI,IAAI,CAACD,KAAK,CAACL,KAAK,CAACW,OAAO,CAACC,MAAM,EAAE;QAAA,IAAAoB,mBAAA;QAC7D,IAAI,CAACV,aAAa,CAAC,CAAC,CAAC;QACrB,CAAAU,mBAAA,OAAI,CAACC,aAAa,cAAAD,mBAAA,uBAAlBA,mBAAA,CAAoBE,WAAW,CAAC,CAAC,CAAC;MACpC,CAAC,MAAM;QAAA,IAAAC,oBAAA;QACL,CAAAA,oBAAA,OAAI,CAACF,aAAa,cAAAE,oBAAA,uBAAlBA,oBAAA,CAAoBC,SAAS,CAAC,CAAC;MACjC;IACF,CAAC;IAAAtC,eAAA,eAEM,MAAM;MAAA,IAAAuC,oBAAA;MACX,CAAAA,oBAAA,OAAI,CAACJ,aAAa,cAAAI,oBAAA,uBAAlBA,oBAAA,CAAoBC,SAAS,CAAC,CAAC;IACjC,CAAC;IA7EC,IAAI,CAACC,OAAO,CAACC,IAAI,CAAC,MAAM;MACtB,IAAI,CAACC,QAAQ,IAAI,IAAI,CAACA,QAAQ,CAAC,CAAC;IAClC,CAAC,CAAC;EACJ;EAEQC,eAAeA,CAACd,IAAS,EAAEJ,KAAa,EAAExB,KAAsB,EAAE;IACxE,IAAIA,KAAK,CAAC2C,OAAO,IAAIf,IAAI,IAAI,CAAC,IAAI,CAACgB,aAAa,EAAE;MAChD,OAAO5C,KAAK,CAAC2C,OAAO,CAACf,IAAI,EAAEJ,KAAK,CAAC;IACnC;IACA,OAAO,YAAY,GAAI,IAAI,CAACqB,YAAY,CAACC,MAAM,CAAClB,IAAI,EAAE,IAAI,CAAC;EAC7D;EAEAmB,cAAcA,CAACC,KAAwB,EAAE;IACvC,IAAI,CAACxC,WAAW,GAAGwC,KAAK,CAACC,WAAW,CAACC,MAAM;IAC3C,IAAI,CAACC,WAAW,CAAC,CAAC;EACpB;EAEAC,QAAQA,CAAA,EAAG;IACT,MAAMpD,KAAK,GAAG,IAAI,CAACK,KAAK,CAACL,KAAK;IAC9B,IAAI,CAACyC,QAAQ,IAAI,IAAI,CAACA,QAAQ,CAAC,CAAC;IAChC,IAAIzC,KAAK,CAACqD,SAAS,KAAK,MAAM,IAAIrD,KAAK,CAACsD,iBAAiB,EAAE;MACzD,MAAMC,UAAU,GAAGC,WAAW,CAAC,MAAM;QACnC,IAAI,CAACC,IAAI,CAAC,CAAC;MACb,CAAC,EAAEzD,KAAK,CAACsD,iBAAiB,GAAG,IAAI,CAAC;MAClC,IAAI,CAACb,QAAQ,GAAG,MAAMiB,aAAa,CAACH,UAAU,CAAC;IACjD,CAAC,MAAM;MACLI,UAAU,CAAC,MAAM;QAAA,IAAAC,oBAAA;QACf,IAAI,CAACtC,aAAa,CAAC,CAAC,CAAC;QACrB,CAAAsC,oBAAA,OAAI,CAAC3B,aAAa,cAAA2B,oBAAA,uBAAlBA,oBAAA,CAAoB1B,WAAW,CAAC,CAAC,CAAC;MACpC,CAAC,EAAE,IAAI,CAAC;IACV;EACF;EAEA2B,gBAAgBA,CAACC,IAAY,EAAEC,IAAS,EAAEC,IAAS,EAAQ;IACvD,KAAK,CAACH,gBAAgB,CAACC,IAAI,EAAEC,IAAI,EAAEC,IAAI,CAAC;IACxC,QAAQF,IAAI;MACV,KAAK,SAAS;QAAE;UAAA,IAAAG,kBAAA;UACd,CAAAA,kBAAA,OAAI,CAACpB,YAAY,cAAAoB,kBAAA,uBAAjBA,kBAAA,CAAmBC,KAAK,CAAC,CAAC;UAC1B,IAAI,CAACxC,WAAW,CAAC;YACfpB,WAAW,EAAEa,IAAI,CAACgD,GAAG,CAAC,IAAI,CAAC9D,KAAK,CAACC,WAAW,EAAE,CAAAyD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEnD,MAAM,KAAI,CAAC;UACjE,CAAoB,CAAC;UACrB;QACF;MACA,KAAK,WAAW;MAChB,KAAK,mBAAmB;QAAG;UACzB,IAAI,CAACwC,QAAQ,CAAC,CAAC;QACjB;IACF;EACJ;EA+BAgB,gBAAgBA,CAACC,IAAS,EAAE;IAC1B,MAAMC,WAAW,GAAG,IAAI,CAACjE,KAAK,CAACL,KAAK,CAACuE,WAAW;IAChD,IAAIC,QAAQ,GAAGrD,IAAI,CAACsD,GAAG,CAAC,IAAI,CAACpE,KAAK,CAACC,WAAW,GAAGgE,WAAW,GAAG,CAAC,EAAE,CAAC,CAAC;IACpE,IAAII,QAAQ,GAAGvD,IAAI,CAACgD,GAAG,CAACK,QAAQ,GAAGF,WAAW,GAAG,CAAC,EAAED,IAAI,CAACzD,MAAM,CAAC;IAChE,IAAI8D,QAAQ,KAAKL,IAAI,CAACzD,MAAM,EAAE;MAC5B4D,QAAQ,GAAGE,QAAQ,GAAGJ,WAAW;IACnC;IACA,oBAAQtF,KAAA,CAAA2F,aAAA,CAACxF,IAAI;MAACyF,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAiB,GAE9CT,IAAI,CAACU,GAAG,CAAC,CAACnD,IAAS,EAAEJ,KAAa,KAAK;MACrC,OAAOA,KAAK,IAAIgD,QAAQ,IAAIhD,KAAK,IAAIkD,QAAQ,gBAC3C1F,KAAA,CAAA2F,aAAA,CAACxF,IAAI;QAAC6F,GAAG,EAAE,OAAO,GAAG,IAAI,CAACtC,eAAe,CAACd,IAAI,EAAEJ,KAAK,EAAE,IAAI,CAACnB,KAAK,CAACL,KAAK,CAAE;QACvE4E,KAAK,EAAE,CACL,IAAI,CAACC,MAAM,CAACI,QAAQ,EACpBzD,KAAK,KAAK,IAAI,CAACnB,KAAK,CAACC,WAAW,GAAG,CAAC,GAAG,IAAI,CAACuE,MAAM,CAACK,cAAc,GAAE,IAAI;MAAE,CACvE,CAAC,GAAI,IAAI;IACnB,CAAC,CAEC,CAAC;EACT;EAEAC,YAAYA,CAACnF,KAAsB,EAAE;IAAA,IAAAoF,KAAA;IACnC,MAAMC,OAAO,GAAGrF,KAAK,CAACsF,QAAQ,KAAK,MAAM,IAAItF,KAAK,CAACsF,QAAQ,KAAI,MAAM;IACrE,MAAMC,OAAO,GAAGvF,KAAK,CAACsF,QAAQ,KAAK,MAAM,IAAItF,KAAK,CAACsF,QAAQ,KAAI,YAAY;IAC3E,IAAIT,MAAM,GAAG,IAAI,CAACA,MAAM;IACxB,IAAIR,IAAI,GAAGrE,KAAK,CAAC6B,IAAI,KAAK,SAAS,GAAG7B,KAAK,CAACW,OAAO,GAAGX,KAAK,CAAC+B,QAAQ;IACpEsC,IAAI,GAAGpF,OAAO,CAACoF,IAAI,CAAC,GAAGA,IAAI,GAAG,EAAE;IAChC,IAAI,CAACmB,UAAU,GAAG,EAAAJ,KAAA,GAAAf,IAAI,cAAAe,KAAA,uBAAJA,KAAA,CAAMxE,MAAM,KAAI,CAAC;IACnC;IACA,oBACE5B,KAAA,CAAA2F,aAAA,CAACxF,IAAI;MAACyF,KAAK,EAAEC,MAAM,CAACY,IAAK;MAACC,QAAQ,EAAE,IAAI,CAAC3C,cAAc,CAAC4C,IAAI,CAAC,IAAI;IAAE,GAChE,IAAI,CAACC,WAAW,eACjB5G,KAAA,CAAA2F,aAAA,CAACnF,cAAc,CAACL,IAAI;MAChB0G,cAAc,EAAE7F,KAAK,CAAC8F,cAAe;MACrClB,KAAK,EAAE;QACLmB,aAAa,EAAE,KAAK;QACpBC,QAAQ,EAAE,QAAQ;QAClBC,UAAU,EAAE;MACd,CAAE;MACFC,SAAS,EAAC,YAAY;MACtBC,GAAG,EAAGC,CAAC,IAAK;QAAC,IAAI,CAACnE,aAAa,GAAGmE,CAAC;MAAA,CAAE;MACrCC,QAAQ,EAAI,IAAI,CAACC;IAAkB,GAEpCjC,IAAI,CAACU,GAAG,CAAC,CAACnD,IAAS,EAAEJ,KAAa,KAAK;MAAA,IAAA+E,oBAAA,EAAAC,oBAAA;MACtC,MAAMC,QAAQ,GAAGjF,KAAK,KAAK,IAAI,CAACnB,KAAK,CAACC,WAAW,GAAG,CAAC;MACrD,IAAIoG,KAAK,IAAAH,oBAAA,GAAG,IAAI,CAACtE,aAAa,cAAAsE,oBAAA,uBAAlBA,oBAAA,CAAoBI,cAAc,CAACC,WAAW,CAAC;QACzDC,UAAU,EAAE,CAAC,CAAC,IAAI,EAAErF,KAAK,GAAG,CAAC,EAAEA,KAAK,EAAEA,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC;QACtDsF,WAAW,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG;MACrC,CAAC,CAAC;MACF,IAAIC,UAAU,IAAAP,oBAAA,GAAG,IAAI,CAACvE,aAAa,cAAAuE,oBAAA,uBAAlBA,oBAAA,CAAoBG,cAAc,CAACC,WAAW,CAAC;QAC9DC,UAAU,EAAE,CAAC,CAAC,IAAI,EAAErF,KAAK,GAAG,CAAC,EAAEA,KAAK,EAAEA,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC;QACtDsF,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE;MACnC,CAAC,CAAC;MACF,oBACE9H,KAAA,CAAA2F,aAAA,CAACzF,QAAQ,CAACC,IAAI;QAAC6F,GAAG,EAAE,IAAI,CAACtC,eAAe,CAACd,IAAI,EAAEJ,KAAK,EAAExB,KAAK,CAAE;QAC3D4E,KAAK,EAAE,CAAC,IAAI,CAACC,MAAM,CAACmC,KAAK,EACvBxF,KAAK,KAAK,CAAC,GAAG,IAAI,CAACqD,MAAM,CAACoC,UAAU,GAAG,IAAI,EAC3CzF,KAAK,KAAK6C,IAAI,CAACzD,MAAM,GAAG,CAAC,GAAG,IAAI,CAACiE,MAAM,CAACqC,SAAS,GAAE,IAAI,EACvDT,QAAQ,GAAG,IAAI,CAAC5B,MAAM,CAACsC,WAAW,GAAE,IAAI,EACxCJ,UAAU,IAAIL,KAAK,GAAG;UACpBU,SAAS,EAAE,CACT;YACEL,UAAU,EAAEA;UACd,CAAC,EACD;YACEL,KAAK,EAAEA;UACT,CAAC;QAEL,CAAC,GAAG,IAAI;MAAE,GACX,IAAI,CAACW,UAAU,CAACzF,IAAI,EAAEJ,KAAK,CACf,CAAC;IAEpB,CAAC,CACkB,CAAC,EACrB6D,OAAO,gBACNrG,KAAA,CAAA2F,aAAA,CAACxF,IAAI;MAACyF,KAAK,EAAEC,MAAM,CAACyC;IAAS,gBAC3BtI,KAAA,CAAA2F,aAAA,CAACtF,MAAM;MACLkI,SAAS,EAAC,0BAA0B;MACpC1C,MAAM,EAAEA,MAAM,CAAC2C,OAAQ;MACvBC,KAAK,EAAE,IAAI,CAACC;IAAK,CAAC,CAAC,eACrB1I,KAAA,CAAA2F,aAAA,CAACtF,MAAM;MACLkI,SAAS,EAAC,2BAA2B;MACrC1C,MAAM,EAAEA,MAAM,CAAC8C,OAAQ;MACvBF,KAAK,EAAE,IAAI,CAAChE;IAAK,CAAC,CAChB,CAAC,GAAG,IAAI,EACb8B,OAAO,IAAIlB,IAAI,GAAG,IAAI,CAACD,gBAAgB,CAACC,IAAI,CAAC,GAAG,IAC/C,CAAC;EACX;AACF"}
+{"version":3,"names":["React","View","Text","Carousel","Pagination","WmIcon","BaseComponent","BaseComponentState","WmCarouselProps","DEFAULT_CLASS","WmCarouselState","constructor","arguments","_defineProperty","WmCarousel","props","index","prevIndex","state","activeIndex","updateState","invokeEventCallback","data","type","renderSlide","item","children","e","sliderWidth","nativeEvent","layout","width","_ref","active","createElement","style","styles","activeDotStyle","dotStyle","carouselRef","currentIndex","noOfSlides","_this$carouselRef","snapToNext","_this$carouselRef2","snapToItem","_this$carouselRef3","snapToPrev","_this$carouselRef4","cleanup","push","stopPlay","autoPlay","animation","animationinterval","intervalId","setInterval","next","clearInterval","onPropertyChange","name","$new","$old","renderPagination","dotsLength","activeDotIndex","containerStyle","dotsWrapperStyle","inactiveDotStyle","inactiveDotScale","tappableDots","renderWidget","hasNavs","controls","hasDots","dataset","length","root","onLayout","onLayoutChange","_background","ref","firstItem","height","enableSnap","loopClonesPerSide","autoplay","activeSlideAlignment","renderItem","itemWidth","lockScrollWhileSnapping","scrollEnabled","onSnapToItem","onSlideChange","btnPanel","iconclass","prevBtn","onTap","prev","nextBtn"],"sources":["carousel.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Text, LayoutChangeEvent } from 'react-native';\nimport Carousel, { Pagination } from 'react-native-snap-carousel';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmCarouselProps from './carousel.props';\nimport { DEFAULT_CLASS, WmCarouselStyles } from './carousel.styles';\n\nexport class WmCarouselState extends BaseComponentState<WmCarouselProps> {\n  activeIndex = 0;\n  sliderWidth = 0;\n}\n\nexport default class WmCarousel extends BaseComponent<WmCarouselProps, WmCarouselState, WmCarouselStyles> {\n\n  carouselRef: Carousel<unknown> | null = null as any;\n  noOfSlides: number = 0;\n  stopPlay: Function = null as any;\n\n  constructor(props: WmCarouselProps) {\n    super(props, DEFAULT_CLASS, new WmCarouselProps(), new WmCarouselState());\n    this.cleanup.push(() => {\n      this.stopPlay && this.stopPlay();\n    })\n  }\n\n  autoPlay() {\n    const props = this.state.props;\n    this.stopPlay && this.stopPlay();\n    if (props.animation && props.animationinterval) {\n      const intervalId = setInterval(() => {\n        this.next();\n      }, props.animationinterval * 1000);\n      this.stopPlay = () => clearInterval(intervalId);\n    }\n  }\n\n  onPropertyChange(name: string, $new: any, $old: any): void {\n      super.onPropertyChange(name, $new, $old);\n      switch (name) {\n        case 'animation':\n        case 'animationinterval' : {\n          this.autoPlay();\n        }\n      }\n  }\n\n  onSlideChange = (index: number) => {\n    const prevIndex = this.state.activeIndex;\n    this.updateState({\n      activeIndex: index\n    } as WmCarouselState,\n    () => this.invokeEventCallback('onChange', [this, index, prevIndex]));\n  }\n\n  renderItem = (data: any) => {\n    const props = this.state.props;\n    if (props.type === 'dynamic') {\n      return props.renderSlide ? props.renderSlide(data.item, data.index) : null;\n    }\n    return props.children[data.index];\n  }\n\n  onLayoutChange = (e: LayoutChangeEvent) => {\n    this.updateState({\n      sliderWidth: e.nativeEvent.layout.width\n    } as WmCarouselState);\n  }\n\n  getDotElement = ({active, index}: {active: boolean, index: number}) => {\n    return (<Text style={active ? this.styles.activeDotStyle: this.styles.dotStyle}>{index}</Text>);\n  }\n\n  renderPagination(props: WmCarouselProps, styles: WmCarouselStyles) {\n    return (\n        <Pagination\n          carouselRef={this.carouselRef as any}\n          dotsLength={this.noOfSlides}\n          activeDotIndex={this.state.activeIndex}\n          containerStyle={styles.dotsWrapperStyle}\n          dotStyle={styles.activeDotStyle}\n          inactiveDotStyle={styles.dotStyle}\n          inactiveDotScale={0.8}\n          tappableDots={true}\n        />\n    );\n  }\n\n  next = () => {\n    if (this.carouselRef && this.carouselRef.currentIndex < this.noOfSlides - 1) {\n      this.carouselRef?.snapToNext();\n    } else {\n      this.carouselRef?.snapToItem(0);\n    }\n  }\n\n  prev = () => {\n    if (this.carouselRef && this.carouselRef.currentIndex > 0) {\n      this.carouselRef?.snapToPrev();\n    } else {\n      this.carouselRef?.snapToItem(this.noOfSlides - 1);\n    }\n  }\n\n  renderWidget(props: WmCarouselProps) {\n    const hasNavs = props.controls === 'both' || props.controls ==='navs';\n    const hasDots = props.controls === 'both' || props.controls ==='indicators';\n    let styles = this.styles;\n    const data = props.type === 'dynamic' ? props.dataset : props.children;\n    this.noOfSlides = data?.length || 0;\n    const autoPlay = props.animation === 'auto';\n    // TODO: loop prop on Carousel is not working Refer: https://github.com/meliorence/react-native-snap-carousel/issues/608\n    return (\n      <View style={styles.root} onLayout={this.onLayoutChange}>\n        {this._background}\n        {this.state.sliderWidth > 0 ?\n          (<Carousel\n            ref={ref => this.carouselRef = ref}\n            data={data || []}\n            firstItem={0}\n            style={{width: '100%', height: '100%'}}\n            enableSnap={true}\n            loopClonesPerSide={1}\n            autoplay={false}\n            activeSlideAlignment='start'\n            renderItem={this.renderItem}\n            sliderWidth={this.state.sliderWidth}\n            itemWidth={this.state.sliderWidth}\n            lockScrollWhileSnapping={false}\n            scrollEnabled={false}\n            onSnapToItem={this.onSlideChange}\n          ></Carousel>) : null}\n        {hasNavs ? (\n          <View style={styles.btnPanel}>\n            <WmIcon\n              iconclass=\"wi wi-chevron-left fa-2x\"\n              styles={styles.prevBtn}\n              onTap={this.prev}/>\n            <WmIcon\n              iconclass=\"wi wi-chevron-right fa-2x\"\n              styles={styles.nextBtn}\n              onTap={this.next}/>\n          </View>): null}\n        {this.state.sliderWidth > 0 && hasDots && data ? this.renderPagination(props, styles) : null}\n      </View>);\n  }\n}\n"],"mappings":"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"}

app-rn-runtime/components/advanced/carousel/carousel.props.js

@@ -11,10 +11,7 @@ export default class WmCarouselProps extends BaseProps {
     _defineProperty(this, "animationinterval", 3);
     _defineProperty(this, "controls", 'both');
     _defineProperty(this, "children", null);
-    _defineProperty(this, "itemkey", null);
     _defineProperty(this, "renderSlide", void 0);
-    _defineProperty(this, "enablegestures", true);
-    _defineProperty(this, "maxnoofdots", 20);
   }
 }
 //# sourceMappingURL=carousel.props.js.map

app-rn-runtime/components/advanced/carousel/carousel.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmCarouselProps","constructor","arguments","_defineProperty"],"sources":["carousel.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport React from 'react';\n\nexport default class WmCarouselProps extends BaseProps {\n  dataset: any = null;\n  type?: 'static' | 'dynamic' = 'static';\n  animation?: 'auto' | 'none' = 'auto';\n  animationinterval?: number = 3;\n  controls?: 'both' | 'none' | 'navs' | 'indicators' = 'both';\n  children? = null as any;\n  itemkey?: ($item: any, $index: any) => any = null as any;\n  renderSlide?: ($item: any, $index: number) => React.ReactNode;\n  enablegestures  = true;\n  maxnoofdots = 20;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAGzE,eAAe,MAAMC,eAAe,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,kBACtC,IAAI;IAAAA,eAAA,eACW,QAAQ;IAAAA,eAAA,oBACR,MAAM;IAAAA,eAAA,4BACP,CAAC;IAAAA,eAAA,mBACuB,MAAM;IAAAA,eAAA,mBAC/C,IAAI;IAAAA,eAAA,kBAC6B,IAAI;IAAAA,eAAA;IAAAA,eAAA,yBAE/B,IAAI;IAAAA,eAAA,sBACR,EAAE;EAAA;AAClB"}
+{"version":3,"names":["BaseProps","WmCarouselProps","constructor","arguments","_defineProperty"],"sources":["carousel.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport React from 'react';\n\nexport default class WmCarouselProps extends BaseProps {\n  dataset: any = null;\n  type?: 'static' | 'dynamic' = 'static';\n  animation?: string = 'auto';\n  animationinterval?: number = 3;\n  controls?: 'both' | 'none' | 'navs' | 'indicators' = 'both';\n  children? = null as any;\n  renderSlide?: ($item: any, $index: number) => React.ReactNode;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAGzE,eAAe,MAAMC,eAAe,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,kBACtC,IAAI;IAAAA,eAAA,eACW,QAAQ;IAAAA,eAAA,oBACjB,MAAM;IAAAA,eAAA,4BACE,CAAC;IAAAA,eAAA,mBACuB,MAAM;IAAAA,eAAA,mBAC/C,IAAI;IAAAA,eAAA;EAAA;AAElB"}

app-rn-runtime/components/advanced/carousel/carousel.styles.js

@@ -15,16 +15,6 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       position: 'relative'
     },
     text: {},
-    slide: {
-      width: '100%',
-      paddingHorizontal: 16,
-      transform: [{
-        translateX: 0
-      }]
-    },
-    firstSlide: {},
-    lastSlide: {},
-    activeSlide: {},
     btnPanel: {
       position: 'absolute',
       top: '50%',
@@ -63,23 +53,25 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
     },
     dotsWrapperStyle: {
       opacity: 1,
+      height: 64,
+      marginTop: -64,
+      position: 'absolute',
+      top: '100%',
       backgroundColor: themeVariables.carouselDotWrapperBgColor,
-      flexDirection: 'row',
-      justifyContent: 'center',
-      alignItems: 'center',
+      alignSelf: 'center',
       paddingTop: 4,
       paddingBottom: 4
     },
     activeDotStyle: {
+      width: 12,
+      height: 12,
+      borderRadius: 10,
       backgroundColor: themeVariables.carouselActiveDotColor,
       opacity: 1
     },
     dotStyle: {
-      width: 8,
-      height: 8,
-      borderRadius: 10,
       opacity: 0.2,
-      marginHorizontal: 2,
+      marginHorizontal: -2,
       backgroundColor: themeVariables.carouselDotColor
     }
   });

app-rn-runtime/components/advanced/carousel/carousel.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","btn","height","width","borderRadius","borderColor","transparent","borderWidth","justifyContent","defaultStyles","root","position","text","slide","paddingHorizontal","transform","translateX","firstSlide","lastSlide","activeSlide","btnPanel","top","marginTop","flexDirection","alignItems","prevBtn","marginLeft","backgroundColor","carouselPrevBgColor","fontSize","icon","color","carouselPrevBtnColor","nextBtn","marginRight","carouselNextBtnColor","dotsWrapperStyle","opacity","carouselDotWrapperBgColor","paddingTop","paddingBottom","activeDotStyle","carouselActiveDotColor","dotStyle","marginHorizontal","carouselDotColor","rotateY","defaultColorF","right","padding","alignSelf","primaryColor"],"sources":["carousel.styles.ts"],"sourcesContent":["import { ViewStyle } from 'react-native';\nimport BASE_THEME, { AllStyle } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmIconStyles } from '@wavemaker/app-rn-runtime/components/basic/icon/icon.styles';\n\nexport type WmCarouselStyles = BaseStyles & {\n    btnPanel: AllStyle,\n    prevBtn: WmIconStyles,\n    slide: AllStyle,\n    firstSlide: AllStyle,\n    lastSlide: AllStyle,\n    activeSlide: AllStyle,\n    nextBtn: WmIconStyles,\n    dotsWrapperStyle: AllStyle,\n    dotStyle: AllStyle,\n    activeDotStyle: AllStyle\n};\nexport const DEFAULT_CLASS = 'app-carousel';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const btn: ViewStyle = {\n        height: 48,\n        width: 48,\n        borderRadius: 48,\n        borderColor: themeVariables.transparent,\n        borderWidth: 1,\n        justifyContent: 'center'\n    };\n    const defaultStyles: WmCarouselStyles = defineStyles({\n        root: {\n            position: 'relative'\n        },\n        text: {},\n        slide: {\n            width: '100%',\n            paddingHorizontal: 16,\n            transform: [\n                {\n                    translateX: 0\n                }\n            ]\n        },\n        firstSlide: {},\n        lastSlide: {},\n        activeSlide: {},\n        btnPanel: {\n            position: 'absolute',\n            top: '50%',\n            marginTop: -64,\n            height: 64,\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            width: '100%'\n        },\n        prevBtn : {\n            root: {\n                marginLeft: 12,\n                ...btn,\n                backgroundColor: themeVariables.carouselPrevBgColor\n            },\n            text: {\n                fontSize: 32\n            },\n            icon : {\n                color: themeVariables.carouselPrevBtnColor\n            }\n        } as WmIconStyles,\n        nextBtn : {\n            root: {\n                marginRight: 12,\n                ...btn,\n                backgroundColor: themeVariables.carouselPrevBgColor\n            },\n            text: {\n                fontSize: 32\n            },\n            icon : {\n                color: themeVariables.carouselNextBtnColor\n            }\n        } as WmIconStyles,\n        dotsWrapperStyle:{\n            opacity: 1,\n            backgroundColor: themeVariables.carouselDotWrapperBgColor,\n            flexDirection: 'row',\n            justifyContent: 'center',\n            alignItems: 'center',\n            paddingTop: 4,\n            paddingBottom: 4\n        },\n        activeDotStyle: {\n            backgroundColor: themeVariables.carouselActiveDotColor,\n            opacity: 1\n        },\n        dotStyle: {\n            width: 8,\n            height: 8,\n            borderRadius: 10,\n            opacity: 0.2,\n            marginHorizontal: 2,\n            backgroundColor: themeVariables.carouselDotColor\n        }\n    } as WmCarouselStyles);\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle(DEFAULT_CLASS + '-rtl', '', {\n        prevBtn : {\n            root:{\n                transform: [{rotateY: '180deg'}]\n            }\n        },\n        nextBtn : {\n            root:{\n                transform: [{rotateY: '180deg'}]\n            }\n        }\n    });\n\n    addStyle('app-carousel-1', '', {\n        btnPanel: {\n            top: '100%'\n        },\n        prevBtn: {\n            root: {\n                borderRadius: 6\n            }\n        },\n        nextBtn: {\n            root: {\n                borderRadius: 6\n            }\n        }\n    } as any as WmCarouselStyles);\n\n    addStyle('app-carousel-2', '', {\n        btnPanel: {\n            backgroundColor: themeVariables.defaultColorF,\n            width: '100%',\n            top: '100%',\n            right: 0,\n            padding: 8,\n            justifyContent: 'flex-end'\n        },\n        dotsWrapperStyle:{\n            alignSelf: 'flex-start',\n            justifyContent: 'flex-start'\n        },\n        activeDotStyle: {\n            backgroundColor: themeVariables.primaryColor,\n        },\n        dotStyle: {\n            backgroundColor: themeVariables.primaryColor,\n        },\n        prevBtn: {\n            root: {\n                backgroundColor: 'rgba(255, 255, 255, 0.1)',\n                borderColor: themeVariables.primaryColor,\n            },\n            icon : {\n                color: themeVariables.primaryColor\n            }\n        },\n        nextBtn: {\n            root: {\n                marginLeft: 8,\n                backgroundColor: 'rgba(255, 255, 255, 0.1)',\n                borderColor: themeVariables.primaryColor,\n            },\n            icon : {\n                color: themeVariables.primaryColor\n            }\n        }\n    } as any as WmCarouselStyles);\n});"],"mappings":"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"}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","btn","height","width","borderRadius","borderColor","transparent","borderWidth","justifyContent","defaultStyles","root","position","text","btnPanel","top","marginTop","flexDirection","alignItems","prevBtn","marginLeft","backgroundColor","carouselPrevBgColor","fontSize","icon","color","carouselPrevBtnColor","nextBtn","marginRight","carouselNextBtnColor","dotsWrapperStyle","opacity","carouselDotWrapperBgColor","alignSelf","paddingTop","paddingBottom","activeDotStyle","carouselActiveDotColor","dotStyle","marginHorizontal","carouselDotColor","transform","rotateY","defaultColorF","right","padding","primaryColor"],"sources":["carousel.styles.ts"],"sourcesContent":["import { ViewStyle } from 'react-native';\nimport BASE_THEME, { AllStyle } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmIconStyles } from '@wavemaker/app-rn-runtime/components/basic/icon/icon.styles';\n\nexport type WmCarouselStyles = BaseStyles & {\n    btnPanel: AllStyle,\n    prevBtn: WmIconStyles,\n    nextBtn: WmIconStyles,\n    dotsWrapperStyle: AllStyle,\n    dotStyle: AllStyle,\n    activeDotStyle: AllStyle\n};\nexport const DEFAULT_CLASS = 'app-carousel';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const btn: ViewStyle = {\n        height: 48,\n        width: 48,\n        borderRadius: 48,\n        borderColor: themeVariables.transparent,\n        borderWidth: 1,\n        justifyContent: 'center'\n    };\n    const defaultStyles: WmCarouselStyles = defineStyles({\n        root: {\n            position: 'relative'\n        },\n        text: {},\n        btnPanel: {\n            position: 'absolute',\n            top: '50%',\n            marginTop: -64,\n            height: 64,\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            width: '100%'\n        },\n        prevBtn : {\n            root: {\n                marginLeft: 12,\n                ...btn,\n                backgroundColor: themeVariables.carouselPrevBgColor\n            },\n            text: {\n                fontSize: 32\n            },\n            icon : {\n                color: themeVariables.carouselPrevBtnColor\n            }\n        } as WmIconStyles,\n        nextBtn : {\n            root: {\n                marginRight: 12,\n                ...btn,\n                backgroundColor: themeVariables.carouselPrevBgColor\n            },\n            text: {\n                fontSize: 32\n            },\n            icon : {\n                color: themeVariables.carouselNextBtnColor\n            }\n        } as WmIconStyles,\n        dotsWrapperStyle:{\n            opacity: 1,\n            height: 64,\n            marginTop: -64,\n            position: 'absolute',\n            top: '100%',\n            backgroundColor: themeVariables.carouselDotWrapperBgColor,\n            alignSelf: 'center',\n            paddingTop: 4,\n            paddingBottom: 4\n        },\n        activeDotStyle: {\n            width: 12,\n            height: 12,\n            borderRadius: 10,\n            backgroundColor: themeVariables.carouselActiveDotColor,\n            opacity: 1\n        },\n        dotStyle: {\n            opacity: 0.2,\n            marginHorizontal: -2,\n            backgroundColor: themeVariables.carouselDotColor\n        }\n    } as WmCarouselStyles);\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle(DEFAULT_CLASS + '-rtl', '', {\n        prevBtn : {\n            root:{\n                transform: [{rotateY: '180deg'}]\n            }\n        },\n        nextBtn : {\n            root:{\n                transform: [{rotateY: '180deg'}]\n            }\n        }\n    });\n\n    addStyle('app-carousel-1', '', {\n        btnPanel: {\n            top: '100%'\n        },\n        prevBtn: {\n            root: {\n                borderRadius: 6\n            }\n        },\n        nextBtn: {\n            root: {\n                borderRadius: 6\n            }\n        }\n    } as any as WmCarouselStyles);\n\n    addStyle('app-carousel-2', '', {\n        btnPanel: {\n            backgroundColor: themeVariables.defaultColorF,\n            width: '100%',\n            top: '100%',\n            right: 0,\n            padding: 8,\n            justifyContent: 'flex-end'\n        },\n        dotsWrapperStyle:{\n            alignSelf: 'flex-start',\n            justifyContent: 'flex-start'\n        },\n        activeDotStyle: {\n            backgroundColor: themeVariables.primaryColor,\n        },\n        dotStyle: {\n            backgroundColor: themeVariables.primaryColor,\n        },\n        prevBtn: {\n            root: {\n                backgroundColor: 'rgba(255, 255, 255, 0.1)',\n                borderColor: themeVariables.primaryColor,\n            },\n            icon : {\n                color: themeVariables.primaryColor\n            }\n        },\n        nextBtn: {\n            root: {\n                marginLeft: 8,\n                backgroundColor: 'rgba(255, 255, 255, 0.1)',\n                borderColor: themeVariables.primaryColor,\n            },\n            icon : {\n                color: themeVariables.primaryColor\n            }\n        }\n    } as any as WmCarouselStyles);\n});"],"mappings":"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"}

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

@@ -44,9 +44,9 @@ export default class WmButton extends BaseComponent {
       style: [this.styles.content, {
         flexDirection: props.iconposition === 'top' ? 'column' : 'row'
       }]
-    }, props.iconposition === 'top' && this.prepareIcon(props), props.iconposition === 'left' && this.prepareIcon(props), props.caption ? /*#__PURE__*/React.createElement(Text, {
+    }, props.iconposition === 'top' && this.prepareIcon(props), props.iconposition === 'left' && this.prepareIcon(props), /*#__PURE__*/React.createElement(Text, {
       style: this.styles.text
-    }, props.caption) : null, props.iconposition === 'right' && this.prepareIcon(props), props.badgevalue && this.prepareBadge(props))));
+    }, props.caption), props.iconposition === 'right' && this.prepareIcon(props), props.badgevalue && this.prepareBadge(props))));
   }
 }
 //# sourceMappingURL=button.component.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","BaseComponent","BaseComponentState","Tappable","Badge","WmButtonProps","DEFAULT_CLASS","WmIcon","Animatedview","createSkeleton","WmButtonState","WmButton","constructor","props","prepareIcon","createElement","styles","icon","name","iconclass","iconsize","prepareBadge","style","badge","badgevalue","renderSkeleton","prop","theme","skeleton","root","width","skeletonwidth","height","skeletonheight","renderWidget","entryanimation","animation","_background","target","content","flexDirection","iconposition","caption","text"],"sources":["button.component.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Text, View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\nimport { Badge } from 'react-native-paper';\n\nimport WmButtonProps from './button.props';\nimport { DEFAULT_CLASS, WmButtonStyles } from './button.styles';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\nimport { createSkeleton } from '../skeleton/skeleton.component';\n\nexport class WmButtonState extends BaseComponentState<WmButtonProps> {\n\n}\n\nexport default class WmButton extends BaseComponent<WmButtonProps, WmButtonState, WmButtonStyles> {\n\n  constructor(props: WmButtonProps) {\n    super(props, DEFAULT_CLASS, new WmButtonProps());\n  }\n\n  private prepareIcon(props: any) {\n    return (<WmIcon\n      styles={this.styles.icon} name={props.name + '_icon'} iconclass={props.iconclass} iconsize={props.iconsize}></WmIcon>);\n  }\n\n  private prepareBadge(props: any) {\n    //@ts-ignore\n    return (<Badge style={this.styles.badge}>{props.badgevalue}</Badge>);\n  }\n\n  public renderSkeleton(prop: WmButtonProps) {\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n      width: (this.props.skeletonwidth || this.styles.root.width)as DimensionValue,\n      height: (this.props.skeletonheight || this.styles.root.height) as DimensionValue\n    });\n  }\n\n  renderWidget(props: WmButtonProps) {\n    return (\n      <Animatedview entryanimation={props.animation} style={this.styles.root}>\n        {this._background}\n        <Tappable target={this}>\n          <View style={[this.styles.content, {flexDirection: props.iconposition === 'top' ? 'column': 'row'}]}>\n            {props.iconposition === 'top' && this.prepareIcon(props)}\n            {props.iconposition === 'left' && this.prepareIcon(props)}\n            {props.caption ? (<Text style={this.styles.text}>{props.caption}</Text>): null}\n            {props.iconposition === 'right' && this.prepareIcon(props)}\n            {props.badgevalue && this.prepareBadge(props)}\n          </View>\n        </Tappable>\n      </Animatedview>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","Text","View","BaseComponent","BaseComponentState","Tappable","Badge","WmButtonProps","DEFAULT_CLASS","WmIcon","Animatedview","createSkeleton","WmButtonState","WmButton","constructor","props","prepareIcon","createElement","styles","icon","name","iconclass","iconsize","prepareBadge","style","badge","badgevalue","renderSkeleton","prop","theme","skeleton","root","width","skeletonwidth","height","skeletonheight","renderWidget","entryanimation","animation","_background","target","content","flexDirection","iconposition","text","caption"],"sources":["button.component.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Text, View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\nimport { Badge } from 'react-native-paper';\n\nimport WmButtonProps from './button.props';\nimport { DEFAULT_CLASS, WmButtonStyles } from './button.styles';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\nimport { createSkeleton } from '../skeleton/skeleton.component';\n\nexport class WmButtonState extends BaseComponentState<WmButtonProps> {\n\n}\n\nexport default class WmButton extends BaseComponent<WmButtonProps, WmButtonState, WmButtonStyles> {\n\n  constructor(props: WmButtonProps) {\n    super(props, DEFAULT_CLASS, new WmButtonProps());\n  }\n\n  private prepareIcon(props: any) {\n    return (<WmIcon\n      styles={this.styles.icon} name={props.name + '_icon'} iconclass={props.iconclass} iconsize={props.iconsize}></WmIcon>);\n  }\n\n  private prepareBadge(props: any) {\n    //@ts-ignore\n    return (<Badge style={this.styles.badge}>{props.badgevalue}</Badge>);\n  }\n\n  public renderSkeleton(prop: WmButtonProps) {\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...this.styles.root,\n      width: (this.props.skeletonwidth || this.styles.root.width)as DimensionValue,\n      height: (this.props.skeletonheight || this.styles.root.height) as DimensionValue\n    });\n  }\n\n  renderWidget(props: WmButtonProps) {\n    return (\n      <Animatedview entryanimation={props.animation} style={this.styles.root}>\n        {this._background}\n        <Tappable target={this}>\n          <View style={[this.styles.content, {flexDirection: props.iconposition === 'top' ? 'column': 'row'}]}>\n            {props.iconposition === 'top' && this.prepareIcon(props)}\n            {props.iconposition === 'left' && this.prepareIcon(props)}\n            <Text style={this.styles.text}>{props.caption}</Text>\n            {props.iconposition === 'right' && this.prepareIcon(props)}\n            {props.badgevalue && this.prepareBadge(props)}\n          </View>\n        </Tappable>\n      </Animatedview>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -133,14 +133,11 @@ export default class WmIcon extends BaseComponent {
         size: iconSize
       }, customIcon);
     } else if (props.show && iconDef) {
-      var _this$styles$icon;
       let WMCustomIcon = WavIcon;
       if (iconDef.isStreamlineLightIcon) {
         WMCustomIcon = StreamlineLightIcon;
       } else if (iconDef.isStreamlineRegularIcon) {
         WMCustomIcon = StreamlineRegularIcon;
-      } else if (!iconDef.isWavIcon && !((_this$styles$icon = this.styles.icon) !== null && _this$styles$icon !== void 0 && _this$styles$icon.fontFamily)) {
-        return null;
       }
       //@ts-ignore type information is not matching
       icon = WMCustomIcon ? /*#__PURE__*/React.createElement(WMCustomIcon, {