import React from 'react'; import PropTypes from 'prop-types'; import { isFunction } from 'lodash'; import classnames from 'classnames'; import { stepsClasses as css } from '@douyinfe/semi-foundation/steps/constants'; import { IconChevronRight } from '@douyinfe/semi-icons'; export interface NavStepProps { title?: React.ReactNode; className?: string; style?: React.CSSProperties; index?: number; active?: boolean; total?: number; prefixCls?: string; onChange?: () => void; onClick?: React.MouseEventHandler; onKeyDown?: React.KeyboardEventHandler; "role"?: React.AriaRole; "aria-label"?: React.AriaAttributes["aria-label"]; } const NavStep = (props: NavStepProps) => { const { prefixCls, className, title, style, active, index, total, onClick, onKeyDown, onChange } = props; const classString = classnames(prefixCls, { [`${prefixCls}-active`]: active }, className); const handleClick = (e: React.MouseEvent) => { if (isFunction(onClick)) { onClick(e); } onChange(); }; const handleKeyDown = (e) => { if (e.key === 'Enter') { if (isFunction(onKeyDown)) { onKeyDown(e); } onChange(); } }; return (
handleClick(e)} onKeyDown={handleKeyDown}>
{title}
{index !== total - 1 && (
)}
); }; NavStep.propTypes = { prefixCls: PropTypes.string, title: PropTypes.node, className: PropTypes.string, style: PropTypes.object, onClick: PropTypes.func, active: PropTypes.bool, }; NavStep.defaultProps = { prefixCls: css.ITEM, active: false, className: '', }; export default NavStep;