@wavemaker-ai/app-rn-runtime 1.0.0-rc.647469

package/components/container/tabs/tabpane/tabpane.component.js

@@ -0,0 +1,82 @@
+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 { ScrollView } from 'react-native-gesture-handler';
+import { BaseComponent, BaseComponentState } from '@wavemaker-ai/app-rn-runtime/core/base.component';
+import WmTabpaneProps from './tabpane.props';
+import { DEFAULT_CLASS } from './tabpane.styles';
+export class WmTabpaneState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "isPartialLoaded", false);
+    _defineProperty(this, "isActive", false);
+  }
+}
+export default class WmTabpane extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmTabpaneProps(), new WmTabpaneState());
+    _defineProperty(this, "paneId", "");
+    this.subscribe('scroll', event => {
+      return this.state.isActive;
+    });
+  }
+  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;
+  }
+  showView() {
+    return this.isVisible() && this.state.isActive;
+  }
+  componentDidMount() {
+    const tabs = this.parent;
+    // When skeleton is enabled in the tabs component, the parent would be WMSkeleton which doesnot have addTabPane function
+    if (tabs.addTabPane) {
+      tabs.addTabPane(this.proxy);
+    }
+    super.componentDidMount();
+  }
+  componentWillUnmount() {
+    const tabs = this.parent;
+    if (tabs.removeTabPane) {
+      tabs.removeTabPane(this);
+    }
+  }
+  _onSelect() {
+    this.updateState({
+      isActive: true
+    });
+    this.invokeEventCallback('onSelect', [null, this.proxy]);
+  }
+  _onDeselect() {
+    this.updateState({
+      isActive: false
+    });
+    this.invokeEventCallback('onDeselect', [null, this.proxy]);
+  }
+  select() {
+    this.parent.selectTabPane(this);
+  }
+  renderWidget(props) {
+    return /*#__PURE__*/React.createElement(ScrollView, {
+      style: this.styles.root,
+      onScroll: event => {
+        this.notify('scroll', [event]);
+      },
+      onLayout: event => this.handleLayout(event)
+    }, this._background, this.renderContent(props));
+  }
+}
+//# sourceMappingURL=tabpane.component.js.map

package/components/container/tabs/tabpane/tabpane.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ScrollView","BaseComponent","BaseComponentState","WmTabpaneProps","DEFAULT_CLASS","WmTabpaneState","constructor","args","_defineProperty","WmTabpane","props","subscribe","event","state","isActive","onPartialLoad","invokeEventCallback","renderContent","renderPartial","isPartialLoaded","setTimeout","updateState","bind","children","showView","isVisible","componentDidMount","tabs","parent","addTabPane","proxy","componentWillUnmount","removeTabPane","_onSelect","_onDeselect","select","selectTabPane","renderWidget","createElement","style","styles","root","onScroll","notify","onLayout","handleLayout","_background"],"sources":["tabpane.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { ScrollView } from 'react-native-gesture-handler'\nimport { BaseComponent, BaseComponentState } from '@wavemaker-ai/app-rn-runtime/core/base.component';\n\nimport WmTabpaneProps from './tabpane.props';\nimport { DEFAULT_CLASS, WmTabpaneStyles } from './tabpane.styles';\nimport WmTabs from '../tabs.component';\n\nexport class WmTabpaneState extends BaseComponentState<WmTabpaneProps> {\n  isPartialLoaded = false;\n  isActive = false;\n}\n\nexport default class WmTabpane extends BaseComponent<WmTabpaneProps, WmTabpaneState, WmTabpaneStyles> {\n  public paneId: string = \"\";\n  constructor(props: WmTabpaneProps) {\n    super(props, DEFAULT_CLASS, new WmTabpaneProps(), new WmTabpaneState());\n    this.subscribe('scroll', (event: any) => {\n      return this.state.isActive;\n    });\n  }\n\n  onPartialLoad() {\n    this.invokeEventCallback('onLoad', [null, this]);\n  }\n\n  renderContent(props: WmTabpaneProps) {\n    if (props.renderPartial) {\n      if (!this.state.isPartialLoaded) {\n        setTimeout(() => {\n          this.updateState({\n            isPartialLoaded: true\n          } as WmTabpaneState);\n        });\n      }\n      return props.renderPartial(props, this.onPartialLoad.bind(this));\n    }\n    return props.children;\n  }\n\n  showView(): boolean {\n    return this.isVisible() && this.state.isActive;\n  }\n\n  componentDidMount() {\n    const tabs = (this.parent) as WmTabs;\n    // When skeleton is enabled in the tabs component, the parent would be WMSkeleton which doesnot have addTabPane function\n    if(tabs.addTabPane) {\n      tabs.addTabPane(this.proxy as WmTabpane);\n    }\n    super.componentDidMount();\n  }\n\n  componentWillUnmount() {\n    const tabs = (this.parent) as WmTabs;\n    if(tabs.removeTabPane) {\n      tabs.removeTabPane(this)\n    }\n  }\n\n  _onSelect() {\n    this.updateState({\n      isActive: true\n    } as WmTabpaneState);\n    this.invokeEventCallback('onSelect', [null, this.proxy]);\n  }\n  _onDeselect() {\n    this.updateState({\n      isActive: false\n    } as WmTabpaneState);\n    this.invokeEventCallback('onDeselect', [null, this.proxy]);\n  }\n\n  select() {\n    (this.parent as WmTabs).selectTabPane(this);\n  }\n\n  renderWidget(props: WmTabpaneProps) {\n    return (\n    <ScrollView\n      style={this.styles.root}\n      onScroll={(event) => {this.notify('scroll', [event])}}\n      onLayout={(event) => this.handleLayout(event)}\n    >\n        {this._background}\n        {this.renderContent(props)}\n      </ScrollView>);\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/container/tabs/tabpane/tabpane.props.js

@@ -0,0 +1,19 @@
+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-ai/app-rn-runtime/core/base.component';
+export default class WmTabpaneProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "children", void 0);
+    _defineProperty(this, "paneicon", null);
+    _defineProperty(this, "title", 'Tab Title');
+    _defineProperty(this, "renderPartial", void 0);
+    _defineProperty(this, "isPartialLoaded", false);
+    _defineProperty(this, "invokeVariables", true);
+    _defineProperty(this, "accessibilitylabel", undefined);
+    _defineProperty(this, "hint", undefined);
+    _defineProperty(this, "accessibilityrole", void 0);
+  }
+}
+//# sourceMappingURL=tabpane.props.js.map

package/components/container/tabs/tabpane/tabpane.props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseProps","WmTabpaneProps","constructor","args","_defineProperty","undefined"],"sources":["tabpane.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker-ai/app-rn-runtime/core/base.component';\nimport { AccessibilityRole } from 'react-native';\n\nexport default class WmTabpaneProps extends BaseProps {\n  children?: any;\n  paneicon?: string = null as any;\n  title: string = 'Tab Title';\n  renderPartial?: Function;\n  isPartialLoaded? = false;\n  invokeVariables = true;\n  accessibilitylabel?: string = undefined;\n  hint?: string = undefined;\n  accessibilityrole?: AccessibilityRole;\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,kDAAkD;AAG5E,eAAe,MAAMC,cAAc,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;IAAAA,eAAA,mBAEhC,IAAI;IAAAA,eAAA,gBACR,WAAW;IAAAA,eAAA;IAAAA,eAAA,0BAER,KAAK;IAAAA,eAAA,0BACN,IAAI;IAAAA,eAAA,6BACQC,SAAS;IAAAD,eAAA,eACvBC,SAAS;IAAAD,eAAA;EAAA;AAE3B","ignoreList":[]}

package/components/container/tabs/tabpane/tabpane.styles.js

@@ -0,0 +1,13 @@
+import BASE_THEME from '@wavemaker-ai/app-rn-runtime/styles/theme';
+import { defineStyles } from '@wavemaker-ai/app-rn-runtime/core/base.component';
+export const DEFAULT_CLASS = 'app-tabpane';
+BASE_THEME.registerStyle((themeVariables, addStyle) => {
+  const defaultStyles = defineStyles({
+    root: {
+      backgroundColor: themeVariables.tabContentBgColor
+    },
+    text: {}
+  });
+  addStyle(DEFAULT_CLASS, '', defaultStyles);
+});
+//# sourceMappingURL=tabpane.styles.js.map

package/components/container/tabs/tabpane/tabpane.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","backgroundColor","tabContentBgColor","text"],"sources":["tabpane.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker-ai/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker-ai/app-rn-runtime/core/base.component';\n\nexport type WmTabpaneStyles = BaseStyles & {};\n\nexport const DEFAULT_CLASS = 'app-tabpane';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmTabpaneStyles = defineStyles({\n        root: {\n            backgroundColor: themeVariables.tabContentBgColor\n        },\n        text: {}\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,2CAA2C;AAClE,SAAqBC,YAAY,QAAQ,kDAAkD;AAI3F,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,eAAe,EAAEJ,cAAc,CAACK;IACpC,CAAC;IACDC,IAAI,EAAE,CAAC;EACX,CAAC,CAAC;EAEFL,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}

package/components/container/tabs/tabs.component.js

@@ -0,0 +1,299 @@
+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 { View } from 'react-native';
+import { BaseComponent, BaseComponentState } from '@wavemaker-ai/app-rn-runtime/core/base.component';
+
+// TODO: Change the logic of gesture handler in swipe.animation file, as its interfering with scroll animation
+// for now Pan responder is being used instead of Gesture handler.
+import * as SwipeAnimation from '@wavemaker-ai/app-rn-runtime/gestures/carousel-swipe.animation';
+import { isWebPreviewMode } from '@wavemaker-ai/app-rn-runtime/core/utils';
+import WmTabsProps from './tabs.props';
+import { DEFAULT_CLASS } from './tabs.styles';
+import WmTabheader from './tabheader/tabheader.component';
+import { createSkeleton } from '@wavemaker-ai/app-rn-runtime/components/basic/skeleton/skeleton.component';
+export class WmTabsState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "tabsShown", []);
+    _defineProperty(this, "selectedTabIndex", 0);
+  }
+}
+export default class WmTabs extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmTabsProps(), new WmTabsState());
+    _defineProperty(this, "tabPanes", []);
+    _defineProperty(this, "newIndex", 0);
+    _defineProperty(this, "tabLayout", null);
+    _defineProperty(this, "tabPaneHeights", []);
+    _defineProperty(this, "animationView", null);
+    _defineProperty(this, "childComponentStyleKeys", ['tabHeader', 'activeHeader']);
+    _defineProperty(this, "animationHandlers", {
+      bounds: e => {
+        var _this$tabLayout;
+        const activeTabIndex = this.state.selectedTabIndex,
+          w = ((_this$tabLayout = this.tabLayout) === null || _this$tabLayout === void 0 ? void 0 : _this$tabLayout.width) || 0,
+          noOfTabs = this.tabPanes.length;
+        return {
+          lower: -1 * (activeTabIndex - (activeTabIndex === 0 ? 0 : 1)) * w,
+          center: -1 * activeTabIndex * w,
+          upper: -1 * (activeTabIndex + (activeTabIndex === noOfTabs - 1 ? 0 : 1)) * w
+        };
+      },
+      onLower: e => {
+        this.onChange(this.state.selectedTabIndex - 1);
+      },
+      onUpper: e => {
+        this.onChange(this.state.selectedTabIndex + 1);
+      }
+    });
+  }
+  setTabLayout(event) {
+    this.tabLayout = event.nativeEvent.layout;
+    this.forceUpdate(() => {
+      this.goToTab();
+    });
+  }
+  setTabPaneHeights(index, nativeEvent) {
+    var _nativeEvent$nativeEv;
+    this.tabPaneHeights[index] = (_nativeEvent$nativeEv = nativeEvent.nativeEvent.layout) === null || _nativeEvent$nativeEv === void 0 ? void 0 : _nativeEvent$nativeEv.height;
+    if (index === this.state.selectedTabIndex) {
+      this.forceUpdate();
+    }
+  }
+  setTabShown(tabIndex, callback) {
+    if (!this.state.tabsShown[tabIndex]) {
+      const tabsShown = [...this.state.tabsShown];
+      tabsShown[tabIndex] = true;
+      setTimeout(() => {
+        this.updateState({
+          tabsShown: tabsShown
+        }, callback);
+      }, 300);
+    } else {
+      callback && callback();
+    }
+  }
+  addTabPane(tabPane) {
+    tabPane.paneId = `tabPane${this.newIndex++}`;
+    const i = this.tabPanes.findIndex(t => t.paneId === tabPane.paneId);
+    if (i >= 0) {
+      this.tabPanes[i] = tabPane;
+    } else {
+      this.tabPanes.push(tabPane);
+    }
+  }
+  removeTabPane(tabPane) {
+    const i = this.tabPanes.findIndex(t => t.paneId === tabPane.paneId);
+    if (i >= 0) {
+      this.tabPanes.splice(i, 1);
+      this.newIndex--;
+    }
+  }
+  selectTabPane(tabPane) {
+    this.goToTab(this.tabPanes.indexOf(tabPane));
+  }
+  get selectedTabPane() {
+    return this.tabPanes[this.state.selectedTabIndex];
+  }
+  goToTab(index = this.state.selectedTabIndex) {
+    var _this$tabLayout2;
+    if (index < 0 || index >= this.tabPanes.length) {
+      return;
+    }
+    const position = -1 * index * (((_this$tabLayout2 = this.tabLayout) === null || _this$tabLayout2 === void 0 ? void 0 : _this$tabLayout2.width) || 0);
+    if (this.animationView) {
+      this.animationView.setPosition(position).then(() => this.onChange(index));
+    } else {
+      this.onChange(index);
+    }
+  }
+  prev() {
+    var _this$animationView;
+    (_this$animationView = this.animationView) === null || _this$animationView === void 0 || _this$animationView.goToLower();
+  }
+  next() {
+    var _this$animationView2;
+    (_this$animationView2 = this.animationView) === null || _this$animationView2 === void 0 || _this$animationView2.goToLower();
+  }
+  onChange(newIndex) {
+    if (newIndex < 0 || newIndex >= this.tabPanes.length) {
+      return;
+    }
+    const oldIndex = this.state.selectedTabIndex;
+    const deselectedTab = this.tabPanes[this.state.selectedTabIndex];
+    this.newIndex = newIndex;
+    deselectedTab === null || deselectedTab === void 0 || deselectedTab._onDeselect();
+    this.updateState({
+      selectedTabIndex: newIndex
+    }, () => {
+      this.setTabShown(newIndex, () => {
+        const selectedTab = this.tabPanes[newIndex];
+        selectedTab === null || selectedTab === void 0 || selectedTab._onSelect();
+        this.invokeEventCallback('onChange', [{}, this.proxy, newIndex, oldIndex]);
+      });
+    });
+  }
+  renderSkeletonContent(props) {
+    const tabPanes = React.Children.toArray(this.props.children).filter((item, index) => item.props.show != false);
+    const headerData = tabPanes.map((p, i) => ({
+      title: p.props.title,
+      icon: '',
+      key: `tab-${p.props.title}-${i}`
+    }));
+    return /*#__PURE__*/React.createElement(View, {
+      style: [this.styles.root, {
+        borderBottomWidth: 0
+      }]
+    }, /*#__PURE__*/React.createElement(View, {
+      onLayout: this.setTabLayout.bind(this),
+      style: {
+        width: '100%'
+      }
+    }), /*#__PURE__*/React.createElement(WmTabheader, {
+      styles: this.styles.tabHeader,
+      data: headerData,
+      showskeleton: this.props.showskeleton,
+      selectedTabIndex: this.state.selectedTabIndex,
+      headertype: this.state.props.headertype,
+      iconposition: this.state.props.iconposition
+    }), /*#__PURE__*/React.createElement(View
+    //{...this.panResponder.panHandlers}
+    , {
+      style: {
+        width: '100%',
+        //height: this.tabPaneHeights[this.state.selectedTabIndex],
+        overflow: 'hidden'
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'nowrap'
+      }
+    }, tabPanes.map((p, i) => {
+      return /*#__PURE__*/React.createElement(View, {
+        key: `tab-${i}`,
+        style: {
+          width: '100%',
+          alignSelf: 'flex-start'
+        },
+        onLayout: this.setTabPaneHeights.bind(this, i)
+      }, /*#__PURE__*/React.cloneElement(p, {
+        "invokeVariables": false
+      }));
+    }))));
+  }
+  renderSkeleton(props) {
+    if (!props.showskeletonchildren) {
+      var _this$props;
+      const skeletonStyles = ((_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.styles) === null || _this$props === void 0 ? void 0 : _this$props.skeleton) || {
+        root: {},
+        text: {}
+      };
+      return createSkeleton(this.theme, skeletonStyles, {
+        ...this.styles.root
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.root, {
+          opacity: 0
+        }]
+      }, this.renderSkeletonContent(props)));
+    }
+    return this.renderSkeletonContent(props);
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    switch (name) {
+      case "defaultpaneindex":
+        const selectedIndex = $new || 0;
+        const tabsShown = [];
+        tabsShown[selectedIndex] = true;
+        this.updateState({
+          selectedTabIndex: selectedIndex,
+          tabsShown: tabsShown
+        });
+    }
+  }
+  getBackground() {
+    return this._showSkeleton ? null : this._background;
+  }
+  renderWidget(props) {
+    var _this$state$props$cla, _this$state$props$cla2;
+    const tabPanes = React.Children.toArray(props.children).filter((item, index) => item.props.show != false);
+    const headerData = tabPanes.map((p, i) => ({
+      title: p.props.title,
+      icon: p.props.paneicon || '',
+      key: `tab-${i}`
+    }));
+    const accessibilityData = tabPanes.map((p, i) => ({
+      accessibilitylabel: p.props.accessibilitylabel || p.props.title,
+      hint: p.props.hint,
+      accessibilityrole: p.props.accessibilityrole
+    }));
+    const styles = this._showSkeleton ? {
+      ...this.styles.root,
+      ...this.styles.skeleton.root
+    } : this.styles.root;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles,
+      onLayout: event => this.handleLayout(event)
+    }, this.getBackground(), /*#__PURE__*/React.createElement(View, {
+      onLayout: this.setTabLayout.bind(this),
+      style: {
+        width: '100%'
+      }
+    }), /*#__PURE__*/React.createElement(WmTabheader, {
+      id: this.getTestId('headers'),
+      styles: this.styles.tabHeader,
+      data: headerData,
+      selectedTabIndex: this.state.selectedTabIndex,
+      onIndexChange: this.goToTab.bind(this),
+      shouldScroll: props.enablescroll,
+      disabletoucheffect: this.state.props.disabletoucheffect,
+      accessibilityProps: accessibilityData,
+      headertype: props.headertype,
+      iconposition: props.iconposition
+    }), /*#__PURE__*/React.createElement(View, {
+      style: [{
+        width: '100%',
+        flex: 1
+      }, this.styles.root.height ? isWebPreviewMode() ? (_this$state$props$cla = this.state.props.classname) !== null && _this$state$props$cla !== void 0 && _this$state$props$cla.includes('divider') ? [this.styles.tabheaderdivider] : [{
+        'overflowX': 'hidden',
+        'overflowY': 'auto'
+      }] : {
+        overflow: 'scroll'
+      } : (_this$state$props$cla2 = this.state.props.classname) !== null && _this$state$props$cla2 !== void 0 && _this$state$props$cla2.includes('divider') ? this.styles.tabheaderdivider : {
+        overflow: 'hidden',
+        maxHeight: this.tabPaneHeights[this.state.selectedTabIndex]
+      }, this.styles.tabContent]
+    }, /*#__PURE__*/React.createElement(SwipeAnimation.View, {
+      enableGestures: props.enablegestures,
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+        alignItems: 'flex-start'
+      },
+      direction: "horizontal",
+      ref: r => {
+        this.animationView = r;
+      },
+      handlers: this.animationHandlers
+    }, tabPanes.map((p, i) => {
+      return /*#__PURE__*/React.createElement(View, {
+        key: `tab-${i}`,
+        style: {
+          width: '100%',
+          height: this.styles.root.height ? undefined : 1000000,
+          alignSelf: 'flex-start'
+        }
+      }, /*#__PURE__*/React.createElement(View, {
+        style: {
+          width: '100%',
+          alignSelf: 'flex-start'
+        },
+        onLayout: this.setTabPaneHeights.bind(this, i)
+      }, p));
+    }))));
+  }
+}
+//# sourceMappingURL=tabs.component.js.map

package/components/container/tabs/tabs.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","SwipeAnimation","isWebPreviewMode","WmTabsProps","DEFAULT_CLASS","WmTabheader","createSkeleton","WmTabsState","constructor","args","_defineProperty","WmTabs","props","bounds","e","_this$tabLayout","activeTabIndex","state","selectedTabIndex","w","tabLayout","width","noOfTabs","tabPanes","length","lower","center","upper","onLower","onChange","onUpper","setTabLayout","event","nativeEvent","layout","forceUpdate","goToTab","setTabPaneHeights","index","_nativeEvent$nativeEv","tabPaneHeights","height","setTabShown","tabIndex","callback","tabsShown","setTimeout","updateState","addTabPane","tabPane","paneId","newIndex","i","findIndex","t","push","removeTabPane","splice","selectTabPane","indexOf","selectedTabPane","_this$tabLayout2","position","animationView","setPosition","then","prev","_this$animationView","goToLower","next","_this$animationView2","oldIndex","deselectedTab","_onDeselect","selectedTab","_onSelect","invokeEventCallback","proxy","renderSkeletonContent","Children","toArray","children","filter","item","show","headerData","map","p","title","icon","key","createElement","style","styles","root","borderBottomWidth","onLayout","bind","tabHeader","data","showskeleton","headertype","iconposition","overflow","flexDirection","flexWrap","alignSelf","cloneElement","renderSkeleton","showskeletonchildren","_this$props","skeletonStyles","skeleton","text","theme","opacity","onPropertyChange","name","$new","$old","selectedIndex","getBackground","_showSkeleton","_background","renderWidget","_this$state$props$cla","_this$state$props$cla2","paneicon","accessibilityData","accessibilitylabel","hint","accessibilityrole","handleLayout","id","getTestId","onIndexChange","shouldScroll","enablescroll","disabletoucheffect","accessibilityProps","flex","classname","includes","tabheaderdivider","maxHeight","tabContent","enableGestures","enablegestures","alignItems","direction","ref","r","handlers","animationHandlers","undefined"],"sources":["tabs.component.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, LayoutRectangle, View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker-ai/app-rn-runtime/core/base.component';\n\n// TODO: Change the logic of gesture handler in swipe.animation file, as its interfering with scroll animation\n// for now Pan responder is being used instead of Gesture handler.\nimport * as SwipeAnimation from '@wavemaker-ai/app-rn-runtime/gestures/carousel-swipe.animation';\nimport { isWebPreviewMode } from '@wavemaker-ai/app-rn-runtime/core/utils';\n\nimport WmTabsProps from './tabs.props';\nimport { DEFAULT_CLASS, WmTabsStyles } from './tabs.styles';\nimport WmTabpane from './tabpane/tabpane.component';\nimport WmTabheader from './tabheader/tabheader.component';\nimport { WmSkeletonStyles } from '@wavemaker-ai/app-rn-runtime/components/basic/skeleton/skeleton.styles';\nimport { createSkeleton } from '@wavemaker-ai/app-rn-runtime/components/basic/skeleton/skeleton.component';\n\nexport class WmTabsState extends BaseComponentState<WmTabsProps> {\n  tabsShown: boolean[] = [];\n  selectedTabIndex: number = 0;\n}\n\nexport default class WmTabs extends BaseComponent<WmTabsProps, WmTabsState, WmTabsStyles> {\n  public tabPanes = [] as WmTabpane[];\n  private newIndex = 0;\n  private tabLayout: LayoutRectangle = null as any;\n  private tabPaneHeights: number[] = [];\n  private animationView: SwipeAnimation.View | null = null as any;\n  protected childComponentStyleKeys = ['tabHeader', 'activeHeader'];\n  private animationHandlers = {\n    bounds: (e) => {\n      const activeTabIndex = this.state.selectedTabIndex,\n            w = this.tabLayout?.width || 0,\n            noOfTabs = this.tabPanes.length;\n      return {\n        lower: -1 * (activeTabIndex - (activeTabIndex === 0 ? 0 : 1)) * w,\n        center: -1 * activeTabIndex * w,\n        upper:  -1 * (activeTabIndex + (activeTabIndex === noOfTabs - 1 ? 0 : 1)) * w\n      };\n    },\n    onLower: (e) => {\n      this.onChange(this.state.selectedTabIndex - 1);\n    },\n    onUpper: (e) => {\n      this.onChange(this.state.selectedTabIndex + 1);\n    }\n  } as SwipeAnimation.Handlers;\n\n  constructor(props: WmTabsProps) {\n    super(props, DEFAULT_CLASS, new WmTabsProps(), new WmTabsState());\n  }\n\n  setTabLayout(event: LayoutChangeEvent) {\n    this.tabLayout = event.nativeEvent.layout;\n    this.forceUpdate(() => {\n      this.goToTab();\n    });\n  }\n\n  setTabPaneHeights(index: number, nativeEvent: LayoutChangeEvent) {\n    this.tabPaneHeights[index] = nativeEvent.nativeEvent.layout?.height;\n    if (index === this.state.selectedTabIndex) {\n      this.forceUpdate();\n    }\n  }\n\n  setTabShown(tabIndex: number, callback: () => any) {\n    if (!this.state.tabsShown[tabIndex]) {\n      const tabsShown = [...this.state.tabsShown];\n      tabsShown[tabIndex] = true;\n      setTimeout(() => {\n        this.updateState({\n          tabsShown: tabsShown\n        } as WmTabsState, callback);\n      }, 300);\n    } else {\n      callback && callback();\n    }\n  }\n\n  addTabPane(tabPane: WmTabpane) {\n    tabPane.paneId = `tabPane${this.newIndex++}`;\n    const i = this.tabPanes.findIndex(t => t.paneId === tabPane.paneId);\n    if (i >= 0) {\n      this.tabPanes[i] = tabPane;\n    } else {\n      this.tabPanes.push(tabPane)\n    }\n  }\n\n  removeTabPane(tabPane: WmTabpane) {\n    const i = this.tabPanes.findIndex(t => t.paneId === tabPane.paneId);\n    if (i >= 0) {\n      this.tabPanes.splice(i, 1);\n      this.newIndex--;\n    }\n  }\n\n  selectTabPane(tabPane: WmTabpane) {\n    this.goToTab(this.tabPanes.indexOf(tabPane));\n  }\n\n  get selectedTabPane() {\n    return this.tabPanes[this.state.selectedTabIndex];\n  }\n\n  goToTab(index = this.state.selectedTabIndex) {\n    if (index < 0 || index >= this.tabPanes.length) {\n      return;\n    }\n    const position = -1 * index * (this.tabLayout?.width || 0);\n    if(this.animationView) {\n      this.animationView.setPosition(position)\n      .then(() => this.onChange(index));\n    } else {\n      this.onChange(index);\n    }\n  }\n\n  prev() {\n    this.animationView?.goToLower();\n  }\n\n  next() {\n    this.animationView?.goToLower();\n  }\n\n  onChange(newIndex: number) {\n    if (newIndex < 0 || newIndex >= this.tabPanes.length) {\n      return;\n    }\n    const oldIndex = this.state.selectedTabIndex;\n    const deselectedTab = this.tabPanes[this.state.selectedTabIndex];\n    this.newIndex = newIndex;\n    deselectedTab?._onDeselect();\n    this.updateState({\n      selectedTabIndex: newIndex\n    } as WmTabsState, () => {\n      this.setTabShown(newIndex, () => {\n        const selectedTab = this.tabPanes[newIndex];\n        selectedTab?._onSelect();\n        this.invokeEventCallback('onChange', [{}, this.proxy, newIndex, oldIndex]);\n      });\n    });\n  }\n\n  public renderSkeletonContent(props: WmTabsProps) {\n    const tabPanes =  React.Children.toArray(this.props.children)\n    .filter((item: any, index: number) => item.props.show != false);\n    const headerData = tabPanes.map((p: any, i: number) =>\n      ({title: p.props.title, icon: '', key:  `tab-${p.props.title}-${i}`}));\n    return(\n      <View style={[this.styles.root, { borderBottomWidth: 0}]}>\n      <View onLayout={this.setTabLayout.bind(this)} style={{width: '100%'}}></View>\n      <WmTabheader\n        styles={this.styles.tabHeader}\n        data={headerData}\n        showskeleton={this.props.showskeleton}\n        selectedTabIndex={this.state.selectedTabIndex}\n        headertype={this.state.props.headertype}\n        iconposition={this.state.props.iconposition}\n      ></WmTabheader>\n      <View\n        //{...this.panResponder.panHandlers}\n        style={{\n          width: '100%',\n          //height: this.tabPaneHeights[this.state.selectedTabIndex],\n          overflow: 'hidden'\n        }} >\n        <View style={{\n          flexDirection: 'row',\n          flexWrap: 'nowrap'\n        }}>\n          {tabPanes.map((p: any, i) => {\n            return (\n            <View\n              key={`tab-${i}`}\n              style={{width: '100%', alignSelf: 'flex-start'}}\n              onLayout={this.setTabPaneHeights.bind(this, i)}>\n              {/* {this.state.tabsShown[i] ? p : null} */}\n              {React.cloneElement(p, { \"invokeVariables\": false })}\n              {/* {p} */}\n            </View>);\n          })}\n        </View>\n      </View>\n    </View>\n    )\n  }\n\n  public renderSkeleton(props: WmTabsProps){\n    if(!props.showskeletonchildren) {\n      const skeletonStyles: WmSkeletonStyles = this.props?.styles?.skeleton || { root: {}, text: {}  } as WmSkeletonStyles\n      return createSkeleton(this.theme, skeletonStyles, {\n        ...this.styles.root\n      }, (<View style={[this.styles.root, { opacity: 0 }]}>\n        {this.renderSkeletonContent(props)}\n      </View>))\n    }\n    return this.renderSkeletonContent(props);\n  }\n\n  public onPropertyChange(name: string, $new: any, $old: any): void {\n    super.onPropertyChange(name, $new, $old);\n    switch(name) {\n      case \"defaultpaneindex\":\n        const selectedIndex = $new || 0;\n        const tabsShown: boolean[] = [];\n        tabsShown[selectedIndex] = true;\n        this.updateState({\n          selectedTabIndex: selectedIndex,\n          tabsShown: tabsShown\n        } as WmTabsState);\n    }\n  }\n\n  getBackground(): React.JSX.Element | null {\n    return this._showSkeleton ? null : this._background\n  }\n\n\n  renderWidget(props: WmTabsProps) {\n    const tabPanes =  React.Children.toArray(props.children)\n      .filter((item: any, index: number) => item.props.show != false);\n    const headerData = tabPanes.map((p: any, i: number) =>\n      ({title: p.props.title,  icon: p.props.paneicon || '', key:  `tab-${i}`}));\n    const accessibilityData = tabPanes.map((p: any, i: number) =>({\n      accessibilitylabel: p.props.accessibilitylabel || p.props.title,\n      hint: p.props.hint,\n      accessibilityrole: p.props.accessibilityrole\n    }));\n    const styles = this._showSkeleton ? {\n      ...this.styles.root,\n      ...this.styles.skeleton.root\n    } : this.styles.root\n    return (\n      <View\n        style={styles}\n        onLayout={(event) => this.handleLayout(event)}\n      >\n        {this.getBackground()}\n        <View onLayout={this.setTabLayout.bind(this)} style={{width: '100%'}}></View>\n        <WmTabheader\n          id={this.getTestId('headers')}\n          styles={this.styles.tabHeader}\n          data={headerData}\n          selectedTabIndex={this.state.selectedTabIndex}\n          onIndexChange={this.goToTab.bind(this)}\n          shouldScroll={props.enablescroll}\n          disabletoucheffect = {this.state.props.disabletoucheffect}\n          accessibilityProps={accessibilityData}\n          headertype={props.headertype}\n          iconposition={props.iconposition}\n        ></WmTabheader>\n        <View\n          style={[{\n            width: '100%',\n            flex: 1\n          }, this.styles.root.height ?\n          (isWebPreviewMode() ? this.state.props.classname?.includes('divider') ? [this.styles.tabheaderdivider] : [{'overflowX': 'hidden','overflowY': 'auto'}] as any : {overflow: 'scroll'})\n          : this.state.props.classname?.includes('divider') ? this.styles.tabheaderdivider : {\n            overflow: 'hidden',\n            maxHeight: this.tabPaneHeights[this.state.selectedTabIndex],\n          }, this.styles.tabContent]} >\n          <SwipeAnimation.View\n            enableGestures={props.enablegestures}\n            style={{\n              flexDirection: 'row',\n              flexWrap: 'nowrap',\n              alignItems: 'flex-start'\n            }}\n            direction='horizontal'\n            ref={(r) => {this.animationView = r}}\n            handlers = {this.animationHandlers}\n          >\n            {tabPanes.map((p: any, i) => {\n              return (\n              <View\n                key={`tab-${i}`}\n                style={{\n                  width: '100%',\n                  height: this.styles.root.height  ? undefined : 1000000,\n                  alignSelf: 'flex-start'}}>\n                <View\n                  style={{width: '100%', alignSelf: 'flex-start'}}\n                  onLayout={this.setTabPaneHeights.bind(this, i)}>\n                  {/* {this.state.tabsShown[i] ? p : null} */}\n                  {p}\n                </View>\n              </View>);\n            })}\n          </SwipeAnimation.View>\n        </View>\n      </View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/container/tabs/tabs.props.js

@@ -0,0 +1,16 @@
+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-ai/app-rn-runtime/core/base.component';
+export default class WmTabsProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "children", void 0);
+    _defineProperty(this, "defaultpaneindex", 0);
+    _defineProperty(this, "enablegestures", true);
+    _defineProperty(this, "enablescroll", false);
+    _defineProperty(this, "headertype", 'icon-label');
+    _defineProperty(this, "iconposition", void 0);
+  }
+}
+//# sourceMappingURL=tabs.props.js.map

package/components/container/tabs/tabs.props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseProps","WmTabsProps","constructor","args","_defineProperty"],"sources":["tabs.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker-ai/app-rn-runtime/core/base.component';\n\nexport default class WmTabsProps extends BaseProps {\n  children?: any;\n  defaultpaneindex?: number = 0;\n  enablegestures? = true;\n  enablescroll?: boolean = false;\n  headertype?: 'icon-only' | 'icon-label' | 'label-only' = 'icon-label';\n  iconposition?: 'left' | 'right' | 'top';\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,kDAAkD;AAE5E,eAAe,MAAMC,WAAW,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;IAAAA,eAAA,2BAErB,CAAC;IAAAA,eAAA,yBACX,IAAI;IAAAA,eAAA,uBACG,KAAK;IAAAA,eAAA,qBAC2B,YAAY;IAAAA,eAAA;EAAA;AAEvE","ignoreList":[]}

package/components/container/tabs/tabs.styles.js

@@ -0,0 +1,65 @@
+import BASE_THEME from '@wavemaker-ai/app-rn-runtime/styles/theme';
+import { defineStyles } from '@wavemaker-ai/app-rn-runtime/core/base.component';
+export const DEFAULT_CLASS = 'app-tabs';
+BASE_THEME.registerStyle((themeVariables, addStyle) => {
+  const defaultStyles = defineStyles({
+    root: {
+      minHeight: 240,
+      elevation: 0,
+      borderBottomWidth: 1,
+      borderStyle: 'solid',
+      borderColor: themeVariables.tabBorderColor
+    },
+    text: {},
+    tabContent: {},
+    tabHeader: {},
+    tabheaderdivider: {
+      borderBottomWidth: 1,
+      borderBottomColor: 'var(--wm-color-surface-variant-active)'
+    },
+    skeleton: {
+      root: {}
+    }
+  });
+  addStyle(DEFAULT_CLASS, '', defaultStyles);
+  addStyle('tabs-with-arrow-indicator', '', {
+    tabHeader: {
+      root: {
+        backgroundColor: themeVariables.transparent
+      },
+      header: {
+        marginBottom: 16
+      },
+      activeIndicator: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: 2,
+        height: 0
+      },
+      arrowIndicator: {
+        display: 'flex',
+        backgroundColor: themeVariables.tabArrowIndicatorBgColor,
+        width: 24,
+        height: 24,
+        justifyContent: 'center',
+        alignItems: 'center',
+        transform: [{
+          rotateZ: '45deg'
+        }]
+      },
+      arrowIndicatorDot: {
+        display: 'flex',
+        backgroundColor: themeVariables.tabArrowIndicatorDotColor,
+        width: 4,
+        height: 4,
+        borderRadius: 8,
+        transform: [{
+          translateX: -2
+        }, {
+          translateY: -2
+        }]
+      }
+    }
+  });
+});
+//# sourceMappingURL=tabs.styles.js.map

package/components/container/tabs/tabs.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","minHeight","elevation","borderBottomWidth","borderStyle","borderColor","tabBorderColor","text","tabContent","tabHeader","tabheaderdivider","borderBottomColor","skeleton","backgroundColor","transparent","header","marginBottom","activeIndicator","justifyContent","alignItems","marginTop","height","arrowIndicator","display","tabArrowIndicatorBgColor","width","transform","rotateZ","arrowIndicatorDot","tabArrowIndicatorDotColor","borderRadius","translateX","translateY"],"sources":["tabs.styles.ts"],"sourcesContent":["import { ViewStyle } from 'react-native';\nimport BASE_THEME from '@wavemaker-ai/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker-ai/app-rn-runtime/core/base.component';\nimport { WmTabheaderStyles } from './tabheader/tabheader.styles';\nimport { WmSkeletonStyles } from '@wavemaker-ai/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmTabsStyles = BaseStyles & {\n  tabHeader: WmTabheaderStyles,\n  tabContent: ViewStyle,\n  skeleton: WmSkeletonStyles\n};\n\nexport const DEFAULT_CLASS = 'app-tabs';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmTabsStyles = defineStyles({\n      root: {\n        minHeight: 240,\n        elevation: 0,\n        borderBottomWidth: 1,\n        borderStyle: 'solid',\n        borderColor: themeVariables.tabBorderColor\n      },\n      text: {},\n      tabContent: {},\n      tabHeader: {} as WmTabheaderStyles,\n      tabheaderdivider: {\n        borderBottomWidth:1,\n        borderBottomColor:'var(--wm-color-surface-variant-active)'\n      },\n      skeleton: {\n        root: {\n        }\n      } as WmSkeletonStyles\n  });\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n  addStyle('tabs-with-arrow-indicator', '', {\n    tabHeader: {\n      root: {\n        backgroundColor: themeVariables.transparent\n      },\n      header: {\n        marginBottom: 16\n      },\n      activeIndicator: {\n        justifyContent: 'center',\n        alignItems: 'center',\n        marginTop: 2,\n        height: 0\n      },\n      arrowIndicator: {\n        display: 'flex',\n        backgroundColor: themeVariables.tabArrowIndicatorBgColor,\n        width: 24,\n        height: 24,\n        justifyContent: 'center',\n        alignItems: 'center',\n        transform: [{\n          rotateZ: '45deg'\n        }]\n      },\n      arrowIndicatorDot: {\n        display: 'flex',\n        backgroundColor: themeVariables.tabArrowIndicatorDotColor,\n        width: 4,\n        height: 4,\n        borderRadius: 8,\n        transform: [{\n          translateX: -2\n        }, {\n          translateY: -2\n        }]\n      }\n    } as any as WmTabheaderStyles\n  });\n});\n"],"mappings":"AACA,OAAOA,UAAU,MAAM,2CAA2C;AAClE,SAAqBC,YAAY,QAAQ,kDAAkD;AAU3F,OAAO,MAAMC,aAAa,GAAG,UAAU;AACvCF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACrD,MAAMC,aAA2B,GAAGL,YAAY,CAAC;IAC7CM,IAAI,EAAE;MACJC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE,CAAC;MACZC,iBAAiB,EAAE,CAAC;MACpBC,WAAW,EAAE,OAAO;MACpBC,WAAW,EAAER,cAAc,CAACS;IAC9B,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,UAAU,EAAE,CAAC,CAAC;IACdC,SAAS,EAAE,CAAC,CAAsB;IAClCC,gBAAgB,EAAE;MAChBP,iBAAiB,EAAC,CAAC;MACnBQ,iBAAiB,EAAC;IACpB,CAAC;IACDC,QAAQ,EAAE;MACRZ,IAAI,EAAE,CACN;IACF;EACJ,CAAC,CAAC;EACFF,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,2BAA2B,EAAE,EAAE,EAAE;IACxCW,SAAS,EAAE;MACTT,IAAI,EAAE;QACJa,eAAe,EAAEhB,cAAc,CAACiB;MAClC,CAAC;MACDC,MAAM,EAAE;QACNC,YAAY,EAAE;MAChB,CAAC;MACDC,eAAe,EAAE;QACfC,cAAc,EAAE,QAAQ;QACxBC,UAAU,EAAE,QAAQ;QACpBC,SAAS,EAAE,CAAC;QACZC,MAAM,EAAE;MACV,CAAC;MACDC,cAAc,EAAE;QACdC,OAAO,EAAE,MAAM;QACfV,eAAe,EAAEhB,cAAc,CAAC2B,wBAAwB;QACxDC,KAAK,EAAE,EAAE;QACTJ,MAAM,EAAE,EAAE;QACVH,cAAc,EAAE,QAAQ;QACxBC,UAAU,EAAE,QAAQ;QACpBO,SAAS,EAAE,CAAC;UACVC,OAAO,EAAE;QACX,CAAC;MACH,CAAC;MACDC,iBAAiB,EAAE;QACjBL,OAAO,EAAE,MAAM;QACfV,eAAe,EAAEhB,cAAc,CAACgC,yBAAyB;QACzDJ,KAAK,EAAE,CAAC;QACRJ,MAAM,EAAE,CAAC;QACTS,YAAY,EAAE,CAAC;QACfJ,SAAS,EAAE,CAAC;UACVK,UAAU,EAAE,CAAC;QACf,CAAC,EAAE;UACDC,UAAU,EAAE,CAAC;QACf,CAAC;MACH;IACF;EACF,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/components/container/tile/tile.component.js

@@ -0,0 +1,54 @@
+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); }
+import React from 'react';
+import { View } from 'react-native';
+import { BaseComponent, BaseComponentState } from '@wavemaker-ai/app-rn-runtime/core/base.component';
+import WmTileProps from './tile.props';
+import { DEFAULT_CLASS } from './tile.styles';
+import { Tappable } from '@wavemaker-ai/app-rn-runtime/core/tappable.component';
+import { Animatedview } from '@wavemaker-ai/app-rn-runtime/components/basic/animatedview.component';
+import { createSkeleton } from '@wavemaker-ai/app-rn-runtime/components/basic/skeleton/skeleton.component';
+export class WmTileState extends BaseComponentState {}
+export default class WmTile extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmTileProps());
+  }
+  renderSkeleton(props) {
+    if (!props.showskeletonchildren) {
+      var _this$props;
+      const skeletonStyles = ((_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.styles) === null || _this$props === void 0 ? void 0 : _this$props.skeleton) || {
+        root: {},
+        text: {}
+      };
+      return createSkeleton(this.theme, skeletonStyles, {
+        ...this.styles.root
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.root, {
+          opacity: 0
+        }]
+      }, props.children));
+    }
+    return null;
+  }
+  getBackground() {
+    return this._showSkeleton ? null : this._background;
+  }
+  renderWidget(props) {
+    const styles = this._showSkeleton ? {
+      ...this.styles.root,
+      ...this.styles.skeleton.root
+    } : this.styles.root;
+    return /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(), {
+      target: this,
+      styles: {
+        width: '100%'
+      },
+      disableTouchEffect: this.state.props.disabletoucheffect,
+      onLayout: event => this.handleLayout(event)
+    }), /*#__PURE__*/React.createElement(Animatedview, {
+      entryanimation: props.animation,
+      delay: props.animationdelay,
+      style: styles
+    }, this.getBackground(), props.children));
+  }
+}
+//# sourceMappingURL=tile.component.js.map