@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
118 lines • 3.88 kB
JavaScript
import React from 'react';
import classnames from 'classnames';
import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
import { IconTickCircle, IconAlertCircle, IconAlertTriangle } from '@douyinfe/semi-icons';
export var stepSizeMapIconSize;
(function (stepSizeMapIconSize) {
stepSizeMapIconSize["small"] = "large";
stepSizeMapIconSize["default"] = "extra-large";
})(stepSizeMapIconSize || (stepSizeMapIconSize = {}));
const BasicStep = props => {
const {
prefixCls = css.ITEM,
className = '',
size,
title,
description,
status = 'wait',
style,
active = false,
done = false,
icon,
stepNumber,
onClick,
onChange,
onKeyDown
} = props;
const renderIcon = () => {
let inner, progress;
if ('icon' in props) {
if (/*#__PURE__*/React.isValidElement(icon)) {
inner = icon;
}
} else if ('status' in props) {
switch (status) {
case 'error':
inner = /*#__PURE__*/React.createElement(IconAlertCircle, {
size: stepSizeMapIconSize[size]
});
break;
case 'wait':
inner = /*#__PURE__*/React.createElement("span", {
className: `${prefixCls}-number-icon`
}, stepNumber);
break;
case 'process':
inner = /*#__PURE__*/React.createElement("span", {
className: `${prefixCls}-number-icon`
}, stepNumber);
progress = true;
break;
case 'finish':
inner = /*#__PURE__*/React.createElement(IconTickCircle, {
size: stepSizeMapIconSize[size]
});
break;
case 'warning':
inner = /*#__PURE__*/React.createElement(IconAlertTriangle, {
size: stepSizeMapIconSize[size]
});
break;
default:
inner = null;
break;
}
}
const cls = classnames({
[`${prefixCls}-icon`]: true,
[`${prefixCls}-custom-icon`]: 'icon' in props,
[`${prefixCls}-icon-process`]: progress
});
return inner ? /*#__PURE__*/React.createElement("span", {
className: cls
}, inner) : null;
};
const classString = classnames(prefixCls, `${prefixCls}-${status}`, {
[`${prefixCls}-active`]: active,
[`${prefixCls}-done`]: done,
[`${prefixCls}-hover`]: onChange || props.onClick,
[`${prefixCls}-clickable`]: onChange || onClick,
[`${prefixCls}-${status}-hover`]: onChange || props.onClick
}, className);
const handleClick = e => {
onClick === null || onClick === void 0 ? void 0 : onClick(e);
onChange === null || onChange === void 0 ? void 0 : onChange();
};
const handleKeyDown = e => {
if (e.key === 'Enter') {
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
onChange === null || onChange === void 0 ? void 0 : onChange();
}
};
const titleTextClass = classnames(`${prefixCls}-title-text`, {
[`${prefixCls}-title-text-empty`]: !title
});
return /*#__PURE__*/React.createElement("div", {
role: props["role"],
"aria-label": props["aria-label"],
tabIndex: 0,
"aria-current": "step",
className: classString,
style: style,
onClick: e => handleClick(e),
onKeyDown: handleKeyDown
}, /*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-container`
}, /*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-left`
}, renderIcon()), /*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-content`
}, /*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-title`
}, /*#__PURE__*/React.createElement("div", {
className: titleTextClass
}, title)), description && /*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-description`
}, description))));
};
export default BasicStep;