import React , { PureComponent , cloneElement } from 'react' ; import classnames from 'classnames' ; import type { BaseTabBarProps } from './PropsType' ; import type TabBarItem from './TabBarItem' ; export interface TabBarProps extends BaseTabBarProps { prefixCls ? : string ; className ? : string ; } class TabBar extends PureComponent < TabBarProps , any > { static Item : typeof TabBarItem ; static defaultProps : TabBarProps = { prefixCls : 'za-tab-bar' , visible : true , } ; onChildChange = ( value ) => { const { onChange } = this . props ; if ( typeof onChange === 'function' ) { onChange ( value ) ; } } ; getSelected = ( index , itemKey ) => { const { activeKey , defaultActiveKey } = this . props ; if ( ! activeKey ) { if ( ! defaultActiveKey && index === 0 ) { return true ; } return defaultActiveKey === itemKey ; } return activeKey === itemKey ; } ; render ( ) { const { visible , prefixCls , className , children , style } = this . props ; const cls = classnames ( prefixCls , className , { [ `${ prefixCls }--hidden` ] : ! visible , } ) ; const items = React . Children . map ( children , ( element , index ) => { if ( ! React . isValidElement ( element ) ) return null ; const itemKey = element . props . itemKey || index ; return cloneElement ( element , { key : index , disabled : element . props . disabled , onChange : ( ) => this . onChildChange ( itemKey ) , badge : element . props . badge , title : element . props . title , icon : element . props . icon , itemKey , style : element . props . style , selected : this . getSelected ( index , itemKey ) , } ) ; } ) ; return ( < div className = { cls } style = { style } > { items } < /div>); } } export default TabBar ;