+---
+title: alternativeLabel
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: composable
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: custom-svg-icon
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: customIcon
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: dynamic
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: errorStep
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: inline
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: nav-base
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: nextStep
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: progressDot
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: simple
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: smallSize
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: stepIcon
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: vertical
+nav:
+ title: Demo
+ path: /demo
+---
+
+
+---
+title: verticalSmall
+nav:
+ title: Demo
+ path: /demo
+---
+
+ (
- React.cloneElement(stepItem, { title: item.description })
- )}
- />
- )
+ <>
+
+
+
+
+ React.cloneElement(stepItem, { title: item.description })}
+ />
+
+ );
};
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 0000000..3358d44
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,7 @@
+---
+hero:
+ title: rc-steps
+ description: React Steps Component
+---
+
+
diff --git a/package.json b/package.json
index 1909571..affd22b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "rc-steps",
- "version": "6.0.0",
+ "version": "6.0.1",
"description": "steps ui component for react",
"keywords": [
"react",
@@ -38,7 +38,7 @@
"docs:deploy": "gh-pages -d .doc",
"gh-pages": "npm run docs:build && npm run docs:deploy",
"lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
- "prepare": "husky install",
+ "prepare": "husky install && dumi setup",
"prepublishOnly": "npm run compile && np --yolo --no-publish",
"prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
"postpublish": "npm run gh-pages",
@@ -59,20 +59,21 @@
"@rc-component/father-plugin": "^1.0.1",
"@types/classnames": "^2.2.9",
"@types/enzyme": "^3.10.11",
- "@types/jest": "^26.0.5",
+ "@types/jest": "^29.4.0",
"@types/react": "^16.9.2",
"@types/react-dom": "^18.0.11",
- "@umijs/fabric": "^2.10.0",
+ "@umijs/fabric": "^3.0.0",
"cross-env": "^7.0.0",
- "dumi": "^1.1.38",
+ "dumi": "^2.0.0",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.1",
"enzyme-to-json": "^3.1.2",
"eslint": "^7.1.0",
"father": "^4",
"gh-pages": "^4.0.0",
+ "glob": "^10.0.0",
"husky": "^8.0.1",
- "less": "^3.11.2",
+ "less": "^4.1.3",
"lint-staged": "^13.0.3",
"np": "^7.6.0",
"prettier": "^2.5.1",
@@ -81,7 +82,7 @@
"rc-tools": "^9.6.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
- "typescript": "^4.5.4",
+ "typescript": "^5.0.0",
"umi-test": "^1.9.7"
},
"peerDependencies": {
diff --git a/script/update-content.js b/script/update-content.js
new file mode 100644
index 0000000..880494b
--- /dev/null
+++ b/script/update-content.js
@@ -0,0 +1,34 @@
+/*
+ 用于 dumi 改造使用，
+ 可用于将 examples 的文件批量修改为 demo 引入形式，
+ 其他项目根据具体情况使用。
+*/
+
+const fs = require('fs');
+const glob = require('glob');
+
+const paths = glob.sync('./docs/examples/*.jsx');
+
+paths.forEach(path => {
+ const name = path.split('/').pop().split('.')[0];
+ fs.writeFile(
+ `./docs/demo/${name}.md`,
+ `---
+title: ${name}
+nav:
+ title: Demo
+ path: /demo
+---
+
+ = (...args) => {
- if (onClick) {
- onClick(...args);
- }
+ // ========================= Click ==========================
+ const clickable = !!onStepClick && !disabled;
- onStepClick(stepIndex);
- };
+ const accessibilityProps: {
+ role?: string;
+ tabIndex?: number;
+ onClick?: React.MouseEventHandler;
+ onKeyDown?: React.KeyboardEventHandler;
+ } = {};
+ if (clickable) {
+ accessibilityProps.role = 'button';
+ accessibilityProps.tabIndex = 0;
+ accessibilityProps.onClick = (e) => {
+ onClick?.(e);
+ onStepClick(stepIndex);
+ };
+ accessibilityProps.onKeyDown = (e) => {
+ const { which } = e;
+ if (which === KeyCode.ENTER || which === KeyCode.SPACE) {
+ onStepClick(stepIndex);
+ }
+ };
+ }
+ // ========================= Render =========================
const renderIconNode = () => {
let iconNode;
const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
@@ -119,25 +137,19 @@ function Step(props: StepProps) {
const mergedStatus = status || 'wait';
- const classString = classNames(`${prefixCls}-item`, `${prefixCls}-item-${mergedStatus}`, className, {
- [`${prefixCls}-item-custom`]: icon,
- [`${prefixCls}-item-active`]: active,
- [`${prefixCls}-item-disabled`]: disabled === true,
- });
+ const classString = classNames(
+ `${prefixCls}-item`,
+ `${prefixCls}-item-${mergedStatus}`,
+ className,
+ {
+ [`${prefixCls}-item-custom`]: icon,
+ [`${prefixCls}-item-active`]: active,
+ [`${prefixCls}-item-disabled`]: disabled === true,
+ },
+ );
const stepItemStyle = { ...style };
- const accessibilityProps: {
- role?: string;
- tabIndex?: number;
- onClick?: React.MouseEventHandler;
- } = {};
- if (onStepClick && !disabled) {
- accessibilityProps.role = 'button';
- accessibilityProps.tabIndex = 0;
- accessibilityProps.onClick = onInternalClick;
- }
-
- let stepNode: React.ReactNode = (
+ let stepNode: React.ReactElement = (
{tailContent}
@@ -160,12 +172,11 @@ function Step(props: StepProps) {
);
-
if (render) {
- stepNode = render(stepNode) || null;
+ stepNode = (render(stepNode) || null) as React.ReactElement;
}
- return stepNode as React.ReactElement;
+ return stepNode;
}
export default Step;
diff --git a/src/Steps.tsx b/src/Steps.tsx
index 5ea4416..1e228b9 100644
--- a/src/Steps.tsx
+++ b/src/Steps.tsx
@@ -40,7 +40,7 @@ export interface StepsProps {
initial?: number;
icons?: Icons;
items?: StepProps[];
- itemRender?: (item: StepProps, stepItem: React.ReactNode) => React.ReactNode;
+ itemRender?: (item: StepProps, stepItem: React.ReactElement) => React.ReactNode;
onChange?: (current: number) => void;
}
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 547c877..bb5a65e 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -257,9 +257,7 @@ describe('Steps', () => {
disabled: true,
},
]}
- itemRender={(item, stepItem) => (
- React.cloneElement(stepItem, { title: item.description })
- )}
+ itemRender={(item, stepItem) => React.cloneElement(stepItem, { title: item.description })}
/>,
);
expect(wrapper).toMatchSnapshot();
@@ -470,4 +468,28 @@ describe('Steps', () => {
wrapper.find('.rc-steps-item-container').at(2).simulate('click');
expect(onChange).not.toBeCalled();
});
+
+ it('key board support', () => {
+ const onChange = jest.fn();
+ const wrapper = mount(
+