@wavemaker/app-rn-runtime 11.7.0-next.24863 → 11.7.0-next.26328

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

@@ -1 +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 {...this.getTestPropsForAction('item' + testId)} onPress={() => onSelect && onSelect()}  key={item.key}>\n      <View style={[isActive && !floating ? this.styles.activeTabItem : {}]}>\n      <WmIcon styles={this.theme.mergeStyle({}, this.styles.tabIcon ,floating? this.styles.centerHubIcon: {}, isActive && !floating ? this.styles.activeTabIcon : {})}\n          iconclass={item.icon}></WmIcon>\n      <Text style={[this.styles.tabLabel,floating? this.styles.centerHubLabel: {}, isActive && !floating ? this.styles.activeTabLabel: {}]}>{getDisplayLabel(item.label)}</Text>\n      </View>\n      </TouchableOpacity>\n      </View>\n  );\n}\n\n  onItemSelect(item: TabDataItem, 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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"}
+{"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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"}

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

@@ -4,7 +4,9 @@ export const DEFAULT_CLASS = 'app-tabbar';
 BASE_THEME.registerStyle((themeVariables, addStyle) => {
   const defaultStyles = defineStyles({
     root: {
-      height: 88
+      height: 80,
+      elevation: 3,
+      shadowColor: themeVariables.tabShadowColor
     },
     text: {},
     menu: {
@@ -39,39 +41,51 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
-      minWidth: 60,
-      opacity: 0.4
+      minHeight: 32,
+      minWidth: 64,
+      opacity: 1,
+      marginBottom: 16
     },
     activeTabItem: {
-      opacity: 1
+      opacity: 1,
+      height: 32,
+      width: 64,
+      borderRadius: 50,
+      marginBottom: -2,
+      backgroundColor: themeVariables.tabActiveBackgroundColor
     },
     tabIcon: {
       root: {
         alignSelf: 'center',
-        paddingBottom: 32,
         borderBottomColor: themeVariables.transparent,
-        borderBottomWidth: 4
+        paddingBottom: 4
       },
       icon: {
-        fontSize: 36,
+        fontSize: 24,
+        paddingRight: 0,
         color: themeVariables.tabbarIconColor
       }
     },
     activeTabIcon: {
-      root: {
-        borderBottomColor: themeVariables.tabbarIconColor
+      root: {},
+      icon: {
+        color: themeVariables.tabActiveIconColor
       }
     },
     tabLabel: {
-      fontSize: 14,
+      fontSize: 12,
+      marginTop: 4,
       fontWeight: '500',
-      color: themeVariables.tabbarIconColor,
-      textAlign: 'center',
       fontFamily: themeVariables.baseFont,
-      marginTop: -32,
-      paddingBottom: 14
+      color: themeVariables.tabbarTextColor,
+      textAlign: 'center'
+    },
+    activeTabLabel: {
+      fontWeight: '700',
+      fontSize: 12,
+      fontFamily: themeVariables.baseFont,
+      color: themeVariables.tabLabelTextColor
     },
-    activeTabLabel: {},
     centerHubItem: {},
     centerHubIcon: {},
     centerHubLabel: {}
@@ -125,7 +139,7 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       shadowRadius: 2,
       borderRadius: 35,
       position: 'absolute',
-      bottom: 53,
+      bottom: 28,
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: themeVariables.centerHubItemColor,

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

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","height","text","menu","flexDirection","backgroundColor","tabbarBackgroundColor","justifyContent","alignItems","modalContent","moreMenu","width","getStyle","shadowOffset","shadowOpacity","shadowRadius","moreMenuRow","paddingTop","paddingBottom","tabItem","minWidth","opacity","activeTabItem","tabIcon","alignSelf","borderBottomColor","transparent","borderBottomWidth","icon","fontSize","color","tabbarIconColor","activeTabIcon","tabLabel","fontWeight","textAlign","fontFamily","baseFont","marginTop","activeTabLabel","centerHubItem","centerHubIcon","centerHubLabel","undefined","borderTopWidth","borderTopColor","shadowColor","borderRadius","position","bottom","centerHubItemColor","left","maxWidth","centerHubIconColor","centerHubLabelColor"],"sources":["tabbar.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 { WmIconStyles } from '../../basic/icon/icon.styles';\n\nexport type WmTabbarStyles = BaseStyles & {\n    menu: AllStyle,\n    modalContent: AllStyle,\n    moreMenu: AllStyle,\n    moreMenuRow: AllStyle,\n    tabItem: AllStyle,\n    activeTabItem: AllStyle,\n    tabIcon: WmIconStyles,\n    activeTabIcon: WmIconStyles,\n    tabLabel: AllStyle,\n    activeTabLabel: AllStyle,\n    centerHubItem: AllStyle,\n    centerHubIcon: WmIconStyles,\n    centerHubLabel: AllStyle\n};\n\nexport const DEFAULT_CLASS = 'app-tabbar';\n    BASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmTabbarStyles = defineStyles<WmTabbarStyles>({\n        root: {\n            height: 88\n        },\n        text: {},\n        menu: {\n            height: '100%',\n            flexDirection: 'row',\n            backgroundColor: themeVariables.tabbarBackgroundColor,\n            justifyContent: 'space-around',\n            alignItems: 'flex-end',\n        },\n        modalContent: {},\n        moreMenu: {\n            width: '100%',\n            flexDirection: 'column-reverse',\n            justifyContent: 'flex-end',\n            backgroundColor: themeVariables.tabbarBackgroundColor,\n            ...BASE_THEME.getStyle('elevate1').root,\n            shadowOffset: {\n                width: 0,\n                height: -6\n            },\n            shadowOpacity: 0.3,\n            shadowRadius: 6\n        },\n        moreMenuRow: {\n            flexDirection: 'row-reverse',\n            justifyContent: 'space-around',\n            width: '100%',\n            paddingTop: 4,\n            paddingBottom: 4\n        },\n        tabItem: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            minWidth: 60,\n            opacity: 0.4\n        },\n        activeTabItem: {\n            opacity: 1\n        },\n        tabIcon: {\n            root: {\n                alignSelf: 'center',\n                paddingBottom: 32,\n                borderBottomColor: themeVariables.transparent,\n                borderBottomWidth: 4\n            },\n            icon: {\n                fontSize: 36,\n                color:  themeVariables.tabbarIconColor\n            }\n        } as WmIconStyles,\n        activeTabIcon: {\n            root: {\n                borderBottomColor: themeVariables.tabbarIconColor,\n            }\n        } as WmIconStyles,\n        tabLabel: {\n            fontSize: 14,\n            fontWeight: '500',\n            color:  themeVariables.tabbarIconColor,\n            textAlign: 'center',\n            fontFamily: themeVariables.baseFont,\n            marginTop: -32,\n            paddingBottom: 14\n        },\n        activeTabLabel: {},\n        centerHubItem: {},\n        centerHubIcon: {} as WmIconStyles, \n        centerHubLabel:{}\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle('tabbar-spacer', '', {\n        root: {\n            height: 96\n        }\n    });\n    addStyle(DEFAULT_CLASS+ '-1', '', {\n        root: {\n            height: undefined\n        },\n        tabItem: {\n            justifyContent: 'space-between' \n        },\n        activeTabItem: {\n            borderTopWidth: 4,\n            borderTopColor: themeVariables.tabbarIconColor\n        },\n        tabIcon: {\n            root: {\n                paddingTop: 8,\n                paddingBottom: 8,\n                borderBottomWidth: 0\n            }\n        },\n        tabLabel: {\n            marginTop: 0\n        }\n    } as WmTabbarStyles);\n    addStyle('clipped-tabbar', '', {\n        root:{\n            backgroundColor: themeVariables.transparent,\n            marginTop: -88\n        },\n        menu: {\n            backgroundColor: themeVariables.transparent\n        },\n        centerHubItem: {\n            width: 70,\n            height: 70,\n            shadowColor: 'grey',\n            shadowOpacity: 0.1,\n            opacity: 1,\n            shadowOffset: { width: 2, height: 0 },\n            shadowRadius: 2,\n            borderRadius: 35,\n            position: 'absolute',\n            bottom: 53,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: themeVariables.centerHubItemColor,\n            left: (themeVariables.maxWidth/2) - 35\n        },\n        centerHubIcon: {\n            root: {\n                alignSelf: 'center',\n                paddingBottom: 0,\n                borderBottomColor: themeVariables.transparent,\n                borderBottomWidth: 0 \n            },\n            icon: {\n                fontSize: 24,\n                color:  themeVariables.centerHubIconColor\n            }\n        } as WmIconStyles, \n        centerHubLabel:{\n            color:  themeVariables.centerHubLabelColor,\n            marginTop: 0,\n            paddingBottom: 4\n        }\n    })\n});"],"mappings":"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"}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","height","elevation","shadowColor","tabShadowColor","text","menu","flexDirection","backgroundColor","tabbarBackgroundColor","justifyContent","alignItems","modalContent","moreMenu","width","getStyle","shadowOffset","shadowOpacity","shadowRadius","moreMenuRow","paddingTop","paddingBottom","tabItem","minHeight","minWidth","opacity","marginBottom","activeTabItem","borderRadius","tabActiveBackgroundColor","tabIcon","alignSelf","borderBottomColor","transparent","icon","fontSize","paddingRight","color","tabbarIconColor","activeTabIcon","tabActiveIconColor","tabLabel","marginTop","fontWeight","fontFamily","baseFont","tabbarTextColor","textAlign","activeTabLabel","tabLabelTextColor","centerHubItem","centerHubIcon","centerHubLabel","undefined","borderTopWidth","borderTopColor","borderBottomWidth","position","bottom","centerHubItemColor","left","maxWidth","centerHubIconColor","centerHubLabelColor"],"sources":["tabbar.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 { WmIconStyles } from '../../basic/icon/icon.styles';\n\nexport type WmTabbarStyles = BaseStyles & {\n    menu: AllStyle,\n    modalContent: AllStyle,\n    moreMenu: AllStyle,\n    moreMenuRow: AllStyle,\n    tabItem: AllStyle,\n    activeTabItem: AllStyle,\n    tabIcon: WmIconStyles,\n    activeTabIcon: WmIconStyles,\n    tabLabel: AllStyle,\n    activeTabLabel: AllStyle,\n    centerHubItem: AllStyle,\n    centerHubIcon: WmIconStyles,\n    centerHubLabel: AllStyle\n};\n\nexport const DEFAULT_CLASS = 'app-tabbar';\n    BASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmTabbarStyles = defineStyles<WmTabbarStyles>({\n        root: {\n            height: 80,\n            elevation: 3,\n            shadowColor : themeVariables.tabShadowColor\n        },\n        text: {},\n        menu: {\n            height: '100%',\n            flexDirection: 'row',\n            backgroundColor: themeVariables.tabbarBackgroundColor,\n            justifyContent: 'space-around',\n            alignItems: 'flex-end',\n        },\n        modalContent: {},\n        moreMenu: {\n            width: '100%',\n            flexDirection: 'column-reverse',\n            justifyContent: 'flex-end',\n            backgroundColor: themeVariables.tabbarBackgroundColor,\n            ...BASE_THEME.getStyle('elevate1').root,\n            shadowOffset: {\n                width: 0,\n                height: -6\n            },\n            shadowOpacity: 0.3,\n            shadowRadius: 6\n        },\n        moreMenuRow: {\n            flexDirection: 'row-reverse',\n            justifyContent: 'space-around',\n            width: '100%',\n            paddingTop: 4,\n            paddingBottom: 4\n        },\n        tabItem: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            minHeight: 32,\n            minWidth: 64,\n            opacity: 1,\n            marginBottom: 16\n        },\n        activeTabItem: {\n            opacity: 1,\n            height: 32,\n            width: 64,\n            borderRadius: 50,\n            marginBottom: -2,\n            backgroundColor: themeVariables.tabActiveBackgroundColor\n        },\n        tabIcon: {\n            root: {\n                alignSelf: 'center',\n                borderBottomColor: themeVariables.transparent,\n                paddingBottom: 4\n            },\n            icon: {\n                fontSize: 24,\n                paddingRight: 0,\n                color:  themeVariables.tabbarIconColor\n            }\n        } as WmIconStyles,\n        activeTabIcon: {\n            root: {\n            },\n            icon:{\n                color: themeVariables.tabActiveIconColor,\n            }\n        } as WmIconStyles,\n        tabLabel: {\n            fontSize: 12,\n            marginTop: 4,\n            fontWeight: '500',\n            fontFamily: themeVariables.baseFont,\n            color:  themeVariables.tabbarTextColor,\n            textAlign: 'center',\n        },\n        activeTabLabel: {\n            fontWeight: '700',\n            fontSize: 12,\n            fontFamily: themeVariables.baseFont,\n            color:  themeVariables.tabLabelTextColor,\n        },\n        centerHubItem: {},\n        centerHubIcon: {} as WmIconStyles, \n        centerHubLabel:{}\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle('tabbar-spacer', '', {\n        root: {\n            height: 96\n        }\n    });\n    addStyle(DEFAULT_CLASS+ '-1', '', {\n        root: {\n            height: undefined\n        },\n        tabItem: {\n            justifyContent: 'space-between' \n        },\n        activeTabItem: {\n            borderTopWidth: 4,\n            borderTopColor: themeVariables.tabbarIconColor\n        },\n        tabIcon: {\n            root: {\n                paddingTop: 8,\n                paddingBottom: 8,\n                borderBottomWidth: 0\n            }\n        },\n        tabLabel: {\n            marginTop: 0\n        }\n    } as WmTabbarStyles);\n    addStyle('clipped-tabbar', '', {\n        root:{\n            backgroundColor: themeVariables.transparent,\n            marginTop: -88\n        },\n        menu: {\n            backgroundColor: themeVariables.transparent\n        },\n        centerHubItem: {\n            width: 70,\n            height: 70,\n            shadowColor: 'grey',\n            shadowOpacity: 0.1,\n            opacity: 1,\n            shadowOffset: { width: 2, height: 0 },\n            shadowRadius: 2,\n            borderRadius: 35,\n            position: 'absolute',\n            bottom: 28,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: themeVariables.centerHubItemColor,\n            left: (themeVariables.maxWidth/2) - 35\n        },\n        centerHubIcon: {\n            root: {\n                alignSelf: 'center',\n                paddingBottom: 0,\n                borderBottomColor: themeVariables.transparent,\n                borderBottomWidth: 0 \n            },\n            icon: {\n                fontSize: 24,\n                color:  themeVariables.centerHubIconColor\n            }\n        } as WmIconStyles, \n        centerHubLabel:{\n            color:  themeVariables.centerHubLabelColor,\n            marginTop: 0,\n            paddingBottom: 4\n        }\n    })\n});"],"mappings":"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"}

app-rn-runtime/core/accessibility.js

@@ -0,0 +1,149 @@
+import { AccessibilityInfo } from 'react-native';
+import { isAndroid, isWebPreviewMode, removeUndefinedKeys } from './utils';
+let _isScreenReaderEnabled = false;
+AccessibilityInfo.addEventListener('screenReaderChanged', flag => {
+  _isScreenReaderEnabled = flag;
+});
+export const isScreenReaderEnabled = () => _isScreenReaderEnabled;
+async function getScreenReaderStatus() {
+  _isScreenReaderEnabled = !isWebPreviewMode() && (await AccessibilityInfo.isScreenReaderEnabled());
+}
+getScreenReaderStatus();
+export let AccessibilityWidgetType = /*#__PURE__*/function (AccessibilityWidgetType) {
+  AccessibilityWidgetType["BUTTON"] = "button";
+  AccessibilityWidgetType["PICTURE"] = "picture";
+  AccessibilityWidgetType["TEXT"] = "text";
+  AccessibilityWidgetType["NUMBER"] = "number";
+  AccessibilityWidgetType["TEXTAREA"] = "textarea";
+  AccessibilityWidgetType["SELECT"] = "select";
+  AccessibilityWidgetType["CHIPS"] = "chips";
+  AccessibilityWidgetType["CURRENCY"] = "currency";
+  AccessibilityWidgetType["RADIOSET"] = "radioset";
+  AccessibilityWidgetType["CHECKBOX"] = "checkbox";
+  AccessibilityWidgetType["TOGGLE"] = "toggle";
+  AccessibilityWidgetType["SWITCH"] = "switch";
+  AccessibilityWidgetType["DATE"] = "date";
+  AccessibilityWidgetType["VIDEO"] = "video";
+  AccessibilityWidgetType["PROGRESSBAR"] = "progressbar";
+  AccessibilityWidgetType["PROGRESSCIRCLE"] = "progresscircle";
+  AccessibilityWidgetType["LABEL"] = "label";
+  AccessibilityWidgetType["ANCHOR"] = "anchor";
+  AccessibilityWidgetType["MESSAGE"] = "message";
+  AccessibilityWidgetType["SEARCH"] = "search";
+  AccessibilityWidgetType["ICON"] = "icon";
+  AccessibilityWidgetType["NAV"] = "nav";
+  AccessibilityWidgetType["POVOVER"] = "popover";
+  AccessibilityWidgetType["WEBVIEW"] = "webview";
+  AccessibilityWidgetType["LINECHART"] = "linechart";
+  return AccessibilityWidgetType;
+}({});
+;
+export const getAccessibilityProps = (widgetType, accessibilityProps) => {
+  let props = {
+    accessible: true
+  };
+  if (!_isScreenReaderEnabled) {
+    return {};
+  }
+  switch (widgetType) {
+    case AccessibilityWidgetType.BUTTON:
+    case AccessibilityWidgetType.TEXT:
+    case AccessibilityWidgetType.NUMBER:
+    case AccessibilityWidgetType.TEXTAREA:
+    case AccessibilityWidgetType.SELECT:
+    case AccessibilityWidgetType.CURRENCY:
+    case AccessibilityWidgetType.TOGGLE:
+    case AccessibilityWidgetType.DATE:
+    case AccessibilityWidgetType.LABEL:
+    case AccessibilityWidgetType.ANCHOR:
+    case AccessibilityWidgetType.MESSAGE:
+    case AccessibilityWidgetType.SEARCH:
+    case AccessibilityWidgetType.PICTURE:
+    case AccessibilityWidgetType.ICON:
+    case AccessibilityWidgetType.NAV:
+    case AccessibilityWidgetType.POVOVER:
+    case AccessibilityWidgetType.WEBVIEW:
+    case AccessibilityWidgetType.LINECHART:
+    case AccessibilityWidgetType.VIDEO:
+      {
+        props.accessibilityLabel = accessibilityProps.accessibilitylabel || accessibilityProps.caption;
+        props.accessibilityHint = accessibilityProps.hint;
+        props.accessibilityRole = accessibilityProps.accessibilityrole;
+        if (widgetType === AccessibilityWidgetType.BUTTON || widgetType === AccessibilityWidgetType.TEXT || widgetType === AccessibilityWidgetType.NUMBER || widgetType === AccessibilityWidgetType.TEXTAREA || widgetType === AccessibilityWidgetType.SELECT || widgetType === AccessibilityWidgetType.TOGGLE || widgetType === AccessibilityWidgetType.DATE) {
+          props.accessibilityState = {
+            disabled: accessibilityProps.disabled
+          };
+        }
+        if ((widgetType === AccessibilityWidgetType.TEXT || widgetType === AccessibilityWidgetType.NUMBER || widgetType === AccessibilityWidgetType.TEXTAREA || widgetType === AccessibilityWidgetType.SELECT || widgetType === AccessibilityWidgetType.CURRENCY || widgetType === AccessibilityWidgetType.TOGGLE) && isAndroid()) {
+          props.accessibilityLabelledBy = accessibilityProps.accessibilitylabelledby;
+        }
+        if (widgetType === AccessibilityWidgetType.NUMBER || widgetType === AccessibilityWidgetType.CURRENCY) {
+          props.accessibilityValue = {
+            min: accessibilityProps.minvalue,
+            max: accessibilityProps.maxvalue
+          };
+        }
+        if (widgetType === AccessibilityWidgetType.SELECT) {
+          props.accessibilityState = {
+            ...props.accessibilityState,
+            expanded: accessibilityProps.expanded
+          };
+        }
+        if (widgetType === AccessibilityWidgetType.TOGGLE) {
+          props.accessibilityState = {
+            ...props.accessibilityState,
+            selected: accessibilityProps.selected
+          };
+        }
+        break;
+      }
+    case AccessibilityWidgetType.CHIPS:
+      {
+        props.accessibilityLabel = accessibilityProps.accessibilitylabel || accessibilityProps.caption;
+        props.accessibilityHint = accessibilityProps.hint;
+        props.accessibilityState = {
+          disabled: accessibilityProps.disabled,
+          selected: accessibilityProps.selected
+        };
+        break;
+      }
+    case AccessibilityWidgetType.RADIOSET:
+      {
+        props.accessibilityState = {
+          disabled: accessibilityProps.readonly || accessibilityProps.disabled,
+          selected: accessibilityProps.selected
+        };
+        break;
+      }
+    case AccessibilityWidgetType.CHECKBOX:
+      {
+        props.accessibilityState = {
+          disabled: accessibilityProps.readonly || accessibilityProps.disabled,
+          checked: accessibilityProps.checked
+        };
+        break;
+      }
+    case AccessibilityWidgetType.SWITCH:
+      {
+        props.accessibilityState = {
+          disabled: accessibilityProps.disabled,
+          selected: accessibilityProps.selected
+        };
+        break;
+      }
+    case AccessibilityWidgetType.PROGRESSBAR:
+    case AccessibilityWidgetType.PROGRESSCIRCLE:
+      {
+        props.accessibilityLabel = accessibilityProps.accessibilitylabel || accessibilityProps.caption;
+        props.accessibilityRole = accessibilityProps.accessibilityrole;
+        break;
+      }
+    default:
+      break;
+  }
+  const finalProps = removeUndefinedKeys(props);
+  // console.log('finalProps', finalProps)
+
+  return finalProps;
+};
+//# sourceMappingURL=accessibility.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["AccessibilityInfo","isAndroid","isWebPreviewMode","removeUndefinedKeys","_isScreenReaderEnabled","addEventListener","flag","isScreenReaderEnabled","getScreenReaderStatus","AccessibilityWidgetType","getAccessibilityProps","widgetType","accessibilityProps","props","accessible","BUTTON","TEXT","NUMBER","TEXTAREA","SELECT","CURRENCY","TOGGLE","DATE","LABEL","ANCHOR","MESSAGE","SEARCH","PICTURE","ICON","NAV","POVOVER","WEBVIEW","LINECHART","VIDEO","accessibilityLabel","accessibilitylabel","caption","accessibilityHint","hint","accessibilityRole","accessibilityrole","accessibilityState","disabled","accessibilityLabelledBy","accessibilitylabelledby","accessibilityValue","min","minvalue","max","maxvalue","expanded","selected","CHIPS","RADIOSET","readonly","CHECKBOX","checked","SWITCH","PROGRESSBAR","PROGRESSCIRCLE","finalProps"],"sources":["accessibility.ts"],"sourcesContent":["import { AccessibilityInfo } from 'react-native';\nimport { isAndroid, isWebPreviewMode, removeUndefinedKeys } from './utils';\n\nlet _isScreenReaderEnabled = false;\n\nAccessibilityInfo.addEventListener(\n  'screenReaderChanged',\n  flag => {\n    _isScreenReaderEnabled = flag;\n  },\n);\n\nexport const isScreenReaderEnabled = () => _isScreenReaderEnabled;\n\nasync function getScreenReaderStatus() {\n  _isScreenReaderEnabled = (!isWebPreviewMode() && await AccessibilityInfo.isScreenReaderEnabled());\n}\n\ngetScreenReaderStatus();\n\nexport enum AccessibilityWidgetType {\n  BUTTON = 'button',\n  PICTURE = 'picture',\n  TEXT = 'text',\n  NUMBER = 'number',\n  TEXTAREA = 'textarea',\n  SELECT = 'select',\n  CHIPS = 'chips',\n  CURRENCY = 'currency',\n  RADIOSET = 'radioset',\n  CHECKBOX = 'checkbox',\n  TOGGLE = 'toggle',\n  SWITCH = 'switch',\n  DATE = 'date',\n  VIDEO = 'video',\n  PROGRESSBAR = 'progressbar',\n  PROGRESSCIRCLE = 'progresscircle',\n  LABEL = 'label',\n  ANCHOR = 'anchor',\n  MESSAGE = 'message',\n  SEARCH = 'search',\n  ICON = 'icon',\n  NAV = 'nav',\n  POVOVER = 'popover',\n  WEBVIEW = 'webview',\n  LINECHART = 'linechart',\n};\n\n  \nexport type AccessibilityPropsType = {\n  accessible?: boolean;\n  accessibilityLabel?: string;\n  accessibilityLabelledBy?: string;\n  accessibilityHint?: string;\n  accessibilityRole?: 'button' | 'link' | 'header' | 'search' | 'image' | 'imagebutton' | 'none' | 'summary' | 'text' | 'progressbar' | 'grid' | 'alert';\n  accessibilityState?: {\n    disabled?: boolean;\n    selected?: boolean;\n    checked?: boolean;\n    expanded?: boolean;\n  };\n  accessibilityValue?: {\n    min?: number;\n    max?: number;\n    now?: number;\n    text?: string;\n  };\n  accessibilityActions?: Array<{\n    name: string;\n    label?: string;\n  }>;\n  accessibilityLiveRegion?: 'none' | 'polite' | 'assertive';\n  accessibilityLanguage?: any;\n  accessibilityElementsHidden?: boolean;\n  accessibilityViewIsModal?: boolean;\n};\n  \n\nexport const getAccessibilityProps = (widgetType: AccessibilityWidgetType, accessibilityProps: AccessibilityPropsType | any) => {\n  let props: AccessibilityPropsType = {accessible: true};\n  if (!_isScreenReaderEnabled) {\n    return {};\n  }\n  switch (widgetType) {\n    case AccessibilityWidgetType.BUTTON:\n    case AccessibilityWidgetType.TEXT:\n    case AccessibilityWidgetType.NUMBER:\n    case AccessibilityWidgetType.TEXTAREA:\n    case AccessibilityWidgetType.SELECT:\n    case AccessibilityWidgetType.CURRENCY:\n    case AccessibilityWidgetType.TOGGLE:\n    case AccessibilityWidgetType.DATE:\n    case AccessibilityWidgetType.LABEL:\n    case AccessibilityWidgetType.ANCHOR:\n    case AccessibilityWidgetType.MESSAGE:    \n    case AccessibilityWidgetType.SEARCH: \n    case AccessibilityWidgetType.PICTURE: \n    case AccessibilityWidgetType.ICON:\n    case AccessibilityWidgetType.NAV:\n    case AccessibilityWidgetType.POVOVER:\n    case AccessibilityWidgetType.WEBVIEW:\n    case AccessibilityWidgetType.LINECHART:  \n    case AccessibilityWidgetType.VIDEO: {\n      props.accessibilityLabel = accessibilityProps.accessibilitylabel || accessibilityProps.caption;\n      props.accessibilityHint = accessibilityProps.hint;\n      props.accessibilityRole = accessibilityProps.accessibilityrole;\n\n      if (\n        widgetType === AccessibilityWidgetType.BUTTON ||\n        widgetType === AccessibilityWidgetType.TEXT ||\n        widgetType === AccessibilityWidgetType.NUMBER ||\n        widgetType === AccessibilityWidgetType.TEXTAREA ||\n        widgetType === AccessibilityWidgetType.SELECT ||\n        widgetType === AccessibilityWidgetType.TOGGLE ||\n        widgetType === AccessibilityWidgetType.DATE\n      ) {\n        props.accessibilityState = { disabled: accessibilityProps.disabled };\n      }\n      if (\n        (widgetType === AccessibilityWidgetType.TEXT ||\n          widgetType === AccessibilityWidgetType.NUMBER ||\n          widgetType === AccessibilityWidgetType.TEXTAREA ||\n          widgetType === AccessibilityWidgetType.SELECT ||\n          widgetType === AccessibilityWidgetType.CURRENCY ||\n          widgetType === AccessibilityWidgetType.TOGGLE) &&\n        isAndroid()\n      ) {\n        props.accessibilityLabelledBy =\n          accessibilityProps.accessibilitylabelledby;\n      }\n      if (\n        widgetType === AccessibilityWidgetType.NUMBER ||\n        widgetType === AccessibilityWidgetType.CURRENCY\n      ) {\n        props.accessibilityValue = {\n          min: accessibilityProps.minvalue,\n          max: accessibilityProps.maxvalue,\n        };\n      }\n      if (widgetType === AccessibilityWidgetType.SELECT) {\n        props.accessibilityState = {\n          ...props.accessibilityState,\n          expanded: accessibilityProps.expanded,\n        };\n      }\n      if (widgetType === AccessibilityWidgetType.TOGGLE) {\n        props.accessibilityState = {\n          ...props.accessibilityState,\n          selected: accessibilityProps.selected,\n        };\n      }\n      break;\n    }\n\n    case AccessibilityWidgetType.CHIPS: {\n      props.accessibilityLabel = accessibilityProps.accessibilitylabel || accessibilityProps.caption;\n      props.accessibilityHint = accessibilityProps.hint;\n      props.accessibilityState = {\n        disabled: accessibilityProps.disabled,\n        selected: accessibilityProps.selected,\n      };\n      break;\n    }\n\n    case AccessibilityWidgetType.RADIOSET: {\n      props.accessibilityState = {\n        disabled: accessibilityProps.readonly || accessibilityProps.disabled,\n        selected: accessibilityProps.selected,\n      };\n      break;\n    }\n\n    case AccessibilityWidgetType.CHECKBOX: {\n      props.accessibilityState = {\n        disabled: accessibilityProps.readonly ||  accessibilityProps.disabled,\n        checked: accessibilityProps.checked,\n      };\n      break;\n    }\n\n    case AccessibilityWidgetType.SWITCH: {\n      props.accessibilityState = {\n        disabled: accessibilityProps.disabled,\n        selected: accessibilityProps.selected,\n      };\n      break;\n    }\n    case AccessibilityWidgetType.PROGRESSBAR:\n    case AccessibilityWidgetType.PROGRESSCIRCLE: {\n      props.accessibilityLabel = accessibilityProps.accessibilitylabel || accessibilityProps.caption;\n      props.accessibilityRole = accessibilityProps.accessibilityrole;\n      break;\n    }\n    default:\n      break;\n  }\n\n  const finalProps = removeUndefinedKeys(props);\n  // console.log('finalProps', finalProps)\n\n  return finalProps;\n}\n  "],"mappings":"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"}

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

@@ -4,7 +4,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 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 { assign, isUndefined, isNil } from 'lodash';
 import React from 'react';
-import { Platform } from 'react-native';
+import { AccessibilityInfo, Platform } from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
 import { StyleProps, getStyleName } from '@wavemaker/app-rn-runtime/styles/style-props';
@@ -20,6 +20,7 @@ import { HideMode } from './if.component';
 import { AssetConsumer } from './asset.provider';
 import { FixedView } from './fixed-view.component';
 import { TextIdPrefixConsumer } from './testid.provider';
+import { isScreenReaderEnabled } from './accessibility';
 export const WIDGET_LOGGER = ROOT_LOGGER.extend('widget');
 export const ParentContext = /*#__PURE__*/React.createContext(null);
 export class BaseComponentState {
@@ -51,6 +52,7 @@ export class BaseProps extends StyleProps {
     _defineProperty(this, "listener", null);
     _defineProperty(this, "showindevice", null);
     _defineProperty(this, "showskeleton", false);
+    _defineProperty(this, "deferload", false);
   }
 }
 export class BaseComponent extends React.Component {
@@ -76,7 +78,9 @@ export class BaseComponent extends React.Component {
     _defineProperty(this, "loadAsset", null);
     _defineProperty(this, "i18nService", injector.I18nService.get());
     _defineProperty(this, "testIdPrefix", '');
+    _defineProperty(this, "_showView", true);
     this.state = defaultState || {};
+    this.notifier.name = this.props.name || '';
     this.propertyProvider = new PropsProvider(assign({
       show: true
     }, defaultProps), assign({}, markupProps), (name, $new, $old) => {
@@ -92,12 +96,14 @@ export class BaseComponent extends React.Component {
         }
       }
       if (name === 'showskeleton' && this.initialized) {
-        this.cleanRefresh();
+        setTimeout(() => this.cleanRefresh(), 100);
       }
       this.onPropertyChange(name, $new, $old);
     });
     //@ts-ignore
     this.state.props = this.propertyProvider.get();
+    //@ts-ignore
+    this._showView = !this.props.deferload;
     this.propertyProvider.check();
     //@ts-ignore
     this.proxy = new Proxy(this, {
@@ -130,6 +136,11 @@ export class BaseComponent extends React.Component {
     this.cleanup.push(this.theme.subscribe(ThemeEvent.CHANGE, () => {
       this.forceUpdate();
     }));
+    this.cleanup.push(AccessibilityInfo.addEventListener('screenReaderChanged', () => {
+      setTimeout(() => {
+        this.forceUpdate();
+      }, 100);
+    }).remove);
     this.cleanup.push(() => {
       this.destroyParentListeners();
     });
@@ -137,6 +148,9 @@ export class BaseComponent extends React.Component {
   subscribe(event, fn) {
     return this.notifier.subscribe(event, fn);
   }
+  notify(event, args) {
+    return this.notifier.notify(event, args);
+  }
   get isRTL() {
     return this.i18nService.isRTLLocale();
   }
@@ -234,6 +248,7 @@ export class BaseComponent extends React.Component {
       this.props.listener.onComponentDestroy(this.proxy);
     }
     this.cleanup.forEach(f => f && f());
+    this.notifier.destroy();
     this.notifier.notify('destroy', []);
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -253,6 +268,9 @@ export class BaseComponent extends React.Component {
       }
     }
   }
+  showView() {
+    return this.isVisible();
+  }
   isVisible() {
     const show = this.state.props.show;
     return show !== false && show !== 'false' && show !== '0' && !isNil(show);
@@ -272,6 +290,7 @@ export class BaseComponent extends React.Component {
   setParent(parent) {
     if (parent && this.parent !== parent) {
       this.parent = parent;
+      this.notifier.setParent(parent.notifier);
       this.parentListenerDestroyers = [this.parent.subscribe('forceUpdate', () => {
         this.cleanRefresh();
       }), this.parent.subscribe('destroy', () => {
@@ -346,6 +365,9 @@ export class BaseComponent extends React.Component {
   }
   getTestProps(suffix) {
     let id = this.getTestId(suffix);
+    if (isScreenReaderEnabled()) {
+      return {};
+    }
     if (Platform.OS === 'android' || Platform.OS === 'web') {
       return {
         accessibilityLabel: id,
@@ -390,13 +412,14 @@ export class BaseComponent extends React.Component {
   }
   render() {
     const props = this.state.props;
-    if (this.state.hide || !this.isVisible() && this.hideMode === HideMode.DONOT_ADD_TO_DOM) {
-      return null;
-    }
     this.isFixed = false;
     const selectedLocale = this.i18nService.getSelectedLocale();
     return this.getDependenciesFromContext(() => {
       WIDGET_LOGGER.info(() => `${this.props.name || this.constructor.name} is rendering.`);
+      this._showView = this._showView || this.showView();
+      if (this.state.hide || !this.isVisible() && this.hideMode === HideMode.DONOT_ADD_TO_DOM || !this._showView) {
+        return null;
+      }
       const classname = this.getStyleClassName();
       this.styles = this.theme.mergeStyle(this.getDefaultStyles(), {
         text: this.theme.getStyle('app-' + selectedLocale)