index.js 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import React from 'react';
  2. import { Link } from 'react-router-dom';
  3. import './index.less';
  4. function getItem(props, item, onChange) {
  5. const { width, space, active, render } = props;
  6. return (
  7. <div
  8. onClick={() => active !== item.key && onChange && onChange(item.key)}
  9. style={{ width: width || '', marginLeft: space || '', marginRight: space || '' }}
  10. className={`tab ${active === item.key ? 'active' : ''}`}
  11. >
  12. {render ? render(item) : item.name || item.title}
  13. </div>
  14. );
  15. }
  16. function Tabs(props) {
  17. const {
  18. className = '',
  19. tabs = [],
  20. size = 'basic',
  21. type = 'line',
  22. theme = 'default',
  23. border,
  24. space,
  25. onChange,
  26. } = props;
  27. return (
  28. <div className={`tabs ${className} ${type} ${theme} ${size} ${border ? 'border' : ''}`}>
  29. <div className="tabs-warpper" style={{ marginLeft: space * -1 || '', marginRight: space * -1 || '' }}>
  30. {tabs.map(item => {
  31. return item.path ? <Link to={item.path}>{getItem(props, item)}</Link> : getItem(props, item, onChange);
  32. })}
  33. </div>
  34. </div>
  35. );
  36. }
  37. Tabs.propTypes = {};
  38. export default Tabs;