react-component / steps Goto Github PK
View Code? Open in Web Editor NEWReact Steps
Home Page: https://steps.vercel.app/
License: MIT License
React Steps
Home Page: https://steps.vercel.app/
License: MIT License
Since this package is CommonJS, we have to use RcSteps.default
in our code when importing to an ESM environment, but the types don't recognize this as being possible.
Having the following errors on console:
Uncaught Error: Cannot find module "prop-types"
你好,我很想请教一个问题,我单独安装Steps使用,拖动改变窗口大小时候,会报这样的错误:
Uncaught Invariant Violation: Element appears to be neither ReactComponent nor DOMNode
显示错误是在_resize函数里面的 const w = Math.floor(ReactDOM.findDOMNode(this).offsetWidth);
this显示为window对象而不是我们这个Steps对象, 所以findDOMNode不支持非ReactElement就报错了;但是在antd组件里面却没有错误,查看antd的steps组件和最终的export文件也看不出什么端倪,感觉没有做什么循序bind的事情。
Steps.jsx const $dom = ReactDOM.findDOMNode(this);这一行报的错误
The onChange event fires when you press Enter even if the step is disabled
Sometimes we need to go next/prev by clicking directly on step number from the process bar, It is good if we put onClick callback on click event of steps.
Btw thank you for this effort, It looks so good.
在组件上的 componentDidMount 打断点会清楚看到这个现象。
测试 Demo : http://codepen.io/clarkhan/pen/NNmZgx 其实和示例是一样的。
(ps:刚刚没编辑好一不小心回车了,囧……)
Demo site don't work. http://react-component.github.io/steps/)
If you tab to a clickable step and press Enter, nothing happens. Clicking with a mouse works though. The cause is likely the fact that instead of a button element, a div[role=button] is used. Those do not respond to keyboard interactions by default.
Hey guys!
I'm having the following error when rendering
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
This happens only when using
const Steps = require('rc-steps');
Instead of
import Steps from 'rc-steps';
The problem is that, because a limitation at my work, I can't use import. Is there any other workaround to make this module work with require?
Thanks in advance!
Hi there, is it possible to use a custom component to display in a step?
There is no styling included currently. In the README, was it suppose to mention adding the .less
files?
Hi @afc163
I'm new with React and am working on a project which uses your Steps component.
I have created a couple of components that act like pages of the Steps component and is using next and prev buttons to navigate between different pages(it's actually more like a Tab component). It all works great except the URL part. I've searched from GitHub and stackoverflow for hours but still, cannot figure out how to get it working with React Router.
Thank you!
除了内置的属性外没办法有额外的内容渲染,Step 组件期望支持 children 属性,API使用上可参考 AntDesign Tabs 组件
interface StepProps {
...
children?: React.ReactNode;
}
<Steps current={1}>
<Steps.Step title="first">
<div>内容 1</div>
</Steps.Step>
...
</Steps>
The default icon back color is blue #2db7f5
.
And the current props are :
Step.propTypes = {
className: _react.PropTypes.string,
prefixCls: _react.PropTypes.string,
style: _react.PropTypes.object,
wrapperStyle: _react.PropTypes.object,
tailWidth: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
status: _react.PropTypes.string,
iconPrefix: _react.PropTypes.string,
icon: _react.PropTypes.node,
adjustMarginRight: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
stepLast: _react.PropTypes.bool,
stepNumber: _react.PropTypes.string,
description: _react.PropTypes.any,
title: _react.PropTypes.any
};
No props seems related to icon color . Is it required enhancement or already exist ? Where is if it iswas existed .
When invoking the next button focus gets lost and on pressing tab it goes to the first option
Example - http://react-component.github.io/steps/?path=/story/rc-steps--nextstep.
Need to enable tab index first for keyboard navigation. ^^
warning.js?8a56:44 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component. warning @ warning.js?8a56:44getInternalInstanceReadyForUpdate @ ReactUpdateQueue.js?fd2c:45ReactUpdateQueue.enqueueSetState @ ReactUpdateQueue.js?fd2c:192ReactComponent.setState @ ReactComponent.js?702a:67(anonymous function) @ Steps.js?da93:51
React: 15.0.2; react-router: 2.4.0; webpack: 1.12.14.
I can't give too many specific details as this is not a personal project.
I can reproduce this by routing away from the page which embeds the step component, or by forcing a hot reload with webpack. My belief, as I've seen this sort of warning a few times, is that:
As far as I've read the code, you could solve it by guarding the call with a 'mounted' flag (which is set in the other lifecycle methods: willmount/willunmount) or simply setting state synchronously in componentDidUpdate (in fact, as far as I've seen, the state change will only be changed after the lifecycle method anyway). Cheers for the component.
两个tab 里面都有 steps 组件 ,然后切换两个tab ,程序会把两个tab的steps的margin-right都修改 导致样式错位 会重新计算另一个tab里面的steps组件的margin-right值
注释Steps.jsx这里的代码 即可解决:
componentDidUpdate() {
// this.calcLastStepOffsetWidth();
}
do not support rtl layouts.
It shouldn't be a dependency of the project, it should be up to the user figuring out how to run it. Any thoughts?
Can I show also text in the circle of the previous steps?
It is not showing the text(1,2) of previous steps.
The URL is referenced in the readme for examples but the site gives a 404. Did the path to the examples change?
React 18, Nextjs 12.3
import Steps from 'rc-steps';
import 'rc-steps/assets/index.css';
const { Step } = Steps;
const Tracking = () => {
const [current, setCurrent] = useState(0);
const onChange = (value) => {
console.log('onChange:', current);
setCurrent(value);
};
return (
<>
<Steps current={current} onChange={onChange}>
<Step title="Step 1" description="This is a description." />
<Step title="Step 2" description="This is a description." />
<Step title="Step 3" description="This is a description." />
</Steps>
<Steps current={current} onChange={onChange} direction="vertical">
<Step title="Step 1" description="This is a description." />
<Step title="Step 2" description="This is a description." />
<Step title="Step 3" description="This is a description." />
</Steps>
</>
);
}
How can I have some text showing up on the circle instead of having the check mark after step success?
Can't click the steps, so it's impossible to go back...
删了不太好,怕更新过头,直接install也连不上。
item 宽度的计算都在 didMount 中完成,如果改变了 step 的数量,step 还是维持在 mount 时的宽度,这会引起一些问题,比如原本是3个,后来变成5个的时候,因为宽度超长,样式就变形了
When I'm using Steps with only 1 Step this warning appear please check this condition
Hi,
I would like to know how to pass 'icons' props in . Actually when the status is finish or else is working fine. BUT when status= error, it has error on console and the icons is not correct ( I would like to use the old style as you have) as the screenshot.
I send icons props as icons="error" is this correct?
Thanks.
组件一开始被隐藏导致计算最后一个节点宽度为 0,后续展示后不触发 update,组件始终隐藏。
When I converted my .js file into .tsx.
It started giving me this error:
"Property 'Step' does not exist on type 'typeof Steps'."
Please help me figure out this issue.
Previously it was working fine with .js file. But as we're moving to TS and converting files, it is giving me this issue.
when you add a tailContent it just makes the tail-content div to be display: none, nothing happens. ... please help
Not sure if there was a breaking syntax change between versions 4 and 5 that is causing this, but I upgraded from 4.1.4 to 6.0.1 and it broke rc-steps in my project. The container div shows up but there is no content and css height is 0 px. I downgraded to 5.0.0 to see if that fixed anything and I got the same result. Downgrading again to 4.1.4 renders my steps implementation normally again.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.