├── src ├── interface.ts ├── index.ts ├── UnstableContext.ts ├── Context.ts ├── Rail.tsx ├── StepIcon.tsx ├── Step.tsx └── Steps.tsx ├── bunfig.toml ├── index.js ├── jest.config.js ├── .prettierrc ├── tests ├── setup.js ├── semantic.test.tsx ├── index.test.tsx └── __snapshots__ │ └── index.test.tsx.snap ├── .fatherrc.ts ├── docs ├── demo │ ├── dynamic.md │ ├── inline.md │ ├── simple.md │ ├── nav-base.md │ ├── nextStep.md │ ├── stepIcon.md │ ├── vertical.md │ ├── composable.md │ ├── customIcon.md │ ├── errorStep.md │ ├── smallSize.md │ ├── progressDot.md │ ├── verticalSmall.md │ ├── custom-svg-icon.md │ └── alternativeLabel.md ├── index.md └── examples │ ├── nextStep.css │ ├── customIcon.jsx │ ├── vertical.jsx │ ├── errorStep.jsx │ ├── verticalSmall.jsx │ ├── composable.jsx │ ├── progressDot.jsx │ ├── alternativeLabel.jsx │ ├── stepIcon.jsx │ ├── inline.jsx │ ├── dynamic.jsx │ ├── smallSize.jsx │ ├── nextStep.jsx │ ├── nav-base.jsx │ ├── simple.jsx │ └── custom-svg-icon.jsx ├── .github ├── workflows │ └── main.yml └── dependabot.yml ├── .eslintrc.js ├── .editorconfig ├── tsconfig.json ├── .dumirc.ts ├── .gitignore ├── assets ├── custom-icon.less ├── label-placement.less ├── progress-dot.less ├── vertical.less ├── variables.less ├── small.less ├── nav.less ├── inline.less ├── index.less └── iconfont.less ├── script └── update-content.js ├── LICENSE.md ├── HISTORY.md ├── package.json └── README.md /src/interface.ts: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /bunfig.toml: -------------------------------------------------------------------------------- 1 | [install] 2 | peer = false -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = require('./src/'); -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | setupFiles: ['./tests/setup.js'], 3 | }; -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all", 4 | "proseWrap": "never", 5 | "printWidth": 100 6 | } -------------------------------------------------------------------------------- /tests/setup.js: -------------------------------------------------------------------------------- 1 | global.requestAnimationFrame = global.requestAnimationFrame || function raf(cb) { 2 | return setTimeout(cb, 0); 3 | }; 4 | -------------------------------------------------------------------------------- /.fatherrc.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'father'; 2 | 3 | export default defineConfig({ 4 | plugins: ['@rc-component/father-plugin'], 5 | }); 6 | -------------------------------------------------------------------------------- /docs/demo/dynamic.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: dynamic 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/inline.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: inline 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: simple 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/nav-base.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: nav-base 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/nextStep.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: nextStep 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/stepIcon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: stepIcon 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/vertical.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vertical 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/composable.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: composable 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/customIcon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: customIcon 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/errorStep.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: errorStep 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/smallSize.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: smallSize 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | hero: 3 | title: "@rc-component/steps" 4 | description: React Steps Component 5 | --- 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/demo/progressDot.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: progressDot 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/verticalSmall.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: verticalSmall 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/custom-svg-icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: custom-svg-icon 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/demo/alternativeLabel.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: alternativeLabel 3 | nav: 4 | title: Demo 5 | path: /demo 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: ✅ test 2 | on: [push, pull_request] 3 | jobs: 4 | test: 5 | uses: react-component/rc-test/.github/workflows/test.yml@main 6 | secrets: inherit -------------------------------------------------------------------------------- /docs/examples/nextStep.css: -------------------------------------------------------------------------------- 1 | .my-step-form { 2 | width: 100%; 3 | } 4 | .my-step-form > div { 5 | margin-bottom: 20px; 6 | } 7 | .my-step-container { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | const base = require('@umijs/fabric/dist/eslint'); 2 | 3 | module.exports = { 4 | ...base, 5 | rules: { 6 | ...base.rules, 7 | 'arrow-parens': 0, 8 | 'react/sort-comp': 0, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | # Unix-style newlines with a newline ending every file 5 | [*.{js,css}] 6 | end_of_line = lf 7 | insert_final_newline = true 8 | indent_style = space 9 | indent_size = 2 -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import Steps, { type StepsProps } from './Steps'; 2 | import Step from './Step'; 3 | 4 | export { Step }; 5 | export type { StepsProps }; 6 | export { UnstableContext } from './UnstableContext'; 7 | export default Steps; 8 | -------------------------------------------------------------------------------- /src/UnstableContext.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export interface UnstableContextProps { 4 | /** 5 | * Used for Timeline component `reverse` prop. 6 | * Safe to remove if refactor. 7 | */ 8 | railFollowPrevStatus?: boolean; 9 | } 10 | 11 | export const UnstableContext = React.createContext({}); 12 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "moduleResolution": "node", 5 | "baseUrl": "./", 6 | "jsx": "preserve", 7 | "declaration": true, 8 | "skipLibCheck": true, 9 | "esModuleInterop": true, 10 | "paths": { 11 | "@/*": ["src/*"], 12 | "@@/*": ["dumi/tmp/*"], 13 | "@rc-component/steps": ["src/index.ts"] 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /src/Context.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { ComponentType, StepsProps } from './Steps'; 3 | 4 | export interface StepsContextProps { 5 | prefixCls: string; 6 | classNames: NonNullable; 7 | styles: NonNullable; 8 | ItemComponent: ComponentType; 9 | } 10 | 11 | export const StepsContext = React.createContext(null!); 12 | -------------------------------------------------------------------------------- /.dumirc.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'dumi'; 2 | import path from 'path'; 3 | 4 | export default defineConfig({ 5 | alias: { 6 | '@rc-component/steps$': path.resolve('src'), 7 | '@rc-component/steps/es': path.resolve('src'), 8 | }, 9 | mfsu: false, 10 | favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'], 11 | themeConfig: { 12 | name: 'Steps', 13 | logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', 14 | }, 15 | }); -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: daily 7 | time: "21:00" 8 | open-pull-requests-limit: 10 9 | ignore: 10 | - dependency-name: "@types/react-dom" 11 | versions: 12 | - 17.0.0 13 | - 17.0.1 14 | - 17.0.2 15 | - dependency-name: "@types/react" 16 | versions: 17 | - 17.0.0 18 | - 17.0.1 19 | - 17.0.2 20 | - 17.0.3 21 | - dependency-name: less 22 | versions: 23 | - 4.1.0 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .iml 2 | *.log 3 | .idea/ 4 | .ipr 5 | .iws 6 | *~ 7 | ~* 8 | *.diff 9 | *.patch 10 | *.bak 11 | .DS_Store 12 | Thumbs.db 13 | .project 14 | .*proj 15 | .svn/ 16 | *.swp 17 | *.swo 18 | *.pyc 19 | *.pyo 20 | .build 21 | node_modules 22 | .cache 23 | dist 24 | assets/**/*.css 25 | build 26 | lib 27 | es 28 | coverage 29 | package-lock.json 30 | pnpm-lock.yaml 31 | yarn.lock 32 | .doc 33 | .umi 34 | .npmrc 35 | 36 | # dumi 37 | .dumi/tmp 38 | .dumi/tmp-test 39 | .dumi/tmp-production 40 | .env.local 41 | 42 | bun.lockb -------------------------------------------------------------------------------- /assets/custom-icon.less: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .@{stepsPrefixClass}-item-custom { 4 | .@{stepsPrefixClass}-item-icon { 5 | background: none; 6 | border: 0; 7 | width: auto; 8 | height: auto; 9 | > .@{stepsPrefixClass}-icon { 10 | font-size: 20px; 11 | top: 1px; 12 | width: 20px; 13 | height: 20px; 14 | } 15 | } 16 | &.@{stepsPrefixClass}-item-process { 17 | .@{stepsPrefixClass}-item-icon > .@{stepsPrefixClass}-icon { 18 | color: @process-icon-color; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /docs/examples/customIcon.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | // eslint-disable-next-line react/prop-types 7 | const Icon = ({ type }) => ; 8 | 9 | export default () => ( 10 | }, 14 | { title: '步骤2', icon: 'apple' }, 15 | { title: '步骤1', icon: 'github' }, 16 | ]} 17 | /> 18 | ); 19 | -------------------------------------------------------------------------------- /assets/label-placement.less: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .@{stepsPrefixClass}-label-vertical { 4 | .@{stepsPrefixClass}-item { 5 | overflow: visible; 6 | &-section { 7 | display: block; 8 | text-align: center; 9 | margin-top: 8px; 10 | width: @stepDescriptionMaxWidth; 11 | } 12 | &-icon { 13 | display: inline-block; 14 | margin-left: 36px; 15 | } 16 | &-title { 17 | padding-right: 0; 18 | &:after { 19 | display: none; 20 | } 21 | } 22 | &-description { 23 | text-align: left; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/Rail.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { clsx } from 'clsx'; 3 | import type { Status } from './Steps'; 4 | 5 | export interface RailProps { 6 | prefixCls: string; 7 | className: string; 8 | style: React.CSSProperties; 9 | status: Status; 10 | } 11 | 12 | export default function Rail(props: RailProps) { 13 | const { prefixCls, className, style, status } = props; 14 | const railCls = `${prefixCls}-rail`; 15 | 16 | // ============================= render ============================= 17 | return
; 18 | } 19 | -------------------------------------------------------------------------------- /assets/progress-dot.less: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .@{stepsPrefixClass}-dot { 4 | .@{stepsPrefixClass}-item { 5 | &-icon { 6 | padding-right: 0; 7 | width: 5px; 8 | height: 5px; 9 | line-height: 5px; 10 | border: 0; 11 | margin-left: 48px; 12 | .@{stepsPrefixClass}-icon-dot { 13 | float: left; 14 | width: 100%; 15 | height: 100%; 16 | border-radius: 2.5px; 17 | } 18 | } 19 | &-process &-icon { 20 | top: -1px; 21 | width: 7px; 22 | height: 7px; 23 | line-height: 7px; 24 | .@{stepsPrefixClass}-icon-dot { 25 | border-radius: 3.5px; 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /docs/examples/vertical.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | const description = 7 | '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'; 8 | 9 | export default () => ( 10 | 31 | ); 32 | -------------------------------------------------------------------------------- /docs/examples/errorStep.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | const description = 7 | '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'; 8 | 9 | export default () => ( 10 | 32 | ); 33 | -------------------------------------------------------------------------------- /docs/examples/verticalSmall.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | const description = 7 | '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'; 8 | 9 | export default () => ( 10 | 32 | ); 33 | -------------------------------------------------------------------------------- /script/update-content.js: -------------------------------------------------------------------------------- 1 | /* 2 | 用于 dumi 改造使用， 3 | 可用于将 examples 的文件批量修改为 demo 引入形式， 4 | 其他项目根据具体情况使用。 5 | */ 6 | 7 | const fs = require('fs'); 8 | const glob = require('glob'); 9 | 10 | const paths = glob.sync('./docs/examples/*.jsx'); 11 | 12 | paths.forEach(path => { 13 | const name = path.split('/').pop().split('.')[0]; 14 | fs.writeFile( 15 | `./docs/demo/${name}.md`, 16 | `--- 17 | title: ${name} 18 | nav: 19 | title: Demo 20 | path: /demo 21 | --- 22 | 23 | 24 | `, 25 | 'utf8', 26 | function(error) { 27 | if(error){ 28 | console.log(error); 29 | return false; 30 | } 31 | console.log(`${name} 更新成功~`); 32 | } 33 | ) 34 | }); 35 | -------------------------------------------------------------------------------- /docs/examples/composable.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | const description = 7 | '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'; 8 | 9 | export default () => ( 10 | 32 | ); 33 | -------------------------------------------------------------------------------- /assets/vertical.less: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .@{stepsPrefixClass}-vertical { 4 | display: block; 5 | .@{stepsPrefixClass}-item { 6 | display: block; 7 | overflow: visible; 8 | &-icon { 9 | float: left; 10 | &-inner { 11 | margin-right: 16px; 12 | } 13 | } 14 | &-section { 15 | min-height: 48px; 16 | overflow: hidden; 17 | display: block; 18 | } 19 | &-title { 20 | line-height: 26px; 21 | &:after { 22 | display: none; 23 | } 24 | } 25 | &-description { 26 | padding-bottom: 12px; 27 | } 28 | } 29 | 30 | &.@{stepsPrefixClass}-small { 31 | .@{stepsPrefixClass}-item-title { 32 | line-height: 18px; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /docs/examples/progressDot.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | const description = 7 | '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'; 8 | 9 | export default () => ( 10 | 37 | ); 38 | -------------------------------------------------------------------------------- /assets/variables.less: -------------------------------------------------------------------------------- 1 | @stepsPrefixClass: ~"rc-steps"; 2 | @stepDescriptionMaxWidth: 100px; 3 | @stepNavContentMaxWidth: 140px; 4 | @primary-color: #108ee9; 5 | @process-icon-color: @primary-color; 6 | @process-title-color: rgba(0,0,0,.65); 7 | @process-description-color: @process-title-color; 8 | @process-tail-color: #e9e9e9; 9 | @wait-icon-color: #ccc; 10 | @wait-title-color: rgba(0,0,0,.43); 11 | @wait-description-color: @wait-title-color; 12 | @wait-tail-color: @process-tail-color; 13 | @finish-icon-color: @process-icon-color; 14 | @finish-title-color: @wait-title-color; 15 | @finish-description-color: @finish-title-color; 16 | @finish-tail-color: @process-icon-color; 17 | @error-icon-color: #f50; 18 | @error-title-color: @error-icon-color; 19 | @error-description-color: @error-icon-color; 20 | @error-tail-color: @process-tail-color; 21 | -------------------------------------------------------------------------------- /docs/examples/alternativeLabel.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | const description = 7 | '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊'; 8 | 9 | export default () => ( 10 | 41 | ); 42 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-present yiminghe 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /docs/examples/stepIcon.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | function stepIcon({ status, node }) { 7 | const isProcessing = status === 'process'; 8 | return isProcessing ?
{node}
: node; 9 | } 10 | 11 | export default () => { 12 | const [current, setCurrent] = React.useState(0); 13 | return ( 14 | <> 15 | 23 | 44 | 45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /docs/examples/inline.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import React, { useState } from 'react'; 3 | import Steps from '@rc-component/steps'; 4 | 5 | export default () => { 6 | const [current, setCurrent] = useState(0); 7 | 8 | return ( 9 | <> 10 | 17 | 18 |
19 | 20 | React.cloneElement(stepItem, { title: item.description })} 43 | /> 44 | 45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /assets/small.less: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .@{stepsPrefixClass}-small { 4 | .@{stepsPrefixClass}-item-icon { 5 | width: 18px; 6 | height: 18px; 7 | line-height: 18px; 8 | text-align: center; 9 | border-radius: 18px; 10 | font-size: 12px; 11 | margin-right: 10px; 12 | > .@{stepsPrefixClass}-icon { 13 | font-size: 12px; 14 | font-size: ~"9px \9"; // ie8-9 15 | transform: scale(.75); 16 | top: -1px; 17 | } 18 | } 19 | .@{stepsPrefixClass}-item-section { 20 | margin-top: 0; 21 | } 22 | .@{stepsPrefixClass}-item-title { 23 | font-size: 12px; 24 | margin-bottom: 4px; 25 | color: #666; 26 | font-weight: bold; 27 | } 28 | .@{stepsPrefixClass}-item-description { 29 | font-size: 12px; 30 | color: #999; 31 | } 32 | 33 | .@{stepsPrefixClass}-item-custom .@{stepsPrefixClass}-item-icon { 34 | width: inherit; 35 | height: inherit; 36 | line-height: inherit; 37 | border-radius: 0; 38 | border: 0; 39 | background: none; 40 | > .@{stepsPrefixClass}-icon { 41 | font-size: 20px; 42 | top: -2.5px; 43 | transform: none; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /assets/nav.less: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .@{stepsPrefixClass}-navigation { 4 | padding-top: 8px; 5 | &.@{stepsPrefixClass}-horizontal { 6 | .@{stepsPrefixClass}-item-description { 7 | max-width: @stepNavContentMaxWidth; 8 | } 9 | } 10 | 11 | .@{stepsPrefixClass}-item { 12 | box-sizing: border-box; 13 | text-align: center; 14 | overflow: visible; 15 | 16 | 17 | &-title { 18 | max-width: @stepNavContentMaxWidth; 19 | white-space: nowrap; 20 | overflow: hidden; 21 | text-overflow: ellipsis; 22 | 23 | &:after { 24 | display: none; 25 | } 26 | } 27 | 28 | &:last-child { 29 | flex: 1; 30 | &:after { 31 | display: none; 32 | } 33 | } 34 | 35 | &:after { 36 | content: ''; 37 | display: inline-block; 38 | width: 16px; 39 | height: 16px; 40 | border: 1px solid #ccc; 41 | border-bottom: none; 42 | border-left: none; 43 | transform: rotate(45deg); 44 | position: absolute; 45 | top: 50%; 46 | left: 100%; 47 | margin-top: -12px; 48 | margin-left: -8px; 49 | } 50 | 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /docs/examples/dynamic.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React, { useState } from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | export default () => { 7 | const [items, setItems] = useState([ 8 | { 9 | title: '已完成', 10 | description: 11 | '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', 12 | }, 13 | { 14 | title: '进行中', 15 | description: 16 | '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', 17 | }, 18 | { 19 | title: '待运行', 20 | description: 21 | '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', 22 | }, 23 | { 24 | title: '待运行', 25 | description: 26 | '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', 27 | }, 28 | ]); 29 | 30 | const addStep = () => { 31 | const newSteps = [...items]; 32 | newSteps.push({ 33 | title: '待运行', 34 | description: '新的节点', 35 | }); 36 | setItems(newSteps); 37 | }; 38 | return ( 39 |
40 | 43 | 44 |
45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /docs/examples/smallSize.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | // eslint-disable-next-line react/prop-types 7 | const Icon = ({ type }) => ; 8 | 9 | export default () => ( 10 |
11 | 29 | , 40 | }, 41 | { 42 | title: '步骤3', 43 | icon: 'apple', 44 | }, 45 | { 46 | title: '待运行', 47 | icon: 'github', 48 | }, 49 | ]} 50 | /> 51 |
52 | ); 53 | -------------------------------------------------------------------------------- /src/StepIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { clsx } from 'clsx'; 3 | import { StepsContext } from './Context'; 4 | import pickAttrs from '@rc-component/util/lib/pickAttrs'; 5 | 6 | export interface StepIconSemanticContextProps { 7 | className?: string; 8 | style?: React.CSSProperties; 9 | } 10 | 11 | export const StepIconSemanticContext = React.createContext({}); 12 | 13 | export type StepIconProps = React.HTMLAttributes; 14 | 15 | const StepIcon = React.forwardRef((props, ref) => { 16 | const { className, style, children, ...restProps } = props; 17 | 18 | const { prefixCls, classNames, styles } = React.useContext(StepsContext); 19 | const { className: itemClassName, style: itemStyle } = React.useContext(StepIconSemanticContext); 20 | 21 | const itemCls = `${prefixCls}-item`; 22 | 23 | return ( 24 |
30 | {children} 31 |
32 | ); 33 | }); 34 | 35 | export default StepIcon; 36 | -------------------------------------------------------------------------------- /assets/inline.less: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .@{stepsPrefixClass}-inline { 4 | width: auto; 5 | display: inline-flex; 6 | 7 | .@{stepsPrefixClass}-item { 8 | flex: none; 9 | 10 | 11 | &-icon { 12 | width: 6px; 13 | height: 6px; 14 | margin-left: calc(50% - 3px); 15 | > .@{stepsPrefixClass}-icon { 16 | top: 0; 17 | } 18 | .@{stepsPrefixClass}-icon-dot { 19 | border-radius: 3px; 20 | } 21 | } 22 | 23 | &-section { 24 | width: auto; 25 | margin-top: 7px; 26 | } 27 | &-title { 28 | color: rgba(0, 0, 0, 0.25); 29 | font-size: 12px; 30 | line-height: 20px; 31 | font-weight: normal; 32 | margin-bottom: 2px; 33 | } 34 | &-description { 35 | display: none; 36 | } 37 | 38 | &-finish { 39 | .@{stepsPrefixClass}-item-icon .@{stepsPrefixClass}-icon .@{stepsPrefixClass}-icon-dot { 40 | background-color: @process-tail-color; 41 | } 42 | } 43 | &-wait { 44 | .@{stepsPrefixClass}-item-icon .@{stepsPrefixClass}-icon .@{stepsPrefixClass}-icon-dot { 45 | background-color: #fff; 46 | border: 1px solid @process-tail-color; 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /docs/examples/nextStep.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import './nextStep.css'; 4 | import React from 'react'; 5 | import Steps from '@rc-component/steps'; 6 | 7 | function generateRandomSteps() { 8 | const n = Math.floor(Math.random() * 3) + 3; 9 | const arr = []; 10 | for (let i = 0; i < n; i++) { 11 | arr.push({ 12 | title: `步骤${i + 1}`, 13 | }); 14 | } 15 | return arr; 16 | } 17 | const steps = generateRandomSteps(); 18 | 19 | class MyForm extends React.Component { 20 | state = { 21 | currentStep: Math.floor(Math.random() * steps.length), 22 | }; 23 | 24 | nextStep = () => { 25 | const { currentStep } = this.state; 26 | let s = currentStep + 1; 27 | if (s === steps.length) { 28 | s = 0; 29 | } 30 | this.setState({ 31 | currentStep: s, 32 | }); 33 | }; 34 | 35 | render() { 36 | const { currentStep: cs } = this.state; 37 | this.stepsRefs = []; 38 | return ( 39 |
40 |
这个demo随机生成3~6个步骤，初始随机进行到其中一个步骤
41 |
当前正在执行第{cs + 1}步
42 |
43 | ({ 46 | ref: (c) => { 47 | this.stepsRefs[i] = c; 48 | }, 49 | key: i, 50 | title: s.title, 51 | }))} 52 | /> 53 |
54 | 55 |
56 | 59 |
60 |
61 | ); 62 | } 63 | } 64 | 65 | export default MyForm; 66 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | # History 2 | ---- 3 | 4 | ## 3.6.0 5 | 6 | - Remove babel-runtime and prop-types 7 | - Fix icon missing #85 8 | 9 | ## 3.5.0 10 | 11 | - Support `navigation` type & `disabled` prop. 12 | 13 | ## 3.4.0 14 | 15 | - Support `onChange` event. 16 | 17 | ## 3.3.0 18 | 19 | - Add `icons` prop for change preset icon. 20 | 21 | ## 3.2.0 22 | 23 | - Add `initial` prop. 24 | 25 | ## 3.1.0 26 | 27 | - Add `tailContent`. 28 | 29 | ## 3.0.0 30 | 31 | - Rewrite from bottom. 32 | 33 | ## 2.5.1 34 | 35 | * Support react@15.5 36 | 37 | ## 2.5.0 38 | 39 | * Refactor for last tail style. 40 | 41 | ## 2.4.0 42 | 43 | * Refactor for extra width of tail. https://github.com/ant-design/ant-design/issues/5083 44 | 45 | ## 2.3.0 46 | 47 | * Add new step style of prop `progressDot`. 48 | 49 | ## 2.2.0 50 | 51 | * `icon` can be React.Node now. 52 | 53 | ## 2.1.0 54 | 55 | * Add `labelPlacement`, support vertial title and description 56 | 57 | ## 2.0.0 58 | 59 | * Refactor for better layout 60 | 61 | ## 1.5 62 | 63 | * add `status` property of `Steps` 64 | 65 | ## 1.4 66 | 67 | * update react to 0.14 68 | 69 | ## 1.3 70 | 71 | * add `current` property of `Steps` 72 | 73 | ## 1.2.3 74 | 75 | * fix publish 76 | 77 | ## 1.2.2 78 | 79 | * remove vertical `maxDescriptionWidth` 80 | 81 | ## 1.2.1 82 | 83 | * fix vertical `maxDescriptionWidth` 84 | 85 | ## 1.2.0 86 | 87 | * add vertical steps 88 | 89 | ## 1.1.4 90 | 91 | * fix layout algorithm 92 | 93 | ## 1.1.3 94 | 95 | * support `iconPrefix` property, default is `rc` 96 | 97 | ## 1.1.2 98 | 99 | * fix bugs 100 | 101 | ## 1.1.1 102 | 103 | * support `maxDescriptionWidth` property, default is 120 104 | 105 | ## 1.1.0 106 | 107 | * support `prefixCls` property, default is `rc-steps` 108 | -------------------------------------------------------------------------------- /docs/examples/nav-base.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React, { useState } from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | export default () => { 7 | const [current, setCurrent] = useState(0); 8 | 9 | const onChange = (current) => { 10 | // eslint-disable-next-line no-console 11 | console.log('onChange:', current); 12 | setCurrent(current); 13 | }; 14 | 15 | const containerStyle = { 16 | border: '1px solid rgb(235, 237, 240)', 17 | marginBottom: 24, 18 | }; 19 | 20 | const description = 'This is a description.'; 21 | 22 | return ( 23 |
24 | 49 | 74 |
75 | ); 76 | }; 77 | -------------------------------------------------------------------------------- /docs/examples/simple.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | const description = 7 | '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶'; 8 | 9 | const ControlSteps = () => { 10 | const [current, setCurrent] = React.useState(0); 11 | return ( 12 | { 15 | // eslint-disable-next-line no-console 16 | console.log('Change:', val); 17 | setCurrent(val); 18 | }} 19 | items={[ 20 | { 21 | title: '已完成', 22 | }, 23 | { 24 | title: '进行中', 25 | }, 26 | { 27 | title: '待运行', 28 | description: 'Hello World!', 29 | }, 30 | { 31 | title: '待运行', 32 | }, 33 | ]} 34 | /> 35 | ); 36 | }; 37 | 38 | export default () => ( 39 |
40 | 57 | 80 | 104 | 105 |
106 | ); 107 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rc-component/steps", 3 | "version": "1.2.2", 4 | "description": "steps ui component for react", 5 | "keywords": [ 6 | "react", 7 | "react-component", 8 | "react-steps" 9 | ], 10 | "homepage": "http://github.com/react-component/steps", 11 | "bugs": { 12 | "url": "http://github.com/react-component/steps/issues" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": " git+ssh://git@github.com/react-component/steps.git" 17 | }, 18 | "license": "MIT", 19 | "maintainers": [ 20 | { 21 | "name": "afc163", 22 | "email": "afc163@gmail.com" 23 | } 24 | ], 25 | "main": "./lib/index", 26 | "module": "./es/index", 27 | "types": "./lib/index.d.ts", 28 | "files": [ 29 | "assets/*.css", 30 | "es", 31 | "lib" 32 | ], 33 | "scripts": { 34 | "compile": "father build && lessc assets/index.less assets/index.css", 35 | "coverage": "rc-test --coverage", 36 | "docs:build": "dumi build", 37 | "docs:deploy": "gh-pages -d .doc", 38 | "gh-pages": "npm run docs:build && npm run docs:deploy", 39 | "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md", 40 | "prepare": "husky install && dumi setup", 41 | "prepublishOnly": "npm run compile && rc-np", 42 | "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"", 43 | "postpublish": "npm run gh-pages", 44 | "start": "dumi dev", 45 | "test": "rc-test", 46 | "now-build": "npm run docs:build" 47 | }, 48 | "lint-staged": { 49 | "**/*.{js,jsx,tsx,ts,md,json}": [ 50 | "prettier --write" 51 | ] 52 | }, 53 | "dependencies": { 54 | "@rc-component/util": "^1.2.1", 55 | "clsx": "^2.1.1" 56 | }, 57 | "devDependencies": { 58 | "@rc-component/father-plugin": "^2.0.2", 59 | "@rc-component/np": "^1.0.0", 60 | "@testing-library/jest-dom": "^6.4.5", 61 | "@testing-library/react": "^15.0.6", 62 | "@types/jest": "^29.4.0", 63 | "@types/node": "^24.5.2", 64 | "@types/react": "^18.0.28", 65 | "@types/react-dom": "^18.0.11", 66 | "@umijs/fabric": "^4.0.1", 67 | "dumi": "^2.0.0", 68 | "eslint": "^8.55.0", 69 | "eslint-plugin-jest": "^27.6.0", 70 | "eslint-plugin-unicorn": "^50.0.1", 71 | "father": "^4", 72 | "gh-pages": "^6.1.0", 73 | "glob": "^10.0.0", 74 | "husky": "^8.0.1", 75 | "less": "^4.1.3", 76 | "lint-staged": "^15.2.0", 77 | "prettier": "^3.1.0", 78 | "rc-test": "^7.0.9", 79 | "react": "^18.0.0", 80 | "react-dom": "^18.0.0", 81 | "typescript": "^5.0.0" 82 | }, 83 | "peerDependencies": { 84 | "react": ">=16.9.0", 85 | "react-dom": ">=16.9.0" 86 | }, 87 | "engines": { 88 | "node": ">=8.x" 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /docs/examples/custom-svg-icon.jsx: -------------------------------------------------------------------------------- 1 | import '../../assets/index.less'; 2 | import '../../assets/iconfont.less'; 3 | import React from 'react'; 4 | import Steps from '@rc-component/steps'; 5 | 6 | function getFinishIcon() { 7 | const path = 8 | 'M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.' + 9 | '5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139' + 10 | '.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5' + 11 | '-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 ' + 12 | '55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33' + 13 | '.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99' + 14 | '.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.' + 15 | '7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 10' + 16 | '1.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 ' + 17 | '20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z'; 18 | return ( 19 | 26 | 27 | 28 | ); 29 | } 30 | 31 | function getErrorIcon() { 32 | const path1 = 33 | 'M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229' + 34 | '.2 512-512S794.8 0 512 0zm311.1 823.1c-40.4 40.4-87.5 72.2-139.9 9' + 35 | '4.3C629 940.4 571.4 952 512 952s-117-11.6-171.2-34.5c-52.4-22.2-99' + 36 | '.4-53.9-139.9-94.3-40.4-40.4-72.2-87.5-94.3-139.9C83.6 629 72 571.' + 37 | '4 72 512s11.6-117 34.5-171.2c22.2-52.4 53.9-99.4 94.3-139.9 40.4-4' + 38 | '0.4 87.5-72.2 139.9-94.3C395 83.6 452.6 72 512 72s117 11.6 171.2 3' + 39 | '4.5c52.4 22.2 99.4 53.9 139.9 94.3 40.4 40.4 72.2 87.5 94.3 139.9C' + 40 | '940.4 395 952 452.6 952 512s-11.6 117-34.5 171.2c-22.2 52.4-53.9 9' + 41 | '9.5-94.4 139.9z'; 42 | const path2 = 43 | 'M640.3 765.5c-19.9 0-36-16.1-36-36 0-50.9-41.4-92.3-92' + 44 | '.3-92.3s-92.3 41.4-92.3 92.3c0 19.9-16.1 36-36 36s-36-16.1-36-36c0' + 45 | '-90.6 73.7-164.3 164.3-164.3s164.3 73.7 164.3 164.3c0 19.9-16.1 36' + 46 | '-36 36zM194.2 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM709.5 382' + 47 | '.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0z'; 48 | return ( 49 | 56 | 57 | 58 | 59 | ); 60 | } 61 | 62 | const icons = { 63 | finish: getFinishIcon(), 64 | error: getErrorIcon(), 65 | }; 66 | 67 | const description = 'This is a description'; 68 | 69 | export default () => ( 70 | 80 | ); 81 | -------------------------------------------------------------------------------- /tests/semantic.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import Steps, { type StepsProps } from '../src'; 4 | import type { ItemSemanticName, SemanticName } from '../src/Steps'; 5 | 6 | describe('Steps.Semantic', () => { 7 | const renderSteps = (props: Partial) => ( 8 | ({ 10 | title: `Step ${index + 1}`, 11 | subTitle: `SubTitle ${index + 1}`, 12 | content: `Content ${index + 1}`, 13 | }))} 14 | {...props} 15 | /> 16 | ); 17 | 18 | it('semantic structure', () => { 19 | const classNames: Record = { 20 | root: 'custom-root', 21 | item: 'custom-item', 22 | itemWrapper: 'custom-item-wrapper', 23 | itemIcon: 'custom-item-icon', 24 | itemSection: 'custom-item-section', 25 | itemHeader: 'custom-item-header', 26 | itemTitle: 'custom-item-title', 27 | itemSubtitle: 'custom-item-subtitle', 28 | itemContent: 'custom-item-content', 29 | itemRail: 'custom-item-rail', 30 | }; 31 | 32 | const classNamesTargets: Record = { 33 | root: 'rc-steps', 34 | item: 'rc-steps-item', 35 | itemWrapper: 'rc-steps-item-wrapper', 36 | itemIcon: 'rc-steps-item-icon', 37 | itemSection: 'rc-steps-item-section', 38 | itemHeader: 'rc-steps-item-header', 39 | itemTitle: 'rc-steps-item-title', 40 | itemSubtitle: 'rc-steps-item-subtitle', 41 | itemContent: 'rc-steps-item-content', 42 | itemRail: 'rc-steps-item-rail', 43 | }; 44 | 45 | const styles: Record> = { 46 | root: { color: 'red' }, 47 | item: { color: 'blue' }, 48 | itemWrapper: { color: 'green' }, 49 | itemIcon: { color: 'yellow' }, 50 | itemSection: { color: 'purple' }, 51 | itemHeader: { color: 'orange' }, 52 | itemTitle: { color: 'pink' }, 53 | itemSubtitle: { color: 'cyan' }, 54 | itemContent: { color: 'magenta' }, 55 | itemRail: { color: 'lime' }, 56 | }; 57 | 58 | const { container } = render( 59 | renderSteps({ 60 | classNames, 61 | styles, 62 | }), 63 | ); 64 | 65 | Object.keys(classNames).forEach((key) => { 66 | const className = classNames[key as SemanticName]; 67 | const oriClassName = classNamesTargets[key as SemanticName]; 68 | const style = styles[key as SemanticName]; 69 | 70 | const element = container.querySelector(`.${className}`); 71 | expect(element).toBeTruthy(); 72 | expect(element).toHaveClass(oriClassName); 73 | expect(element).toHaveStyle(style); 74 | }); 75 | }); 76 | 77 | it('item semantic structure', () => { 78 | const classNames: Record = { 79 | root: 'custom-root', 80 | wrapper: 'custom-wrapper', 81 | header: 'custom-header', 82 | title: 'custom-title', 83 | subtitle: 'custom-subtitle', 84 | section: 'custom-section', 85 | content: 'custom-content', 86 | icon: 'custom-icon', 87 | rail: 'custom-rail', 88 | }; 89 | 90 | const classNamesTargets: Record = { 91 | root: 'rc-steps-item', 92 | wrapper: 'rc-steps-item-wrapper', 93 | header: 'rc-steps-item-header', 94 | title: 'rc-steps-item-title', 95 | subtitle: 'rc-steps-item-subtitle', 96 | section: 'rc-steps-item-section', 97 | content: 'rc-steps-item-content', 98 | icon: 'rc-steps-item-icon', 99 | rail: 'rc-steps-item-rail', 100 | }; 101 | 102 | const styles: Record> = { 103 | root: { color: 'red' }, 104 | wrapper: { color: 'green' }, 105 | header: { color: 'orange' }, 106 | title: { color: 'pink' }, 107 | subtitle: { color: 'cyan' }, 108 | section: { color: 'purple' }, 109 | content: { color: 'magenta' }, 110 | icon: { color: 'yellow' }, 111 | rail: { color: 'lime' }, 112 | }; 113 | 114 | const { container } = render( 115 | renderSteps({ 116 | items: Array.from({ length: 2 }, (_, index) => ({ 117 | title: `Title ${index + 1}`, 118 | subTitle: `SubTitle ${index + 1}`, 119 | content: `Content ${index + 1}`, 120 | classNames, 121 | styles, 122 | })), 123 | }), 124 | ); 125 | 126 | Object.keys(classNames).forEach((key) => { 127 | const className = classNames[key as SemanticName]; 128 | const oriClassName = classNamesTargets[key as SemanticName]; 129 | const style = styles[key as SemanticName]; 130 | 131 | const element = container.querySelector(`.${className}`); 132 | expect(element).toBeTruthy(); 133 | expect(element).toHaveClass(oriClassName); 134 | expect(element).toHaveStyle(style); 135 | }); 136 | }); 137 | }); 138 | -------------------------------------------------------------------------------- /assets/index.less: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .@{stepsPrefixClass} { 4 | font-size: 0; 5 | width: 100%; 6 | line-height: 1.5; 7 | display: flex; 8 | 9 | &, 10 | * { 11 | box-sizing: border-box; 12 | } 13 | } 14 | 15 | .@{stepsPrefixClass}-item { 16 | position: relative; 17 | display: inline-block; 18 | vertical-align: top; 19 | flex: 1; 20 | // overflow: hidden; 21 | 22 | &:last-child { 23 | flex: none; 24 | } 25 | 26 | &:last-child &-title:after { 27 | display: none; 28 | } 29 | 30 | &-icon, 31 | &-section { 32 | display: inline-block; 33 | vertical-align: top; 34 | } 35 | 36 | &-icon { 37 | flex: none; 38 | border: 1px solid @wait-icon-color; 39 | width: 26px; 40 | height: 26px; 41 | line-height: 26px; 42 | text-align: center; 43 | border-radius: 26px; 44 | font-size: 14px; 45 | transition: 46 | background-color 0.3s, 47 | border-color 0.3s; 48 | 49 | > .@{stepsPrefixClass}-icon { 50 | line-height: 1; 51 | top: -1px; 52 | color: @primary-color; 53 | position: relative; 54 | 55 | &.rcicon { 56 | font-size: 12px; 57 | position: relative; 58 | top: -2px; 59 | } 60 | } 61 | } 62 | 63 | &-section { 64 | margin-top: 3px; 65 | } 66 | &-title { 67 | font-size: 14px; 68 | color: #666; 69 | font-weight: bold; 70 | display: inline-block; 71 | position: relative; 72 | } 73 | &-subtitle { 74 | font-size: 12px; 75 | display: inline-block; 76 | color: #999; 77 | } 78 | &-description { 79 | font-size: 12px; 80 | color: #999; 81 | } 82 | .step-item-status(wait); 83 | .step-item-status(process); 84 | &-process &-icon { 85 | background: @process-icon-color; 86 | > .@{stepsPrefixClass}-icon { 87 | color: #fff; 88 | } 89 | } 90 | .step-item-status(finish); 91 | .step-item-status(error); 92 | 93 | &.@{stepsPrefixClass}-next-error .@{stepsPrefixClass}-item-title:after { 94 | background: @error-icon-color; 95 | } 96 | } 97 | 98 | .@{stepsPrefixClass}-horizontal:not(.@{stepsPrefixClass}-label-vertical) { 99 | .@{stepsPrefixClass}-item { 100 | &-description { 101 | max-width: @stepDescriptionMaxWidth; 102 | } 103 | } 104 | } 105 | 106 | .step-item-status(@status) { 107 | @icon-color: '@{status}-icon-color'; 108 | @title-color: '@{status}-title-color'; 109 | @description-color: '@{status}-description-color'; 110 | @tail-color: '@{status}-tail-color'; 111 | &-@{status} &-icon { 112 | border-color: @@icon-color; 113 | background-color: #fff; 114 | > .@{stepsPrefixClass}-icon { 115 | color: @@icon-color; 116 | .@{stepsPrefixClass}-icon-dot { 117 | background: @@icon-color; 118 | } 119 | } 120 | } 121 | &-@{status} &-title { 122 | color: @@title-color; 123 | } 124 | &-@{status} &-description { 125 | color: @@description-color; 126 | } 127 | } 128 | 129 | // @import 'custom-icon'; 130 | // @import 'small'; 131 | // @import 'vertical'; 132 | // @import 'label-placement'; 133 | // @import 'progress-dot'; 134 | // @import 'nav'; 135 | // @import 'inline'; 136 | 137 | // ======================= Horizontal ======================= 138 | .verticalFlex() { 139 | display: flex; 140 | flex-direction: column; 141 | align-items: center; 142 | } 143 | 144 | .@{stepsPrefixClass} { 145 | .@{stepsPrefixClass}-item { 146 | &-section { 147 | min-width: 0; 148 | } 149 | 150 | &-header { 151 | display: flex; 152 | gap: 8px; 153 | align-items: center; 154 | } 155 | 156 | // Ellipsis 157 | &-title, 158 | &-subtitle, 159 | &-description { 160 | overflow: hidden; 161 | text-overflow: ellipsis; 162 | white-space: nowrap; 163 | } 164 | } 165 | } 166 | 167 | .@{stepsPrefixClass}-horizontal { 168 | .@{stepsPrefixClass}-item { 169 | flex: 1; 170 | position: relative; 171 | min-width: 0; 172 | 173 | &-rail { 174 | height: 1px; 175 | background: @process-tail-color; 176 | } 177 | } 178 | 179 | // Label Vertical 180 | &.@{stepsPrefixClass}-label-vertical { 181 | .@{stepsPrefixClass}-item { 182 | .verticalFlex(); 183 | padding-inline: 8px; 184 | 185 | &-section { 186 | .verticalFlex(); 187 | } 188 | 189 | &-rail { 190 | position: absolute; 191 | top: 13px; 192 | left: calc(50% + 13px); 193 | width: 100%; 194 | } 195 | } 196 | } 197 | 198 | // Label Horizontal 199 | &.@{stepsPrefixClass}-label-horizontal { 200 | .@{stepsPrefixClass}-item { 201 | display: flex; 202 | 203 | &:last-child { 204 | flex: none; 205 | } 206 | 207 | &-section { 208 | flex: 1; 209 | } 210 | 211 | &-rail { 212 | flex: 1; 213 | min-width: 0; 214 | } 215 | } 216 | } 217 | } 218 | 219 | // ======================== Vertical ======================== 220 | .@{stepsPrefixClass}-vertical { 221 | } 222 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @rc-component/steps 2 | 3 | --- 4 | 5 | React steps component. 6 | 7 | [![NPM version][npm-image]][npm-url] 8 | [![build status][travis-image]][travis-url] 9 | [![Test coverage][codecov-image]][codecov-url] 10 | [![npm download][download-image]][download-url] 11 | [![bundle size][bundlephobia-image]][bundlephobia-url] 12 | 13 | [npm-image]: http://img.shields.io/npm/v/@rc-component/steps.svg?style=flat-square 14 | [npm-url]: http://npmjs.org/package/@rc-component/steps 15 | [travis-image]: https://img.shields.io/travis/react-component/steps.svg?style=flat-square 16 | [travis-url]: https://travis-ci.org/react-component/steps 17 | [codecov-image]: https://img.shields.io/codecov/c/github/react-component/steps/master.svg?style=flat-square 18 | [codecov-url]: https://codecov.io/gh/react-component/steps/branch/master 19 | [download-image]: https://img.shields.io/npm/dm/@rc-component/steps.svg?style=flat-square 20 | [download-url]: https://npmjs.org/package/@rc-component/steps 21 | [bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/steps 22 | [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/steps 23 | 24 | ## Usage 25 | 26 | ```bash 27 | npm install @rc-component/steps 28 | ``` 29 | 30 |
31 | 32 | ```jsx | pure 33 | 34 | 35 | 36 | 37 | 38 | ``` 39 | 40 | ## Example 41 | 42 | https://steps.vercel.app/ 43 | 44 | ## API 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 |
nametypedefaultdescription
typestringdefaultdiretypetion of Steps, could be `default` `navigation` `inline`
directionstringhorizontaldirection of Steps, enum: `horizontal` or `vertical`
currentnumber0index of current step
initialnumber0index initial
sizestringsize of Steps, could be `small`
titlePlacementstringplacement of step title, could be `vertical`
statusstringwaitstatus of current Steps, could be `error` `process` `finish` `wait`
icons{ finish: ReactNode, error: ReactNode }specify the default finish icon and error icon
itemRender(item: StepProps, stepItem: React.ReactNode) => React.ReactNodecustom step item renderer
onChange(current: number) => voidTrigger when Step changed
118 | 119 | ### Steps.Step 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 |
nametypedefaultdescription
titleReactNodetitle of step item
subTitleReactNodesubTitle of step item
descriptionReactNodedescription of step item
iconReactNodeset icon of step item
statusstringstatus of current Steps, could be `error` `process` `finish` `wait`
tailContentReactNodecontent above tail
disabledboolfalsedisabled step when onChange exist
render(stepItem: React.ReactNode) => React.ReactNodecustom step item renderer
181 | 182 | ## Development 183 | 184 | ```bash 185 | npm install 186 | npm start 187 | ``` 188 | 189 | ## License 190 | 191 | @rc-component/steps is released under the MIT license. 192 | -------------------------------------------------------------------------------- /src/Step.tsx: -------------------------------------------------------------------------------- 1 | /* eslint react/prop-types: 0 */ 2 | import * as React from 'react'; 3 | import { clsx } from 'clsx'; 4 | import KeyCode from '@rc-component/util/lib/KeyCode'; 5 | import type { Status, StepItem, StepsProps } from './Steps'; 6 | import Rail from './Rail'; 7 | import { UnstableContext } from './UnstableContext'; 8 | import StepIcon, { StepIconSemanticContext } from './StepIcon'; 9 | import { StepsContext } from './Context'; 10 | 11 | function hasContent(value: T) { 12 | return value !== undefined && value !== null; 13 | } 14 | 15 | export interface StepProps { 16 | // style 17 | prefixCls?: string; 18 | classNames: StepsProps['classNames']; 19 | styles: StepsProps['styles']; 20 | 21 | // data 22 | data: StepItem; 23 | nextStatus?: Status; 24 | active?: boolean; 25 | index: number; 26 | last: boolean; 27 | 28 | // render 29 | iconRender?: StepsProps['iconRender']; 30 | icon?: React.ReactNode; 31 | itemRender?: StepsProps['itemRender']; 32 | itemWrapperRender?: StepsProps['itemWrapperRender']; 33 | 34 | // Event 35 | onClick: (index: number) => void; 36 | } 37 | 38 | export default function Step(props: StepProps) { 39 | const { 40 | // style 41 | prefixCls, 42 | classNames, 43 | styles, 44 | 45 | // data 46 | data, 47 | last, 48 | nextStatus, 49 | active, 50 | index, 51 | 52 | // render 53 | itemRender, 54 | iconRender, 55 | itemWrapperRender, 56 | 57 | // events 58 | onClick, 59 | } = props; 60 | 61 | const itemCls = `${prefixCls}-item`; 62 | 63 | // ======================== Contexts ======================== 64 | const { railFollowPrevStatus } = React.useContext(UnstableContext); 65 | const { ItemComponent } = React.useContext(StepsContext); 66 | 67 | // ========================== Data ========================== 68 | const { 69 | onClick: onItemClick, 70 | title, 71 | subTitle, 72 | content, 73 | description, 74 | disabled, 75 | icon, 76 | status, 77 | 78 | className, 79 | style, 80 | classNames: itemClassNames = {}, 81 | styles: itemStyles = {}, 82 | 83 | ...restItemProps 84 | } = data; 85 | 86 | const mergedContent = content ?? description; 87 | 88 | const renderInfo = { 89 | item: { 90 | ...data, 91 | content: mergedContent, 92 | }, 93 | index, 94 | active, 95 | }; 96 | 97 | // ========================= Click ========================== 98 | const clickable = !!(onClick || onItemClick) && !disabled; 99 | 100 | const accessibilityProps: { 101 | role?: string; 102 | tabIndex?: number; 103 | onClick?: React.MouseEventHandler; 104 | onKeyDown?: React.KeyboardEventHandler; 105 | } = {}; 106 | 107 | if (clickable) { 108 | accessibilityProps.role = 'button'; 109 | accessibilityProps.tabIndex = 0; 110 | accessibilityProps.onClick = (e) => { 111 | onItemClick?.(e); 112 | onClick(index); 113 | }; 114 | 115 | accessibilityProps.onKeyDown = (e) => { 116 | const { which } = e; 117 | if (which === KeyCode.ENTER || which === KeyCode.SPACE) { 118 | onClick(index); 119 | } 120 | }; 121 | } 122 | 123 | // ========================= Render ========================= 124 | const mergedStatus = status || 'wait'; 125 | 126 | const hasTitle = hasContent(title); 127 | const hasSubTitle = hasContent(subTitle); 128 | 129 | const classString = clsx( 130 | itemCls, 131 | `${itemCls}-${mergedStatus}`, 132 | { 133 | [`${itemCls}-custom`]: icon, 134 | [`${itemCls}-active`]: active, 135 | [`${itemCls}-disabled`]: disabled === true, 136 | [`${itemCls}-empty-header`]: !hasTitle && !hasSubTitle, 137 | }, 138 | className, 139 | classNames.item, 140 | itemClassNames.root, 141 | ); 142 | 143 | let iconNode = ; 144 | if (iconRender) { 145 | iconNode = iconRender(iconNode, { 146 | ...renderInfo, 147 | components: { 148 | Icon: StepIcon, 149 | }, 150 | }) as React.ReactElement; 151 | } 152 | 153 | const wrapperNode = ( 154 |
158 | {/* Icon */} 159 | 165 | {iconNode} 166 | 167 | 168 |
172 |
176 | {hasTitle && ( 177 |
181 | {title} 182 |
183 | )} 184 | {hasSubTitle && ( 185 |
194 | {subTitle} 195 |
196 | )} 197 | 198 | {!last && ( 199 | 205 | )} 206 |
207 | {hasContent(mergedContent) && ( 208 |
212 | {mergedContent} 213 |
214 | )} 215 |
216 |
217 | ); 218 | 219 | let stepNode: React.ReactNode = ( 220 | 230 | {itemWrapperRender ? itemWrapperRender(wrapperNode) : wrapperNode} 231 | 232 | ); 233 | 234 | if (itemRender) { 235 | stepNode = (itemRender(stepNode, renderInfo) || null) as React.ReactElement; 236 | } 237 | 238 | return stepNode; 239 | } 240 | -------------------------------------------------------------------------------- /src/Steps.tsx: -------------------------------------------------------------------------------- 1 | /* eslint react/no-did-mount-set-state: 0, react/prop-types: 0 */ 2 | import { clsx } from 'clsx'; 3 | import React from 'react'; 4 | import Step from './Step'; 5 | import { StepsContext, type StepsContextProps } from './Context'; 6 | import type StepIcon from './StepIcon'; 7 | 8 | export type Status = 'error' | 'process' | 'finish' | 'wait'; 9 | 10 | const EmptyObject = {}; 11 | 12 | export type SemanticName = 13 | | 'root' 14 | | 'item' 15 | | 'itemWrapper' 16 | | 'itemHeader' 17 | | 'itemTitle' 18 | | 'itemSubtitle' 19 | | 'itemSection' 20 | | 'itemContent' 21 | | 'itemIcon' 22 | | 'itemRail'; 23 | 24 | export type ItemSemanticName = 25 | | 'root' 26 | | 'wrapper' 27 | | 'header' 28 | | 'title' 29 | | 'subtitle' 30 | | 'section' 31 | | 'content' 32 | | 'icon' 33 | | 'rail'; 34 | 35 | export type ComponentType = React.ComponentType | string; 36 | 37 | export type StepItem = { 38 | /** @deprecated Please use `content` instead. */ 39 | description?: React.ReactNode; 40 | content?: React.ReactNode; 41 | disabled?: boolean; 42 | icon?: React.ReactNode; 43 | status?: Status; 44 | subTitle?: React.ReactNode; 45 | title?: React.ReactNode; 46 | classNames?: Partial>; 47 | styles?: Partial>; 48 | } & Pick, 'onClick' | 'className' | 'style'>; 49 | 50 | export type StepIconRender = (info: { 51 | index: number; 52 | status: Status; 53 | title: React.ReactNode; 54 | // @deprecated Please use `content` instead. 55 | description: React.ReactNode; 56 | content: React.ReactNode; 57 | node: React.ReactNode; 58 | }) => React.ReactNode; 59 | 60 | export type RenderInfo = { 61 | index: number; 62 | active: boolean; 63 | item: StepItem; 64 | }; 65 | 66 | export interface StepsProps { 67 | // style 68 | prefixCls?: string; 69 | style?: React.CSSProperties; 70 | className?: string; 71 | classNames?: Partial>; 72 | styles?: Partial>; 73 | rootClassName?: string; 74 | 75 | // layout 76 | orientation?: 'horizontal' | 'vertical'; 77 | titlePlacement?: 'horizontal' | 'vertical'; 78 | 79 | // a11y 80 | /** Internal usage of antd. Do not deps on this. */ 81 | components?: { 82 | root?: ComponentType; 83 | item?: ComponentType; 84 | }; 85 | 86 | // data 87 | status?: Status; 88 | current?: number; 89 | initial?: number; 90 | items?: StepItem[]; 91 | onChange?: (current: number) => void; 92 | 93 | // render 94 | iconRender?: ( 95 | originNode: React.ReactElement, 96 | info: RenderInfo & { 97 | components: { 98 | Icon: typeof StepIcon; 99 | }; 100 | }, 101 | ) => React.ReactNode; 102 | itemRender?: (originNode: React.ReactElement, info: RenderInfo) => React.ReactNode; 103 | itemWrapperRender?: (originNode: React.ReactElement) => React.ReactNode; 104 | } 105 | 106 | export default function Steps(props: StepsProps) { 107 | const { 108 | // style 109 | prefixCls = 'rc-steps', 110 | style, 111 | className, 112 | classNames = EmptyObject as NonNullable, 113 | styles = EmptyObject as NonNullable, 114 | rootClassName, 115 | 116 | // layout 117 | orientation, 118 | titlePlacement, 119 | components, 120 | 121 | // data 122 | status = 'process', 123 | current = 0, 124 | initial = 0, 125 | onChange, 126 | items, 127 | 128 | // render 129 | iconRender, 130 | itemRender, 131 | itemWrapperRender, 132 | 133 | ...restProps 134 | } = props; 135 | 136 | // ============================= layout ============================= 137 | const isVertical = orientation === 'vertical'; 138 | const mergedOrientation = isVertical ? 'vertical' : 'horizontal'; 139 | const mergeTitlePlacement = 140 | !isVertical && titlePlacement === 'vertical' ? 'vertical' : 'horizontal'; 141 | 142 | // ============================= styles ============================= 143 | const classString = clsx( 144 | prefixCls, 145 | `${prefixCls}-${mergedOrientation}`, 146 | `${prefixCls}-title-${mergeTitlePlacement}`, 147 | rootClassName, 148 | className, 149 | classNames.root, 150 | ); 151 | 152 | // ============================== Data ============================== 153 | const mergedItems = React.useMemo(() => (items || []).filter(Boolean), [items]); 154 | const statuses = React.useMemo( 155 | () => 156 | mergedItems.map(({ status: itemStatus }, index) => { 157 | const stepNumber = initial + index; 158 | 159 | if (!itemStatus) { 160 | if (stepNumber === current) { 161 | return status; 162 | } else if (stepNumber < current) { 163 | return 'finish'; 164 | } 165 | return 'wait'; 166 | } 167 | 168 | return itemStatus; 169 | }), 170 | [mergedItems, status, current, initial], 171 | ); 172 | 173 | // ============================= events ============================= 174 | const onStepClick = (next: number) => { 175 | if (onChange && current !== next) { 176 | onChange(next); 177 | } 178 | }; 179 | 180 | // =========================== components =========================== 181 | const { root: RootComponent = 'div', item: ItemComponent = 'div' } = components || {}; 182 | 183 | // ============================ contexts ============================ 184 | const stepIconContext = React.useMemo( 185 | () => ({ 186 | prefixCls, 187 | classNames, 188 | styles, 189 | ItemComponent, 190 | }), 191 | [prefixCls, classNames, styles, ItemComponent], 192 | ); 193 | 194 | // ============================= render ============================= 195 | const renderStep = (item: StepItem, index: number) => { 196 | const stepIndex = initial + index; 197 | 198 | const itemStatus = statuses[index]; 199 | const nextStatus = statuses[index + 1]; 200 | 201 | const data = { 202 | ...item, 203 | status: itemStatus, 204 | }; 205 | 206 | return ( 207 | 225 | ); 226 | }; 227 | 228 | return ( 229 | 237 | 238 | {mergedItems.map(renderStep)} 239 | 240 | 241 | ); 242 | } 243 | -------------------------------------------------------------------------------- /assets/iconfont.less: -------------------------------------------------------------------------------- 1 | @icon-url : "//at.alicdn.com/t/font_1434092639_4910953"; 2 | .ie-rotate(@rotation) { 3 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation); 4 | } 5 | .rotate(@degrees) { 6 | -webkit-transform: rotate(@degrees); 7 | -ms-transform: rotate(@degrees); // IE9 only 8 | -o-transform: rotate(@degrees); 9 | transform: rotate(@degrees); 10 | } 11 | .animation(@animation) { 12 | -webkit-animation: @animation; 13 | -o-animation: @animation; 14 | animation: @animation; 15 | } 16 | // font-face 17 | // @icon-url： 字体源文件的地址 18 | @font-face { 19 | font-family: 'anticon'; 20 | src: url('@{icon-url}.eot'); /* IE9*/ 21 | src: url('@{icon-url}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 22 | url('@{icon-url}.woff') format('woff'), /* chrome、firefox */ 23 | url('@{icon-url}.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 24 | url('@{icon-url}.svg#iconfont') format('svg'); /* iOS 4.1- */ 25 | } 26 | 27 | .rcicon { 28 | position: relative; 29 | display: inline-block; 30 | font-style: normal; 31 | vertical-align: baseline; 32 | text-align: center; 33 | text-transform: none; 34 | text-rendering: auto; 35 | // 更好地渲染字体 36 | -webkit-font-smoothing: antialiased; 37 | -webkit-text-stroke-width: 0px; 38 | -moz-osx-font-smoothing: grayscale; 39 | 40 | &:before { 41 | display: block; 42 | font-family: "anticon" !important; 43 | } 44 | } 45 | // 方向性图标 46 | .rcicon-step-backward:before {content:"\e662";} 47 | .rcicon-step-forward {.ie-rotate(2);} 48 | .rcicon-step-forward:before {content:"\e662";.rotate(180deg);} 49 | .rcicon-fast-backward:before {content:"\e62a";} 50 | .rcicon-fast-forward {.ie-rotate(2);} 51 | .rcicon-fast-forward:before {content:"\e62a";.rotate(180deg);} 52 | .rcicon-shrink:before {content:"\e65f";} 53 | .rcicon-arrow-salt:before {content:"\e608";} 54 | .rcicon-caret-down:before {content:"\e60f";} 55 | .rcicon-caret-left {.ie-rotate(1);} 56 | .rcicon-caret-left:before {content:"\e60f";.rotate(90deg);} 57 | .rcicon-caret-up {.ie-rotate(2);} 58 | .rcicon-caret-up:before {content:"\e60f";.rotate(180deg);} 59 | .rcicon-caret-right {.ie-rotate(3);} 60 | .rcicon-caret-right:before {content:"\e60f";.rotate(270deg);} 61 | .rcicon-caret-circle-right:before {content:"\e60d";} 62 | .rcicon-caret-circle-left {.ie-rotate(2);} 63 | .rcicon-caret-circle-left:before {content:"\e60d";.rotate(180deg);} 64 | .rcicon-caret-circle-o-right:before {content:"\e60e";} 65 | .rcicon-caret-circle-o-left {.ie-rotate(2);} 66 | .rcicon-caret-circle-o-left:before {content:"\e60e";.rotate(180deg);} 67 | .rcicon-circle-right:before {content:"\e602";} 68 | .rcicon-circle-left {.ie-rotate(2);} 69 | .rcicon-circle-left:before {content:"\e602";.rotate(180deg);} 70 | .rcicon-circle-o-right:before {content:"\e603";} 71 | .rcicon-circle-o-left {.ie-rotate(2);} 72 | .rcicon-circle-o-left:before {content:"\e603";.rotate(180deg);} 73 | .rcicon-double-right:before {content:"\e604";} 74 | .rcicon-double-left {.ie-rotate(2);} 75 | .rcicon-double-left:before {content:"\e604";.rotate(180deg);} 76 | .rcicon-verticle-right:before {content:"\e605";} 77 | .rcicon-verticle-left {.ie-rotate(2);} 78 | .rcicon-verticle-left:before {content:"\e605";.rotate(180deg);} 79 | .rcicon-forward:before {content:"\e630";} 80 | .rcicon-backward {.ie-rotate(2);} 81 | .rcicon-backward:before {content:"\e630";.rotate(180deg);} 82 | .rcicon-rollback:before {content:"\e65a";} 83 | .rcicon-retweet:before {content:"\e659";} 84 | 85 | .rcicon-right:before {content:"\e611";} 86 | .rcicon-down {.ie-rotate(1);} 87 | .rcicon-down:before {content:"\e611";.rotate(90deg);} 88 | .rcicon-left {.ie-rotate(2);} 89 | .rcicon-left:before {content:"\e611";.rotate(180deg);} 90 | .rcicon-up {.ie-rotate(3);} 91 | .rcicon-up:before {content:"\e611";.rotate(270deg);} 92 | 93 | // 提示性图标 94 | .rcicon-question:before {content:"\e655";} 95 | .rcicon-question-circle:before {content:"\e656";} 96 | .rcicon-question-circle-o:before {content:"\e657";} 97 | .rcicon-plus:before {content:"\e651";} 98 | .rcicon-plus-circle:before {content:"\e652";} 99 | .rcicon-plus-circle-o:before {content:"\e653";} 100 | .rcicon-pause:before {content:"\e64c";} 101 | .rcicon-pause-circle:before {content:"\e64d";} 102 | .rcicon-pause-circle-o:before {content:"\e64e";} 103 | .rcicon-minus:before {content:"\e646";} 104 | .rcicon-minus-circle:before {content:"\e647";} 105 | .rcicon-minus-circle-o:before {content:"\e648";} 106 | .rcicon-info-circle:before {content:"\e637";} 107 | .rcicon-info-circle-o:before {content:"\e638";} 108 | .rcicon-info:before {content:"\e63a";} 109 | .rcicon-exclamation:before {content:"\e627";} 110 | .rcicon-exclamation-circle:before {content:"\e628";} 111 | .rcicon-exclamation-circle-o:before {content:"\e629";} 112 | .rcicon-cross:before {content:"\e61e";} 113 | .rcicon-cross-circle:before {content:"\e61f";} 114 | .rcicon-cross-circle-o:before {content:"\e620";} 115 | .rcicon-check:before {content:"\e613";} 116 | .rcicon-check-circle:before {content:"\e614";} 117 | .rcicon-check-circle-o:before {content:"\e615";} 118 | .rcicon-clock-circle:before {content:"\e616";} 119 | .rcicon-clock-circle-o:before {content:"\e617";} 120 | 121 | // 网站通用图标 122 | .rcicon-lock:before {content:"\e641";} 123 | .rcicon-android:before {content:"\e601";} 124 | .rcicon-apple:before {content:"\e606";} 125 | .rcicon-area-chart:before {content:"\e607";} 126 | .rcicon-bar-chart:before {content:"\e609";} 127 | .rcicon-bars:before {content:"\e60a";} 128 | .rcicon-book:before {content:"\e60b";} 129 | .rcicon-calendar:before {content:"\e60c";} 130 | .rcicon-cloud:before {content:"\e618";} 131 | .rcicon-cloud-download:before {content:"\e619";} 132 | .rcicon-code:before {content:"\e61a";} 133 | .rcicon-copy:before {content:"\e61c";} 134 | .rcicon-credit-card:before {content:"\e61d";} 135 | .rcicon-delete:before {content:"\e621";} 136 | .rcicon-desktop:before {content:"\e622";} 137 | .rcicon-download-line:before {content:"\e623";} 138 | .rcicon-edit:before {content:"\e624";} 139 | .rcicon-ellipsis:before {content:"\e625";} 140 | .rcicon-environment:before {content:"\e626";} 141 | .rcicon-file:before {content:"\e62c";} 142 | .rcicon-file-text:before {content:"\e62d";} 143 | .rcicon-folder:before {content:"\e62e";} 144 | .rcicon-folder-open:before {content:"\e62f";} 145 | .rcicon-github:before {content:"\e631";} 146 | .rcicon-hdd:before {content:"\e632";} 147 | .rcicon-frown:before {content:"\e633";} 148 | .rcicon-meh:before {content:"\e634";} 149 | .rcicon-inbox:before {content:"\e635";} 150 | .rcicon-laptop:before {content:"\e63d";} 151 | .rcicon-large:before {content:"\e63e";} 152 | .rcicon-line-chart:before {content:"\e63f";} 153 | .rcicon-link:before {content:"\e640";} 154 | .rcicon-logout:before {content:"\e642";} 155 | .rcicon-mail:before {content:"\e643";} 156 | .rcicon-menu-fold:before {content:"\e644";} 157 | .rcicon-menu-unfold:before {content:"\e645";} 158 | .rcicon-mobile:before {content:"\e649";} 159 | .rcicon-notification:before {content:"\e64a";} 160 | .rcicon-paper-clip:before {content:"\e64b";} 161 | .rcicon-picture:before {content:"\e64f";} 162 | .rcicon-pie-chart:before {content:"\e650";} 163 | .rcicon-poweroff:before {content:"\e654";} 164 | .rcicon-reload:before {content:"\e658";} 165 | .rcicon-search:before {content:"\e65b";} 166 | .rcicon-setting:before {content:"\e65c";} 167 | .rcicon-share-alt:before {content:"\e65d";} 168 | .rcicon-shopping-cart:before {content:"\e65e";} 169 | .rcicon-smile:before {content:"\e661";} 170 | .rcicon-tablet:before {content:"\e664";} 171 | .rcicon-tag:before {content:"\e665";} 172 | .rcicon-tags:before {content:"\e666";} 173 | .rcicon-to-top:before {content:"\e667";} 174 | .rcicon-unlock:before {content:"\e668";} 175 | .rcicon-upload:before {content:"\e669";} 176 | .rcicon-user:before {content:"\e66a";} 177 | .rcicon-video-camera:before {content:"\e66b";} 178 | .rcicon-windows:before {content:"\e66c";} 179 | .rcicon-loading:before { 180 | display: inline-block; 181 | .animation(loadingCircle 1.0s infinite linear); 182 | content:"\e610"; 183 | } 184 | 185 | :root { 186 | .rcicon-step-forward, 187 | .rcicon-fast-forward, 188 | .rcicon-left, 189 | .rcicon-up, 190 | .rcicon-down, 191 | .rcicon-caret-left, 192 | .rcicon-caret-up, 193 | .rcicon-caret-right, 194 | .rcicon-caret-circle-left, 195 | .rcicon-caret-circle-o-left, 196 | .rcicon-circle-left, 197 | .rcicon-circle-o-left, 198 | .rcicon-double-left, 199 | .rcicon-verticle-left, 200 | .rcicon-backward { 201 | filter: none; 202 | } 203 | } 204 | -------------------------------------------------------------------------------- /tests/index.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, fireEvent } from '@testing-library/react'; 3 | import Steps from '../src'; 4 | 5 | describe('Steps', () => { 6 | describe('render', () => { 7 | const description = 'xx'; 8 | 9 | const setSteps = (props) => ( 10 | 27 | ); 28 | 29 | it('renders correctly', () => { 30 | const { container } = render(setSteps({})); 31 | expect(container.firstChild).toMatchSnapshot(); 32 | }); 33 | 34 | it('renders without items', () => { 35 | expect(() => { 36 | render(setSteps({ items: undefined })); 37 | }).not.toThrow(); 38 | }); 39 | 40 | it('renders current correctly', () => { 41 | const { container } = render(setSteps({ current: 2 })); 42 | expect(container.firstChild).toMatchSnapshot(); 43 | }); 44 | 45 | it('renders status correctly', () => { 46 | const { container } = render(setSteps({ current: 2, status: 'error' })); 47 | expect(container.firstChild).toMatchSnapshot(); 48 | }); 49 | 50 | it('renders vertical correctly', () => { 51 | const { container } = render(setSteps({ direction: 'vertical' })); 52 | expect(container.firstChild).toMatchSnapshot(); 53 | }); 54 | 55 | it('renders titlePlacement correctly', () => { 56 | const { container } = render(setSteps({ titlePlacement: 'vertical' })); 57 | expect(container.firstChild).toMatchSnapshot(); 58 | }); 59 | 60 | it('renders progressDot correctly', () => { 61 | const { container } = render(setSteps({ progressDot: true })); 62 | expect(container.firstChild).toMatchSnapshot(); 63 | }); 64 | 65 | it('renders progressDot function correctly', () => { 66 | const { container } = render(setSteps({ progressDot: () => a })); 67 | expect(container.firstChild).toMatchSnapshot(); 68 | }); 69 | 70 | it('renders stepIcon function correctly', () => { 71 | const { container } = render(setSteps({ stepIcon: () => a })); 72 | expect(container.firstChild).toMatchSnapshot(); 73 | }); 74 | 75 | it('renders step with description', () => { 76 | const { container } = render( 77 | , 97 | ); 98 | expect(container.firstChild).toMatchSnapshot(); 99 | }); 100 | 101 | it('renders step with description and status', () => { 102 | const { container } = render( 103 | , 127 | ); 128 | expect(container.firstChild).toMatchSnapshot(); 129 | }); 130 | 131 | it('renders with falsy children', () => { 132 | const { container } = render( 133 | , 163 | ); 164 | expect(container.firstChild).toMatchSnapshot(); 165 | }); 166 | }); 167 | 168 | it('should render customIcon correctly', () => { 169 | const Icon = ({ type }) => ; 170 | const { container } = render( 171 | , 177 | }, 178 | { 179 | title: '步骤2', 180 | icon: 'apple', 181 | }, 182 | { 183 | title: '步骤3', 184 | icon: 'github', 185 | }, 186 | ]} 187 | />, 188 | ); 189 | expect(container.firstChild).toMatchSnapshot(); 190 | }); 191 | 192 | it('onChange', () => { 193 | const onChange = jest.fn(); 194 | const { container } = render( 195 | , 212 | ); 213 | const items = container.querySelectorAll('.rc-steps-item'); 214 | fireEvent.click(items[1]); 215 | expect(onChange).toHaveBeenCalledTimes(1); 216 | }); 217 | 218 | it('items out of render function', () => { 219 | const items = [ 220 | { 221 | title: '已完成', 222 | }, 223 | { 224 | title: '进行中', 225 | }, 226 | ]; 227 | 228 | let current = 0; 229 | const onChange = (val) => { 230 | current = val; 231 | }; 232 | const { container, rerender } = render( 233 | , 234 | ); 235 | 236 | const step = container.querySelectorAll('.rc-steps-item')[1]; 237 | fireEvent.click(step); 238 | rerender(); 239 | expect(container.querySelectorAll('.rc-steps-item')[1].classList).toContain( 240 | 'rc-steps-item-process', 241 | ); 242 | }); 243 | 244 | it('onClick', () => { 245 | const onClick = jest.fn(); 246 | const onChange = jest.fn(); 247 | const { container } = render( 248 | , 266 | ); 267 | 268 | const btn = container.querySelectorAll('.rc-steps-item')[0]; 269 | fireEvent.click(btn); 270 | expect(onClick).toHaveBeenCalled(); 271 | }); 272 | 273 | it('disabled', () => { 274 | const onChange = jest.fn(); 275 | const { container } = render( 276 | , 277 | ); 278 | 279 | const items = container.querySelectorAll('.rc-steps-item'); 280 | fireEvent.click(items[2]); 281 | expect(onChange).not.toBeCalled(); 282 | }); 283 | 284 | it('key board support', () => { 285 | const onChange = jest.fn(); 286 | const { container } = render( 287 | , 301 | ); 302 | 303 | const button = container.querySelectorAll('[role="button"]')[1]; 304 | fireEvent.keyDown(button, { key: 'Enter', keyCode: 13, which: 13 }); 305 | 306 | expect(onChange).toHaveBeenCalledWith(1); 307 | }); 308 | 309 | it('itemRender', () => { 310 | const { container } = render( 311 | { 318 | return
{oriNode}
; 319 | }} 320 | />, 321 | ); 322 | 323 | expect(container.querySelector('.bamboo')).toBeTruthy(); 324 | expect(container.querySelectorAll('.bamboo')).toHaveLength(1); 325 | expect(container.querySelector('.rc-steps-item')).toBeTruthy(); 326 | }); 327 | 328 | it('itemWrapperRender', () => { 329 | const { container } = render( 330 | { 337 | return
{oriNode}
; 338 | }} 339 | />, 340 | ); 341 | 342 | expect(container.querySelector('.bamboo')).toBeTruthy(); 343 | expect(container.querySelectorAll('.bamboo')).toHaveLength(1); 344 | expect(container.querySelector('.rc-steps-item')).toBeTruthy(); 345 | expect(container.querySelector('.rc-steps-item > .bamboo')).toBeTruthy(); 346 | }); 347 | 348 | it('iconRender', () => { 349 | const { container } = render( 350 | { 357 | return little; 358 | }} 359 | />, 360 | ); 361 | 362 | const iconEle = container.querySelector('.rc-steps-item-icon')!; 363 | expect(iconEle).toHaveClass('bamboo'); 364 | expect(iconEle.textContent).toBe('little'); 365 | }); 366 | 367 | it('components', () => { 368 | const { container } = render( 369 | , 380 | ); 381 | 382 | expect(container.firstChild).toMatchSnapshot(); 383 | }); 384 | }); 385 | -------------------------------------------------------------------------------- /tests/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Steps components 1`] = ` 4 |
    7 |
  1. 10 |
    13 |
    16 |
    19 |
    22 |
    25 | test 26 |
    27 |
    28 |
    29 |
    30 |
    2. 31 |
32 | `; 33 | 34 | exports[`Steps render renders correctly 1`] = ` 35 |
38 |
41 |
44 |
47 |
50 |
53 |
56 | 已完成 57 |
58 |
61 |
62 |
63 |
64 |
65 |
68 |
71 |
74 |
77 |
80 |
83 | 进行中 84 |
85 |
88 |
89 |
90 |
91 |
92 |
95 |
98 |
101 |
104 |
107 |
110 | 待运行 111 |
112 |
115 |
116 |
117 |
118 |
119 |
122 |
125 |
128 |
131 |
134 |
137 | 待运行 138 |
139 |
140 |
141 |
142 |
143 |
144 | `; 145 | 146 | exports[`Steps render renders current correctly 1`] = ` 147 |
150 |
153 |
156 |
159 |
162 |
165 |
168 | 已完成 169 |
170 |
173 |
174 |
175 |
176 |
177 |
180 |
183 |
186 |
189 |
192 |
195 | 进行中 196 |
197 |
200 |
201 |
202 |
203 |
204 |
207 |
210 |
213 |
216 |
219 |
222 | 待运行 223 |
224 |
227 |
228 |
229 |
230 |
231 |
234 |
237 |
240 |
243 |
246 |
249 | 待运行 250 |
251 |
252 |
253 |
254 |
255 |
256 | `; 257 | 258 | exports[`Steps render renders progressDot correctly 1`] = ` 259 |
262 |
265 |
268 |
271 |
274 |
277 |
280 | 已完成 281 |
282 |
285 |
286 |
287 |
288 |
289 |
292 |
295 |
298 |
301 |
304 |
307 | 进行中 308 |
309 |
312 |
313 |
314 |
315 |
316 |
319 |
322 |
325 |
328 |
331 |
334 | 待运行 335 |
336 |
339 |
340 |
341 |
342 |
343 |
346 |
349 |
352 |
355 |
358 |
361 | 待运行 362 |
363 |
364 |
365 |
366 |
367 |
368 | `; 369 | 370 | exports[`Steps render renders progressDot function correctly 1`] = ` 371 |
374 |
377 |
380 |
383 |
386 |
389 |
392 | 已完成 393 |
394 |
397 |
398 |
399 |
400 |
401 |
404 |
407 |
410 |
413 |
416 |
419 | 进行中 420 |
421 |
424 |
425 |
426 |
427 |
428 |
431 |
434 |
437 |
440 |
443 |
446 | 待运行 447 |
448 |
451 |
452 |
453 |
454 |
455 |
458 |
461 |
464 |
467 |
470 |
473 | 待运行 474 |
475 |
476 |
477 |
478 |
479 |
480 | `; 481 | 482 | exports[`Steps render renders status correctly 1`] = ` 483 |
486 |
489 |
492 |
495 |
498 |
501 |
504 | 已完成 505 |
506 |
509 |
510 |
511 |
512 |
513 |
516 |
519 |
522 |
525 |
528 |
531 | 进行中 532 |
533 |
536 |
537 |
538 |
539 |
540 |
543 |
546 |
549 |
552 |
555 |
558 | 待运行 559 |
560 |
563 |
564 |
565 |
566 |
567 |
570 |
573 |
576 |
579 |
582 |
585 | 待运行 586 |
587 |
588 |
589 |
590 |
591 |
592 | `; 593 | 594 | exports[`Steps render renders step with description 1`] = ` 595 |
598 |
601 |
604 |
607 |
610 |
613 |
616 | 已完成 617 |
618 |
621 |
622 |
625 | xx 626 |
627 |
628 |
629 |
630 |
633 |
636 |
639 |
642 |
645 |
648 | 进行中 649 |
650 |
653 |
654 |
657 | xx 658 |
659 |
660 |
661 |
662 |
665 |
668 |
671 |
674 |
677 |
680 | 待运行 681 |
682 |
685 |
686 |
689 | xx 690 |
691 |
692 |
693 |
694 |
697 |
700 |
703 |
706 |
709 |
712 | 待运行 713 |
714 |
715 |
718 | xx 719 |
720 |
721 |
722 |
723 |
724 | `; 725 | 726 | exports[`Steps render renders step with description and status 1`] = ` 727 |
730 |
733 |
736 |
739 |
742 |
745 |
748 | 已完成 749 |
750 |
753 |
754 |
757 | xx 758 |
759 |
760 |
761 |
762 |
765 |
768 |
771 |
774 |
777 |
780 | 进行中 781 |
782 |
785 |
786 |
789 | xx 790 |
791 |
792 |
793 |
794 |
797 |
800 |
803 |
806 |
809 |
812 | 待运行 813 |
814 |
817 |
818 |
821 | xx 822 |
823 |
824 |
825 |
826 |
829 |
832 |
835 |
838 |
841 |
844 | 待运行 845 |
846 |
847 |
850 | xx 851 |
852 |
853 |
854 |
855 |
856 | `; 857 | 858 | exports[`Steps render renders stepIcon function correctly 1`] = ` 859 |
862 |
865 |
868 |
871 |
874 |
877 |
880 | 已完成 881 |
882 |
885 |
886 |
887 |
888 |
889 |
892 |
895 |
898 |
901 |
904 |
907 | 进行中 908 |
909 |
912 |
913 |
914 |
915 |
916 |
919 |
922 |
925 |
928 |
931 |
934 | 待运行 935 |
936 |
939 |
940 |
941 |
942 |
943 |
946 |
949 |
952 |
955 |
958 |
961 | 待运行 962 |
963 |
964 |
965 |
966 |
967 |
968 | `; 969 | 970 | exports[`Steps render renders titlePlacement correctly 1`] = ` 971 |
974 |
977 |
980 |
983 |
986 |
989 |
992 | 已完成 993 |
994 |
997 |
998 |
999 |
1000 |
1001 |
1004 |
1007 |
1010 |
1013 |
1016 |
1019 | 进行中 1020 |
1021 |
1024 |
1025 |
1026 |
1027 |
1028 |
1031 |
1034 |
1037 |
1040 |
1043 |
1046 | 待运行 1047 |
1048 |
1051 |
1052 |
1053 |
1054 |
1055 |
1058 |
1061 |
1064 |
1067 |
1070 |
1073 | 待运行 1074 |
1075 |
1076 |
1077 |
1078 |
1079 |
1080 | `; 1081 | 1082 | exports[`Steps render renders vertical correctly 1`] = ` 1083 |
1087 |
1090 |
1093 |
1096 |
1099 |
1102 |
1105 | 已完成 1106 |
1107 |
1110 |
1111 |
1112 |
1113 |
1114 |
1117 |
1120 |
1123 |
1126 |
1129 |
1132 | 进行中 1133 |
1134 |
1137 |
1138 |
1139 |
1140 |
1141 |
1144 |
1147 |
1150 |
1153 |
1156 |
1159 | 待运行 1160 |
1161 |
1164 |
1165 |
1166 |
1167 |
1168 |
1171 |
1174 |
1177 |
1180 |
1183 |
1186 | 待运行 1187 |
1188 |
1189 |
1190 |
1191 |
1192 |
1193 | `; 1194 | 1195 | exports[`Steps render renders with falsy children 1`] = ` 1196 |
1199 |
1202 |
1205 |
1208 |
1211 |
1214 |
1217 | 已完成 1218 |
1219 |
1222 |
1223 |
1226 | xx 1227 |
1228 |
1229 |
1230 |
1231 |
1234 |
1237 |
1240 |
1243 |
1246 |
1249 | 进行中 1250 |
1251 |
1255 | 剩余 00:00:07 1256 |
1257 |
1260 |
1261 |
1264 | xx 1265 |
1266 |
1267 |
1268 |
1269 |
1272 |
1275 |
1278 |
1281 |
1284 |
1287 | 待运行 1288 |
1289 |
1292 |
1293 |
1296 | xx 1297 |
1298 |
1299 |
1300 |
1301 |
1304 |
1307 |
1310 |
1313 |
1316 |
1319 | 待运行 1320 |
1321 |
1322 |
1325 | xx 1326 |
1327 |
1328 |
1329 |
1330 |
1331 | `; 1332 | 1333 | exports[`Steps should render customIcon correctly 1`] = ` 1334 |
1337 |
1340 |
1343 |
1346 |
1349 |
1352 |
1355 | 步骤1 1356 |
1357 |
1360 |
1361 |
1362 |
1363 |
1364 |
1367 |
1370 |
1373 |
1376 |
1379 |
1382 | 步骤2 1383 |
1384 |
1387 |
1388 |
1389 |
1390 |
1391 |
1394 |
1397 |
1400 |
1403 |
1406 |
1409 | 步骤3 1410 |
1411 |
1412 |
1413 |
1414 |
1415 |
1416 | `; 1417 | --------------------------------------------------------------------------------