@wavemaker/app-rn-runtime 12.0.0-next.45752 → 12.0.0-next.46502

app-rn-runtime/components/page/content/content.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","DEFAULT_CLASS","WmContentState","WmContent","constructor","props","renderWidget","createElement","style","styles","root","_background","children"],"sources":["content.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 WmContentProps from './content.props';\nimport { DEFAULT_CLASS, WmContentStyles } from './content.styles';\n\nexport class WmContentState extends BaseComponentState<WmContentProps> {\n\n}\n\nexport default class WmContent extends BaseComponent<WmContentProps, WmContentState, WmContentStyles> {\n\n  constructor(props: WmContentProps) {\n    super(props, DEFAULT_CLASS, );\n  }\n\n  renderWidget(props: WmContentProps) {\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        {props.children}\n      </View>\n    ); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAGjG,SAASC,aAAa,QAAyB,kBAAkB;AAEjE,OAAO,MAAMC,cAAc,SAASF,kBAAkB,CAAiB;AAIvE,eAAe,MAAMG,SAAS,SAASJ,aAAa,CAAkD;EAEpGK,WAAWA,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEJ,aAAe,CAAC;EAC/B;EAEAK,YAAYA,CAACD,KAAqB,EAAE;IAClC,oBACER,KAAA,CAAAU,aAAA,CAACT,IAAI;MAACU,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAC3B,IAAI,CAACC,WAAW,EAChBN,KAAK,CAACO,QACH,CAAC;EAEX;AACF","ignoreList":[]}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","DEFAULT_CLASS","WmContentState","WmContent","constructor","props","renderWidget","createElement","style","styles","root","_background","children"],"sources":["content.component.tsx"],"sourcesContent":["import React from 'react';\nimport { KeyboardAvoidingView, Platform, View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context';\n\nimport WmContentProps from './content.props';\nimport { DEFAULT_CLASS, WmContentStyles } from './content.styles';\n\nexport class WmContentState extends BaseComponentState<WmContentProps> {\n\n}\n\nexport default class WmContent extends BaseComponent<WmContentProps, WmContentState, WmContentStyles> {\n\n  constructor(props: WmContentProps) {\n    super(props, DEFAULT_CLASS, );\n  }\n  \n  renderWidget(props: WmContentProps) {\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        {props.children}\n      </View>\n    ); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAyCC,IAAI,QAAQ,cAAc;AACnE,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAIjG,SAASC,aAAa,QAAyB,kBAAkB;AAEjE,OAAO,MAAMC,cAAc,SAASF,kBAAkB,CAAiB;AAIvE,eAAe,MAAMG,SAAS,SAASJ,aAAa,CAAkD;EAEpGK,WAAWA,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEJ,aAAe,CAAC;EAC/B;EAEAK,YAAYA,CAACD,KAAqB,EAAE;IAClC,oBACER,KAAA,CAAAU,aAAA,CAACT,IAAI;MAACU,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAC3B,IAAI,CAACC,WAAW,EAChBN,KAAK,CAACO,QACH,CAAC;EAEX;AACF","ignoreList":[]}

app-rn-runtime/components/page/left-panel/left-panel.component.js

@@ -38,7 +38,10 @@ export default class WmLeftPanel extends BaseComponent {
         this.notify('scroll', [event]);
       },
       scrollEventThrottle: 48,
-      contentContainerStyle: this.styles.root
+      contentContainerStyle: [this.styles.root, {
+        width: "100%",
+        maxWidth: "100%"
+      }]
     }, this._background, this.renderContent(props));
   }
 }

app-rn-runtime/components/page/left-panel/left-panel.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","BaseComponent","BaseComponentState","WmLeftPanelProps","DEFAULT_CLASS","ScrollView","WmLeftPanelState","constructor","args","_defineProperty","WmLeftPanel","props","onPartialLoad","invokeEventCallback","renderContent","renderPartial","state","isPartialLoaded","setTimeout","updateState","bind","children","renderWidget","createElement","onScroll","event","notify","scrollEventThrottle","contentContainerStyle","styles","root","_background"],"sources":["left-panel.component.tsx"],"sourcesContent":["import React from 'react';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmLeftPanelProps from './left-panel.props';\nimport { DEFAULT_CLASS, WmLeftPanelStyles } from './left-panel.styles';\nimport { ScrollView } from 'react-native-gesture-handler';\n\nexport class WmLeftPanelState extends BaseComponentState<WmLeftPanelProps> {\n  isPartialLoaded = false;\n}\n\nexport default class WmLeftPanel extends BaseComponent<WmLeftPanelProps, WmLeftPanelState, WmLeftPanelStyles> {\n\n  constructor(props: WmLeftPanelProps) {\n    super(props, DEFAULT_CLASS, new WmLeftPanelProps());\n  }\n\n  onPartialLoad() {\n    this.invokeEventCallback('onLoad', [null, this]);\n  }\n\n  renderContent(props: WmLeftPanelProps) {\n    if (props.renderPartial) {\n      if (!this.state.isPartialLoaded) {\n        setTimeout(() => {\n          this.updateState({\n            isPartialLoaded: true\n          } as WmLeftPanelState);\n        });\n      }\n      return props.renderPartial(props, this.onPartialLoad.bind(this));\n    }\n    return props.children;\n  }\n\n  renderWidget(props: WmLeftPanelProps) {\n    return (\n      <ScrollView \n        onScroll={(event) => {this.notify('scroll', [event])}}\n        scrollEventThrottle={48}\n        contentContainerStyle={this.styles.root}>\n        {this._background}\n        {this.renderContent(props)}\n      </ScrollView>\n    );\n  }\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,SAASC,aAAa,QAA2B,qBAAqB;AACtE,SAASC,UAAU,QAAQ,8BAA8B;AAEzD,OAAO,MAAMC,gBAAgB,SAASJ,kBAAkB,CAAmB;EAAAK,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,0BACvD,KAAK;EAAA;AACzB;AAEA,eAAe,MAAMC,WAAW,SAAST,aAAa,CAAwD;EAE5GM,WAAWA,CAACI,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,EAAEP,aAAa,EAAE,IAAID,gBAAgB,CAAC,CAAC,CAAC;EACrD;EAEAS,aAAaA,CAAA,EAAG;IACd,IAAI,CAACC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;EAClD;EAEAC,aAAaA,CAACH,KAAuB,EAAE;IACrC,IAAIA,KAAK,CAACI,aAAa,EAAE;MACvB,IAAI,CAAC,IAAI,CAACC,KAAK,CAACC,eAAe,EAAE;QAC/BC,UAAU,CAAC,MAAM;UACf,IAAI,CAACC,WAAW,CAAC;YACfF,eAAe,EAAE;UACnB,CAAqB,CAAC;QACxB,CAAC,CAAC;MACJ;MACA,OAAON,KAAK,CAACI,aAAa,CAACJ,KAAK,EAAE,IAAI,CAACC,aAAa,CAACQ,IAAI,CAAC,IAAI,CAAC,CAAC;IAClE;IACA,OAAOT,KAAK,CAACU,QAAQ;EACvB;EAEAC,YAAYA,CAACX,KAAuB,EAAE;IACpC,oBACEX,KAAA,CAAAuB,aAAA,CAAClB,UAAU;MACTmB,QAAQ,EAAGC,KAAK,IAAK;QAAC,IAAI,CAACC,MAAM,CAAC,QAAQ,EAAE,CAACD,KAAK,CAAC,CAAC;MAAA,CAAE;MACtDE,mBAAmB,EAAE,EAAG;MACxBC,qBAAqB,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GACvC,IAAI,CAACC,WAAW,EAChB,IAAI,CAACjB,aAAa,CAACH,KAAK,CACf,CAAC;EAEjB;AACF","ignoreList":[]}
+{"version":3,"names":["React","BaseComponent","BaseComponentState","WmLeftPanelProps","DEFAULT_CLASS","ScrollView","WmLeftPanelState","constructor","args","_defineProperty","WmLeftPanel","props","onPartialLoad","invokeEventCallback","renderContent","renderPartial","state","isPartialLoaded","setTimeout","updateState","bind","children","renderWidget","createElement","onScroll","event","notify","scrollEventThrottle","contentContainerStyle","styles","root","width","maxWidth","_background"],"sources":["left-panel.component.tsx"],"sourcesContent":["import React from 'react';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmLeftPanelProps from './left-panel.props';\nimport { DEFAULT_CLASS, WmLeftPanelStyles } from './left-panel.styles';\nimport { ScrollView } from 'react-native-gesture-handler';\n\nexport class WmLeftPanelState extends BaseComponentState<WmLeftPanelProps> {\n  isPartialLoaded = false;\n}\n\nexport default class WmLeftPanel extends BaseComponent<WmLeftPanelProps, WmLeftPanelState, WmLeftPanelStyles> {\n\n  constructor(props: WmLeftPanelProps) {\n    super(props, DEFAULT_CLASS, new WmLeftPanelProps());\n  }\n\n  onPartialLoad() {\n    this.invokeEventCallback('onLoad', [null, this]);\n  }\n\n  renderContent(props: WmLeftPanelProps) {\n    if (props.renderPartial) {\n      if (!this.state.isPartialLoaded) {\n        setTimeout(() => {\n          this.updateState({\n            isPartialLoaded: true\n          } as WmLeftPanelState);\n        });\n      }\n      return props.renderPartial(props, this.onPartialLoad.bind(this));\n    }\n    return props.children;\n  }\n\n  renderWidget(props: WmLeftPanelProps) {\n    return (\n      <ScrollView \n        onScroll={(event) => {this.notify('scroll', [event])}}\n        scrollEventThrottle={48}\n        contentContainerStyle={[this.styles.root, {width: \"100%\", maxWidth: \"100%\"}]}>\n        {this._background}\n        {this.renderContent(props)}\n      </ScrollView>\n    );\n  }\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,SAASC,aAAa,QAA2B,qBAAqB;AACtE,SAASC,UAAU,QAAQ,8BAA8B;AAEzD,OAAO,MAAMC,gBAAgB,SAASJ,kBAAkB,CAAmB;EAAAK,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,0BACvD,KAAK;EAAA;AACzB;AAEA,eAAe,MAAMC,WAAW,SAAST,aAAa,CAAwD;EAE5GM,WAAWA,CAACI,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,EAAEP,aAAa,EAAE,IAAID,gBAAgB,CAAC,CAAC,CAAC;EACrD;EAEAS,aAAaA,CAAA,EAAG;IACd,IAAI,CAACC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;EAClD;EAEAC,aAAaA,CAACH,KAAuB,EAAE;IACrC,IAAIA,KAAK,CAACI,aAAa,EAAE;MACvB,IAAI,CAAC,IAAI,CAACC,KAAK,CAACC,eAAe,EAAE;QAC/BC,UAAU,CAAC,MAAM;UACf,IAAI,CAACC,WAAW,CAAC;YACfF,eAAe,EAAE;UACnB,CAAqB,CAAC;QACxB,CAAC,CAAC;MACJ;MACA,OAAON,KAAK,CAACI,aAAa,CAACJ,KAAK,EAAE,IAAI,CAACC,aAAa,CAACQ,IAAI,CAAC,IAAI,CAAC,CAAC;IAClE;IACA,OAAOT,KAAK,CAACU,QAAQ;EACvB;EAEAC,YAAYA,CAACX,KAAuB,EAAE;IACpC,oBACEX,KAAA,CAAAuB,aAAA,CAAClB,UAAU;MACTmB,QAAQ,EAAGC,KAAK,IAAK;QAAC,IAAI,CAACC,MAAM,CAAC,QAAQ,EAAE,CAACD,KAAK,CAAC,CAAC;MAAA,CAAE;MACtDE,mBAAmB,EAAE,EAAG;MACxBC,qBAAqB,EAAE,CAAC,IAAI,CAACC,MAAM,CAACC,IAAI,EAAE;QAACC,KAAK,EAAE,MAAM;QAAEC,QAAQ,EAAE;MAAM,CAAC;IAAE,GAC5E,IAAI,CAACC,WAAW,EAChB,IAAI,CAACnB,aAAa,CAACH,KAAK,CACf,CAAC;EAEjB;AACF","ignoreList":[]}

app-rn-runtime/components/page/page-content/page-content.component.js

@@ -1,37 +1,93 @@
 import React from 'react';
-import { View } from 'react-native';
+import { KeyboardAvoidingView, Platform, View } from 'react-native';
 import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
 import { HideMode } from '@wavemaker/app-rn-runtime/core/if.component';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
 import WmPageContentProps from './page-content.props';
 import { DEFAULT_CLASS } from './page-content.styles';
 import { ScrollView } from 'react-native-gesture-handler';
+import WmLottie from '@wavemaker/app-rn-runtime/components/basic/lottie/lottie.component';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 export class WmPageContentState extends BaseComponentState {}
 export default class WmPageContent extends BaseComponent {
   constructor(props) {
     super(props, DEFAULT_CLASS, new WmPageContentProps());
     this.hideMode = HideMode.DONOT_ADD_TO_DOM;
   }
+  renderSkeleton(props) {
+    if (this.props.skeletonanimationresource) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: [{
+          width: '100%'
+        }, this.styles.root]
+      }, /*#__PURE__*/React.createElement(WmLottie, {
+        styles: {
+          content: {
+            ...this.styles.root,
+            ...this.styles.skeleton.root
+          }
+        },
+        source: this.props.skeletonanimationresource,
+        loop: true,
+        autoplay: true,
+        speed: this.props.skeletonanimationspeed
+      }));
+    }
+    return null;
+  }
   renderWidget(props) {
     const showScrollbar = this.styles.root.scrollbarColor != 'transparent';
+    //     return ((props.scrollable || isWebPreviewMode()) && !this._showSkeleton) ? (
     return props.scrollable || isWebPreviewMode() ? /*#__PURE__*/React.createElement(View, {
       style: {
         height: '100%',
         width: '100%',
-        backgroundColor: this.styles.root.backgroundColor
+        backgroundColor: this._showSkeleton && this.styles.skeleton.root.backgroundColor ? this.styles.skeleton.root.backgroundColor : this.styles.root.backgroundColor
       }
-    }, this._background, /*#__PURE__*/React.createElement(ScrollView, {
-      contentContainerStyle: [this.styles.root, {
-        backgroundColor: 'transparent'
-      }],
-      showsVerticalScrollIndicator: showScrollbar,
-      onScroll: event => {
-        this.notify('scroll', [event]);
-      },
-      scrollEventThrottle: 48
-    }, props.children)) : /*#__PURE__*/React.createElement(View, {
-      style: this.styles.root
-    }, this._background, props.children);
+    }, this._background, /*#__PURE__*/React.createElement(SafeAreaInsetsContext.Consumer, null, (insets = {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }) => {
+      const keyboardOffset = (insets === null || insets === void 0 ? void 0 : insets.bottom) || 0;
+      const verticalOffset = Platform.OS === 'ios' ? keyboardOffset + 100 : keyboardOffset;
+      return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+        behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+        keyboardVerticalOffset: verticalOffset,
+        style: {
+          flex: 1
+        }
+      }, /*#__PURE__*/React.createElement(ScrollView, {
+        contentContainerStyle: [this.styles.root, {
+          backgroundColor: 'transparent'
+        }],
+        showsVerticalScrollIndicator: showScrollbar,
+        onScroll: event => {
+          this.notify('scroll', [event]);
+        },
+        scrollEventThrottle: 48
+      }, props.children));
+    })) : /*#__PURE__*/React.createElement(View, {
+      style: [this.styles.root, {
+        backgroundColor: this._showSkeleton ? this.styles.skeleton.root.backgroundColor : this.styles.root.backgroundColor
+      }]
+    }, /*#__PURE__*/React.createElement(SafeAreaInsetsContext.Consumer, null, (insets = {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }) => {
+      const keyboardOffset = (insets === null || insets === void 0 ? void 0 : insets.bottom) || 0;
+      const verticalOffset = Platform.OS === 'ios' ? keyboardOffset + 100 : keyboardOffset;
+      return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+        behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+        keyboardVerticalOffset: verticalOffset,
+        style: {
+          flex: 1
+        }
+      }, this._background, props.children);
+    }));
   }
 }
 //# sourceMappingURL=page-content.component.js.map

app-rn-runtime/components/page/page-content/page-content.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","isWebPreviewMode","HideMode","BaseComponent","BaseComponentState","WmPageContentProps","DEFAULT_CLASS","ScrollView","WmPageContentState","WmPageContent","constructor","props","hideMode","DONOT_ADD_TO_DOM","renderWidget","showScrollbar","styles","root","scrollbarColor","scrollable","createElement","style","height","width","backgroundColor","_background","contentContainerStyle","showsVerticalScrollIndicator","onScroll","event","notify","scrollEventThrottle","children"],"sources":["page-content.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\nimport { HideMode } from '@wavemaker/app-rn-runtime/core/if.component';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmPageContentProps from './page-content.props';\nimport { DEFAULT_CLASS, WmPageContentStyles } from './page-content.styles';\nimport { ScrollView } from 'react-native-gesture-handler';\n\nexport class WmPageContentState extends BaseComponentState<WmPageContentProps> {\n\n}\n\nexport default class WmPageContent extends BaseComponent<WmPageContentProps, WmPageContentState, WmPageContentStyles> {\n\n  constructor(props: WmPageContentProps) {\n    super(props, DEFAULT_CLASS, new WmPageContentProps());\n    this.hideMode = HideMode.DONOT_ADD_TO_DOM;\n  }\n\n  renderWidget(props: WmPageContentProps) {\n    const showScrollbar = (this.styles.root as any).scrollbarColor != 'transparent';\n    return props.scrollable || isWebPreviewMode() ? (\n      <View style={{height: '100%', width: '100%', backgroundColor: this.styles.root.backgroundColor}}>\n        {this._background}\n        <ScrollView contentContainerStyle={[this.styles.root, {backgroundColor: 'transparent'}]}\n          showsVerticalScrollIndicator={showScrollbar}\n          onScroll={(event) => {this.notify('scroll', [event])}}\n          scrollEventThrottle={48}>\n          {props.children}\n        </ScrollView>\n      </View>\n    ) : (\n      <View style={this.styles.root}>\n        {this._background}\n        {props.children}\n      </View>\n    ); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,gBAAgB,QAAQ,sCAAsC;AACvE,SAASC,QAAQ,QAAQ,6CAA6C;AACtE,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,SAASC,aAAa,QAA6B,uBAAuB;AAC1E,SAASC,UAAU,QAAQ,8BAA8B;AAEzD,OAAO,MAAMC,kBAAkB,SAASJ,kBAAkB,CAAqB;AAI/E,eAAe,MAAMK,aAAa,SAASN,aAAa,CAA8D;EAEpHO,WAAWA,CAACC,KAAyB,EAAE;IACrC,KAAK,CAACA,KAAK,EAAEL,aAAa,EAAE,IAAID,kBAAkB,CAAC,CAAC,CAAC;IACrD,IAAI,CAACO,QAAQ,GAAGV,QAAQ,CAACW,gBAAgB;EAC3C;EAEAC,YAAYA,CAACH,KAAyB,EAAE;IACtC,MAAMI,aAAa,GAAI,IAAI,CAACC,MAAM,CAACC,IAAI,CAASC,cAAc,IAAI,aAAa;IAC/E,OAAOP,KAAK,CAACQ,UAAU,IAAIlB,gBAAgB,CAAC,CAAC,gBAC3CF,KAAA,CAAAqB,aAAA,CAACpB,IAAI;MAACqB,KAAK,EAAE;QAACC,MAAM,EAAE,MAAM;QAAEC,KAAK,EAAE,MAAM;QAAEC,eAAe,EAAE,IAAI,CAACR,MAAM,CAACC,IAAI,CAACO;MAAe;IAAE,GAC7F,IAAI,CAACC,WAAW,eACjB1B,KAAA,CAAAqB,aAAA,CAACb,UAAU;MAACmB,qBAAqB,EAAE,CAAC,IAAI,CAACV,MAAM,CAACC,IAAI,EAAE;QAACO,eAAe,EAAE;MAAa,CAAC,CAAE;MACtFG,4BAA4B,EAAEZ,aAAc;MAC5Ca,QAAQ,EAAGC,KAAK,IAAK;QAAC,IAAI,CAACC,MAAM,CAAC,QAAQ,EAAE,CAACD,KAAK,CAAC,CAAC;MAAA,CAAE;MACtDE,mBAAmB,EAAE;IAAG,GACvBpB,KAAK,CAACqB,QACG,CACR,CAAC,gBAEPjC,KAAA,CAAAqB,aAAA,CAACpB,IAAI;MAACqB,KAAK,EAAE,IAAI,CAACL,MAAM,CAACC;IAAK,GAC3B,IAAI,CAACQ,WAAW,EAChBd,KAAK,CAACqB,QACH,CACP;EACH;AACF","ignoreList":[]}
+{"version":3,"names":["React","KeyboardAvoidingView","Platform","View","isWebPreviewMode","HideMode","BaseComponent","BaseComponentState","WmPageContentProps","DEFAULT_CLASS","ScrollView","WmLottie","SafeAreaInsetsContext","WmPageContentState","WmPageContent","constructor","props","hideMode","DONOT_ADD_TO_DOM","renderSkeleton","skeletonanimationresource","createElement","style","width","styles","root","content","skeleton","source","loop","autoplay","speed","skeletonanimationspeed","renderWidget","showScrollbar","scrollbarColor","scrollable","height","backgroundColor","_showSkeleton","_background","Consumer","insets","top","bottom","left","right","keyboardOffset","verticalOffset","OS","behavior","undefined","keyboardVerticalOffset","flex","contentContainerStyle","showsVerticalScrollIndicator","onScroll","event","notify","scrollEventThrottle","children"],"sources":["page-content.component.tsx"],"sourcesContent":["import React from 'react';\nimport { KeyboardAvoidingView, Platform, View } from 'react-native';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\nimport { HideMode } from '@wavemaker/app-rn-runtime/core/if.component';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmPageContentProps from './page-content.props';\nimport { DEFAULT_CLASS, WmPageContentStyles } from './page-content.styles';\nimport { ScrollView } from 'react-native-gesture-handler';\nimport WmLottie from '@wavemaker/app-rn-runtime/components/basic/lottie/lottie.component';\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context';\n\nexport class WmPageContentState extends BaseComponentState<WmPageContentProps> {\n\n}\n\nexport default class WmPageContent extends BaseComponent<WmPageContentProps, WmPageContentState, WmPageContentStyles> {\n\n  constructor(props: WmPageContentProps) {\n    super(props, DEFAULT_CLASS, new WmPageContentProps());\n    this.hideMode = HideMode.DONOT_ADD_TO_DOM;\n  }\n\n  public renderSkeleton(props: WmPageContentProps): React.ReactNode {\n    if(this.props.skeletonanimationresource) {\n      return <View style={[{width: '100%'}, this.styles.root]}>\n       <WmLottie styles={{ content: {...this.styles.root, ...this.styles.skeleton.root} }} source={this.props.skeletonanimationresource} loop={true} autoplay={true} speed={this.props.skeletonanimationspeed}/>\n      </View>\n    } \n    return null;\n  }  \n\n\n  renderWidget(props: WmPageContentProps) {\n    const showScrollbar = (this.styles.root as any).scrollbarColor != 'transparent';\n    //     return ((props.scrollable || isWebPreviewMode()) && !this._showSkeleton) ? (\n      return (props.scrollable || isWebPreviewMode()) ? (\n        <View style={{height: '100%', width: '100%', backgroundColor: this._showSkeleton && this.styles.skeleton.root.backgroundColor ? this.styles.skeleton.root.backgroundColor : this.styles.root.backgroundColor}}>\n        {this._background}\n        <SafeAreaInsetsContext.Consumer>\n        {(insets = { top: 0, bottom: 0, left: 0, right: 0 }) => {\n          const keyboardOffset = insets?.bottom || 0;\n          const verticalOffset = Platform.OS === 'ios' ? keyboardOffset + 100 : keyboardOffset;\n          return (\n            <KeyboardAvoidingView\n              behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n              keyboardVerticalOffset={verticalOffset}\n              style={{ flex: 1 }}>\n              <ScrollView contentContainerStyle={[this.styles.root, {backgroundColor: 'transparent'}]}\n                showsVerticalScrollIndicator={showScrollbar}\n                onScroll={(event) => {this.notify('scroll', [event])}}\n                scrollEventThrottle={48}>\n                {props.children}\n              </ScrollView>\n            </KeyboardAvoidingView>\n          )}}\n      </SafeAreaInsetsContext.Consumer>\n      </View>      \n      ) : (\n        <View style={[this.styles.root,\n            {backgroundColor: this._showSkeleton ?\n              this.styles.skeleton.root.backgroundColor : \n              this.styles.root.backgroundColor}]}>\n          <SafeAreaInsetsContext.Consumer>\n            {(insets = { top: 0, bottom: 0, left: 0, right: 0 }) => {\n              const keyboardOffset = insets?.bottom || 0;\n              const verticalOffset = Platform.OS === 'ios' ? keyboardOffset + 100 : keyboardOffset;\n              return (\n                <KeyboardAvoidingView\n                  behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n                  keyboardVerticalOffset={verticalOffset}\n                  style={{ flex: 1 }}>\n                  {this._background}\n                  {props.children}\n                </KeyboardAvoidingView>\n              )}}\n          </SafeAreaInsetsContext.Consumer>\n        </View>\n      );\n    }\n  }\n      "],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,oBAAoB,EAAEC,QAAQ,EAAEC,IAAI,QAAQ,cAAc;AACnE,SAASC,gBAAgB,QAAQ,sCAAsC;AACvE,SAASC,QAAQ,QAAQ,6CAA6C;AACtE,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,SAASC,aAAa,QAA6B,uBAAuB;AAC1E,SAASC,UAAU,QAAQ,8BAA8B;AACzD,OAAOC,QAAQ,MAAM,oEAAoE;AACzF,SAASC,qBAAqB,QAAQ,gCAAgC;AAEtE,OAAO,MAAMC,kBAAkB,SAASN,kBAAkB,CAAqB;AAI/E,eAAe,MAAMO,aAAa,SAASR,aAAa,CAA8D;EAEpHS,WAAWA,CAACC,KAAyB,EAAE;IACrC,KAAK,CAACA,KAAK,EAAEP,aAAa,EAAE,IAAID,kBAAkB,CAAC,CAAC,CAAC;IACrD,IAAI,CAACS,QAAQ,GAAGZ,QAAQ,CAACa,gBAAgB;EAC3C;EAEOC,cAAcA,CAACH,KAAyB,EAAmB;IAChE,IAAG,IAAI,CAACA,KAAK,CAACI,yBAAyB,EAAE;MACvC,oBAAOpB,KAAA,CAAAqB,aAAA,CAAClB,IAAI;QAACmB,KAAK,EAAE,CAAC;UAACC,KAAK,EAAE;QAAM,CAAC,EAAE,IAAI,CAACC,MAAM,CAACC,IAAI;MAAE,gBACvDzB,KAAA,CAAAqB,aAAA,CAACV,QAAQ;QAACa,MAAM,EAAE;UAAEE,OAAO,EAAE;YAAC,GAAG,IAAI,CAACF,MAAM,CAACC,IAAI;YAAE,GAAG,IAAI,CAACD,MAAM,CAACG,QAAQ,CAACF;UAAI;QAAE,CAAE;QAACG,MAAM,EAAE,IAAI,CAACZ,KAAK,CAACI,yBAA0B;QAACS,IAAI,EAAE,IAAK;QAACC,QAAQ,EAAE,IAAK;QAACC,KAAK,EAAE,IAAI,CAACf,KAAK,CAACgB;MAAuB,CAAC,CACnM,CAAC;IACT;IACA,OAAO,IAAI;EACb;EAGAC,YAAYA,CAACjB,KAAyB,EAAE;IACtC,MAAMkB,aAAa,GAAI,IAAI,CAACV,MAAM,CAACC,IAAI,CAASU,cAAc,IAAI,aAAa;IAC/E;IACE,OAAQnB,KAAK,CAACoB,UAAU,IAAIhC,gBAAgB,CAAC,CAAC,gBAC5CJ,KAAA,CAAAqB,aAAA,CAAClB,IAAI;MAACmB,KAAK,EAAE;QAACe,MAAM,EAAE,MAAM;QAAEd,KAAK,EAAE,MAAM;QAAEe,eAAe,EAAE,IAAI,CAACC,aAAa,IAAI,IAAI,CAACf,MAAM,CAACG,QAAQ,CAACF,IAAI,CAACa,eAAe,GAAG,IAAI,CAACd,MAAM,CAACG,QAAQ,CAACF,IAAI,CAACa,eAAe,GAAG,IAAI,CAACd,MAAM,CAACC,IAAI,CAACa;MAAe;IAAE,GAC7M,IAAI,CAACE,WAAW,eACjBxC,KAAA,CAAAqB,aAAA,CAACT,qBAAqB,CAAC6B,QAAQ,QAC9B,CAACC,MAAM,GAAG;MAAEC,GAAG,EAAE,CAAC;MAAEC,MAAM,EAAE,CAAC;MAAEC,IAAI,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAC,KAAK;MACtD,MAAMC,cAAc,GAAG,CAAAL,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEE,MAAM,KAAI,CAAC;MAC1C,MAAMI,cAAc,GAAG9C,QAAQ,CAAC+C,EAAE,KAAK,KAAK,GAAGF,cAAc,GAAG,GAAG,GAAGA,cAAc;MACpF,oBACE/C,KAAA,CAAAqB,aAAA,CAACpB,oBAAoB;QACnBiD,QAAQ,EAAEhD,QAAQ,CAAC+C,EAAE,KAAK,KAAK,GAAG,SAAS,GAAGE,SAAU;QACxDC,sBAAsB,EAAEJ,cAAe;QACvC1B,KAAK,EAAE;UAAE+B,IAAI,EAAE;QAAE;MAAE,gBACnBrD,KAAA,CAAAqB,aAAA,CAACX,UAAU;QAAC4C,qBAAqB,EAAE,CAAC,IAAI,CAAC9B,MAAM,CAACC,IAAI,EAAE;UAACa,eAAe,EAAE;QAAa,CAAC,CAAE;QACtFiB,4BAA4B,EAAErB,aAAc;QAC5CsB,QAAQ,EAAGC,KAAK,IAAK;UAAC,IAAI,CAACC,MAAM,CAAC,QAAQ,EAAE,CAACD,KAAK,CAAC,CAAC;QAAA,CAAE;QACtDE,mBAAmB,EAAE;MAAG,GACvB3C,KAAK,CAAC4C,QACG,CACQ,CAAC;IACxB,CAC2B,CAC1B,CAAC,gBAEL5D,KAAA,CAAAqB,aAAA,CAAClB,IAAI;MAACmB,KAAK,EAAE,CAAC,IAAI,CAACE,MAAM,CAACC,IAAI,EAC1B;QAACa,eAAe,EAAE,IAAI,CAACC,aAAa,GAClC,IAAI,CAACf,MAAM,CAACG,QAAQ,CAACF,IAAI,CAACa,eAAe,GACzC,IAAI,CAACd,MAAM,CAACC,IAAI,CAACa;MAAe,CAAC;IAAE,gBACvCtC,KAAA,CAAAqB,aAAA,CAACT,qBAAqB,CAAC6B,QAAQ,QAC5B,CAACC,MAAM,GAAG;MAAEC,GAAG,EAAE,CAAC;MAAEC,MAAM,EAAE,CAAC;MAAEC,IAAI,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAC,KAAK;MACtD,MAAMC,cAAc,GAAG,CAAAL,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEE,MAAM,KAAI,CAAC;MAC1C,MAAMI,cAAc,GAAG9C,QAAQ,CAAC+C,EAAE,KAAK,KAAK,GAAGF,cAAc,GAAG,GAAG,GAAGA,cAAc;MACpF,oBACE/C,KAAA,CAAAqB,aAAA,CAACpB,oBAAoB;QACnBiD,QAAQ,EAAEhD,QAAQ,CAAC+C,EAAE,KAAK,KAAK,GAAG,SAAS,GAAGE,SAAU;QACxDC,sBAAsB,EAAEJ,cAAe;QACvC1B,KAAK,EAAE;UAAE+B,IAAI,EAAE;QAAE;MAAE,GAClB,IAAI,CAACb,WAAW,EAChBxB,KAAK,CAAC4C,QACa,CAAC;IACxB,CAC2B,CAC5B,CACP;EACH;AACF","ignoreList":[]}

app-rn-runtime/components/page/page-content/page-content.props.js

@@ -1,8 +1,8 @@
 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 WmPageContentProps extends BaseProps {
+import { SkeletonAnimationProps } from '@wavemaker/app-rn-runtime/runtime/base-fragment.component';
+export default class WmPageContentProps extends SkeletonAnimationProps {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "children", null);

app-rn-runtime/components/page/page-content/page-content.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmPageContentProps","constructor","args","_defineProperty"],"sources":["page-content.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmPageContentProps extends BaseProps {\n    children: any[] = null as any;\n    scrollable: boolean = true;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,kBAAkB,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,mBACpC,IAAI;IAAAA,eAAA,qBACA,IAAI;EAAA;AAC9B","ignoreList":[]}
+{"version":3,"names":["SkeletonAnimationProps","WmPageContentProps","constructor","args","_defineProperty"],"sources":["page-content.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { SkeletonAnimationProps } from '@wavemaker/app-rn-runtime/runtime/base-fragment.component';\n\nexport default class WmPageContentProps extends SkeletonAnimationProps {\n    children: any[] = null as any;\n    scrollable: boolean = true;\n}"],"mappings":";;;AACA,SAASA,sBAAsB,QAAQ,2DAA2D;AAElG,eAAe,MAAMC,kBAAkB,SAASD,sBAAsB,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,mBACjD,IAAI;IAAAA,eAAA,qBACA,IAAI;EAAA;AAC9B","ignoreList":[]}

app-rn-runtime/components/page/page-content/page-content.styles.js

@@ -8,7 +8,12 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       backgroundColor: themeVariables.pageContentBgColor,
       minHeight: '100%'
     },
-    text: {}
+    text: {},
+    skeleton: {
+      root: {
+        height: themeVariables.maxModalHeight
+      }
+    }
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);
 });

app-rn-runtime/components/page/page-content/page-content.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","padding","backgroundColor","pageContentBgColor","minHeight","text"],"sources":["page-content.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 WmPageContentStyles = BaseStyles & {};\n\nexport const DEFAULT_CLASS = 'app-page-content';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmPageContentStyles = defineStyles({\n        root: {\n            padding: 8,\n            backgroundColor: themeVariables.pageContentBgColor,\n            minHeight: '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,kBAAkB;AAC/CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAkC,GAAGL,YAAY,CAAC;IACpDM,IAAI,EAAE;MACFC,OAAO,EAAE,CAAC;MACVC,eAAe,EAAEL,cAAc,CAACM,kBAAkB;MAClDC,SAAS,EAAE;IACf,CAAC;IACDC,IAAI,EAAE,CAAC;EACX,CAAC,CAAC;EAEFP,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","padding","backgroundColor","pageContentBgColor","minHeight","text","skeleton","height","maxModalHeight"],"sources":["page-content.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\nimport { Dimensions } from 'react-native';\n\nexport type WmPageContentStyles = BaseStyles & {\n    skeleton: WmSkeletonStyles\n};\n\nexport const DEFAULT_CLASS = 'app-page-content';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmPageContentStyles = defineStyles({\n        root: {\n            padding: 8,\n            backgroundColor: themeVariables.pageContentBgColor,\n            minHeight: '100%'\n        },\n        text: {},\n        skeleton: {\n            root: {\n                height: themeVariables.maxModalHeight\n            }\n        } as any as WmSkeletonStyles\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,kBAAkB;AAC/CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAkC,GAAGL,YAAY,CAAC;IACpDM,IAAI,EAAE;MACFC,OAAO,EAAE,CAAC;MACVC,eAAe,EAAEL,cAAc,CAACM,kBAAkB;MAClDC,SAAS,EAAE;IACf,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACNN,IAAI,EAAE;QACFO,MAAM,EAAEV,cAAc,CAACW;MAC3B;IACJ;EACJ,CAAC,CAAC;EAEFV,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}

app-rn-runtime/components/page/page.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","PanResponder","View","BaseComponent","BaseComponentState","DEFAULT_CLASS","WmPageState","WmPage","constructor","props","_defineProperty","create","onStartShouldSetPanResponderCapture","e","notify","renderWidget","createElement","_extends","style","styles","root","panResponder","panHandlers","_background","children"],"sources":["page.component.tsx"],"sourcesContent":["import React from 'react';\nimport { PanResponder, View } from 'react-native';\n\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmPageProps from './page.props';\nimport { DEFAULT_CLASS, WmPageStyles } from './page.styles';\n\nexport class WmPageState extends BaseComponentState<WmPageProps> {}\n\nexport default class WmPage extends BaseComponent<WmPageProps, WmPageState, WmPageStyles> {\n\n  panResponder = PanResponder.create({\n    onStartShouldSetPanResponderCapture: (e) => {\n      this.notify('globaltouch', [e]);\n      return false;\n    },\n  });\n  constructor(props: WmPageProps) {\n    super(props, DEFAULT_CLASS, );\n  }\n\n  renderWidget(props: WmPageProps) {\n    return (\n      <View style={this.styles.root} {...this.panResponder.panHandlers}>\n        {this._background}\n        {props.children}\n      </View>\n    ); \n  }\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,IAAI,QAAQ,cAAc;AAEjD,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAGjG,SAASC,aAAa,QAAsB,eAAe;AAE3D,OAAO,MAAMC,WAAW,SAASF,kBAAkB,CAAc;AAEjE,eAAe,MAAMG,MAAM,SAASJ,aAAa,CAAyC;EAQxFK,WAAWA,CAACC,KAAkB,EAAE;IAC9B,KAAK,CAACA,KAAK,EAAEJ,aAAe,CAAC;IAACK,eAAA,uBAPjBT,YAAY,CAACU,MAAM,CAAC;MACjCC,mCAAmC,EAAGC,CAAC,IAAK;QAC1C,IAAI,CAACC,MAAM,CAAC,aAAa,EAAE,CAACD,CAAC,CAAC,CAAC;QAC/B,OAAO,KAAK;MACd;IACF,CAAC,CAAC;EAGF;EAEAE,YAAYA,CAACN,KAAkB,EAAE;IAC/B,oBACET,KAAA,CAAAgB,aAAA,CAACd,IAAI,EAAAe,QAAA;MAACC,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAAK,IAAI,CAACC,YAAY,CAACC,WAAW,GAC7D,IAAI,CAACC,WAAW,EAChBd,KAAK,CAACe,QACH,CAAC;EAEX;AACF","ignoreList":[]}
+{"version":3,"names":["React","PanResponder","View","BaseComponent","BaseComponentState","DEFAULT_CLASS","WmPageState","WmPage","constructor","props","_defineProperty","create","onStartShouldSetPanResponderCapture","e","notify","renderWidget","createElement","_extends","style","styles","root","panResponder","panHandlers","_background","children"],"sources":["page.component.tsx"],"sourcesContent":["import React from 'react';\nimport { PanResponder, View } from 'react-native';\n\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmPageProps from './page.props';\nimport { DEFAULT_CLASS, WmPageStyles } from './page.styles';\nimport WmLottie from '../basic/lottie/lottie.component';\n\nexport class WmPageState extends BaseComponentState<WmPageProps> {}\n\nexport default class WmPage extends BaseComponent<WmPageProps, WmPageState, WmPageStyles> {\n\n  panResponder = PanResponder.create({\n    onStartShouldSetPanResponderCapture: (e) => {\n      this.notify('globaltouch', [e]);\n      return false;\n    },\n  });\n  constructor(props: WmPageProps) {\n    super(props, DEFAULT_CLASS, );\n  }\n  renderWidget(props: WmPageProps) {\n    return (\n      <View style={this.styles.root} {...this.panResponder.panHandlers}>\n        {this._background}\n        {props.children}\n      </View>\n    ); \n  }\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,IAAI,QAAQ,cAAc;AAEjD,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAGjG,SAASC,aAAa,QAAsB,eAAe;AAG3D,OAAO,MAAMC,WAAW,SAASF,kBAAkB,CAAc;AAEjE,eAAe,MAAMG,MAAM,SAASJ,aAAa,CAAyC;EAQxFK,WAAWA,CAACC,KAAkB,EAAE;IAC9B,KAAK,CAACA,KAAK,EAAEJ,aAAe,CAAC;IAACK,eAAA,uBAPjBT,YAAY,CAACU,MAAM,CAAC;MACjCC,mCAAmC,EAAGC,CAAC,IAAK;QAC1C,IAAI,CAACC,MAAM,CAAC,aAAa,EAAE,CAACD,CAAC,CAAC,CAAC;QAC/B,OAAO,KAAK;MACd;IACF,CAAC,CAAC;EAGF;EACAE,YAAYA,CAACN,KAAkB,EAAE;IAC/B,oBACET,KAAA,CAAAgB,aAAA,CAACd,IAAI,EAAAe,QAAA;MAACC,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAAK,IAAI,CAACC,YAAY,CAACC,WAAW,GAC7D,IAAI,CAACC,WAAW,EAChBd,KAAK,CAACe,QACH,CAAC;EAEX;AACF","ignoreList":[]}

app-rn-runtime/components/page/page.props.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["page.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default interface WmPageProps extends BaseProps {\n  children: any[]\n}"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["page.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { SkeletonAnimationProps } from '@wavemaker/app-rn-runtime/runtime/base-fragment.component';\n\nexport default interface WmPageProps extends BaseProps {\n  children: any[]\n}"],"mappings":"","ignoreList":[]}

app-rn-runtime/components/page/page.styles.js

@@ -1,5 +1,6 @@
 import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
 import { defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';
+import { Dimensions } from 'react-native';
 export const DEFAULT_CLASS = 'app-page';
 BASE_THEME.registerStyle((themeVariables, addStyle) => {
   const defaultStyles = defineStyles({
@@ -11,7 +12,12 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       bottom: 0,
       position: 'absolute'
     },
-    text: {}
+    text: {},
+    skeleton: {
+      root: {
+        height: Dimensions.get('window').height
+      }
+    }
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);
 });

app-rn-runtime/components/page/page.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","flexDirection","top","left","right","bottom","position","text"],"sources":["page.styles.ts"],"sourcesContent":["import BASE_THEME, { NamedStyles } from '@wavemaker/app-rn-runtime/styles/theme';\n\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport type WmPageStyles = BaseStyles & {};\n\nexport const DEFAULT_CLASS = 'app-page';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmPageStyles = defineStyles({\n        root: {\n            flexDirection: 'column',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            position: 'absolute'\n        },\n        text: {}\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAuB,wCAAwC;AAEhF,SAAqBC,YAAY,QAAQ,+CAA+C;AAIxF,OAAO,MAAMC,aAAa,GAAG,UAAU;AACvCF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAA2B,GAAGL,YAAY,CAAC;IAC7CM,IAAI,EAAE;MACFC,aAAa,EAAE,QAAQ;MACvBC,GAAG,EAAE,CAAC;MACNC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE,CAAC;MACTC,QAAQ,EAAE;IACd,CAAC;IACDC,IAAI,EAAE,CAAC;EACX,CAAC,CAAC;EAEFT,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","Dimensions","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","flexDirection","top","left","right","bottom","position","text","skeleton","height","get"],"sources":["page.styles.ts"],"sourcesContent":["import BASE_THEME, { NamedStyles } from '@wavemaker/app-rn-runtime/styles/theme';\n\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '../basic/skeleton/skeleton.styles';\nimport { Dimensions } from 'react-native';\n\nexport type WmPageStyles = BaseStyles & {\n    skeleton: WmSkeletonStyles\n};\n\nexport const DEFAULT_CLASS = 'app-page';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmPageStyles = defineStyles({\n        root: {\n            flexDirection: 'column',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            position: 'absolute'\n        },\n        text: {},\n        skeleton: {\n            root: {\n                height: Dimensions.get('window').height\n            }\n        } as WmSkeletonStyles\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAuB,wCAAwC;AAEhF,SAAqBC,YAAY,QAAQ,+CAA+C;AAExF,SAASC,UAAU,QAAQ,cAAc;AAMzC,OAAO,MAAMC,aAAa,GAAG,UAAU;AACvCH,UAAU,CAACI,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAA2B,GAAGN,YAAY,CAAC;IAC7CO,IAAI,EAAE;MACFC,aAAa,EAAE,QAAQ;MACvBC,GAAG,EAAE,CAAC;MACNC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE,CAAC;MACTC,QAAQ,EAAE;IACd,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACNR,IAAI,EAAE;QACFS,MAAM,EAAEf,UAAU,CAACgB,GAAG,CAAC,QAAQ,CAAC,CAACD;MACrC;IACJ;EACJ,CAAC,CAAC;EAEFX,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}

app-rn-runtime/components/page/partial/partial.component.js

@@ -2,14 +2,40 @@ import React from 'react';
 import { View } from 'react-native';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
 import { DEFAULT_CLASS } from './partial.styles';
+import WmLottie from '@wavemaker/app-rn-runtime/components/basic/lottie/lottie.component';
 export class WmPartialState extends BaseComponentState {}
 export default class WmPartial extends BaseComponent {
   constructor(props) {
     super(props, DEFAULT_CLASS);
   }
+  renderSkeleton(props) {
+    var _this$styles;
+    const lottieContentStyles = (_this$styles = this.styles) === null || _this$styles === void 0 ? void 0 : _this$styles.skeleton;
+    if (this.props.skeletonanimationresource) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: [{
+          width: '100%'
+        }, this.styles.root]
+      }, /*#__PURE__*/React.createElement(WmLottie, {
+        styles: {
+          content: lottieContentStyles.root
+        },
+        source: this.props.skeletonanimationresource,
+        loop: true,
+        autoplay: true,
+        speed: this.props.skeletonanimationspeed
+      }));
+    }
+    return null;
+  }
   renderWidget(props) {
+    var _this$styles$skeleton;
+    const styles = this._showSkeleton ? {
+      ...this.styles.root,
+      ...((_this$styles$skeleton = this.styles.skeleton) === null || _this$styles$skeleton === void 0 ? void 0 : _this$styles$skeleton.root)
+    } : this.styles.root;
     return /*#__PURE__*/React.createElement(View, {
-      style: this.styles.root
+      style: styles
     }, this._background, props.children);
   }
 }

app-rn-runtime/components/page/partial/partial.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","DEFAULT_CLASS","WmPartialState","WmPartial","constructor","props","renderWidget","createElement","style","styles","root","_background","children"],"sources":["partial.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 WmPartialProps from './partial.props';\nimport { DEFAULT_CLASS, WmPartialStyles } from './partial.styles';\n\nexport class WmPartialState extends BaseComponentState<WmPartialProps> {\n\n}\n\nexport default class WmPartial extends BaseComponent<WmPartialProps, WmPartialState, WmPartialStyles> {\n\n  constructor(props: WmPartialProps) {\n    super(props, DEFAULT_CLASS, );\n  }\n\n  renderWidget(props: WmPartialProps) {\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        {props.children}\n      </View>\n    ); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAGjG,SAASC,aAAa,QAAyB,kBAAkB;AAEjE,OAAO,MAAMC,cAAc,SAASF,kBAAkB,CAAiB;AAIvE,eAAe,MAAMG,SAAS,SAASJ,aAAa,CAAkD;EAEpGK,WAAWA,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEJ,aAAe,CAAC;EAC/B;EAEAK,YAAYA,CAACD,KAAqB,EAAE;IAClC,oBACER,KAAA,CAAAU,aAAA,CAACT,IAAI;MAACU,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAC3B,IAAI,CAACC,WAAW,EAChBN,KAAK,CAACO,QACH,CAAC;EAEX;AACF","ignoreList":[]}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","DEFAULT_CLASS","WmLottie","WmPartialState","WmPartial","constructor","props","renderSkeleton","_this$styles","lottieContentStyles","styles","skeleton","skeletonanimationresource","createElement","style","width","root","content","source","loop","autoplay","speed","skeletonanimationspeed","renderWidget","_this$styles$skeleton","_showSkeleton","_background","children"],"sources":["partial.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 WmPartialProps from './partial.props';\nimport { DEFAULT_CLASS, WmPartialStyles } from './partial.styles';\nimport WmLottie from '@wavemaker/app-rn-runtime/components/basic/lottie/lottie.component';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport class WmPartialState extends BaseComponentState<WmPartialProps> {\n\n}\n\nexport default class WmPartial extends BaseComponent<WmPartialProps, WmPartialState, WmPartialStyles> {\n\n  constructor(props: WmPartialProps) {\n    super(props, DEFAULT_CLASS, );\n  }\n\n  public renderSkeleton(props: WmPartialProps): React.ReactNode {\n    const lottieContentStyles = this.styles?.skeleton as any as WmSkeletonStyles\n    if(this.props.skeletonanimationresource) {\n      return <View style={[{width: '100%'}, this.styles.root]}>\n        <WmLottie styles={{ content: lottieContentStyles.root}} source={this.props.skeletonanimationresource} loop={true} autoplay={true} speed={this.props.skeletonanimationspeed}/>\n      </View>\n    }\n    return null;\n  }\n\n  renderWidget(props: WmPartialProps) {\n    const styles = this._showSkeleton ? {\n      ...this.styles.root,\n      ...this.styles.skeleton?.root\n    } : this.styles.root\n    \n    return (\n      <View style={styles}>\n        {this._background}\n        {props.children}\n      </View>\n    ); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAGjG,SAASC,aAAa,QAAyB,kBAAkB;AACjE,OAAOC,QAAQ,MAAM,oEAAoE;AAGzF,OAAO,MAAMC,cAAc,SAASH,kBAAkB,CAAiB;AAIvE,eAAe,MAAMI,SAAS,SAASL,aAAa,CAAkD;EAEpGM,WAAWA,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEL,aAAe,CAAC;EAC/B;EAEOM,cAAcA,CAACD,KAAqB,EAAmB;IAAA,IAAAE,YAAA;IAC5D,MAAMC,mBAAmB,IAAAD,YAAA,GAAG,IAAI,CAACE,MAAM,cAAAF,YAAA,uBAAXA,YAAA,CAAaG,QAAmC;IAC5E,IAAG,IAAI,CAACL,KAAK,CAACM,yBAAyB,EAAE;MACvC,oBAAOf,KAAA,CAAAgB,aAAA,CAACf,IAAI;QAACgB,KAAK,EAAE,CAAC;UAACC,KAAK,EAAE;QAAM,CAAC,EAAE,IAAI,CAACL,MAAM,CAACM,IAAI;MAAE,gBACtDnB,KAAA,CAAAgB,aAAA,CAACX,QAAQ;QAACQ,MAAM,EAAE;UAAEO,OAAO,EAAER,mBAAmB,CAACO;QAAI,CAAE;QAACE,MAAM,EAAE,IAAI,CAACZ,KAAK,CAACM,yBAA0B;QAACO,IAAI,EAAE,IAAK;QAACC,QAAQ,EAAE,IAAK;QAACC,KAAK,EAAE,IAAI,CAACf,KAAK,CAACgB;MAAuB,CAAC,CACxK,CAAC;IACT;IACA,OAAO,IAAI;EACb;EAEAC,YAAYA,CAACjB,KAAqB,EAAE;IAAA,IAAAkB,qBAAA;IAClC,MAAMd,MAAM,GAAG,IAAI,CAACe,aAAa,GAAG;MAClC,GAAG,IAAI,CAACf,MAAM,CAACM,IAAI;MACnB,KAAAQ,qBAAA,GAAG,IAAI,CAACd,MAAM,CAACC,QAAQ,cAAAa,qBAAA,uBAApBA,qBAAA,CAAsBR,IAAI;IAC/B,CAAC,GAAG,IAAI,CAACN,MAAM,CAACM,IAAI;IAEpB,oBACEnB,KAAA,CAAAgB,aAAA,CAACf,IAAI;MAACgB,KAAK,EAAEJ;IAAO,GACjB,IAAI,CAACgB,WAAW,EAChBpB,KAAK,CAACqB,QACH,CAAC;EAEX;AACF","ignoreList":[]}

app-rn-runtime/components/page/partial/partial.props.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["partial.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default interface WmPartialProps extends BaseProps {\n    children: any[];\n}"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["partial.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { SkeletonAnimationProps } from '@wavemaker/app-rn-runtime/runtime/base-fragment.component';\n\nexport default interface WmPartialProps extends SkeletonAnimationProps {\n    children: any[];\n}"],"mappings":"","ignoreList":[]}

app-rn-runtime/components/page/partial/partial.styles.js

@@ -6,7 +6,12 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
     root: {
       width: "100%"
     },
-    text: {}
+    text: {},
+    skeleton: {
+      root: {
+        height: 200
+      }
+    }
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);
 });

app-rn-runtime/components/page/partial/partial.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","width","text"],"sources":["partial.styles.ts"],"sourcesContent":["import BASE_THEME, { NamedStyles } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport type WmPartialStyles = BaseStyles & {};\n\nexport const DEFAULT_CLASS = 'app-partial';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmPartialStyles = defineStyles({\n        root: {\n            width: \"100%\"\n        },\n        text: {}\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAuB,wCAAwC;AAChF,SAAqBC,YAAY,QAAQ,+CAA+C;AAIxF,OAAO,MAAMC,aAAa,GAAG,aAAa;AAC1CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAA8B,GAAGL,YAAY,CAAC;IAChDM,IAAI,EAAE;MACFC,KAAK,EAAE;IACX,CAAC;IACDC,IAAI,EAAE,CAAC;EACX,CAAC,CAAC;EAEFJ,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","width","text","skeleton","height"],"sources":["partial.styles.ts"],"sourcesContent":["import BASE_THEME, { NamedStyles } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmPartialStyles = BaseStyles & {\n    skeleton: WmSkeletonStyles\n};\n\nexport const DEFAULT_CLASS = 'app-partial';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmPartialStyles = defineStyles({\n        root: {\n            width: \"100%\"\n        },\n        text: {},\n        skeleton: {\n            root: {\n                height: 200\n            }\n        } as WmSkeletonStyles\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAuB,wCAAwC;AAChF,SAAqBC,YAAY,QAAQ,+CAA+C;AAOxF,OAAO,MAAMC,aAAa,GAAG,aAAa;AAC1CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAA8B,GAAGL,YAAY,CAAC;IAChDM,IAAI,EAAE;MACFC,KAAK,EAAE;IACX,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACNH,IAAI,EAAE;QACFI,MAAM,EAAE;MACZ;IACJ;EACJ,CAAC,CAAC;EAEFN,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}

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

@@ -2,14 +2,40 @@ import React from 'react';
 import { View } from 'react-native';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
 import { DEFAULT_CLASS } from './prefab-container.styles';
+import WmLottie from '../basic/lottie/lottie.component';
 export class WmPrefabContainerState extends BaseComponentState {}
 export default class WmPrefabContainer extends BaseComponent {
   constructor(props) {
     super(props, DEFAULT_CLASS);
   }
+  renderSkeleton(props) {
+    var _this$styles;
+    const lottieContentStyles = (_this$styles = this.styles) === null || _this$styles === void 0 ? void 0 : _this$styles.skeleton;
+    if (this.props.skeletonanimationresource) {
+      var _this$styles2;
+      return /*#__PURE__*/React.createElement(View, {
+        style: [{
+          width: '100%'
+        }, (_this$styles2 = this.styles) === null || _this$styles2 === void 0 ? void 0 : _this$styles2.root]
+      }, /*#__PURE__*/React.createElement(WmLottie, {
+        styles: {
+          content: lottieContentStyles.root
+        },
+        source: this.props.skeletonanimationresource,
+        loop: true,
+        autoplay: true,
+        speed: this.props.skeletonanimationspeed
+      }));
+    }
+    return null;
+  }
   renderWidget(props) {
+    const styles = this._showSkeleton ? {
+      ...this.styles.root,
+      ...this.styles.skeleton.root
+    } : this.styles.root;
     return /*#__PURE__*/React.createElement(View, {
-      style: this.styles.root
+      style: styles
     }, this._background, props.children);
   }
 }

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","DEFAULT_CLASS","WmPrefabContainerState","WmPrefabContainer","constructor","props","renderWidget","createElement","style","styles","root","_background","children"],"sources":["prefab-container.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 WmPrefabContainerProps from './prefab-container.props';\nimport { DEFAULT_CLASS, WmPrefabContainerStyles } from './prefab-container.styles';\n\nexport class WmPrefabContainerState extends BaseComponentState<WmPrefabContainerProps> {\n\n}\n\nexport default class WmPrefabContainer extends BaseComponent<WmPrefabContainerProps, WmPrefabContainerState, WmPrefabContainerStyles> {\n\n  constructor(props: WmPrefabContainerProps) {\n    super(props, DEFAULT_CLASS, );\n  }\n\n  renderWidget(props: WmPrefabContainerProps) {\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        {props.children}\n      </View>\n    ); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAGjG,SAASC,aAAa,QAAiC,2BAA2B;AAElF,OAAO,MAAMC,sBAAsB,SAASF,kBAAkB,CAAyB;AAIvF,eAAe,MAAMG,iBAAiB,SAASJ,aAAa,CAA0E;EAEpIK,WAAWA,CAACC,KAA6B,EAAE;IACzC,KAAK,CAACA,KAAK,EAAEJ,aAAe,CAAC;EAC/B;EAEAK,YAAYA,CAACD,KAA6B,EAAE;IAC1C,oBACER,KAAA,CAAAU,aAAA,CAACT,IAAI;MAACU,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAC3B,IAAI,CAACC,WAAW,EAChBN,KAAK,CAACO,QACH,CAAC;EAEX;AACF","ignoreList":[]}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","DEFAULT_CLASS","WmLottie","WmPrefabContainerState","WmPrefabContainer","constructor","props","renderSkeleton","_this$styles","lottieContentStyles","styles","skeleton","skeletonanimationresource","_this$styles2","createElement","style","width","root","content","source","loop","autoplay","speed","skeletonanimationspeed","renderWidget","_showSkeleton","_background","children"],"sources":["prefab-container.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 WmPrefabContainerProps from './prefab-container.props';\nimport { DEFAULT_CLASS, WmPrefabContainerStyles } from './prefab-container.styles';\nimport WmLottie from '../basic/lottie/lottie.component';\nimport { WmSkeletonStyles } from '../basic/skeleton/skeleton.styles';\n\nexport class WmPrefabContainerState extends BaseComponentState<WmPrefabContainerProps> {\n\n}\n\n\nexport default class WmPrefabContainer extends BaseComponent<WmPrefabContainerProps, WmPrefabContainerState, WmPrefabContainerStyles> {\n\n  constructor(props: WmPrefabContainerProps) {\n    super(props, DEFAULT_CLASS, );\n  }\n\n  public renderSkeleton(props: WmPrefabContainerProps): React.ReactNode {\n    const lottieContentStyles = this.styles?.skeleton as any as WmSkeletonStyles\n    if(this.props.skeletonanimationresource) {\n      return <View style={[{width: '100%'}, this.styles?.root]}>\n        <WmLottie styles={{ content: lottieContentStyles.root}} source={this.props.skeletonanimationresource} loop={true} autoplay={true} speed={this.props.skeletonanimationspeed}/>\n        </View>\n    }\n    return null;\n  }\n\n  renderWidget(props: WmPrefabContainerProps) {\n    const styles = this._showSkeleton ? {\n      ...this.styles.root,\n      ...this.styles.skeleton.root\n    } : this.styles.root\n    return (\n      <View style={styles}>\n        {this._background}\n        {props.children}\n      </View>\n    ); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAGjG,SAASC,aAAa,QAAiC,2BAA2B;AAClF,OAAOC,QAAQ,MAAM,kCAAkC;AAGvD,OAAO,MAAMC,sBAAsB,SAASH,kBAAkB,CAAyB;AAKvF,eAAe,MAAMI,iBAAiB,SAASL,aAAa,CAA0E;EAEpIM,WAAWA,CAACC,KAA6B,EAAE;IACzC,KAAK,CAACA,KAAK,EAAEL,aAAe,CAAC;EAC/B;EAEOM,cAAcA,CAACD,KAA6B,EAAmB;IAAA,IAAAE,YAAA;IACpE,MAAMC,mBAAmB,IAAAD,YAAA,GAAG,IAAI,CAACE,MAAM,cAAAF,YAAA,uBAAXA,YAAA,CAAaG,QAAmC;IAC5E,IAAG,IAAI,CAACL,KAAK,CAACM,yBAAyB,EAAE;MAAA,IAAAC,aAAA;MACvC,oBAAOhB,KAAA,CAAAiB,aAAA,CAAChB,IAAI;QAACiB,KAAK,EAAE,CAAC;UAACC,KAAK,EAAE;QAAM,CAAC,GAAAH,aAAA,GAAE,IAAI,CAACH,MAAM,cAAAG,aAAA,uBAAXA,aAAA,CAAaI,IAAI;MAAE,gBACvDpB,KAAA,CAAAiB,aAAA,CAACZ,QAAQ;QAACQ,MAAM,EAAE;UAAEQ,OAAO,EAAET,mBAAmB,CAACQ;QAAI,CAAE;QAACE,MAAM,EAAE,IAAI,CAACb,KAAK,CAACM,yBAA0B;QAACQ,IAAI,EAAE,IAAK;QAACC,QAAQ,EAAE,IAAK;QAACC,KAAK,EAAE,IAAI,CAAChB,KAAK,CAACiB;MAAuB,CAAC,CACtK,CAAC;IACX;IACA,OAAO,IAAI;EACb;EAEAC,YAAYA,CAAClB,KAA6B,EAAE;IAC1C,MAAMI,MAAM,GAAG,IAAI,CAACe,aAAa,GAAG;MAClC,GAAG,IAAI,CAACf,MAAM,CAACO,IAAI;MACnB,GAAG,IAAI,CAACP,MAAM,CAACC,QAAQ,CAACM;IAC1B,CAAC,GAAG,IAAI,CAACP,MAAM,CAACO,IAAI;IACpB,oBACEpB,KAAA,CAAAiB,aAAA,CAAChB,IAAI;MAACiB,KAAK,EAAEL;IAAO,GACjB,IAAI,CAACgB,WAAW,EAChBpB,KAAK,CAACqB,QACH,CAAC;EAEX;AACF","ignoreList":[]}

app-rn-runtime/components/prefab/prefab-container.props.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["prefab-container.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default interface WmPrefabContainerProps extends BaseProps {\n    children: any[];\n}"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["prefab-container.props.ts"],"sourcesContent":["import {  BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { SkeletonAnimationProps } from '@wavemaker/app-rn-runtime/runtime/base-fragment.component';\n\n\n\nexport default interface WmPrefabContainerProps extends SkeletonAnimationProps {\n    children: any[];\n}"],"mappings":"","ignoreList":[]}

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

@@ -4,7 +4,12 @@ export const DEFAULT_CLASS = 'app-prefab';
 BASE_THEME.registerStyle((themeVariables, addStyle) => {
   const defaultStyles = defineStyles({
     root: {},
-    text: {}
+    text: {},
+    skeleton: {
+      root: {
+        height: 200
+      }
+    }
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);
 });

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

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","text"],"sources":["prefab-container.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 WmPrefabContainerStyles = BaseStyles & {};\n\nexport const DEFAULT_CLASS = 'app-prefab';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmPrefabContainerStyles = defineStyles({\n        root: {},\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,YAAY;AACzCF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAsC,GAAGL,YAAY,CAAC;IACxDM,IAAI,EAAE,CAAC,CAAC;IACRC,IAAI,EAAE,CAAC;EACX,CAAC,CAAC;EAEFH,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","text","skeleton","height"],"sources":["prefab-container.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '../basic/skeleton/skeleton.styles';\n\nexport type WmPrefabContainerStyles =  BaseStyles & {\n    skeleton: WmSkeletonStyles\n};\n\nexport const DEFAULT_CLASS = 'app-prefab';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmPrefabContainerStyles = defineStyles({\n        root: {},\n        text: {},\n        skeleton: {\n            root: {\n                height: 200\n            }\n        } as WmSkeletonStyles\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAOxF,OAAO,MAAMC,aAAa,GAAG,YAAY;AACzCF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAsC,GAAGL,YAAY,CAAC;IACxDM,IAAI,EAAE,CAAC,CAAC;IACRC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACNF,IAAI,EAAE;QACFG,MAAM,EAAE;MACZ;IACJ;EACJ,CAAC,CAAC;EAEFL,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}

app-rn-runtime/core/AppConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["AppConfig.ts"],"sourcesContent":["export interface Drawer {\n    setContent: (c: React.ReactNode) => void;\n    getContent: () => React.ReactNode;\n    setAnimation: (animation: string) => void;\n    getAnimation: () => string;\n}\n\nexport default interface AppConfig {\n    appId: string;\n    assets: any;\n    appProperties: any;\n    appLocale: any;\n    url: string;\n    loadApp: boolean;\n    refresh: (complete?: boolean) => void,\n    currentPage?: any;\n    pages?: any[];\n    landingPage: string;\n    partials?: any[];\n    drawer: Drawer;\n    app: any;\n    spinner: any;\n    setDrawerContent: any;\n    theme: any;\n    drawerType: any;\n    getServiceDefinitions: any;\n    loggedInUser: any;\n    selectedLocale: string;\n}"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["AppConfig.ts"],"sourcesContent":["export interface Drawer {\n    setContent: (c: React.ReactNode) => void;\n    getContent: () => React.ReactNode;\n    setAnimation: (animation: string) => void;\n    getAnimation: () => string;\n}\n\nexport default interface AppConfig {\n    appId: string;\n    assets: any;\n    appProperties: any;\n    appLocale: any;\n    url: string;\n    leftNavWidth: any;\n    loadApp: boolean;\n    refresh: (complete?: boolean) => void,\n    currentPage?: any;\n    pages?: any[];\n    landingPage: string;\n    partials?: any[];\n    drawer: Drawer;\n    app: any;\n    spinner: any;\n    setDrawerContent: any;\n    theme: any;\n    drawerType: any;\n    getServiceDefinitions: any;\n    loggedInUser: any;\n    selectedLocale: string;\n    diagnostics: {\n        appStartTime: number,\n        appReadyTime: number,\n        pageStartTime: number,\n        pageReadyTime: number\n    }\n}"],"mappings":"","ignoreList":[]}

app-rn-runtime/core/base.component.js

@@ -4,7 +4,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { assign, isUndefined, isNil } from 'lodash';
 import React from 'react';
-import { AccessibilityInfo, Platform } from 'react-native';
+import { AccessibilityInfo, Platform, StyleSheet, View } from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
 import { StyleProps, getStyleName } from '@wavemaker/app-rn-runtime/styles/style-props';
@@ -22,6 +22,7 @@ import { FixedView } from './fixed-view.component';
 import { TextIdPrefixConsumer } from './testid.provider';
 import { isScreenReaderEnabled } from './accessibility';
 import { TappableContext } from './tappable.component';
+import { WmComponentNode } from './wm-component-tree';
 export const WIDGET_LOGGER = ROOT_LOGGER.extend('widget');
 export const ParentContext = /*#__PURE__*/React.createContext(null);
 export class BaseComponentState {
@@ -30,6 +31,7 @@ export class BaseComponentState {
     _defineProperty(this, "animatableProps", undefined);
     _defineProperty(this, "props", {});
     _defineProperty(this, "hide", false);
+    _defineProperty(this, "highlight", false);
   }
 }
 export function defineStyles(styles) {
@@ -52,8 +54,9 @@ export class BaseProps extends StyleProps {
     _defineProperty(this, "classname", null);
     _defineProperty(this, "listener", null);
     _defineProperty(this, "showindevice", null);
-    _defineProperty(this, "showskeleton", false);
+    _defineProperty(this, "showskeleton", undefined);
     _defineProperty(this, "deferload", false);
+    _defineProperty(this, "showskeletonchildren", true);
   }
 }
 export class BaseComponent extends React.Component {
@@ -64,6 +67,7 @@ export class BaseComponent extends React.Component {
     _defineProperty(this, "hideMode", HideMode.ADD_TO_DOM);
     _defineProperty(this, "propertyProvider", void 0);
     _defineProperty(this, "proxy", void 0);
+    _defineProperty(this, "_INSTANCE", void 0);
     _defineProperty(this, "initialized", false);
     _defineProperty(this, "cleanup", []);
     _defineProperty(this, "theme", BASE_THEME);
@@ -81,8 +85,12 @@ export class BaseComponent extends React.Component {
     _defineProperty(this, "testIdPrefix", '');
     _defineProperty(this, "_showView", true);
     _defineProperty(this, "closestTappable", void 0);
+    _defineProperty(this, "componentNode", void 0);
     this.state = defaultState || {};
     this.notifier.name = this.props.name || '';
+    this.componentNode = new WmComponentNode({
+      instance: this
+    });
     this.propertyProvider = new PropsProvider(assign({
       show: true
     }, defaultProps), assign({}, markupProps), (name, $new, $old) => {
@@ -104,6 +112,7 @@ export class BaseComponent extends React.Component {
     });
     //@ts-ignore
     this.state.props = this.propertyProvider.get();
+    this._INSTANCE = this;
     //@ts-ignore
     this._showView = !this.props.deferload;
     this.propertyProvider.check();
@@ -246,11 +255,13 @@ export class BaseComponent extends React.Component {
     }
   }
   componentWillUnmount() {
+    var _this$parent;
     this.destroyed = true;
     if (this.props.listener && this.props.listener.onComponentDestroy) {
       this.props.listener.onComponentDestroy(this.proxy);
     }
     this.cleanup.forEach(f => f && f());
+    (_this$parent = this.parent) === null || _this$parent === void 0 || (_this$parent = _this$parent.componentNode) === null || _this$parent === void 0 || _this$parent.remove(this.componentNode);
     this.notifier.destroy();
     this.notifier.notify('destroy', []);
   }
@@ -293,6 +304,7 @@ export class BaseComponent extends React.Component {
   setParent(parent) {
     if (parent && this.parent !== parent) {
       this.parent = parent;
+      this.parent.componentNode.add(this.componentNode);
       this.notifier.setParent(parent.notifier);
       this.parentListenerDestroyers = [this.parent.subscribe('forceUpdate', () => {
         this.cleanRefresh();
@@ -340,7 +352,7 @@ export class BaseComponent extends React.Component {
   }
   setBackground() {
     const bgStyle = this.styles.root;
-    this._background = /*#__PURE__*/React.createElement(BackgroundComponent, {
+    this._background = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackgroundComponent, {
       image: bgStyle.backgroundImage,
       position: bgStyle.backgroundPosition,
       size: bgStyle.backgroundSize,
@@ -349,7 +361,22 @@ export class BaseComponent extends React.Component {
       style: {
         borderRadius: this.styles.root.borderRadius
       }
-    });
+    }), this.state.highlight ? /*#__PURE__*/React.createElement(View, {
+      onTouchStart: () => {
+        this.setState({
+          highlight: false
+        });
+      },
+      style: [{
+        borderWidth: 2,
+        overflow: 'hidden',
+        backgroundColor: '#FFFF0033',
+        borderColor: 'orange',
+        borderStyle: 'dashed',
+        zIndex: 1000,
+        borderRadius: 0
+      }, StyleSheet.absoluteFill]
+    }) : null);
     delete this.styles.root['backgroundImage'];
     delete this.styles.root['backgroundPosition'];
     delete this.styles.root['backgroundResizeMode'];
@@ -402,9 +429,9 @@ export class BaseComponent extends React.Component {
         return /*#__PURE__*/React.createElement(AssetConsumer, null, loadAsset => {
           this.loadAsset = loadAsset;
           return /*#__PURE__*/React.createElement(ParentContext.Consumer, null, parent => {
-            var _this$parent;
+            var _this$parent2;
             this.setParent(parent);
-            this._showSkeleton = ((_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : _this$parent._showSkeleton) || !!this.state.props.showskeleton;
+            this._showSkeleton = this.state.props.showskeleton !== false && (((_this$parent2 = this.parent) === null || _this$parent2 === void 0 ? void 0 : _this$parent2._showSkeleton) || this.state.props.showskeleton === true);
             return /*#__PURE__*/React.createElement(ParentContext.Provider, {
               value: this
             }, /*#__PURE__*/React.createElement(ThemeConsumer, null, theme => {