Fix/tabview (#139)

* fixing lazy component

* adding lifecycle for tabbar and beagleChildren for lazy-component

* fixing tabview

* fixing tabview

* removing console.log

* removing unused file

packages/beagle-react/src/components/BeagleTabBar/index.tsx

@@ -15,11 +15,9 @@
 */
 
 import React, { FC } from 'react'
-import { BeforeViewSnapshot } from '@zup-it/beagle-web'
 import { BeagleDefaultComponent } from '../types'
 import withTheme from '../utils/withTheme'
 import { ImagePath } from '../BeagleImage'
-import { transformItems } from './lifecycles'
 import {
   StyledTabBar,
   StyledBeagleTabItem,
@@ -65,6 +63,4 @@ const BeagleTabBar: FC<BeagleTabBarInterface> = ({ onTabSelection, currentTab, i
   )
 }
 
-BeforeViewSnapshot(transformItems)(BeagleTabBar)
-
 export default withTheme(BeagleTabBar)

packages/beagle-react/src/components/BeagleTabView/index.tsx

@@ -15,10 +15,12 @@
 */
 
 import React, { FC, useState, useEffect } from 'react'
+import { logger, BeforeViewSnapshot } from '@zup-it/beagle-web'
 import withTheme from '../utils/withTheme'
 import { BeagleDefaultComponent } from '../types'
 import { BeagleComponentsProvider } from './context'
 import { StyledTabView } from './styled'
+import { transformItems } from './lifecycles'
 
 export interface BeagleChildren {
   key: string,
@@ -43,7 +45,7 @@ const BeagleTabView: FC<BeagleDefaultComponent> = props => {
       const firstChildren = children[0] as BeagleChildren
       tabViewContext.setActiveTab(firstChildren.key)
     }
-    console.warn(`Tabview is deprecated. This will be removed in a future version.
+    logger.warn(`Tabview is deprecated. This will be removed in a future version.
     Please consider replacing this component for a tabBar with a pageview.`)
   }, [])
 
@@ -56,4 +58,7 @@ const BeagleTabView: FC<BeagleDefaultComponent> = props => {
   )
 }
 
-export default withTheme(BeagleTabView)
+const TabViewWithTheme = withTheme(BeagleTabView)
+BeforeViewSnapshot(transformItems)(TabViewWithTheme)
+
+export default TabViewWithTheme

packages/beagle-react/src/components/BeagleTabBar/lifecycles.ts → packages/beagle-react/src/components/BeagleTabView/lifecycles.ts

@@ -14,11 +14,11 @@
   * limitations under the License.
 */
 
-export function transformItems(tabBar: Record<string, any>) {
-  if (!Array.isArray(tabBar.items)) return
-  tabBar.children = tabBar.items.map(item => ({
-    _beagleComponent_: 'beagle:tabitem',
-    id: `${tabBar.id}_${item.title}`,
-    ...item,
-  }))
+import { BeagleUIElement } from '@zup-it/beagle-web'
+
+export function transformItems(tabView: Record<string, any>) {
+  if (!Array.isArray(tabView.children)) return
+  tabView.children.forEach((child: BeagleUIElement) => {
+    child._beagleComponent_ = 'beagle:tabitem'
+  })
 }