[ { "path": ".dumirc.ts", "content": "import { defineConfig } from 'dumi';\nimport path from 'path';\n\nexport default defineConfig({\n alias: {\n '@rc-component/steps$': path.resolve('src'),\n '@rc-component/steps/es': path.resolve('src'),\n },\n mfsu: false,\n favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],\n themeConfig: {\n name: 'Steps',\n logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',\n },\n});" }, { "path": ".editorconfig", "content": "# top-most EditorConfig file\nroot = true\n\n# Unix-style newlines with a newline ending every file\n[*.{js,css}]\nend_of_line = lf\ninsert_final_newline = true\nindent_style = space\nindent_size = 2" }, { "path": ".eslintrc.js", "content": "const base = require('@umijs/fabric/dist/eslint');\n\nmodule.exports = {\n ...base,\n rules: {\n ...base.rules,\n 'arrow-parens': 0,\n 'react/sort-comp': 0,\n },\n};\n" }, { "path": ".fatherrc.ts", "content": "import { defineConfig } from 'father';\n\nexport default defineConfig({\n plugins: ['@rc-component/father-plugin'],\n});\n" }, { "path": ".github/dependabot.yml", "content": "version: 2\nupdates:\n- package-ecosystem: npm\n directory: \"/\"\n schedule:\n interval: daily\n time: \"21:00\"\n open-pull-requests-limit: 10\n ignore:\n - dependency-name: \"@types/react-dom\"\n versions:\n - 17.0.0\n - 17.0.1\n - 17.0.2\n - dependency-name: \"@types/react\"\n versions:\n - 17.0.0\n - 17.0.1\n - 17.0.2\n - 17.0.3\n - dependency-name: less\n versions:\n - 4.1.0\n" }, { "path": ".github/workflows/main.yml", "content": "name: ✅ test\non: [push, pull_request]\njobs:\n test:\n uses: react-component/rc-test/.github/workflows/test.yml@main\n secrets: inherit" }, { "path": ".gitignore", "content": ".iml\n*.log\n.idea/\n.ipr\n.iws\n*~\n~*\n*.diff\n*.patch\n*.bak\n.DS_Store\nThumbs.db\n.project\n.*proj\n.svn/\n*.swp\n*.swo\n*.pyc\n*.pyo\n.build\nnode_modules\n.cache\ndist\nassets/**/*.css\nbuild\nlib\nes\ncoverage\npackage-lock.json\npnpm-lock.yaml\nyarn.lock\n.doc\n.umi\n.npmrc\n\n# dumi\n.dumi/tmp\n.dumi/tmp-test\n.dumi/tmp-production\n.env.local\n\nbun.lockb" }, { "path": ".prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\",\n \"proseWrap\": \"never\",\n \"printWidth\": 100\n}" }, { "path": "HISTORY.md", "content": "# History\n----\n\n## 3.6.0\n\n- Remove babel-runtime and prop-types\n- Fix icon missing #85\n\n## 3.5.0\n\n- Support `navigation` type & `disabled` prop.\n\n## 3.4.0\n\n- Support `onChange` event.\n\n## 3.3.0\n\n- Add `icons` prop for change preset icon.\n\n## 3.2.0\n\n- Add `initial` prop.\n\n## 3.1.0\n\n- Add `tailContent`.\n\n## 3.0.0\n\n- Rewrite from bottom.\n\n## 2.5.1\n\n* Support react@15.5\n\n## 2.5.0\n\n* Refactor for last tail style.\n\n## 2.4.0\n\n* Refactor for extra width of tail. https://github.com/ant-design/ant-design/issues/5083\n\n## 2.3.0\n\n* Add new step style of prop `progressDot`.\n\n## 2.2.0\n\n* `icon` can be React.Node now.\n\n## 2.1.0\n\n* Add `labelPlacement`, support vertial title and description\n\n## 2.0.0\n\n* Refactor for better layout\n\n## 1.5\n\n* add `status` property of `Steps`\n\n## 1.4\n\n* update react to 0.14\n\n## 1.3\n\n* add `current` property of `Steps`\n\n## 1.2.3\n\n* fix publish\n\n## 1.2.2\n\n* remove vertical `maxDescriptionWidth`\n\n## 1.2.1\n\n* fix vertical `maxDescriptionWidth`\n\n## 1.2.0\n\n* add vertical steps\n\n## 1.1.4\n\n* fix layout algorithm\n\n## 1.1.3\n\n* support `iconPrefix` property, default is `rc`\n\n## 1.1.2\n\n* fix bugs\n\n## 1.1.1\n\n* support `maxDescriptionWidth` property, default is 120\n\n## 1.1.0\n\n* support `prefixCls` property, default is `rc-steps`\n" }, { "path": "LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2014-present yiminghe\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\n" }, { "path": "README.md", "content": "# @rc-component/steps\n\n---\n\nReact steps component.\n\n[![NPM version][npm-image]][npm-url]\n[![build status][travis-image]][travis-url]\n[![Test coverage][codecov-image]][codecov-url]\n[![npm download][download-image]][download-url]\n[![bundle size][bundlephobia-image]][bundlephobia-url]\n\n[npm-image]: http://img.shields.io/npm/v/@rc-component/steps.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/@rc-component/steps\n[travis-image]: https://img.shields.io/travis/react-component/steps.svg?style=flat-square\n[travis-url]: https://travis-ci.org/react-component/steps\n[codecov-image]: https://img.shields.io/codecov/c/github/react-component/steps/master.svg?style=flat-square\n[codecov-url]: https://codecov.io/gh/react-component/steps/branch/master\n[download-image]: https://img.shields.io/npm/dm/@rc-component/steps.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@rc-component/steps\n[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/steps\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/steps\n\n## Usage\n\n```bash\nnpm install @rc-component/steps\n```\n\n
\n\n```jsx | pure\n\n \n \n \n\n```\n\n## Example\n\nhttps://steps.vercel.app/\n\n## API\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
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
\n\n### Steps.Step\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
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
\n\n## Development\n\n```bash\nnpm install\nnpm start\n```\n\n## License\n\n@rc-component/steps is released under the MIT license.\n" }, { "path": "assets/custom-icon.less", "content": "@import 'variables';\n\n.@{stepsPrefixClass}-item-custom {\n .@{stepsPrefixClass}-item-icon {\n background: none;\n border: 0;\n width: auto;\n height: auto;\n > .@{stepsPrefixClass}-icon {\n font-size: 20px;\n top: 1px;\n width: 20px;\n height: 20px;\n }\n }\n &.@{stepsPrefixClass}-item-process {\n .@{stepsPrefixClass}-item-icon > .@{stepsPrefixClass}-icon {\n color: @process-icon-color;\n }\n }\n}\n" }, { "path": "assets/iconfont.less", "content": "@icon-url : \"//at.alicdn.com/t/font_1434092639_4910953\";\n.ie-rotate(@rotation) {\n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation);\n}\n.rotate(@degrees) {\n -webkit-transform: rotate(@degrees);\n -ms-transform: rotate(@degrees); // IE9 only\n -o-transform: rotate(@degrees);\n transform: rotate(@degrees);\n}\n.animation(@animation) {\n -webkit-animation: @animation;\n -o-animation: @animation;\n animation: @animation;\n}\n// font-face\n// @icon-url： 字体源文件的地址\n@font-face {\n font-family: 'anticon';\n src: url('@{icon-url}.eot'); /* IE9*/\n src: url('@{icon-url}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */\n url('@{icon-url}.woff') format('woff'), /* chrome、firefox */\n url('@{icon-url}.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/\n url('@{icon-url}.svg#iconfont') format('svg'); /* iOS 4.1- */\n}\n\n.rcicon {\n position: relative;\n display: inline-block;\n font-style: normal;\n vertical-align: baseline;\n text-align: center;\n text-transform: none;\n text-rendering: auto;\n // 更好地渲染字体\n -webkit-font-smoothing: antialiased;\n -webkit-text-stroke-width: 0px;\n -moz-osx-font-smoothing: grayscale;\n\n &:before {\n display: block;\n font-family: \"anticon\" !important;\n }\n}\n// 方向性图标\n.rcicon-step-backward:before {content:\"\\e662\";}\n.rcicon-step-forward {.ie-rotate(2);}\n.rcicon-step-forward:before {content:\"\\e662\";.rotate(180deg);}\n.rcicon-fast-backward:before {content:\"\\e62a\";}\n.rcicon-fast-forward {.ie-rotate(2);}\n.rcicon-fast-forward:before {content:\"\\e62a\";.rotate(180deg);}\n.rcicon-shrink:before {content:\"\\e65f\";}\n.rcicon-arrow-salt:before {content:\"\\e608\";}\n.rcicon-caret-down:before {content:\"\\e60f\";}\n.rcicon-caret-left {.ie-rotate(1);}\n.rcicon-caret-left:before {content:\"\\e60f\";.rotate(90deg);}\n.rcicon-caret-up {.ie-rotate(2);}\n.rcicon-caret-up:before {content:\"\\e60f\";.rotate(180deg);}\n.rcicon-caret-right {.ie-rotate(3);}\n.rcicon-caret-right:before {content:\"\\e60f\";.rotate(270deg);}\n.rcicon-caret-circle-right:before {content:\"\\e60d\";}\n.rcicon-caret-circle-left {.ie-rotate(2);}\n.rcicon-caret-circle-left:before {content:\"\\e60d\";.rotate(180deg);}\n.rcicon-caret-circle-o-right:before {content:\"\\e60e\";}\n.rcicon-caret-circle-o-left {.ie-rotate(2);}\n.rcicon-caret-circle-o-left:before {content:\"\\e60e\";.rotate(180deg);}\n.rcicon-circle-right:before {content:\"\\e602\";}\n.rcicon-circle-left {.ie-rotate(2);}\n.rcicon-circle-left:before {content:\"\\e602\";.rotate(180deg);}\n.rcicon-circle-o-right:before {content:\"\\e603\";}\n.rcicon-circle-o-left {.ie-rotate(2);}\n.rcicon-circle-o-left:before {content:\"\\e603\";.rotate(180deg);}\n.rcicon-double-right:before {content:\"\\e604\";}\n.rcicon-double-left {.ie-rotate(2);}\n.rcicon-double-left:before {content:\"\\e604\";.rotate(180deg);}\n.rcicon-verticle-right:before {content:\"\\e605\";}\n.rcicon-verticle-left {.ie-rotate(2);}\n.rcicon-verticle-left:before {content:\"\\e605\";.rotate(180deg);}\n.rcicon-forward:before {content:\"\\e630\";}\n.rcicon-backward {.ie-rotate(2);}\n.rcicon-backward:before {content:\"\\e630\";.rotate(180deg);}\n.rcicon-rollback:before {content:\"\\e65a\";}\n.rcicon-retweet:before {content:\"\\e659\";}\n\n.rcicon-right:before {content:\"\\e611\";}\n.rcicon-down {.ie-rotate(1);}\n.rcicon-down:before {content:\"\\e611\";.rotate(90deg);}\n.rcicon-left {.ie-rotate(2);}\n.rcicon-left:before {content:\"\\e611\";.rotate(180deg);}\n.rcicon-up {.ie-rotate(3);}\n.rcicon-up:before {content:\"\\e611\";.rotate(270deg);}\n\n// 提示性图标\n.rcicon-question:before {content:\"\\e655\";}\n.rcicon-question-circle:before {content:\"\\e656\";}\n.rcicon-question-circle-o:before {content:\"\\e657\";}\n.rcicon-plus:before {content:\"\\e651\";}\n.rcicon-plus-circle:before {content:\"\\e652\";}\n.rcicon-plus-circle-o:before {content:\"\\e653\";}\n.rcicon-pause:before {content:\"\\e64c\";}\n.rcicon-pause-circle:before {content:\"\\e64d\";}\n.rcicon-pause-circle-o:before {content:\"\\e64e\";}\n.rcicon-minus:before {content:\"\\e646\";}\n.rcicon-minus-circle:before {content:\"\\e647\";}\n.rcicon-minus-circle-o:before {content:\"\\e648\";}\n.rcicon-info-circle:before {content:\"\\e637\";}\n.rcicon-info-circle-o:before {content:\"\\e638\";}\n.rcicon-info:before {content:\"\\e63a\";}\n.rcicon-exclamation:before {content:\"\\e627\";}\n.rcicon-exclamation-circle:before {content:\"\\e628\";}\n.rcicon-exclamation-circle-o:before {content:\"\\e629\";}\n.rcicon-cross:before {content:\"\\e61e\";}\n.rcicon-cross-circle:before {content:\"\\e61f\";}\n.rcicon-cross-circle-o:before {content:\"\\e620\";}\n.rcicon-check:before {content:\"\\e613\";}\n.rcicon-check-circle:before {content:\"\\e614\";}\n.rcicon-check-circle-o:before {content:\"\\e615\";}\n.rcicon-clock-circle:before {content:\"\\e616\";}\n.rcicon-clock-circle-o:before {content:\"\\e617\";}\n\n// 网站通用图标\n.rcicon-lock:before {content:\"\\e641\";}\n.rcicon-android:before {content:\"\\e601\";}\n.rcicon-apple:before {content:\"\\e606\";}\n.rcicon-area-chart:before {content:\"\\e607\";}\n.rcicon-bar-chart:before {content:\"\\e609\";}\n.rcicon-bars:before {content:\"\\e60a\";}\n.rcicon-book:before {content:\"\\e60b\";}\n.rcicon-calendar:before {content:\"\\e60c\";}\n.rcicon-cloud:before {content:\"\\e618\";}\n.rcicon-cloud-download:before {content:\"\\e619\";}\n.rcicon-code:before {content:\"\\e61a\";}\n.rcicon-copy:before {content:\"\\e61c\";}\n.rcicon-credit-card:before {content:\"\\e61d\";}\n.rcicon-delete:before {content:\"\\e621\";}\n.rcicon-desktop:before {content:\"\\e622\";}\n.rcicon-download-line:before {content:\"\\e623\";}\n.rcicon-edit:before {content:\"\\e624\";}\n.rcicon-ellipsis:before {content:\"\\e625\";}\n.rcicon-environment:before {content:\"\\e626\";}\n.rcicon-file:before {content:\"\\e62c\";}\n.rcicon-file-text:before {content:\"\\e62d\";}\n.rcicon-folder:before {content:\"\\e62e\";}\n.rcicon-folder-open:before {content:\"\\e62f\";}\n.rcicon-github:before {content:\"\\e631\";}\n.rcicon-hdd:before {content:\"\\e632\";}\n.rcicon-frown:before {content:\"\\e633\";}\n.rcicon-meh:before {content:\"\\e634\";}\n.rcicon-inbox:before {content:\"\\e635\";}\n.rcicon-laptop:before {content:\"\\e63d\";}\n.rcicon-large:before {content:\"\\e63e\";}\n.rcicon-line-chart:before {content:\"\\e63f\";}\n.rcicon-link:before {content:\"\\e640\";}\n.rcicon-logout:before {content:\"\\e642\";}\n.rcicon-mail:before {content:\"\\e643\";}\n.rcicon-menu-fold:before {content:\"\\e644\";}\n.rcicon-menu-unfold:before {content:\"\\e645\";}\n.rcicon-mobile:before {content:\"\\e649\";}\n.rcicon-notification:before {content:\"\\e64a\";}\n.rcicon-paper-clip:before {content:\"\\e64b\";}\n.rcicon-picture:before {content:\"\\e64f\";}\n.rcicon-pie-chart:before {content:\"\\e650\";}\n.rcicon-poweroff:before {content:\"\\e654\";}\n.rcicon-reload:before {content:\"\\e658\";}\n.rcicon-search:before {content:\"\\e65b\";}\n.rcicon-setting:before {content:\"\\e65c\";}\n.rcicon-share-alt:before {content:\"\\e65d\";}\n.rcicon-shopping-cart:before {content:\"\\e65e\";}\n.rcicon-smile:before {content:\"\\e661\";}\n.rcicon-tablet:before {content:\"\\e664\";}\n.rcicon-tag:before {content:\"\\e665\";}\n.rcicon-tags:before {content:\"\\e666\";}\n.rcicon-to-top:before {content:\"\\e667\";}\n.rcicon-unlock:before {content:\"\\e668\";}\n.rcicon-upload:before {content:\"\\e669\";}\n.rcicon-user:before {content:\"\\e66a\";}\n.rcicon-video-camera:before {content:\"\\e66b\";}\n.rcicon-windows:before {content:\"\\e66c\";}\n.rcicon-loading:before {\n display: inline-block;\n .animation(loadingCircle 1.0s infinite linear);\n content:\"\\e610\";\n}\n\n:root {\n .rcicon-step-forward,\n .rcicon-fast-forward,\n .rcicon-left,\n .rcicon-up,\n .rcicon-down,\n .rcicon-caret-left,\n .rcicon-caret-up,\n .rcicon-caret-right,\n .rcicon-caret-circle-left,\n .rcicon-caret-circle-o-left,\n .rcicon-circle-left,\n .rcicon-circle-o-left,\n .rcicon-double-left,\n .rcicon-verticle-left,\n .rcicon-backward {\n filter: none;\n }\n}\n" }, { "path": "assets/index.less", "content": "@import 'variables';\n\n.@{stepsPrefixClass} {\n font-size: 0;\n width: 100%;\n line-height: 1.5;\n display: flex;\n\n &,\n * {\n box-sizing: border-box;\n }\n}\n\n.@{stepsPrefixClass}-item {\n position: relative;\n display: inline-block;\n vertical-align: top;\n flex: 1;\n // overflow: hidden;\n\n &:last-child {\n flex: none;\n }\n\n &:last-child &-title:after {\n display: none;\n }\n\n &-icon,\n &-section {\n display: inline-block;\n vertical-align: top;\n }\n\n &-icon {\n flex: none;\n border: 1px solid @wait-icon-color;\n width: 26px;\n height: 26px;\n line-height: 26px;\n text-align: center;\n border-radius: 26px;\n font-size: 14px;\n transition:\n background-color 0.3s,\n border-color 0.3s;\n\n > .@{stepsPrefixClass}-icon {\n line-height: 1;\n top: -1px;\n color: @primary-color;\n position: relative;\n\n &.rcicon {\n font-size: 12px;\n position: relative;\n top: -2px;\n }\n }\n }\n\n &-section {\n margin-top: 3px;\n }\n &-title {\n font-size: 14px;\n color: #666;\n font-weight: bold;\n display: inline-block;\n position: relative;\n }\n &-subtitle {\n font-size: 12px;\n display: inline-block;\n color: #999;\n }\n &-description {\n font-size: 12px;\n color: #999;\n }\n .step-item-status(wait);\n .step-item-status(process);\n &-process &-icon {\n background: @process-icon-color;\n > .@{stepsPrefixClass}-icon {\n color: #fff;\n }\n }\n .step-item-status(finish);\n .step-item-status(error);\n\n &.@{stepsPrefixClass}-next-error .@{stepsPrefixClass}-item-title:after {\n background: @error-icon-color;\n }\n}\n\n.@{stepsPrefixClass}-horizontal:not(.@{stepsPrefixClass}-label-vertical) {\n .@{stepsPrefixClass}-item {\n &-description {\n max-width: @stepDescriptionMaxWidth;\n }\n }\n}\n\n.step-item-status(@status) {\n @icon-color: '@{status}-icon-color';\n @title-color: '@{status}-title-color';\n @description-color: '@{status}-description-color';\n @tail-color: '@{status}-tail-color';\n &-@{status} &-icon {\n border-color: @@icon-color;\n background-color: #fff;\n > .@{stepsPrefixClass}-icon {\n color: @@icon-color;\n .@{stepsPrefixClass}-icon-dot {\n background: @@icon-color;\n }\n }\n }\n &-@{status} &-title {\n color: @@title-color;\n }\n &-@{status} &-description {\n color: @@description-color;\n }\n}\n\n// @import 'custom-icon';\n// @import 'small';\n// @import 'vertical';\n// @import 'label-placement';\n// @import 'progress-dot';\n// @import 'nav';\n// @import 'inline';\n\n// ======================= Horizontal =======================\n.verticalFlex() {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.@{stepsPrefixClass} {\n .@{stepsPrefixClass}-item {\n &-section {\n min-width: 0;\n }\n\n &-header {\n display: flex;\n gap: 8px;\n align-items: center;\n }\n\n // Ellipsis\n &-title,\n &-subtitle,\n &-description {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n}\n\n.@{stepsPrefixClass}-horizontal {\n .@{stepsPrefixClass}-item {\n flex: 1;\n position: relative;\n min-width: 0;\n\n &-rail {\n height: 1px;\n background: @process-tail-color;\n }\n }\n\n // Label Vertical\n &.@{stepsPrefixClass}-label-vertical {\n .@{stepsPrefixClass}-item {\n .verticalFlex();\n padding-inline: 8px;\n\n &-section {\n .verticalFlex();\n }\n\n &-rail {\n position: absolute;\n top: 13px;\n left: calc(50% + 13px);\n width: 100%;\n }\n }\n }\n\n // Label Horizontal\n &.@{stepsPrefixClass}-label-horizontal {\n .@{stepsPrefixClass}-item {\n display: flex;\n\n &:last-child {\n flex: none;\n }\n\n &-section {\n flex: 1;\n }\n\n &-rail {\n flex: 1;\n min-width: 0;\n }\n }\n }\n}\n\n// ======================== Vertical ========================\n.@{stepsPrefixClass}-vertical {\n}\n" }, { "path": "assets/inline.less", "content": "@import 'variables';\n\n.@{stepsPrefixClass}-inline {\n width: auto;\n display: inline-flex;\n\n .@{stepsPrefixClass}-item {\n flex: none;\n\n\n &-icon {\n width: 6px;\n height: 6px;\n margin-left: calc(50% - 3px);\n > .@{stepsPrefixClass}-icon {\n top: 0;\n }\n .@{stepsPrefixClass}-icon-dot {\n border-radius: 3px;\n }\n }\n \n &-section {\n width: auto;\n margin-top: 7px;\n }\n &-title {\n color: rgba(0, 0, 0, 0.25);\n font-size: 12px;\n line-height: 20px;\n font-weight: normal;\n margin-bottom: 2px;\n }\n &-description {\n display: none;\n }\n\n &-finish {\n .@{stepsPrefixClass}-item-icon .@{stepsPrefixClass}-icon .@{stepsPrefixClass}-icon-dot {\n background-color: @process-tail-color;\n }\n }\n &-wait {\n .@{stepsPrefixClass}-item-icon .@{stepsPrefixClass}-icon .@{stepsPrefixClass}-icon-dot {\n background-color: #fff;\n border: 1px solid @process-tail-color;\n }\n }\n }\n}\n" }, { "path": "assets/label-placement.less", "content": "@import 'variables';\n\n.@{stepsPrefixClass}-label-vertical {\n .@{stepsPrefixClass}-item {\n overflow: visible;\n &-section {\n display: block;\n text-align: center;\n margin-top: 8px;\n width: @stepDescriptionMaxWidth;\n }\n &-icon {\n display: inline-block;\n margin-left: 36px;\n }\n &-title {\n padding-right: 0;\n &:after {\n display: none;\n }\n }\n &-description {\n text-align: left;\n }\n }\n}\n" }, { "path": "assets/nav.less", "content": "@import 'variables';\n\n.@{stepsPrefixClass}-navigation {\n padding-top: 8px;\n &.@{stepsPrefixClass}-horizontal {\n .@{stepsPrefixClass}-item-description {\n max-width: @stepNavContentMaxWidth;\n }\n }\n\n .@{stepsPrefixClass}-item {\n box-sizing: border-box;\n text-align: center;\n overflow: visible;\n\n\n &-title {\n max-width: @stepNavContentMaxWidth;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &:after {\n display: none;\n }\n }\n\n &:last-child {\n flex: 1;\n &:after {\n display: none;\n }\n }\n\n &:after {\n content: '';\n display: inline-block;\n width: 16px;\n height: 16px;\n border: 1px solid #ccc;\n border-bottom: none;\n border-left: none;\n transform: rotate(45deg);\n position: absolute;\n top: 50%;\n left: 100%;\n margin-top: -12px;\n margin-left: -8px;\n }\n\n }\n}\n" }, { "path": "assets/progress-dot.less", "content": "@import 'variables';\n\n.@{stepsPrefixClass}-dot {\n .@{stepsPrefixClass}-item {\n &-icon {\n padding-right: 0;\n width: 5px;\n height: 5px;\n line-height: 5px;\n border: 0;\n margin-left: 48px;\n .@{stepsPrefixClass}-icon-dot {\n float: left;\n width: 100%;\n height: 100%;\n border-radius: 2.5px;\n }\n }\n &-process &-icon {\n top: -1px;\n width: 7px;\n height: 7px;\n line-height: 7px;\n .@{stepsPrefixClass}-icon-dot {\n border-radius: 3.5px;\n }\n }\n }\n}\n" }, { "path": "assets/small.less", "content": "@import 'variables';\n\n.@{stepsPrefixClass}-small {\n .@{stepsPrefixClass}-item-icon {\n width: 18px;\n height: 18px;\n line-height: 18px;\n text-align: center;\n border-radius: 18px;\n font-size: 12px;\n margin-right: 10px;\n > .@{stepsPrefixClass}-icon {\n font-size: 12px;\n font-size: ~\"9px \\9\"; // ie8-9\n transform: scale(.75);\n top: -1px;\n }\n }\n .@{stepsPrefixClass}-item-section {\n margin-top: 0;\n }\n .@{stepsPrefixClass}-item-title {\n font-size: 12px;\n margin-bottom: 4px;\n color: #666;\n font-weight: bold;\n }\n .@{stepsPrefixClass}-item-description {\n font-size: 12px;\n color: #999;\n }\n\n .@{stepsPrefixClass}-item-custom .@{stepsPrefixClass}-item-icon {\n width: inherit;\n height: inherit;\n line-height: inherit;\n border-radius: 0;\n border: 0;\n background: none;\n > .@{stepsPrefixClass}-icon {\n font-size: 20px;\n top: -2.5px;\n transform: none;\n }\n }\n}\n" }, { "path": "assets/variables.less", "content": "@stepsPrefixClass: ~\"rc-steps\";\n@stepDescriptionMaxWidth: 100px;\n@stepNavContentMaxWidth: 140px;\n@primary-color: #108ee9;\n@process-icon-color: @primary-color;\n@process-title-color: rgba(0,0,0,.65);\n@process-description-color: @process-title-color;\n@process-tail-color: #e9e9e9;\n@wait-icon-color: #ccc;\n@wait-title-color: rgba(0,0,0,.43);\n@wait-description-color: @wait-title-color;\n@wait-tail-color: @process-tail-color;\n@finish-icon-color: @process-icon-color;\n@finish-title-color: @wait-title-color;\n@finish-description-color: @finish-title-color;\n@finish-tail-color: @process-icon-color;\n@error-icon-color: #f50;\n@error-title-color: @error-icon-color;\n@error-description-color: @error-icon-color;\n@error-tail-color: @process-tail-color;\n" }, { "path": "assets/vertical.less", "content": "@import 'variables';\n\n.@{stepsPrefixClass}-vertical {\n display: block;\n .@{stepsPrefixClass}-item {\n display: block;\n overflow: visible;\n &-icon {\n float: left;\n &-inner {\n margin-right: 16px;\n }\n }\n &-section {\n min-height: 48px;\n overflow: hidden;\n display: block;\n }\n &-title {\n line-height: 26px;\n &:after {\n display: none;\n }\n }\n &-description {\n padding-bottom: 12px;\n }\n }\n\n &.@{stepsPrefixClass}-small {\n .@{stepsPrefixClass}-item-title {\n line-height: 18px;\n }\n }\n}\n" }, { "path": "bunfig.toml", "content": "[install]\npeer = false" }, { "path": "docs/demo/alternativeLabel.md", "content": "---\ntitle: alternativeLabel\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/composable.md", "content": "---\ntitle: composable\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/custom-svg-icon.md", "content": "---\ntitle: custom-svg-icon\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/customIcon.md", "content": "---\ntitle: customIcon\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/dynamic.md", "content": "---\ntitle: dynamic\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/errorStep.md", "content": "---\ntitle: errorStep\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/inline.md", "content": "---\ntitle: inline\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/nav-base.md", "content": "---\ntitle: nav-base\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/nextStep.md", "content": "---\ntitle: nextStep\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/progressDot.md", "content": "---\ntitle: progressDot\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/simple.md", "content": "---\ntitle: simple\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/smallSize.md", "content": "---\ntitle: smallSize\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/stepIcon.md", "content": "---\ntitle: stepIcon\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/vertical.md", "content": "---\ntitle: vertical\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/demo/verticalSmall.md", "content": "---\ntitle: verticalSmall\nnav:\n title: Demo\n path: /demo\n---\n\n\n" }, { "path": "docs/examples/alternativeLabel.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\nconst description =\n '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊';\n\nexport default () => (\n \n);\n" }, { "path": "docs/examples/composable.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\nconst description =\n '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶';\n\nexport default () => (\n \n);\n" }, { "path": "docs/examples/custom-svg-icon.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\nfunction getFinishIcon() {\n const path =\n 'M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.' +\n '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' +\n '.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' +\n '-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 ' +\n '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' +\n '.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' +\n '.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.' +\n '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' +\n '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 ' +\n '20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z';\n return (\n \n \n \n );\n}\n\nfunction getErrorIcon() {\n const path1 =\n 'M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229' +\n '.2 512-512S794.8 0 512 0zm311.1 823.1c-40.4 40.4-87.5 72.2-139.9 9' +\n '4.3C629 940.4 571.4 952 512 952s-117-11.6-171.2-34.5c-52.4-22.2-99' +\n '.4-53.9-139.9-94.3-40.4-40.4-72.2-87.5-94.3-139.9C83.6 629 72 571.' +\n '4 72 512s11.6-117 34.5-171.2c22.2-52.4 53.9-99.4 94.3-139.9 40.4-4' +\n '0.4 87.5-72.2 139.9-94.3C395 83.6 452.6 72 512 72s117 11.6 171.2 3' +\n '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' +\n '940.4 395 952 452.6 952 512s-11.6 117-34.5 171.2c-22.2 52.4-53.9 9' +\n '9.5-94.4 139.9z';\n const path2 =\n 'M640.3 765.5c-19.9 0-36-16.1-36-36 0-50.9-41.4-92.3-92' +\n '.3-92.3s-92.3 41.4-92.3 92.3c0 19.9-16.1 36-36 36s-36-16.1-36-36c0' +\n '-90.6 73.7-164.3 164.3-164.3s164.3 73.7 164.3 164.3c0 19.9-16.1 36' +\n '-36 36zM194.2 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM709.5 382' +\n '.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0z';\n return (\n \n \n \n \n );\n}\n\nconst icons = {\n finish: getFinishIcon(),\n error: getErrorIcon(),\n};\n\nconst description = 'This is a description';\n\nexport default () => (\n \n);\n" }, { "path": "docs/examples/customIcon.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\n// eslint-disable-next-line react/prop-types\nconst Icon = ({ type }) => ;\n\nexport default () => (\n },\n { title: '步骤2', icon: 'apple' },\n { title: '步骤1', icon: 'github' },\n ]}\n />\n);\n" }, { "path": "docs/examples/dynamic.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React, { useState } from 'react';\nimport Steps from '@rc-component/steps';\n\nexport default () => {\n const [items, setItems] = useState([\n {\n title: '已完成',\n description:\n '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',\n },\n {\n title: '进行中',\n description:\n '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',\n },\n {\n title: '待运行',\n description:\n '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',\n },\n {\n title: '待运行',\n description:\n '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',\n },\n ]);\n\n const addStep = () => {\n const newSteps = [...items];\n newSteps.push({\n title: '待运行',\n description: '新的节点',\n });\n setItems(newSteps);\n };\n return (\n
\n \n \n
\n );\n};\n" }, { "path": "docs/examples/errorStep.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\nconst description =\n '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊';\n\nexport default () => (\n \n);\n" }, { "path": "docs/examples/inline.jsx", "content": "import '../../assets/index.less';\nimport React, { useState } from 'react';\nimport Steps from '@rc-component/steps';\n\nexport default () => {\n const [current, setCurrent] = useState(0);\n\n return (\n <>\n {\n setCurrent(0);\n }}\n >\n Current: {current}\n \n\n
\n\n React.cloneElement(stepItem, { title: item.description })}\n />\n \n );\n};\n" }, { "path": "docs/examples/nav-base.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React, { useState } from 'react';\nimport Steps from '@rc-component/steps';\n\nexport default () => {\n const [current, setCurrent] = useState(0);\n\n const onChange = (current) => {\n // eslint-disable-next-line no-console\n console.log('onChange:', current);\n setCurrent(current);\n };\n\n const containerStyle = {\n border: '1px solid rgb(235, 237, 240)',\n marginBottom: 24,\n };\n\n const description = 'This is a description.';\n\n return (\n
\n \n \n
\n );\n};\n" }, { "path": "docs/examples/nextStep.css", "content": ".my-step-form {\n width: 100%;\n}\n.my-step-form > div {\n margin-bottom: 20px;\n}\n.my-step-container {\n width: 100%;\n}\n" }, { "path": "docs/examples/nextStep.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport './nextStep.css';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\nfunction generateRandomSteps() {\n const n = Math.floor(Math.random() * 3) + 3;\n const arr = [];\n for (let i = 0; i < n; i++) {\n arr.push({\n title: `步骤${i + 1}`,\n });\n }\n return arr;\n}\nconst steps = generateRandomSteps();\n\nclass MyForm extends React.Component {\n state = {\n currentStep: Math.floor(Math.random() * steps.length),\n };\n\n nextStep = () => {\n const { currentStep } = this.state;\n let s = currentStep + 1;\n if (s === steps.length) {\n s = 0;\n }\n this.setState({\n currentStep: s,\n });\n };\n\n render() {\n const { currentStep: cs } = this.state;\n this.stepsRefs = [];\n return (\n
\n
这个demo随机生成3~6个步骤，初始随机进行到其中一个步骤
\n
当前正在执行第{cs + 1}步
\n
\n ({\n ref: (c) => {\n this.stepsRefs[i] = c;\n },\n key: i,\n title: s.title,\n }))}\n />\n
\n\n
\n \n
\n
\n );\n }\n}\n\nexport default MyForm;\n" }, { "path": "docs/examples/progressDot.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\nconst description =\n '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊';\n\nexport default () => (\n \n);\n" }, { "path": "docs/examples/simple.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\nconst description =\n '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶';\n\nconst ControlSteps = () => {\n const [current, setCurrent] = React.useState(0);\n return (\n {\n // eslint-disable-next-line no-console\n console.log('Change:', val);\n setCurrent(val);\n }}\n items={[\n {\n title: '已完成',\n },\n {\n title: '进行中',\n },\n {\n title: '待运行',\n description: 'Hello World!',\n },\n {\n title: '待运行',\n },\n ]}\n />\n );\n};\n\nexport default () => (\n
\n \n \n \n \n
\n);\n" }, { "path": "docs/examples/smallSize.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\n// eslint-disable-next-line react/prop-types\nconst Icon = ({ type }) => ;\n\nexport default () => (\n
\n \n ,\n },\n {\n title: '步骤3',\n icon: 'apple',\n },\n {\n title: '待运行',\n icon: 'github',\n },\n ]}\n />\n
\n);\n" }, { "path": "docs/examples/stepIcon.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\nfunction stepIcon({ status, node }) {\n const isProcessing = status === 'process';\n return isProcessing ?
{node}
: node;\n}\n\nexport default () => {\n const [current, setCurrent] = React.useState(0);\n return (\n <>\n {\n setCurrent((current + 1) % 5);\n }}\n >\n loop\n \n \n \n );\n};\n" }, { "path": "docs/examples/vertical.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\nconst description =\n '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊';\n\nexport default () => (\n \n);\n" }, { "path": "docs/examples/verticalSmall.jsx", "content": "import '../../assets/index.less';\nimport '../../assets/iconfont.less';\nimport React from 'react';\nimport Steps from '@rc-component/steps';\n\nconst description =\n '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊';\n\nexport default () => (\n \n);\n" }, { "path": "docs/index.md", "content": "---\nhero:\n title: \"@rc-component/steps\"\n description: React Steps Component\n---\n\n\n" }, { "path": "index.js", "content": "'use strict';\n\nmodule.exports = require('./src/');" }, { "path": "jest.config.js", "content": "module.exports = {\n setupFiles: ['./tests/setup.js'],\n};" }, { "path": "package.json", "content": "{\n \"name\": \"@rc-component/steps\",\n \"version\": \"1.2.2\",\n \"description\": \"steps ui component for react\",\n \"keywords\": [\n \"react\",\n \"react-component\",\n \"react-steps\"\n ],\n \"homepage\": \"http://github.com/react-component/steps\",\n \"bugs\": {\n \"url\": \"http://github.com/react-component/steps/issues\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \" git+ssh://git@github.com/react-component/steps.git\"\n },\n \"license\": \"MIT\",\n \"maintainers\": [\n {\n \"name\": \"afc163\",\n \"email\": \"afc163@gmail.com\"\n }\n ],\n \"main\": \"./lib/index\",\n \"module\": \"./es/index\",\n \"types\": \"./lib/index.d.ts\",\n \"files\": [\n \"assets/*.css\",\n \"es\",\n \"lib\"\n ],\n \"scripts\": {\n \"compile\": \"father build && lessc assets/index.less assets/index.css\",\n \"coverage\": \"rc-test --coverage\",\n \"docs:build\": \"dumi build\",\n \"docs:deploy\": \"gh-pages -d .doc\",\n \"gh-pages\": \"npm run docs:build && npm run docs:deploy\",\n \"lint\": \"eslint src/ --ext .ts,.tsx,.jsx,.js,.md\",\n \"prepare\": \"husky install && dumi setup\",\n \"prepublishOnly\": \"npm run compile && rc-np\",\n \"prettier\": \"prettier --write \\\"**/*.{ts,tsx,js,jsx,json,md}\\\"\",\n \"postpublish\": \"npm run gh-pages\",\n \"start\": \"dumi dev\",\n \"test\": \"rc-test\",\n \"now-build\": \"npm run docs:build\"\n },\n \"lint-staged\": {\n \"**/*.{js,jsx,tsx,ts,md,json}\": [\n \"prettier --write\"\n ]\n },\n \"dependencies\": {\n \"@rc-component/util\": \"^1.2.1\",\n \"clsx\": \"^2.1.1\"\n },\n \"devDependencies\": {\n \"@rc-component/father-plugin\": \"^2.0.2\",\n \"@rc-component/np\": \"^1.0.0\",\n \"@testing-library/jest-dom\": \"^6.4.5\",\n \"@testing-library/react\": \"^15.0.6\",\n \"@types/jest\": \"^29.4.0\",\n \"@types/node\": \"^24.5.2\",\n \"@types/react\": \"^18.0.28\",\n \"@types/react-dom\": \"^18.0.11\",\n \"@umijs/fabric\": \"^4.0.1\",\n \"dumi\": \"^2.0.0\",\n \"eslint\": \"^8.55.0\",\n \"eslint-plugin-jest\": \"^27.6.0\",\n \"eslint-plugin-unicorn\": \"^50.0.1\",\n \"father\": \"^4\",\n \"gh-pages\": \"^6.1.0\",\n \"glob\": \"^10.0.0\",\n \"husky\": \"^8.0.1\",\n \"less\": \"^4.1.3\",\n \"lint-staged\": \"^15.2.0\",\n \"prettier\": \"^3.1.0\",\n \"rc-test\": \"^7.0.9\",\n \"react\": \"^18.0.0\",\n \"react-dom\": \"^18.0.0\",\n \"typescript\": \"^5.0.0\"\n },\n \"peerDependencies\": {\n \"react\": \">=16.9.0\",\n \"react-dom\": \">=16.9.0\"\n },\n \"engines\": {\n \"node\": \">=8.x\"\n }\n}\n" }, { "path": "script/update-content.js", "content": "/*\n 用于 dumi 改造使用，\n 可用于将 examples 的文件批量修改为 demo 引入形式，\n 其他项目根据具体情况使用。\n*/\n\nconst fs = require('fs');\nconst glob = require('glob');\n\nconst paths = glob.sync('./docs/examples/*.jsx');\n\npaths.forEach(path => {\n const name = path.split('/').pop().split('.')[0];\n fs.writeFile(\n `./docs/demo/${name}.md`,\n `---\ntitle: ${name}\nnav:\n title: Demo\n path: /demo\n---\n\n\n`,\n 'utf8',\n function(error) {\n if(error){\n console.log(error);\n return false;\n }\n console.log(`${name} 更新成功~`);\n }\n )\n});\n" }, { "path": "src/Context.ts", "content": "import * as React from 'react';\nimport type { ComponentType, StepsProps } from './Steps';\n\nexport interface StepsContextProps {\n prefixCls: string;\n classNames: NonNullable;\n styles: NonNullable;\n ItemComponent: ComponentType;\n}\n\nexport const StepsContext = React.createContext(null!);\n" }, { "path": "src/Rail.tsx", "content": "import * as React from 'react';\nimport { clsx } from 'clsx';\nimport type { Status } from './Steps';\n\nexport interface RailProps {\n prefixCls: string;\n className: string;\n style: React.CSSProperties;\n status: Status;\n}\n\nexport default function Rail(props: RailProps) {\n const { prefixCls, className, style, status } = props;\n const railCls = `${prefixCls}-rail`;\n\n // ============================= render =============================\n return
;\n}\n" }, { "path": "src/Step.tsx", "content": "/* eslint react/prop-types: 0 */\nimport * as React from 'react';\nimport { clsx } from 'clsx';\nimport KeyCode from '@rc-component/util/lib/KeyCode';\nimport type { Status, StepItem, StepsProps } from './Steps';\nimport Rail from './Rail';\nimport { UnstableContext } from './UnstableContext';\nimport StepIcon, { StepIconSemanticContext } from './StepIcon';\nimport { StepsContext } from './Context';\n\nfunction hasContent(value: T) {\n return value !== undefined && value !== null;\n}\n\nexport interface StepProps {\n // style\n prefixCls?: string;\n classNames: StepsProps['classNames'];\n styles: StepsProps['styles'];\n\n // data\n data: StepItem;\n nextStatus?: Status;\n active?: boolean;\n index: number;\n last: boolean;\n\n // render\n iconRender?: StepsProps['iconRender'];\n icon?: React.ReactNode;\n itemRender?: StepsProps['itemRender'];\n itemWrapperRender?: StepsProps['itemWrapperRender'];\n\n // Event\n onClick: (index: number) => void;\n}\n\nexport default function Step(props: StepProps) {\n const {\n // style\n prefixCls,\n classNames,\n styles,\n\n // data\n data,\n last,\n nextStatus,\n active,\n index,\n\n // render\n itemRender,\n iconRender,\n itemWrapperRender,\n\n // events\n onClick,\n } = props;\n\n const itemCls = `${prefixCls}-item`;\n\n // ======================== Contexts ========================\n const { railFollowPrevStatus } = React.useContext(UnstableContext);\n const { ItemComponent } = React.useContext(StepsContext);\n\n // ========================== Data ==========================\n const {\n onClick: onItemClick,\n title,\n subTitle,\n content,\n description,\n disabled,\n icon,\n status,\n\n className,\n style,\n classNames: itemClassNames = {},\n styles: itemStyles = {},\n\n ...restItemProps\n } = data;\n\n const mergedContent = content ?? description;\n\n const renderInfo = {\n item: {\n ...data,\n content: mergedContent,\n },\n index,\n active,\n };\n\n // ========================= Click ==========================\n const clickable = !!(onClick || onItemClick) && !disabled;\n\n const accessibilityProps: {\n role?: string;\n tabIndex?: number;\n onClick?: React.MouseEventHandler;\n onKeyDown?: React.KeyboardEventHandler;\n } = {};\n\n if (clickable) {\n accessibilityProps.role = 'button';\n accessibilityProps.tabIndex = 0;\n accessibilityProps.onClick = (e) => {\n onItemClick?.(e);\n onClick(index);\n };\n\n accessibilityProps.onKeyDown = (e) => {\n const { which } = e;\n if (which === KeyCode.ENTER || which === KeyCode.SPACE) {\n onClick(index);\n }\n };\n }\n\n // ========================= Render =========================\n const mergedStatus = status || 'wait';\n\n const hasTitle = hasContent(title);\n const hasSubTitle = hasContent(subTitle);\n\n const classString = clsx(\n itemCls,\n `${itemCls}-${mergedStatus}`,\n {\n [`${itemCls}-custom`]: icon,\n [`${itemCls}-active`]: active,\n [`${itemCls}-disabled`]: disabled === true,\n [`${itemCls}-empty-header`]: !hasTitle && !hasSubTitle,\n },\n className,\n classNames.item,\n itemClassNames.root,\n );\n\n let iconNode = ;\n if (iconRender) {\n iconNode = iconRender(iconNode, {\n ...renderInfo,\n components: {\n Icon: StepIcon,\n },\n }) as React.ReactElement;\n }\n\n const wrapperNode = (\n \n {/* Icon */}\n \n {iconNode}\n \n\n \n \n {hasTitle && (\n \n {title}\n
\n )}\n {hasSubTitle && (\n \n {subTitle}\n \n )}\n\n {!last && (\n \n )}\n \n {hasContent(mergedContent) && (\n \n {mergedContent}\n \n )}\n \n \n );\n\n let stepNode: React.ReactNode = (\n \n {itemWrapperRender ? itemWrapperRender(wrapperNode) : wrapperNode}\n \n );\n\n if (itemRender) {\n stepNode = (itemRender(stepNode, renderInfo) || null) as React.ReactElement;\n }\n\n return stepNode;\n}\n" }, { "path": "src/StepIcon.tsx", "content": "import * as React from 'react';\nimport { clsx } from 'clsx';\nimport { StepsContext } from './Context';\nimport pickAttrs from '@rc-component/util/lib/pickAttrs';\n\nexport interface StepIconSemanticContextProps {\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const StepIconSemanticContext = React.createContext({});\n\nexport type StepIconProps = React.HTMLAttributes;\n\nconst StepIcon = React.forwardRef((props, ref) => {\n const { className, style, children, ...restProps } = props;\n\n const { prefixCls, classNames, styles } = React.useContext(StepsContext);\n const { className: itemClassName, style: itemStyle } = React.useContext(StepIconSemanticContext);\n\n const itemCls = `${prefixCls}-item`;\n\n return (\n \n {children}\n \n );\n});\n\nexport default StepIcon;\n" }, { "path": "src/Steps.tsx", "content": "/* eslint react/no-did-mount-set-state: 0, react/prop-types: 0 */\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport Step from './Step';\nimport { StepsContext, type StepsContextProps } from './Context';\nimport type StepIcon from './StepIcon';\n\nexport type Status = 'error' | 'process' | 'finish' | 'wait';\n\nconst EmptyObject = {};\n\nexport type SemanticName =\n | 'root'\n | 'item'\n | 'itemWrapper'\n | 'itemHeader'\n | 'itemTitle'\n | 'itemSubtitle'\n | 'itemSection'\n | 'itemContent'\n | 'itemIcon'\n | 'itemRail';\n\nexport type ItemSemanticName =\n | 'root'\n | 'wrapper'\n | 'header'\n | 'title'\n | 'subtitle'\n | 'section'\n | 'content'\n | 'icon'\n | 'rail';\n\nexport type ComponentType = React.ComponentType | string;\n\nexport type StepItem = {\n /** @deprecated Please use `content` instead. */\n description?: React.ReactNode;\n content?: React.ReactNode;\n disabled?: boolean;\n icon?: React.ReactNode;\n status?: Status;\n subTitle?: React.ReactNode;\n title?: React.ReactNode;\n classNames?: Partial>;\n styles?: Partial>;\n} & Pick, 'onClick' | 'className' | 'style'>;\n\nexport type StepIconRender = (info: {\n index: number;\n status: Status;\n title: React.ReactNode;\n // @deprecated Please use `content` instead.\n description: React.ReactNode;\n content: React.ReactNode;\n node: React.ReactNode;\n}) => React.ReactNode;\n\nexport type RenderInfo = {\n index: number;\n active: boolean;\n item: StepItem;\n};\n\nexport interface StepsProps {\n // style\n prefixCls?: string;\n style?: React.CSSProperties;\n className?: string;\n classNames?: Partial>;\n styles?: Partial>;\n rootClassName?: string;\n\n // layout\n orientation?: 'horizontal' | 'vertical';\n titlePlacement?: 'horizontal' | 'vertical';\n\n // a11y\n /** Internal usage of antd. Do not deps on this. */\n components?: {\n root?: ComponentType;\n item?: ComponentType;\n };\n\n // data\n status?: Status;\n current?: number;\n initial?: number;\n items?: StepItem[];\n onChange?: (current: number) => void;\n\n // render\n iconRender?: (\n originNode: React.ReactElement,\n info: RenderInfo & {\n components: {\n Icon: typeof StepIcon;\n };\n },\n ) => React.ReactNode;\n itemRender?: (originNode: React.ReactElement, info: RenderInfo) => React.ReactNode;\n itemWrapperRender?: (originNode: React.ReactElement) => React.ReactNode;\n}\n\nexport default function Steps(props: StepsProps) {\n const {\n // style\n prefixCls = 'rc-steps',\n style,\n className,\n classNames = EmptyObject as NonNullable,\n styles = EmptyObject as NonNullable,\n rootClassName,\n\n // layout\n orientation,\n titlePlacement,\n components,\n\n // data\n status = 'process',\n current = 0,\n initial = 0,\n onChange,\n items,\n\n // render\n iconRender,\n itemRender,\n itemWrapperRender,\n\n ...restProps\n } = props;\n\n // ============================= layout =============================\n const isVertical = orientation === 'vertical';\n const mergedOrientation = isVertical ? 'vertical' : 'horizontal';\n const mergeTitlePlacement =\n !isVertical && titlePlacement === 'vertical' ? 'vertical' : 'horizontal';\n\n // ============================= styles =============================\n const classString = clsx(\n prefixCls,\n `${prefixCls}-${mergedOrientation}`,\n `${prefixCls}-title-${mergeTitlePlacement}`,\n rootClassName,\n className,\n classNames.root,\n );\n\n // ============================== Data ==============================\n const mergedItems = React.useMemo(() => (items || []).filter(Boolean), [items]);\n const statuses = React.useMemo(\n () =>\n mergedItems.map(({ status: itemStatus }, index) => {\n const stepNumber = initial + index;\n\n if (!itemStatus) {\n if (stepNumber === current) {\n return status;\n } else if (stepNumber < current) {\n return 'finish';\n }\n return 'wait';\n }\n\n return itemStatus;\n }),\n [mergedItems, status, current, initial],\n );\n\n // ============================= events =============================\n const onStepClick = (next: number) => {\n if (onChange && current !== next) {\n onChange(next);\n }\n };\n\n // =========================== components ===========================\n const { root: RootComponent = 'div', item: ItemComponent = 'div' } = components || {};\n\n // ============================ contexts ============================\n const stepIconContext = React.useMemo(\n () => ({\n prefixCls,\n classNames,\n styles,\n ItemComponent,\n }),\n [prefixCls, classNames, styles, ItemComponent],\n );\n\n // ============================= render =============================\n const renderStep = (item: StepItem, index: number) => {\n const stepIndex = initial + index;\n\n const itemStatus = statuses[index];\n const nextStatus = statuses[index + 1];\n\n const data = {\n ...item,\n status: itemStatus,\n };\n\n return (\n \n );\n };\n\n return (\n \n \n {mergedItems.map(renderStep)}\n \n \n );\n}\n" }, { "path": "src/UnstableContext.ts", "content": "import * as React from 'react';\n\nexport interface UnstableContextProps {\n /**\n * Used for Timeline component `reverse` prop.\n * Safe to remove if refactor.\n */\n railFollowPrevStatus?: boolean;\n}\n\nexport const UnstableContext = React.createContext({});\n" }, { "path": "src/index.ts", "content": "import Steps, { type StepsProps } from './Steps';\nimport Step from './Step';\n\nexport { Step };\nexport type { StepsProps };\nexport { UnstableContext } from './UnstableContext';\nexport default Steps;\n" }, { "path": "src/interface.ts", "content": "\n" }, { "path": "tests/__snapshots__/index.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Steps components 1`] = `\n\n \n \n \n \n \n \n test\n \n \n \n \n \n\n`;\n\nexports[`Steps render renders correctly 1`] = `\n\n \n \n \n \n \n \n 已完成\n \n \n \n \n \n \n \n \n \n \n \n \n 进行中\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n\n`;\n\nexports[`Steps render renders current correctly 1`] = `\n\n \n \n \n \n \n \n 已完成\n \n \n \n \n \n \n \n \n \n \n \n \n 进行中\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n\n`;\n\nexports[`Steps render renders progressDot correctly 1`] = `\n\n \n \n \n \n \n \n 已完成\n \n \n \n \n \n \n \n \n \n \n \n \n 进行中\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n\n`;\n\nexports[`Steps render renders progressDot function correctly 1`] = `\n\n \n \n \n \n \n \n 已完成\n \n \n \n \n \n \n \n \n \n \n \n \n 进行中\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n\n`;\n\nexports[`Steps render renders status correctly 1`] = `\n\n \n \n \n \n \n \n 已完成\n \n \n \n \n \n \n \n \n \n \n \n \n 进行中\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n\n`;\n\nexports[`Steps render renders step with description 1`] = `\n\n \n \n \n \n \n \n 已完成\n \n \n \n \n xx\n \n \n \n \n \n \n \n \n \n \n 进行中\n \n \n \n \n xx\n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n xx\n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n xx\n \n \n \n \n\n`;\n\nexports[`Steps render renders step with description and status 1`] = `\n\n \n \n \n \n \n \n 已完成\n \n \n \n \n xx\n \n \n \n \n \n \n \n \n \n \n 进行中\n \n \n \n \n xx\n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n xx\n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n xx\n \n \n \n \n\n`;\n\nexports[`Steps render renders stepIcon function correctly 1`] = `\n\n \n \n \n \n \n \n 已完成\n \n \n \n \n \n \n \n \n \n \n \n \n 进行中\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n\n`;\n\nexports[`Steps render renders titlePlacement correctly 1`] = `\n\n \n \n \n \n \n \n 已完成\n \n \n \n \n \n \n \n \n \n \n \n \n 进行中\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n\n`;\n\nexports[`Steps render renders vertical correctly 1`] = `\n\n \n \n \n \n \n \n 已完成\n \n \n \n \n \n \n \n \n \n \n \n \n 进行中\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n \n\n`;\n\nexports[`Steps render renders with falsy children 1`] = `\n\n \n \n \n \n \n \n 已完成\n \n \n \n \n xx\n \n \n \n \n \n \n \n \n \n \n 进行中\n \n \n 剩余 00:00:07\n \n \n \n \n xx\n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n \n xx\n \n \n \n \n \n \n \n \n \n \n 待运行\n \n \n \n xx\n \n \n \n \n\n`;\n\nexports[`Steps should render customIcon correctly 1`] = `\n\n \n \n \n \n \n \n 步骤1\n \n \n \n \n \n \n \n \n \n \n \n \n 步骤2\n \n \n \n \n \n \n \n \n \n \n \n \n 步骤3\n \n \n \n \n \n\n`;\n" }, { "path": "tests/index.test.tsx", "content": "import React from 'react';\nimport { render, fireEvent } from '@testing-library/react';\nimport Steps from '../src';\n\ndescribe('Steps', () => {\n describe('render', () => {\n const description = 'xx';\n\n const setSteps = (props) => (\n \n );\n\n it('renders correctly', () => {\n const { container } = render(setSteps({}));\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('renders without items', () => {\n expect(() => {\n render(setSteps({ items: undefined }));\n }).not.toThrow();\n });\n\n it('renders current correctly', () => {\n const { container } = render(setSteps({ current: 2 }));\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('renders status correctly', () => {\n const { container } = render(setSteps({ current: 2, status: 'error' }));\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('renders vertical correctly', () => {\n const { container } = render(setSteps({ direction: 'vertical' }));\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('renders titlePlacement correctly', () => {\n const { container } = render(setSteps({ titlePlacement: 'vertical' }));\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('renders progressDot correctly', () => {\n const { container } = render(setSteps({ progressDot: true }));\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('renders progressDot function correctly', () => {\n const { container } = render(setSteps({ progressDot: () => a }));\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('renders stepIcon function correctly', () => {\n const { container } = render(setSteps({ stepIcon: () => a }));\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('renders step with description', () => {\n const { container } = render(\n ,\n );\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('renders step with description and status', () => {\n const { container } = render(\n ,\n );\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('renders with falsy children', () => {\n const { container } = render(\n ,\n );\n expect(container.firstChild).toMatchSnapshot();\n });\n });\n\n it('should render customIcon correctly', () => {\n const Icon = ({ type }) => ;\n const { container } = render(\n ,\n },\n {\n title: '步骤2',\n icon: 'apple',\n },\n {\n title: '步骤3',\n icon: 'github',\n },\n ]}\n />,\n );\n expect(container.firstChild).toMatchSnapshot();\n });\n\n it('onChange', () => {\n const onChange = jest.fn();\n const { container } = render(\n ,\n );\n const items = container.querySelectorAll('.rc-steps-item');\n fireEvent.click(items[1]);\n expect(onChange).toHaveBeenCalledTimes(1);\n });\n\n it('items out of render function', () => {\n const items = [\n {\n title: '已完成',\n },\n {\n title: '进行中',\n },\n ];\n\n let current = 0;\n const onChange = (val) => {\n current = val;\n };\n const { container, rerender } = render(\n ,\n );\n\n const step = container.querySelectorAll('.rc-steps-item')[1];\n fireEvent.click(step);\n rerender();\n expect(container.querySelectorAll('.rc-steps-item')[1].classList).toContain(\n 'rc-steps-item-process',\n );\n });\n\n it('onClick', () => {\n const onClick = jest.fn();\n const onChange = jest.fn();\n const { container } = render(\n ,\n );\n\n const btn = container.querySelectorAll('.rc-steps-item')[0];\n fireEvent.click(btn);\n expect(onClick).toHaveBeenCalled();\n });\n\n it('disabled', () => {\n const onChange = jest.fn();\n const { container } = render(\n ,\n );\n\n const items = container.querySelectorAll('.rc-steps-item');\n fireEvent.click(items[2]);\n expect(onChange).not.toBeCalled();\n });\n\n it('key board support', () => {\n const onChange = jest.fn();\n const { container } = render(\n ,\n );\n\n const button = container.querySelectorAll('[role=\"button\"]')[1];\n fireEvent.keyDown(button, { key: 'Enter', keyCode: 13, which: 13 });\n\n expect(onChange).toHaveBeenCalledWith(1);\n });\n\n it('itemRender', () => {\n const { container } = render(\n {\n return
{oriNode}
;\n }}\n />,\n );\n\n expect(container.querySelector('.bamboo')).toBeTruthy();\n expect(container.querySelectorAll('.bamboo')).toHaveLength(1);\n expect(container.querySelector('.rc-steps-item')).toBeTruthy();\n });\n\n it('itemWrapperRender', () => {\n const { container } = render(\n {\n return
{oriNode}
;\n }}\n />,\n );\n\n expect(container.querySelector('.bamboo')).toBeTruthy();\n expect(container.querySelectorAll('.bamboo')).toHaveLength(1);\n expect(container.querySelector('.rc-steps-item')).toBeTruthy();\n expect(container.querySelector('.rc-steps-item > .bamboo')).toBeTruthy();\n });\n\n it('iconRender', () => {\n const { container } = render(\n {\n return little;\n }}\n />,\n );\n\n const iconEle = container.querySelector('.rc-steps-item-icon')!;\n expect(iconEle).toHaveClass('bamboo');\n expect(iconEle.textContent).toBe('little');\n });\n\n it('components', () => {\n const { container } = render(\n ,\n );\n\n expect(container.firstChild).toMatchSnapshot();\n });\n});\n" }, { "path": "tests/semantic.test.tsx", "content": "import React from 'react';\nimport { render } from '@testing-library/react';\nimport Steps, { type StepsProps } from '../src';\nimport type { ItemSemanticName, SemanticName } from '../src/Steps';\n\ndescribe('Steps.Semantic', () => {\n const renderSteps = (props: Partial) => (\n ({\n title: `Step ${index + 1}`,\n subTitle: `SubTitle ${index + 1}`,\n content: `Content ${index + 1}`,\n }))}\n {...props}\n />\n );\n\n it('semantic structure', () => {\n const classNames: Record = {\n root: 'custom-root',\n item: 'custom-item',\n itemWrapper: 'custom-item-wrapper',\n itemIcon: 'custom-item-icon',\n itemSection: 'custom-item-section',\n itemHeader: 'custom-item-header',\n itemTitle: 'custom-item-title',\n itemSubtitle: 'custom-item-subtitle',\n itemContent: 'custom-item-content',\n itemRail: 'custom-item-rail',\n };\n\n const classNamesTargets: Record = {\n root: 'rc-steps',\n item: 'rc-steps-item',\n itemWrapper: 'rc-steps-item-wrapper',\n itemIcon: 'rc-steps-item-icon',\n itemSection: 'rc-steps-item-section',\n itemHeader: 'rc-steps-item-header',\n itemTitle: 'rc-steps-item-title',\n itemSubtitle: 'rc-steps-item-subtitle',\n itemContent: 'rc-steps-item-content',\n itemRail: 'rc-steps-item-rail',\n };\n\n const styles: Record> = {\n root: { color: 'red' },\n item: { color: 'blue' },\n itemWrapper: { color: 'green' },\n itemIcon: { color: 'yellow' },\n itemSection: { color: 'purple' },\n itemHeader: { color: 'orange' },\n itemTitle: { color: 'pink' },\n itemSubtitle: { color: 'cyan' },\n itemContent: { color: 'magenta' },\n itemRail: { color: 'lime' },\n };\n\n const { container } = render(\n renderSteps({\n classNames,\n styles,\n }),\n );\n\n Object.keys(classNames).forEach((key) => {\n const className = classNames[key as SemanticName];\n const oriClassName = classNamesTargets[key as SemanticName];\n const style = styles[key as SemanticName];\n\n const element = container.querySelector(`.${className}`);\n expect(element).toBeTruthy();\n expect(element).toHaveClass(oriClassName);\n expect(element).toHaveStyle(style);\n });\n });\n\n it('item semantic structure', () => {\n const classNames: Record = {\n root: 'custom-root',\n wrapper: 'custom-wrapper',\n header: 'custom-header',\n title: 'custom-title',\n subtitle: 'custom-subtitle',\n section: 'custom-section',\n content: 'custom-content',\n icon: 'custom-icon',\n rail: 'custom-rail',\n };\n\n const classNamesTargets: Record = {\n root: 'rc-steps-item',\n wrapper: 'rc-steps-item-wrapper',\n header: 'rc-steps-item-header',\n title: 'rc-steps-item-title',\n subtitle: 'rc-steps-item-subtitle',\n section: 'rc-steps-item-section',\n content: 'rc-steps-item-content',\n icon: 'rc-steps-item-icon',\n rail: 'rc-steps-item-rail',\n };\n\n const styles: Record> = {\n root: { color: 'red' },\n wrapper: { color: 'green' },\n header: { color: 'orange' },\n title: { color: 'pink' },\n subtitle: { color: 'cyan' },\n section: { color: 'purple' },\n content: { color: 'magenta' },\n icon: { color: 'yellow' },\n rail: { color: 'lime' },\n };\n\n const { container } = render(\n renderSteps({\n items: Array.from({ length: 2 }, (_, index) => ({\n title: `Title ${index + 1}`,\n subTitle: `SubTitle ${index + 1}`,\n content: `Content ${index + 1}`,\n classNames,\n styles,\n })),\n }),\n );\n\n Object.keys(classNames).forEach((key) => {\n const className = classNames[key as SemanticName];\n const oriClassName = classNamesTargets[key as SemanticName];\n const style = styles[key as SemanticName];\n\n const element = container.querySelector(`.${className}`);\n expect(element).toBeTruthy();\n expect(element).toHaveClass(oriClassName);\n expect(element).toHaveStyle(style);\n });\n });\n});\n" }, { "path": "tests/setup.js", "content": "global.requestAnimationFrame = global.requestAnimationFrame || function raf(cb) {\n return setTimeout(cb, 0);\n};\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"baseUrl\": \"./\",\n \"jsx\": \"preserve\",\n \"declaration\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"paths\": {\n \"@/*\": [\"src/*\"],\n \"@@/*\": [\"dumi/tmp/*\"],\n \"@rc-component/steps\": [\"src/index.ts\"]\n }\n }\n}" } ]