@wavemaker/app-rn-runtime 11.6.1-rc.5499 → 11.7.0-dev.2

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

@@ -0,0 +1,136 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React from 'react';
+import { isString } from 'lodash-es';
+import { TouchableOpacity, Text, View, ScrollView, Dimensions } 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';
+export class WmPopoverState extends BaseComponentState {
+  constructor() {
+    super(...arguments);
+    _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, "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);
+          }
+          position.left = px;
+          if (px + popoverwidth > windowDimensions.width) {
+            position.left = px + width - popoverwidth;
+          }
+          position.top = py + height;
+          this.updateState({
+            position: position
+          });
+        });
+      }
+    });
+    _defineProperty(this, "showPopover", e => {
+      this.setState({
+        isOpened: true
+      });
+      this.invokeEventCallback('onShow', [e, this]);
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+    });
+    _defineProperty(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( /*#__PURE__*/React.createElement(ScrollView, {
+        style: this.theme.mergeStyle(styles.popover, dimensions),
+        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))), styles, modalService));
+      return null;
+    }) : null);
+  }
+}
+//# sourceMappingURL=popover.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","isString","TouchableOpacity","Text","View","ScrollView","Dimensions","BaseComponent","BaseComponentState","ModalConsumer","WmAnchor","WmPopoverProps","DEFAULT_CLASS","WmContainer","AccessibilityWidgetType","getAccessibilityProps","WmPopoverState","constructor","arguments","_defineProperty","WmPopover","props","e","position","state","type","windowDimensions","get","view","measure","x","y","width","height","px","py","popoverwidth","parseInt","left","top","updateState","setState","isOpened","invokeEventCallback","stopPropagation","prepareModalOptions","content","styles","modalService","o","modalOptions","modalStyle","modal","contentStyle","modalContent","isModal","autoclose","centered","animation","contentanimation","onClose","hide","isPartialLoaded","hideModal","renderWidget","dimensions","theme","mergeStyle","getStyle","popoverheight","createElement","_extends","style","root","onLayout","computePosition","ref","POVOVER","_background","id","getTestId","caption","badgevalue","iconclass","iconposition","iconheight","iconwidth","iconmargin","iconurl","link","onTap","showPopover","showModal","popover","accessible","accessibilityViewIsModal","title","getTestPropsForAction","activeOpacity","onPress","popoverContent","onLoad","renderPartial","p","children"],"sources":["popover.component.tsx"],"sourcesContent":["import React from 'react';\nimport { isString } from 'lodash-es';\nimport { LayoutChangeEvent, TouchableOpacity, Text, View, ScrollView, Dimensions } from 'react-native';\nimport { BaseComponent, BaseComponentState, BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport { TapEvent } from '@wavemaker/app-rn-runtime/core/tappable.component';\nimport { ModalConsumer, ModalOptions, ModalService } from '@wavemaker/app-rn-runtime/core/modal.service';\nimport WmAnchor from '@wavemaker/app-rn-runtime/components/basic/anchor/anchor.component';\n\nimport WmPopoverProps from './popover.props';\nimport { DEFAULT_CLASS, WmPopoverStyles } from './popover.styles';\nimport WmContainer from '../../container/container.component';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \n\nexport class WmPopoverState extends BaseComponentState<WmPopoverProps> {\n  isOpened: boolean = false;\n  modalOptions = {} as ModalOptions;\n  position = {} as PopoverPosition;\n  isPartialLoaded = false;\n}\n\nexport interface PopoverPosition {\n  top?: number;\n  bottom?: number;\n  left?: number;\n  right?: number;\n}\n\nexport default class WmPopover extends BaseComponent<WmPopoverProps, WmPopoverState, WmPopoverStyles> {\n\n  view: View = null as any;\n\n  constructor(props: WmPopoverProps) {\n    super(props, DEFAULT_CLASS, new WmPopoverProps(), new WmPopoverState());\n  }\n\n  private computePosition = (e: LayoutChangeEvent) => {\n    const position = {} as PopoverPosition;\n    if (this.state.props.type === 'dropdown') {\n      const windowDimensions = Dimensions.get('window');\n      this.view.measure((x, y, width, height, px, py) => {\n        let popoverwidth = this.state.props.popoverwidth as any;\n        if (popoverwidth && isString(popoverwidth)) {\n          popoverwidth = parseInt(popoverwidth);\n        }\n        position.left = px;\n        if (px + popoverwidth > windowDimensions.width) {\n          position.left = px + width - popoverwidth;\n        }\n        position.top = py + height;\n        this.updateState({position: position} as WmPopoverState);\n      });\n    }\n  };\n\n  public showPopover = (e?: TapEvent) => {\n    this.setState({ isOpened: true });\n    this.invokeEventCallback('onShow', [e, this]);\n    e?.stopPropagation();\n  };\n\n  public hide = () => {};\n\n  prepareModalOptions(content: React.ReactNode, styles: WmPopoverStyles, modalService: ModalService) {\n    const o = this.state.modalOptions;\n    o.modalStyle = styles.modal;\n    o.contentStyle = {...styles.modalContent, ...this.state.position};\n    o.content = content;\n    o.isModal = this.state.props.autoclose !== 'disabled';\n    o.centered = true;\n    o.animation = this.state.props.contentanimation || 'slideInUp';\n    o.onClose = () => {\n      this.hide = () => {};\n      this.setState({ isOpened: false, isPartialLoaded: false, modalOptions: {} as ModalOptions });\n      this.invokeEventCallback('onHide', [null, this]);\n    };\n    this.hide = () => modalService.hideModal(this.state.modalOptions);\n    return o;\n  }\n\n  renderWidget(props: WmPopoverProps) {\n    let dimensions = {} as any;\n    const styles = this.theme.mergeStyle(this.theme.getStyle('popover-' + props.type), this.styles);\n    if (props.type === 'dropdown') {\n      if (props.popoverwidth) {\n        dimensions.width = props.popoverwidth;\n        styles.modalContent.width = props.popoverwidth;\n      }\n      if (props.popoverheight) {\n        dimensions.height = props.popoverheight;\n      }\n    }\n    return (\n      <View style={styles.root} onLayout={this.computePosition} ref={ref => {this.view = ref as View}} {...getAccessibilityProps(AccessibilityWidgetType.POVOVER, props)}>\n        {this._background}\n        <WmAnchor\n          id={this.getTestId('trigger')}\n          animation={props.animation}\n          caption={props.caption}\n          badgevalue={props.badgevalue}\n          iconclass={props.iconclass}\n          iconposition={props.iconposition}\n          iconheight={props.iconheight}\n          iconwidth={props.iconwidth}\n          iconmargin={props.iconmargin}\n          iconurl={props.iconurl}\n          styles={styles.link}\n          onTap={this.showPopover}/>\n        {this.state.isOpened ? (\n          <ModalConsumer>\n            {(modalService: ModalService) => {\n              modalService.showModal(this.prepareModalOptions((\n                  <ScrollView style={this.theme.mergeStyle(styles.popover, dimensions)} accessible={props.type !== \"dropdown\"} accessibilityViewIsModal>\n                    {props.title ? (<Text style={styles.title}>{props.title}</Text>): null}\n                    <TouchableOpacity \n                    {...this.getTestPropsForAction('outercontent')}\n                    activeOpacity={1} onPress={() => {\n                      props.autoclose === 'always' && this.hide()\n                    }} style={styles.popoverContent.root}>\n                      <WmContainer\n                        styles={styles.popoverContent}\n                        onLoad={() => this.invokeEventCallback('onLoad', [this])}\n                        {... props.renderPartial ? {\n                          renderPartial : (p: any, onLoad: Function) => {\n                            return props.renderPartial && props.renderPartial(props, onLoad);\n                          }\n                        } : {}}>\n                          {props.renderPartial ? null : props.children}\n                      </WmContainer>\n                    </TouchableOpacity>\n                  </ScrollView>\n              ), styles, modalService));\n              return null;\n            }}\n          </ModalConsumer>) : null}\n      </View>);\n  }\n}\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["BaseProps","WmPopoverProps","constructor","arguments","_defineProperty","undefined"],"sources":["popover.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport React from 'react';\nimport { AccessibilityRole } from 'react-native';\n\nexport default class WmPopoverProps extends BaseProps {\n  animation?: string = null as any;\n  badgevalue? = null as any;\n  caption? = 'Link';\n  contentanimation?: string = null as any;\n  iconclass? = null as any;\n  iconposition? = 'left' as any;\n  popoverwidth?: string | number | null = 240;\n  popoverheight?: string | number | null = 360;\n  autoclose?: 'outsideClick' | 'disabled' | 'always' = 'outsideClick';\n  children? = [] as any;\n  renderPartial?: Function = null as any;\n  title?: string = null as any;\n  type?: 'action-sheet' | 'dropdown' = 'action-sheet';\n  iconurl?: string = null as any;\n  iconheight?: number = null as any;\n  iconwidth?: number = null as any;\n  iconmargin?: number = null as any;\n  accessibilitylabel?: string = undefined;\n  hint?: string = undefined;\n  accessibilityrole?: AccessibilityRole = \"none\";\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAIzE,eAAe,MAAMC,cAAc,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,oBAC/B,IAAI;IAAAA,eAAA,qBACX,IAAI;IAAAA,eAAA,kBACP,MAAM;IAAAA,eAAA,2BACW,IAAI;IAAAA,eAAA,oBACnB,IAAI;IAAAA,eAAA,uBACD,MAAM;IAAAA,eAAA,uBACkB,GAAG;IAAAA,eAAA,wBACF,GAAG;IAAAA,eAAA,oBACS,cAAc;IAAAA,eAAA,mBACvD,EAAE;IAAAA,eAAA,wBACa,IAAI;IAAAA,eAAA,gBACd,IAAI;IAAAA,eAAA,eACgB,cAAc;IAAAA,eAAA,kBAChC,IAAI;IAAAA,eAAA,qBACD,IAAI;IAAAA,eAAA,oBACL,IAAI;IAAAA,eAAA,qBACH,IAAI;IAAAA,eAAA,6BACIC,SAAS;IAAAD,eAAA,eACvBC,SAAS;IAAAD,eAAA,4BACe,MAAM;EAAA;AAChD"}

package/components/navigation/popover/popover.styles.js

@@ -0,0 +1,81 @@
+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-popover';
+BASE_THEME.registerStyle((themeVariables, addStyle) => {
+  const defaultStyles = defineStyles({
+    root: {
+      padding: 8,
+      alignSelf: 'flex-start'
+    },
+    text: {},
+    title: {
+      backgroundColor: themeVariables.popoverTitleBackgroundColor,
+      padding: 12,
+      color: themeVariables.popoverTitleColor,
+      fontSize: 16,
+      fontFamily: themeVariables.baseFont
+    },
+    link: {
+      root: {},
+      text: {
+        paddingRight: 8
+      }
+    },
+    popover: {
+      backgroundColor: themeVariables.popoverBackgroundColor,
+      maxWidth: 640,
+      borderTopLeftRadius: 28,
+      borderTopRightRadius: 28
+    },
+    popoverContent: {
+      root: {
+        flex: 1
+      }
+    },
+    modal: {},
+    modalContent: {
+      borderTopLeftRadius: 28,
+      borderTopRightRadius: 28
+    }
+  });
+  addStyle(DEFAULT_CLASS, '', defaultStyles);
+  addStyle('popover-action-sheet', '', {
+    modal: {
+      backgroundColor: 'rgba(0, 0, 0, 0.3)'
+    },
+    popover: {
+      width: '100%',
+      minHeight: 240,
+      maxHeight: Dimensions.get('window').height - 120
+    },
+    modalContent: {
+      position: 'absolute',
+      bottom: 0,
+      width: '100%',
+      ...BASE_THEME.getStyle('elevate1').root,
+      shadowOffset: {
+        width: 0,
+        height: 0
+      },
+      shadowOpacity: 0.6,
+      shadowRadius: 10,
+      justifyContent: 'flex-end'
+    }
+  });
+  addStyle('popover-dropdown', '', {
+    modal: {
+      backgroundColor: 'transparent'
+    },
+    popover: {
+      backgroundColor: themeVariables.transparent
+    },
+    modalContent: {
+      borderRadius: 6,
+      position: 'absolute',
+      ...BASE_THEME.getStyle('elevate4').root,
+      shadowRadius: 8
+    }
+  });
+});
+//# sourceMappingURL=popover.styles.js.map

package/components/navigation/popover/popover.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BASE_THEME","defineStyles","Dimensions","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","padding","alignSelf","text","title","backgroundColor","popoverTitleBackgroundColor","color","popoverTitleColor","fontSize","fontFamily","baseFont","link","paddingRight","popover","popoverBackgroundColor","maxWidth","borderTopLeftRadius","borderTopRightRadius","popoverContent","flex","modal","modalContent","width","minHeight","maxHeight","get","height","position","bottom","getStyle","shadowOffset","shadowOpacity","shadowRadius","justifyContent","transparent","borderRadius"],"sources":["popover.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmAnchorStyles } from '@wavemaker/app-rn-runtime/components/basic/anchor/anchor.styles';\nimport { WmContainerStyles } from '@wavemaker/app-rn-runtime/components/container/container.styles';\nimport { Dimensions } from 'react-native';\n\nexport type WmPopoverStyles = BaseStyles & {\n    link: WmAnchorStyles,\n    popover: AllStyle,\n    popoverContent : WmContainerStyles,\n    modal: AllStyle,\n    modalContent: AllStyle,\n    title: AllStyle\n};\n\nexport const DEFAULT_CLASS = 'app-popover';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmPopoverStyles = defineStyles({\n        root: {\n            padding: 8,\n            alignSelf: 'flex-start'\n        },\n        text: {},\n        title: {\n            backgroundColor: themeVariables.popoverTitleBackgroundColor,\n            padding: 12,\n            color: themeVariables.popoverTitleColor,\n            fontSize: 16,\n            fontFamily: themeVariables.baseFont\n        },\n        link: {\n            root:{\n            },\n            text:{\n                paddingRight: 8\n            }\n        } as WmAnchorStyles,\n        popover: {\n            backgroundColor: themeVariables.popoverBackgroundColor,\n            maxWidth: 640,\n            borderTopLeftRadius: 28,\n            borderTopRightRadius: 28        \n        },\n        popoverContent : {\n            root: {\n                flex: 1\n            }\n        } as WmContainerStyles,\n        modal: {},\n        modalContent: {\n            borderTopLeftRadius: 28,\n            borderTopRightRadius: 28\n        }\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle('popover-action-sheet', '', {\n        modal: {\n            backgroundColor: 'rgba(0, 0, 0, 0.3)',\n        },\n        popover: {\n            width: '100%',\n            minHeight: 240,\n            maxHeight: Dimensions.get('window').height - 120,\n        },\n        modalContent: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n            ...BASE_THEME.getStyle('elevate1').root,\n            shadowOffset: {\n                width: 0,\n                height: 0\n            },\n            shadowOpacity: 0.6,\n            shadowRadius: 10,\n            justifyContent: 'flex-end'\n        }\n    } as any as WmPopoverStyles);\n    addStyle('popover-dropdown', '', {\n        modal: {\n            backgroundColor: 'transparent',\n        },\n        popover: {\n            backgroundColor: themeVariables.transparent\n        },\n        modalContent: {\n            borderRadius: 6,\n            position: 'absolute',\n            ...BASE_THEME.getStyle('elevate4').root,\n            shadowRadius: 8\n        }\n    } as WmPopoverStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAoB,wCAAwC;AAC7E,SAAqBC,YAAY,QAAQ,+CAA+C;AAGxF,SAASC,UAAU,QAAQ,cAAc;AAWzC,OAAO,MAAMC,aAAa,GAAG,aAAa;AAC1CH,UAAU,CAACI,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAA8B,GAAGN,YAAY,CAAC;IAChDO,IAAI,EAAE;MACFC,OAAO,EAAE,CAAC;MACVC,SAAS,EAAE;IACf,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,KAAK,EAAE;MACHC,eAAe,EAAER,cAAc,CAACS,2BAA2B;MAC3DL,OAAO,EAAE,EAAE;MACXM,KAAK,EAAEV,cAAc,CAACW,iBAAiB;MACvCC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAEb,cAAc,CAACc;IAC/B,CAAC;IACDC,IAAI,EAAE;MACFZ,IAAI,EAAC,CACL,CAAC;MACDG,IAAI,EAAC;QACDU,YAAY,EAAE;MAClB;IACJ,CAAmB;IACnBC,OAAO,EAAE;MACLT,eAAe,EAAER,cAAc,CAACkB,sBAAsB;MACtDC,QAAQ,EAAE,GAAG;MACbC,mBAAmB,EAAE,EAAE;MACvBC,oBAAoB,EAAE;IAC1B,CAAC;IACDC,cAAc,EAAG;MACbnB,IAAI,EAAE;QACFoB,IAAI,EAAE;MACV;IACJ,CAAsB;IACtBC,KAAK,EAAE,CAAC,CAAC;IACTC,YAAY,EAAE;MACVL,mBAAmB,EAAE,EAAE;MACvBC,oBAAoB,EAAE;IAC1B;EACJ,CAAC,CAAC;EAEFpB,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,sBAAsB,EAAE,EAAE,EAAE;IACjCuB,KAAK,EAAE;MACHhB,eAAe,EAAE;IACrB,CAAC;IACDS,OAAO,EAAE;MACLS,KAAK,EAAE,MAAM;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE/B,UAAU,CAACgC,GAAG,CAAC,QAAQ,CAAC,CAACC,MAAM,GAAG;IACjD,CAAC;IACDL,YAAY,EAAE;MACVM,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,CAAC;MACTN,KAAK,EAAE,MAAM;MACb,GAAG/B,UAAU,CAACsC,QAAQ,CAAC,UAAU,CAAC,CAAC9B,IAAI;MACvC+B,YAAY,EAAE;QACVR,KAAK,EAAE,CAAC;QACRI,MAAM,EAAE;MACZ,CAAC;MACDK,aAAa,EAAE,GAAG;MAClBC,YAAY,EAAE,EAAE;MAChBC,cAAc,EAAE;IACpB;EACJ,CAA2B,CAAC;EAC5BpC,QAAQ,CAAC,kBAAkB,EAAE,EAAE,EAAE;IAC7BuB,KAAK,EAAE;MACHhB,eAAe,EAAE;IACrB,CAAC;IACDS,OAAO,EAAE;MACLT,eAAe,EAAER,cAAc,CAACsC;IACpC,CAAC;IACDb,YAAY,EAAE;MACVc,YAAY,EAAE,CAAC;MACfR,QAAQ,EAAE,UAAU;MACpB,GAAGpC,UAAU,CAACsC,QAAQ,CAAC,UAAU,CAAC,CAAC9B,IAAI;MACvCiC,YAAY,EAAE;IAClB;EACJ,CAAoB,CAAC;AACzB,CAAC,CAAC"}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ScrollView, 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';
+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;
+  }
+  renderWidget(props) {
+    const showScrollbar = this.styles.root.scrollbarColor != 'transparent';
+    return props.scrollable || isWebPreviewMode() ? /*#__PURE__*/React.createElement(View, {
+      style: {
+        height: '100%',
+        width: '100%',
+        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);
+  }
+}
+//# sourceMappingURL=page-content.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","ScrollView","View","isWebPreviewMode","HideMode","BaseComponent","BaseComponentState","WmPageContentProps","DEFAULT_CLASS","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 { ScrollView, 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';\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,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,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;AAE1E,OAAO,MAAMC,kBAAkB,SAASH,kBAAkB,CAAqB;AAI/E,eAAe,MAAMI,aAAa,SAASL,aAAa,CAA8D;EAEpHM,WAAWA,CAACC,KAAyB,EAAE;IACrC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,kBAAkB,CAAC,CAAC,CAAC;IACrD,IAAI,CAACM,QAAQ,GAAGT,QAAQ,CAACU,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,IAAIjB,gBAAgB,CAAC,CAAC,gBAC3CH,KAAA,CAAAqB,aAAA,CAACnB,IAAI;MAACoB,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,CAACpB,UAAU;MAAC0B,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,CAACnB,IAAI;MAACoB,KAAK,EAAE,IAAI,CAACL,MAAM,CAACC;IAAK,GAC3B,IAAI,CAACQ,WAAW,EAChBd,KAAK,CAACqB,QACH,CACP;EACH;AACF"}

package/components/page/tabbar/curve.js

@@ -0,0 +1,84 @@
+import * as d3Shape from "d3-shape";
+// import { scale } from "react-native-size-scaling";
+const scale = n => n;
+//** Path Line */
+const line = (width, height) => {
+  const path = d3Shape.line().x(d => d.x).y(d => d.y)([{
+    x: width / 2,
+    y: 0
+  }, {
+    x: width,
+    y: 0
+  }, {
+    x: width,
+    y: height
+  }, {
+    x: 0,
+    y: height
+  }, {
+    x: 0,
+    y: 0
+  }, {
+    x: width / 2,
+    y: 0
+  }]);
+  return path;
+};
+
+//** Path Curved*/
+const lineCurvedDown = (iPosition, height, circle) => {
+  const position = iPosition;
+  const circleWidth = circle + position;
+  const trim = (position + circleWidth) / 2;
+  const curved = d3Shape.line().x(d => d.x).y(d => d.y).curve(d3Shape.curveBasis)([{
+    x: position - scale(20),
+    y: 0
+  },
+  // border center left
+  {
+    x: position - scale(10),
+    y: scale(2)
+  }, {
+    x: position - scale(2),
+    y: scale(10)
+  }, {
+    x: position,
+    y: scale(17)
+  }, {
+    x: trim - scale(25),
+    y: height / 2 + scale(2)
+  }, {
+    x: trim - scale(10),
+    y: height / 2 + scale(10)
+  }, {
+    x: trim,
+    y: height / 2 + scale(10)
+  }, {
+    x: trim + scale(10),
+    y: height / 2 + scale(10)
+  }, {
+    x: trim + scale(25),
+    y: height / 2 + scale(2)
+  }, {
+    x: circleWidth,
+    y: scale(17)
+  },
+  // border center right
+  {
+    x: circleWidth + scale(2),
+    y: scale(10)
+  }, {
+    x: circleWidth + scale(10),
+    y: 0
+  }, {
+    x: circleWidth + scale(20),
+    y: 0
+  }]);
+  return curved;
+};
+export const getPathDown = (width, iHeight, centerWidth, clippedTabbarHeight) => {
+  const height = scale(iHeight);
+  const circleWidth = scale(centerWidth) + scale(16);
+  return `${line(width, clippedTabbarHeight)} ${lineCurvedDown(width / 2 - circleWidth / 2, height, circleWidth)}`;
+};
+//# sourceMappingURL=curve.js.map

package/components/page/tabbar/curve.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["d3Shape","scale","n","line","width","height","path","x","d","y","lineCurvedDown","iPosition","circle","position","circleWidth","trim","curved","curve","curveBasis","getPathDown","iHeight","centerWidth","clippedTabbarHeight"],"sources":["curve.tsx"],"sourcesContent":["import * as d3Shape from \"d3-shape\";\n// import { scale } from \"react-native-size-scaling\";\nconst scale = (n: number) => n;\n\ninterface LineDatum {\n  x: number;\n  y: number;\n  missing?: boolean;\n}\n\n//** Path Line */\nconst line = (width : number, height: number) => {\n  const path: any = d3Shape\n  .line<LineDatum>()\n  .x((d) => d.x)\n  .y((d) => d.y)([\n    { x: width / 2, y: 0 },\n    { x: width, y: 0 },\n    { x: width, y: height },\n    { x: 0, y: height},\n    { x: 0, y: 0 },\n    { x: width / 2, y: 0 },\n  ]);\n  \nreturn path;\n};\n\n//** Path Curved*/\nconst lineCurvedDown = (iPosition: number, height: number, circle: number) => {\n  const position = iPosition;\n  const circleWidth = circle + position;\n  const trim = (position + circleWidth) / 2;\n  \n  const curved: any = d3Shape\n    .line<LineDatum>()\n    .x((d) => d.x)\n    .y((d) => d.y)\n    .curve(d3Shape.curveBasis)([\n      { x: position - scale(20), y: 0 }, // border center left\n      { x: position - scale(10), y: scale(2) },\n      { x: position - scale(2), y: scale(10) },\n      { x: position, y: scale(17) },\n  \n      { x: trim - scale(25), y: height / 2 + scale(2) },\n      { x: trim - scale(10), y: height / 2 + scale(10) },\n      { x: trim, y: height / 2 + scale(10) },\n      { x: trim + scale(10), y: height / 2 + scale(10) },\n      { x: trim + scale(25), y: height / 2 + scale(2) },\n  \n      { x: circleWidth, y: scale(17) }, // border center right\n      { x: circleWidth + scale(2), y: scale(10) },\n      { x: circleWidth + scale(10), y: 0 },\n      { x: circleWidth + scale(20), y: 0 },\n    ]);\n  return curved;\n};\n\nexport const getPathDown = (width: number, iHeight: number, centerWidth: number, clippedTabbarHeight: number) => {\n  const height = scale(iHeight);\n  const circleWidth = scale(centerWidth) + scale(16);\n  return `${line(width, clippedTabbarHeight)} ${lineCurvedDown(\n    width / 2 - circleWidth / 2,\n    height,\n    circleWidth\n  )}`;\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,137 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React from 'react';
+import { Text, View, TouchableOpacity, Dimensions } 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() {
+    super(...arguments);
+    _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, "maxWidth", Dimensions.get("window").width);
+    _defineProperty(this, "returnpathDown", void 0);
+  }
+  renderTabItem(item, testId, props, onSelect) {
+    let floating = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 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(View, {
+      style: [increasedGap, floating ? this.styles.centerHubItem : {}],
+      key: `${item.label}_${testId}`
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, _extends({}, this.getTestPropsForAction('item' + testId), {
+      onPress: () => onSelect && onSelect(),
+      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 : {}]
+    }, 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;
+  }
+  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 (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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","View","TouchableOpacity","Dimensions","ThemeProvider","ModalConsumer","WmIcon","NavigationServiceConsumer","BaseNavComponent","BaseNavState","WmTabbarProps","DEFAULT_CLASS","Svg","Path","getPathDown","ThemeVariables","scale","n","WmTabbarState","constructor","arguments","_defineProperty","WmTabbar","props","get","width","renderTabItem","item","testId","onSelect","floating","length","undefined","isActive","getDisplayLabel","getDisplayExpression","label","increasedGap","Number","indexBeforeMid","state","dataItems","classname","indexOf","styles","tabItem","paddingRight","createElement","style","centerHubItem","key","_extends","getTestPropsForAction","onPress","activeTabItem","theme","mergeStyle","tabIcon","centerHubIcon","activeTabIcon","iconclass","icon","tabLabel","centerHubLabel","activeTabLabel","onItemSelect","navigationService","link","openUrl","invokeEventCallback","proxy","prepareModalOptions","content","o","modalOptions","modalStyle","bottom","tabbarHeight","contentStyle","modalContent","renderWidget","max","tabItems","tabItemsLength","isClippedTabbar","middleIndex","Math","floor","returnpathDown","maxWidth","root","height","moreItems","moreItemsCount","ceil","j","i","row","push","zIndex","position","backgroundColor","INSTANCE","transparent","fill","tabbarBackgroundColor","d","Fragment","modalService","showMore","showModal","value","moreMenu","map","a","moreMenuRow","index","hideModal","menu","onLayout","e","nativeEvent","layout","filter","morebuttonlabel","morebuttoniconclass","updateState"],"sources":["tabbar.component.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Text, View, TouchableOpacity, Dimensions } from 'react-native';\n\nimport { ThemeProvider } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { ModalConsumer, ModalOptions, ModalService } from '@wavemaker/app-rn-runtime/core/modal.service';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport NavigationService, { NavigationServiceConsumer } from '@wavemaker/app-rn-runtime/core/navigation.service';\nimport { BaseNavProps } from '@wavemaker/app-rn-runtime/components/navigation/basenav/basenav.props';\nimport { BaseNavComponent, BaseNavState, NavigationDataItem } from '@wavemaker/app-rn-runtime/components/navigation/basenav/basenav.component';\n\nimport WmTabbarProps from './tabbar.props';\nimport { DEFAULT_CLASS, WmTabbarStyles } from './tabbar.styles';\nimport Svg, { Path } from 'react-native-svg';\nimport { getPathDown } from './curve';\n// import { scale } from 'react-native-size-scaling';\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\n\ninterface TabDataItem extends NavigationDataItem {\n  floating: boolean;\n  indexBeforeMid: number;\n}\n\nconst scale = (n: number) => n;\n\nclass WmTabbarState<T extends BaseNavProps> extends BaseNavState<T> {\n  showMore = false;\n  modalOptions = {} as ModalOptions;\n  dataItems: TabDataItem[] = [];\n}\n\nexport default class WmTabbar extends BaseNavComponent<WmTabbarProps, WmTabbarState<WmTabbarProps>, WmTabbarStyles> {\n\n  private tabbarHeight = 0;\n\n  constructor(props: WmTabbarProps) {\n    super(props, DEFAULT_CLASS, new WmTabbarProps(), new WmTabbarState());\n  }\n\n  private maxWidth = Dimensions.get(\"window\").width;  \n  private returnpathDown: any;\n\n  renderTabItem(item: TabDataItem, testId: string, props: WmTabbarProps, onSelect: Function, floating = false) {\n\n    const isActive = props.isActive && props.isActive(item);\n    const getDisplayLabel = this.props.getDisplayExpression || ((label: string) => label);\n    let increasedGap = Number(testId) === item?.indexBeforeMid && (this.state.dataItems.length % 2!=0)  && ((props.classname || '').indexOf('clipped-tabbar') >= 0)\n    ? [this.styles.tabItem, { paddingRight: 70 }]\n    : [this.styles.tabItem];\n  \n    return (\n      <View style={[increasedGap, floating? this.styles.centerHubItem: {}]} key={`${item.label}_${testId}`}>\n        <TouchableOpacity\n          {...this.getTestPropsForAction('item' + testId)}\n          onPress={() => onSelect && onSelect()}\n          key={item.key}\n        >\n          <View style={[isActive && !floating  ? this.styles.activeTabItem : {}]}>\n            <WmIcon\n              styles={this.theme.mergeStyle({}, this.styles.tabIcon, floating? this.styles.centerHubIcon: {}, isActive ? this.styles.activeTabIcon : {})}\n              iconclass={item.icon}\n            ></WmIcon>\n          </View>\n        </TouchableOpacity>\n        <Text style={[this.styles.tabLabel, floating? this.styles.centerHubLabel: {},  isActive ? this.styles.activeTabLabel : {}]}>\n          {getDisplayLabel(item.label)}\n        </Text>\n      </View>\n    );\n  }\n  \n  onItemSelect(item: NavigationDataItem, navigationService: NavigationService) {\n    item.link && navigationService.openUrl(item.link);\n    this.invokeEventCallback('onSelect', [null, this.proxy, item]);\n  }\n\n  prepareModalOptions(content: ReactNode) {\n    const o = this.state.modalOptions;\n    o.content = content;\n    o.modalStyle = {\n      bottom: this.tabbarHeight\n    };\n    o.contentStyle = this.styles.modalContent; \n    return o;\n  }\n\n  renderWidget(props: WmTabbarProps) {\n    let max = 5;\n    const tabItems = this.state.dataItems;\n    const tabItemsLength = tabItems.length;\n    const isClippedTabbar = ((props.classname || '').indexOf('clipped-tabbar') >= 0) && (tabItemsLength % 2 !== 0);\n    if (tabItemsLength % 2 !== 0) {\n      const middleIndex = Math.floor(tabItemsLength / 2);\n      tabItems[middleIndex]['floating'] = true;\n      tabItems[middleIndex - 1]['indexBeforeMid'] = middleIndex-1;\n    }\n   this.returnpathDown = getPathDown(this.maxWidth, 65 ,60,this.styles.root.height as number);\n    const moreItems = [] as any[][];\n    if (tabItems.length > max) {\n      const moreItemsCount = Math.ceil((tabItems.length + 1 - max)/ max) * max;\n      let j = 0;\n      for (let i = max-1; i < moreItemsCount;) {\n        const row = [];\n        for (let j = 0; j < max; j++) {\n          row[j] = tabItems[i++] || {key: 'tabItem' + i} as TabDataItem;\n        }\n        moreItems.push(row);\n      }\n      max = max - 1;\n    }\n    return (\n      <NavigationServiceConsumer>\n        {(navigationService) =>\n        (<View style={this.styles.root}>\n         {isClippedTabbar ? (\n        <Svg width={this.maxWidth} height={scale(this.styles.root.height as number)} style={{zIndex: -1,position: 'absolute',backgroundColor: ThemeVariables.INSTANCE.transparent}}>\n        <Path fill={ThemeVariables.INSTANCE.tabbarBackgroundColor} {...{ d: this.returnpathDown }}/>\n        </Svg>\n           ): <></>}   \n          <ModalConsumer>\n            {(modalService: ModalService) => {\n              if (this.state.showMore) {\n                modalService.showModal(this.prepareModalOptions((\n                <ThemeProvider value={this.theme} >\n                  <View style={this.styles.moreMenu}>\n                    {moreItems.map((a, i) =>\n                      (<View key={i} style={this.styles.moreMenuRow}>\n                        {a.map((item, index) => this.renderTabItem(item, i + '', props,  () => this.onItemSelect(item, navigationService)))}\n                      </View>)\n                    )}\n                  </View>\n                </ThemeProvider>)));\n              } else {\n                modalService.hideModal(this.state.modalOptions);\n              }\n              return null;\n            }}\n          </ModalConsumer>\n          <View style={this.styles.menu}\n            onLayout={e => { this.tabbarHeight = e.nativeEvent.layout.height}}> \n            {tabItems.filter((item, i) => i < max)\n              .map((item, i) => this.renderTabItem(item, i + '', props, () => this.onItemSelect(item, navigationService), item.floating))}\n            {tabItems.length > max && (\n              this.renderTabItem({\n                label: props.morebuttonlabel,\n                icon: props.morebuttoniconclass\n              } as TabDataItem, 6666 +'', props,  () => {\n                this.updateState({showMore: !this.state.showMore} as WmTabbarState<WmTabbarProps>);\n              })\n            )}\n          </View>\n        </View>)}\n      </NavigationServiceConsumer>\n    );\n  }\n}\n"],"mappings":"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"}