Tabs 选项卡组件

Tabs文档 https://ant.design/components/tabs-cn/
PropTypes类型 https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html

父组件使用 TabList

function App({data}) {
const [tabKey, setTabKey] = useState('Bar');
const tabSource = useMemo(update, [data, tabKey]);
function update() {
  return data.map(({ name, children }) => {
    return {
      label: name,
      value: name,
      element: (
        <CardChart
          dataSource={children}
          activeKey={tabKey}
        />
      )
    };
  });
}
return (
  <Tabs
      value={tabKey}
      dataSource={tabSource}
      onChange={setTabKey}
      tabBarStyle={{ fontWeight: 600 }}
    />
)
}

TabArray.js

TabArray 数据格式：

[
  {label: '名称', value: '值', element: '子组件'}
]

TabArray

import { useState } from 'react';
import { array, func, bool, object, oneOf, elementType } from 'prop-types';
import { Tabs } from 'antd';
import classNames from 'classnames';
import { Icon } from '@/components';
const { TabPane } = Tabs;
TabList.propTypes = {
  dataSource: array.isRequired,
  onChange: func,
  type: oneOf(['card', 'line', 'editable-card']),
  size: oneOf(['default', 'large', 'small']),
  tabPosition: oneOf(['top', 'right', 'bottom', 'left']),
  tabBarExtraContent: elementType,
  tabBarStyle: object,
  centered: bool,
  hideLine: bool
};
TabList.defaultProps = {
  type: 'line',
  centered: false,
  hideLine: false,
  tabPosition: 'top'
};
function TabList(props) {
  const {
    dataSource, onChange, value: key, className,
    tabPosition, tabBarStyle,
    size, type, tabBarExtraContent, centered, hideLine
  } = props;
  const [activeKey, setActiveKey] = useState(() => {
    return (key !== undefined) ? key : dataSource[0]?.value;
  });
  if (!Array.isArray(dataSource)) return null;
  function tabChange(value) {
    setActiveKey(value);
    if (onChange) onChange(value);
  }
  const attrs = {
    type,
    size,
    activeKey,
    onChange: tabChange,
    tabBarExtraContent,
    centered,
    tabPosition,
    tabBarStyle,
    className: classNames(className, { 'hide-before': hideLine })
  };
  return (
    <Tabs {...attrs}>
      {
        dataSource.map(({ label, value, icon, element }, i) => {
          const tab = icon ? <><Icon icon={icon} />{label}</> : label;
          return (
            <TabPane tab={tab} key={value}>
              {/* 如果不是当前的 Tab就不显示 */}
              {activeKey === value && element}
            </TabPane>
          );
        })
      }
    </Tabs>
  );
}
export default TabList;