@wavemaker/app-rn-runtime 11.9.4-rc.5977 → 11.10.0-next.140547

package/components/navigation/popover/popover.component.js

@@ -0,0 +1,193 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { isString } from 'lodash-es';
+import { TouchableOpacity, Text, View, Dimensions, Animated, PanResponder } from 'react-native';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import { ModalConsumer } from '@wavemaker/app-rn-runtime/core/modal.service';
+import WmAnchor from '@wavemaker/app-rn-runtime/components/basic/anchor/anchor.component';
+import WmPopoverProps from './popover.props';
+import { DEFAULT_CLASS } from './popover.styles';
+import WmContainer from '../../container/container.component';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { ScrollView, GestureHandlerRootView } from 'react-native-gesture-handler';
+export class WmPopoverState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "isOpened", false);
+    _defineProperty(this, "modalOptions", {});
+    _defineProperty(this, "position", {});
+    _defineProperty(this, "isPartialLoaded", false);
+  }
+}
+export default class WmPopover extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmPopoverProps(), new WmPopoverState());
+    _defineProperty(this, "view", null);
+    _defineProperty(this, "dragY", new Animated.Value(0));
+    _defineProperty(this, "panResponder", PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0 && gestureState.dy < Number(this.styles.popover.minHeight)) {
+          this.dragY.setValue(Number(this.styles.popover.minHeight) - gestureState.dy);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy < -50) {
+          Animated.timing(this.dragY, {
+            toValue: Number(this.styles.popover.maxHeight),
+            duration: 500,
+            useNativeDriver: false
+          }).start();
+        } else {
+          Animated.timing(this.dragY, {
+            toValue: Number(this.styles.popover.minHeight),
+            duration: 500,
+            useNativeDriver: false
+          }).start();
+        }
+      }
+    }));
+    _defineProperty(this, "computePosition", e => {
+      const position = {};
+      if (this.state.props.type === 'dropdown') {
+        const windowDimensions = Dimensions.get('window');
+        this.view.measure((x, y, width, height, px, py) => {
+          let popoverwidth = this.state.props.popoverwidth;
+          if (popoverwidth && isString(popoverwidth)) {
+            popoverwidth = parseInt(popoverwidth);
+          }
+          this.isRTL ? position.right = px : position.left = px;
+          if (px + popoverwidth > windowDimensions.width) {
+            this.isRTL ? position.right = px + width - popoverwidth : position.left = px + width - popoverwidth;
+          }
+          position.top = py + height;
+          this.updateState({
+            position: position
+          });
+        });
+      }
+    });
+    _defineProperty(this, "showPopover", e => {
+      this.updateState({
+        isOpened: true
+      });
+      this.invokeEventCallback('onShow', [e, this]);
+      e === null || e === void 0 || e.stopPropagation();
+    });
+    _defineProperty(this, "hide", () => {});
+    if (this.state.props.autoopen) {
+      this.showPopover();
+    }
+  }
+  getDefaultStyles() {
+    const isActionSheet = this.state.props.type === 'action-sheet';
+    return this.theme.getStyle(`${this.defaultClass} ${isActionSheet ? 'app-popover-action-sheet' : ''}`);
+  }
+  renderPopoverContent(props, styles, dimensions) {
+    return /*#__PURE__*/React.createElement(ScrollView, {
+      style: props.type === "action-sheet" ? {
+        dimensions
+      } : this.theme.mergeStyle(styles.popover, dimensions),
+      onScroll: event => {
+        this.notify('scroll', [event]);
+      },
+      scrollEventThrottle: 48,
+      accessible: props.type !== "dropdown",
+      accessibilityViewIsModal: true
+    }, props.title ? /*#__PURE__*/React.createElement(Text, {
+      style: styles.title
+    }, props.title) : null, /*#__PURE__*/React.createElement(TouchableOpacity, _extends({}, this.getTestPropsForAction('outercontent'), {
+      activeOpacity: 1,
+      onPress: () => {
+        props.autoclose === 'always' && this.hide();
+      },
+      style: styles.popoverContent.root
+    }), /*#__PURE__*/React.createElement(WmContainer, _extends({
+      styles: styles.popoverContent,
+      onLoad: () => this.invokeEventCallback('onLoad', [this])
+    }, props.renderPartial ? {
+      renderPartial: (p, onLoad) => {
+        return props.renderPartial && props.renderPartial(props, onLoad);
+      }
+    } : {}), props.renderPartial ? null : props.children)));
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    switch (name) {
+      case "autoopen":
+        if ($new) {
+          this.showPopover && this.showPopover();
+        } else {
+          this.hide && this.hide();
+        }
+    }
+  }
+  prepareModalOptions(content, styles, modalService) {
+    const o = this.state.modalOptions;
+    o.modalStyle = styles.modal;
+    o.contentStyle = {
+      ...styles.modalContent,
+      ...this.state.position
+    };
+    o.content = content;
+    o.isModal = this.state.props.autoclose !== 'disabled';
+    o.centered = true;
+    o.animation = this.state.props.contentanimation || 'slideInUp';
+    o.onClose = () => {
+      this.hide = () => {};
+      this.setState({
+        isOpened: false,
+        isPartialLoaded: false,
+        modalOptions: {}
+      });
+      this.invokeEventCallback('onHide', [null, this]);
+    };
+    this.hide = () => modalService.hideModal(this.state.modalOptions);
+    return o;
+  }
+  renderWidget(props) {
+    let dimensions = {};
+    const styles = this.theme.mergeStyle(this.theme.getStyle('popover-' + props.type), this.styles);
+    if (props.type === 'dropdown') {
+      if (props.popoverwidth) {
+        dimensions.width = props.popoverwidth;
+        styles.modalContent.width = props.popoverwidth;
+      }
+      if (props.popoverheight) {
+        dimensions.height = props.popoverheight;
+      }
+    }
+    return /*#__PURE__*/React.createElement(View, _extends({
+      style: styles.root,
+      onLayout: this.computePosition,
+      ref: ref => {
+        this.view = ref;
+      }
+    }, getAccessibilityProps(AccessibilityWidgetType.POVOVER, props)), this._background, /*#__PURE__*/React.createElement(WmAnchor, {
+      id: this.getTestId('trigger'),
+      animation: props.animation,
+      caption: props.caption,
+      badgevalue: props.badgevalue,
+      iconclass: props.iconclass,
+      iconposition: props.iconposition,
+      iconheight: props.iconheight,
+      iconwidth: props.iconwidth,
+      iconmargin: props.iconmargin,
+      iconurl: props.iconurl,
+      styles: styles.link,
+      onTap: this.showPopover
+    }), this.state.isOpened ? /*#__PURE__*/React.createElement(ModalConsumer, null, modalService => {
+      modalService.showModal(this.prepareModalOptions(props.type === 'action-sheet' ? /*#__PURE__*/React.createElement(Animated.View, _extends({
+        style: [styles.popover, {
+          height: this.dragY
+        }]
+      }, this.panResponder.panHandlers), /*#__PURE__*/React.createElement(GestureHandlerRootView, null, this.renderPopoverContent(props, styles, dimensions))) : this.renderPopoverContent(props, styles, dimensions), styles, modalService));
+      return null;
+    }) : null);
+  }
+}
+//# sourceMappingURL=popover.component.js.map

package/components/navigation/popover/popover.props.js

@@ -0,0 +1,31 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 WmPopoverProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "animation", null);
+    _defineProperty(this, "badgevalue", null);
+    _defineProperty(this, "caption", 'Link');
+    _defineProperty(this, "contentanimation", null);
+    _defineProperty(this, "iconclass", null);
+    _defineProperty(this, "iconposition", 'left');
+    _defineProperty(this, "popoverwidth", 240);
+    _defineProperty(this, "popoverheight", 360);
+    _defineProperty(this, "autoclose", 'outsideClick');
+    _defineProperty(this, "autoopen", false);
+    _defineProperty(this, "children", []);
+    _defineProperty(this, "renderPartial", null);
+    _defineProperty(this, "title", null);
+    _defineProperty(this, "type", 'action-sheet');
+    _defineProperty(this, "iconurl", null);
+    _defineProperty(this, "iconheight", null);
+    _defineProperty(this, "iconwidth", null);
+    _defineProperty(this, "iconmargin", null);
+    _defineProperty(this, "accessibilitylabel", undefined);
+    _defineProperty(this, "hint", undefined);
+    _defineProperty(this, "accessibilityrole", void 0);
+  }
+}
+//# sourceMappingURL=popover.props.js.map

package/components/page/left-panel/left-panel.component.js

@@ -0,0 +1,48 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmLeftPanelProps from './left-panel.props';
+import { DEFAULT_CLASS } from './left-panel.styles';
+import { ScrollView } from 'react-native-gesture-handler';
+export class WmLeftPanelState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "isPartialLoaded", false);
+  }
+}
+export default class WmLeftPanel extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmLeftPanelProps());
+  }
+  onPartialLoad() {
+    this.invokeEventCallback('onLoad', [null, this]);
+  }
+  renderContent(props) {
+    if (props.renderPartial) {
+      if (!this.state.isPartialLoaded) {
+        setTimeout(() => {
+          this.updateState({
+            isPartialLoaded: true
+          });
+        });
+      }
+      return props.renderPartial(props, this.onPartialLoad.bind(this));
+    }
+    return props.children;
+  }
+  renderWidget(props) {
+    return /*#__PURE__*/React.createElement(ScrollView, {
+      onScroll: event => {
+        this.notify('scroll', [event]);
+      },
+      scrollEventThrottle: 48,
+      contentContainerStyle: [this.styles.root, {
+        width: "100%",
+        maxWidth: "100%"
+      }]
+    }, this._background, this.renderContent(props));
+  }
+}
+//# sourceMappingURL=left-panel.component.js.map

package/components/page/left-panel/left-panel.props.js

@@ -0,0 +1,12 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 WmLeftPanelProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "children", void 0);
+    _defineProperty(this, "renderPartial", void 0);
+  }
+}
+//# sourceMappingURL=left-panel.props.js.map

package/components/page/page-content/page-content.component.js

@@ -0,0 +1,114 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { createRef } from 'react';
+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());
+    _defineProperty(this, "scrollRef", void 0);
+    this.hideMode = HideMode.DONOT_ADD_TO_DOM;
+    this.scrollRef = /*#__PURE__*/createRef();
+    this.subscribe('scrollToPosition', args => {
+      this.scrollTo(args);
+    });
+    this.subscribe('scrollToEnd', () => {
+      var _this$scrollRef;
+      (_this$scrollRef = this.scrollRef) === null || _this$scrollRef === void 0 || _this$scrollRef.current.scrollToEnd();
+    });
+  }
+  scrollTo(position) {
+    var _this$scrollRef2;
+    (_this$scrollRef2 = this.scrollRef) === null || _this$scrollRef2 === void 0 || _this$scrollRef2.current.scrollTo({
+      x: position.x,
+      y: position.y,
+      Animated: true
+    });
+  }
+  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._showSkeleton && this.styles.skeleton.root.backgroundColor ? this.styles.skeleton.root.backgroundColor : this.styles.root.backgroundColor
+      }
+    }, 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, {
+        ref: this.scrollRef,
+        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

package/components/page/page-content/page-content.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createRef","KeyboardAvoidingView","Platform","View","isWebPreviewMode","HideMode","BaseComponent","BaseComponentState","WmPageContentProps","DEFAULT_CLASS","ScrollView","WmLottie","SafeAreaInsetsContext","WmPageContentState","WmPageContent","constructor","props","_defineProperty","hideMode","DONOT_ADD_TO_DOM","scrollRef","subscribe","args","scrollTo","_this$scrollRef","current","scrollToEnd","position","_this$scrollRef2","x","y","Animated","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","ref","contentContainerStyle","showsVerticalScrollIndicator","onScroll","event","notify","scrollEventThrottle","children"],"sources":["page-content.component.tsx"],"sourcesContent":["import React, { createRef, RefObject } 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  private scrollRef: RefObject<any>;\n\n  constructor(props: WmPageContentProps) {\n    super(props, DEFAULT_CLASS, new WmPageContentProps());\n    this.hideMode = HideMode.DONOT_ADD_TO_DOM;\n    this.scrollRef = createRef();\n    this.subscribe('scrollToPosition', (args: any) => {\n      this.scrollTo(args)\n    })\n\n    this.subscribe('scrollToEnd', () => {\n      this.scrollRef?.current.scrollToEnd();\n    })\n  }\n\n  public scrollTo(position: {x: number, y: number}){\n    this.scrollRef?.current.scrollTo({\n      x: position.x,\n      y: position.y,\n      Animated: true\n    });\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  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 \n                ref={this.scrollRef}\n                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":"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","ignoreList":[]}

package/components/page/page-content/page-content.props.js

@@ -0,0 +1,12 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 { SkeletonAnimationProps } from '@wavemaker/app-rn-runtime/runtime/base-fragment.component';
+export default class WmPageContentProps extends SkeletonAnimationProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "children", null);
+    _defineProperty(this, "scrollable", true);
+  }
+}
+//# sourceMappingURL=page-content.props.js.map

package/components/page/page.component.js

@@ -0,0 +1,26 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { PanResponder, View } from 'react-native';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import { DEFAULT_CLASS } from './page.styles';
+export class WmPageState extends BaseComponentState {}
+export default class WmPage extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS);
+    _defineProperty(this, "panResponder", PanResponder.create({
+      onStartShouldSetPanResponderCapture: e => {
+        this.notify('globaltouch', [e]);
+        return false;
+      }
+    }));
+  }
+  renderWidget(props) {
+    return /*#__PURE__*/React.createElement(View, _extends({
+      style: this.styles.root
+    }, this.panResponder.panHandlers), this._background, props.children);
+  }
+}
+//# sourceMappingURL=page.component.js.map

package/components/page/partial-container/partial-container.props.js

@@ -0,0 +1,12 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 WmPartialContainerProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "content", null);
+    _defineProperty(this, "onLoad", () => {});
+  }
+}
+//# sourceMappingURL=partial-container.props.js.map

package/components/page/tabbar/tabbar.component.js

@@ -0,0 +1,149 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { Text, View, TouchableOpacity, Dimensions, Keyboard } from 'react-native';
+import { ThemeProvider } from '@wavemaker/app-rn-runtime/styles/theme';
+import { ModalConsumer } from '@wavemaker/app-rn-runtime/core/modal.service';
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
+import { NavigationServiceConsumer } from '@wavemaker/app-rn-runtime/core/navigation.service';
+import { BaseNavComponent, BaseNavState } from '@wavemaker/app-rn-runtime/components/navigation/basenav/basenav.component';
+import WmTabbarProps from './tabbar.props';
+import { DEFAULT_CLASS } from './tabbar.styles';
+import Svg, { Path } from 'react-native-svg';
+import { getPathDown } from './curve';
+// import { scale } from 'react-native-size-scaling';
+import ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
+const scale = n => n;
+class WmTabbarState extends BaseNavState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "showMore", false);
+    _defineProperty(this, "modalOptions", {});
+    _defineProperty(this, "dataItems", []);
+  }
+}
+export default class WmTabbar extends BaseNavComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmTabbarProps(), new WmTabbarState());
+    _defineProperty(this, "tabbarHeight", 0);
+    _defineProperty(this, "keyBoardShown", false);
+    _defineProperty(this, "maxWidth", Dimensions.get("window").width);
+    _defineProperty(this, "returnpathDown", void 0);
+    this.cleanup.push(Keyboard.addListener('keyboardWillShow', () => {
+      this.keyBoardShown = true;
+      this.forceUpdate();
+    }).remove);
+    this.cleanup.push(Keyboard.addListener('keyboardWillHide', () => {
+      this.keyBoardShown = false;
+      this.forceUpdate();
+    }).remove);
+  }
+  renderTabItem(item, testId, props, onSelect, floating = false) {
+    const isActive = props.isActive && props.isActive(item);
+    const getDisplayLabel = this.props.getDisplayExpression || (label => label);
+    let increasedGap = Number(testId) === (item === null || item === void 0 ? void 0 : item.indexBeforeMid) && this.state.dataItems.length % 2 != 0 && (props.classname || '').indexOf('clipped-tabbar') >= 0 ? [this.styles.tabItem, {
+      paddingRight: 70
+    }] : [this.styles.tabItem];
+    return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({}, this.getTestPropsForAction('item' + testId), {
+      style: [increasedGap, floating ? this.styles.centerHubItem : {}],
+      key: `${item.label}_${testId}`,
+      onPress: () => onSelect && onSelect()
+    }), /*#__PURE__*/React.createElement(View, {
+      key: item.key
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [isActive && !floating ? this.styles.activeTabItem : {}]
+    }, /*#__PURE__*/React.createElement(WmIcon, {
+      styles: this.theme.mergeStyle({}, this.styles.tabIcon, floating ? this.styles.centerHubIcon : {}, isActive ? this.styles.activeTabIcon : {}),
+      iconclass: item.icon
+    }))), /*#__PURE__*/React.createElement(Text, {
+      style: [this.styles.tabLabel, floating ? this.styles.centerHubLabel : {}, isActive ? this.styles.activeTabLabel : {}],
+      numberOfLines: 1
+    }, getDisplayLabel(item.label)));
+  }
+  onItemSelect(item, navigationService) {
+    item.link && navigationService.openUrl(item.link);
+    this.invokeEventCallback('onSelect', [null, this.proxy, item]);
+  }
+  prepareModalOptions(content) {
+    const o = this.state.modalOptions;
+    o.content = content;
+    o.modalStyle = {
+      bottom: this.tabbarHeight
+    };
+    o.contentStyle = this.styles.modalContent;
+    return o;
+  }
+  isVisible() {
+    return super.isVisible() && !this.keyBoardShown;
+  }
+  renderWidget(props) {
+    let max = 5;
+    const tabItems = this.state.dataItems;
+    const tabItemsLength = tabItems.length;
+    const isClippedTabbar = (props.classname || '').indexOf('clipped-tabbar') >= 0 && tabItemsLength % 2 !== 0;
+    if (isClippedTabbar && tabItemsLength % 2 !== 0) {
+      const middleIndex = Math.floor(tabItemsLength / 2);
+      tabItems[middleIndex]['floating'] = true;
+      tabItems[middleIndex - 1]['indexBeforeMid'] = middleIndex - 1;
+    }
+    this.returnpathDown = getPathDown(this.maxWidth, 65, 60, this.styles.root.height);
+    const moreItems = [];
+    if (tabItems.length > max) {
+      const moreItemsCount = Math.ceil((tabItems.length + 1 - max) / max) * max;
+      let j = 0;
+      for (let i = max - 1; i < moreItemsCount;) {
+        const row = [];
+        for (let j = 0; j < max; j++) {
+          row[j] = tabItems[i++] || {
+            key: 'tabItem' + i
+          };
+        }
+        moreItems.push(row);
+      }
+      max = max - 1;
+    }
+    return /*#__PURE__*/React.createElement(NavigationServiceConsumer, null, navigationService => /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, isClippedTabbar ? /*#__PURE__*/React.createElement(Svg, {
+      width: this.maxWidth,
+      height: scale(this.styles.root.height),
+      style: {
+        zIndex: -1,
+        position: 'absolute',
+        backgroundColor: ThemeVariables.INSTANCE.transparent
+      }
+    }, /*#__PURE__*/React.createElement(Path, {
+      fill: ThemeVariables.INSTANCE.tabbarBackgroundColor,
+      d: this.returnpathDown
+    })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(ModalConsumer, null, modalService => {
+      if (this.state.showMore) {
+        modalService.showModal(this.prepareModalOptions(/*#__PURE__*/React.createElement(ThemeProvider, {
+          value: this.theme
+        }, /*#__PURE__*/React.createElement(View, {
+          style: this.styles.moreMenu
+        }, moreItems.map((a, i) => /*#__PURE__*/React.createElement(View, {
+          key: i,
+          style: this.styles.moreMenuRow
+        }, a.map((item, index) => this.renderTabItem(item, i + '', props, () => this.onItemSelect(item, navigationService)))))))));
+      } else {
+        modalService.hideModal(this.state.modalOptions);
+      }
+      return null;
+    }), /*#__PURE__*/React.createElement(View, {
+      style: this.styles.menu,
+      onLayout: e => {
+        this.tabbarHeight = e.nativeEvent.layout.height;
+      }
+    }, tabItems.filter((item, i) => i < max).map((item, i) => this.renderTabItem(item, i + '', props, () => this.onItemSelect(item, navigationService), item.floating)), tabItems.length > max && this.renderTabItem({
+      label: props.morebuttonlabel,
+      icon: props.morebuttoniconclass
+    }, 6666 + '', props, () => {
+      this.updateState({
+        showMore: !this.state.showMore
+      });
+    }))));
+  }
+}
+//# sourceMappingURL=tabbar.component.js.map