index.js 810 B

1234567891011121314151617181920212223242526
  1. import React from 'react';
  2. import { Tooltip } from 'antd';
  3. import './index.less';
  4. function Step(props) {
  5. const { list = [], step = 1, onClick, message, maxStep } = props;
  6. return (
  7. <div className="step">
  8. {list.map((item, index) => {
  9. const info = <div className={`item ${index === step - 1 ? 'active' : ''} ${maxStep && index >= maxStep ? 'trail' : ''}`} onClick={() => {
  10. if ((maxStep && index < maxStep) || !maxStep) if (onClick) onClick(index + 1);
  11. }}>
  12. <span className="text">{item}</span>
  13. </div>;
  14. if ((maxStep && index < maxStep) || !maxStep) {
  15. return info;
  16. }
  17. return <Tooltip title={message} trigger='click'>
  18. {info}
  19. </Tooltip>;
  20. })}
  21. </div>
  22. );
  23. }
  24. Step.propTypes = {};
  25. export default Step;