Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change react-sticky dependency (contains deprecated code) #24775

Closed
1 task done
albertms10 opened this issue Jun 5, 2020 · 4 comments · Fixed by #39898
Closed
1 task done

Change react-sticky dependency (contains deprecated code) #24775

albertms10 opened this issue Jun 5, 2020 · 4 comments · Fixed by #39898
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. Inactive

Comments

@albertms10
Copy link
Contributor

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

When using react-sticky’s components, a warning is thrown with the following message:

Warning: componentWillMount has been renamed, and is not recommended for use.
See https://fb.me/react-unsafe-component-lifecycles for details.
…
Please update the following components: Sticky

Knowing the component hasn’t been updated in 2 years, it may be a good decision to move forward and use another similar package.

What does the proposed API look like?

A similar dependency that has been updated is react-stickynode and works similarly, without any warning.

However, if a Tabs component is placed inside it, it won’t show its ink bar (as happened in Ant Design v4.3.0 with react-sticky).
If you try to replace it with the native Affix component, it behaves the same (no ink bar).

Please, consider updating the Sticky-related dependency or just fix the Tab usage inside an Affix component (to achieve the same result natively).

@afc163 afc163 added the help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. label Jun 6, 2020
@ant-design-bot
Copy link
Contributor

Hello @albertms10. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @albertms10, 我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献!

giphy

@afc163
Copy link
Member

afc163 commented Jan 4, 2021

@bralemili @albertms10 Could you help to update demo?

@bralemili
Copy link

bralemili commented Jan 4, 2021

I used react-stickynode in this example and it does not fix the problem mentioned in #28646
I will gladly updated the demo once we have a working solution @afc163

@aashayamballi
Copy link

aashayamballi commented Oct 3, 2022

In our case we're using one div to fix at the top using affix and we're using react-stickynode to stack the tab header to div sticky component when scrolled. with react-stickynode the Tab bar is adding extra padding at the bottom as well and we're uanble to make it work, @afc163 or @bralemili do you have any solutions for this?

https://codesandbox.io/s/modest-mendeleev-c7i3hz?file=/src/App.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. Inactive
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants