react-component / notification Goto Github PK
View Code? Open in Web Editor NEWReact Notification
Home Page: https://notification-react-component.vercel.app/
License: MIT License
React Notification
Home Page: https://notification-react-component.vercel.app/
License: MIT License
纯粹感叹一下,自己关闭issue
Reproduction link
https://codesandbox.io/s/tishichaoguozuidaxianshishuwufaguanbi-ant-design-demo-forked-l3mc5?file=/index.js
Steps to reproduce
点击三下button, 最后一个message,无法手动删除。
What is expected?
message超过上限后,新增的message应该也能删除。
What is actually happening?
code: src/Notification.tsx 107 line
notice.key = updatedNotices[0].notice.key;
导致new message key变成old message key,无法手动关闭
const key = notice.key = notice.key || getUuid();
假如 key = getUuid()
这不是可以一直不重复吗?这样做的意义什么呢?,
就算有maxCount 的限制也只需要删掉最前面的一个就可以了,这样做的目的是为了什么,性能问题么?
小白请教下
Notification.newInstance({}, notification => {
notification.notice({
content: 'content',
closable: true,
duration: 50,
closeIcon: <div>X</div>
});
});
只看到有dom 结构 看不到 closeIcon 生效
I want to be able to show the last added notification on top of old ones.
想了解实现原理
I wonder to change the background color of notification.
notification.notice({
content:
<div className="bg-info">
<span>添加成功!</span>
</div>,
closable: true,
duration: 3.5,
});
But have not change the nofitication, ugly, is not it?
Can you support some props to change the background of .rc-notification-notice
.rc-notification-notice {
padding: 7px 20px 7px 10px;
border-radius: 3px 3px;
border: 1px solid #999;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: 0px solid rgba(0, 0, 0, 0);
background: #fff;
display: block;
width: auto;
line-height: 1.5;
vertical-align: middle;
position: relative;
margin: 10px 0;
}
nine out often trigger
为了能在普通 JavaScript 函数中调用 <Notification ref={ref} />
组件实例的方法,目前是通过 class component
的 ref callback
机制实现的,但因为依赖异步回调,导致上层 API 的使用也深受回调影响,如果可以通过某种方式同步获得组件的控制权,那么在 API 使用和封装上会变得优雅很多:
const instance = Notification.newInstance();
const key = instance.add({title: 'xxx'}); // 可以同步返回 key
instance.remove(key);
我们可以通过 useImperativeHandle hook 结合 ref 转发来实现此需求。
const Notification = React.forwardRef((props, ref) => {
const [notices, setNotices] = useState([]);
const add = notice => {
// add notice
};
const remove = key => {
// remove notice
};
// expose add & remove methods
useImperativeHandle(ref, () => ({
add,
remove,
}));
return (
<div>{noticeNodes}</div>
);
});
Notification.newInstance = function newNotificationInstance(properties) {
const ref = React.createRef();
// append container stuff....
ReactDOM.render(<ToastHub {...props} ref={ref} />, div);
return {
notice: noticeProps => ref.current.add(noticeProps),
removeNotice: key => ref.current.remove(key),
component: ref.current,
destroy() {
ReactDOM.unmountComponentAtNode(div);
div.parentNode.removeChild(div);
},
};
}
Show notification
When close button has keyboard focus, pressing Enter on the keyboard should close the notification.
When close button has keyboard focus, pressing Enter on the keyboard does not close the notification.
Environment | Info |
---|---|
rc-notification | 4.6.0 |
React | 18 |
System | ALL |
Browser | ALL |
Ref: UIEN-1752
Expect one style to take effect (notice-wrapper or notice).
Both notice-wrapper and notice are taking effect.
Environment | Info |
---|---|
antd | 5.10.2 |
React | any |
System | any |
Browser | any |
If you change the padding to another style, such as rotation, the styles will be even more disordered.
Problem identification result:
There is a conflict between configStyle at line 139 (outer) and config at line 147 (inner) in notification/src/NoticeList.tsx in the rc-notification package.
Solution approach:
Remove ...configStyle in the outer part and keep the setting of configClassName consistent, both passed to Notice.
Bind the style and className from config to the outer part.
If you have a better idea, please @ me. I am willing to participate in the discussion of this issue and create a fix PR.
Good day,
I've some idea for the notification component and the user case as below.
As a user I want to keep the notification layer on my screen when the mouse over it, because the information is too long, I cannot get all the information before the notification layer gone. if I can stop the timer then I can keep the notification dialog there for lang time. I think is would be very helpful.
Can add this function to next release and also add a config item to disable/enable this feature? thanks.
Guessing this library doesn't support SSR?
Unhandled Rejection at: Promise {
<rejected> ReferenceError: document is not defined
at Function.newNotificationInstance [as newInstance] (/Users/Dave/Projects/deedmob/client/node_modules/rc-notification/lib/Notification.js:176:13)
at getNotificationInstance (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:96:33)
at Object.notice [as open] (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:128:5)
at Object.api.(anonymous function) [as success] (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:178:20)
at /Users/Dave/Projects/deedmob/client/build/webpack:/src/helpers/responseHandler.js:58:18
at <anonymous>
at process._tickDomainCallback (internal/process/next_tick.js:228:7) } reason: ReferenceError: document is not defined
at Function.newNotificationInstance [as newInstance] (/Users/Dave/Projects/deedmob/client/node_modules/rc-notification/lib/Notification.js:176:13)
at getNotificationInstance (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:96:33)
at Object.notice [as open] (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:128:5)
at Object.api.(anonymous function) [as success] (/Users/Dave/Projects/deedmob/client/node_modules/antd/lib/notification/index.js:178:20)
at /Users/Dave/Projects/deedmob/client/build/webpack:/src/helpers/responseHandler.js:58:18
at <anonymous>
at process._tickDomainCallback (internal/process/next_tick.js:228:7)
rc-notification will be yours. Oh yes, rc-notification will be yours.
version used : "rc-notification": "3.3.0",
i am trying to use my own close icon but its not working i have tried with svg also
Notification.newInstance({}, notification => {
notification.notice({
content: 'content',
closable: true,
duration: 50,
closeIcon: <div>X</div>
});
});
Problem
Screen** readers are unable to perceive the notifications.
Proposal
Would you be open to an MR that adds to aria-live="assertive" aria-atomic="true"
to the Notice
?
Outcome
The effect would be that when a notification is rendered, the message in the notification would be read by screen readers.
recurrent
notification appear repeatedly
contextHolder
,很是麻烦,且不知是否有冲突。因以上2点问题,我想问下有没有办法在根页面添加一次contextHolder
后,其他页面直接调用通知就可以了?
Hello,
I don't understand why I've got this error.
I do a notification.open()
in a componentDidUpdate
.
It works outside, but inside the componentDidUpdate
, I've got this error.
I've did this to debug:
console.log(Notification, 'Notification')
console.log(props, 'props')
console.log(div, 'props')
var notification = ReactDOM.render(React.createElement(Notification, props), div);
console.log(notification) // it's null here
Notification returns something, props too, and div is existing. However notification is null
here. Is it a problem with "react": "16.1.1"
?
I really do not understand the bug. Mostly that it works if I open a notification via handleClick
for instance. But not in didUpdate.
Currently, when closable is true, a close button is displayed.
Some users complain because it is somehow tedious to click on a small button and would prefer to click anywhere in the toast to close it.
Most of notifications libraries allow it, see eg https://github.com/fkhadra/react-toastify
Can I display a mask, while notication is show?
I need to utilize context in content of Notification.
Can i retain the root component's context while using this component?
We antd version 2.9.0 for a while in the development and when we will send it to pre stage our deployment was failed with error:
npm ERR! fetch failed https://registry.npmjs.org/rc-notification/-/rc-notification-1.4.5.tgz
npm ERR! fetch failed with status code 404
this is because the stack mode adds :after
to the dom
Right now, I have to add z-index
to .rc-notification .rc-notification-notice-close
,
The documentation states that closeIcon
can be used to notification.notice()
. Infact, it's overridden by newInstance()
props:
https://github.com/react-component/notification/blob/3.3.1/src/Notification.jsx#L95
As you know, React 18 introduces a new root API which provides better ergonomics for managing roots.
ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
How to use current library without above warning?
In view of this, I want to submit a PR, but I don't know if I need to do a major version update for this situation (eg: limit React
in peerDependencies
to be greater than 18)? Or do not update the major version, just in the source code Can a React version be judged to be compatible?
我尝试解决提PR, 采用了一个兼容修复这个警告的方法, 但是发现替换之后, 渲染执行的顺序跟以前不一样了.
背景: 源码中提供了2个示例(hooks和simple), 分别会先在开始去注册示例, 以hooks为例
ReactDOM.render
时候, 渲染顺序如下:
可以看到, hooks示例中组件Demo在最后才开始渲染, 此时 instance
已经准备好了, 没有问题.
React 17 createRoot...render()
时候, 渲染顺序如下:
可以看到, 组件Demo并没有到最后才渲染, 渲染的时候 instance
还是null
, 导致通过hooks的方式使用时, 会无法使用.
实在没找到好的解决方案和思路, 为了更好的表达, 我提交了一个 Draft PR
#193 , 期待大家参与讨论
更新: 通过对比发现, 可能是Dumi的问题, 参见: umijs/dumi#1071
现在很难更改Notification的样式
因为一些特殊的场景需要,需要能够像其他组件一样能够自定义 notification 的容器~
<Notifications anim='fade' >
<Notification aim='zoom'>
<p></p>
</Notification>
</Notifications>
参考 http://react-component.github.io/css-transition-group/build/examples/alert.html
2. 定位
<Notification align='cc'>
The cause is the use of ReactDOM.render return value, that is an obsolete feature (also in React 15).
We should use ref instead.
This library causes the test-suite to fail. It is probably due to the jsdom
environment, which does not allow by default executing scripts like document.createElement()
.
See https://github.com/jsdom/jsdom#executing-scripts for more information.
The rc-notification
being a peer dependency of antd: ^3.0.0
in my case.
Stacktrace:
node node_modules/react-scripts-ts/scripts/test.js --runInBand --env=jsdom
node_modules/react-scripts-ts/scripts/test.js:22
throw err;
^
TypeError: Cannot read property 'createElement' of undefined
at Function.newNotificationInstance [as newInstance] (node_modules/antd/node_modules/rc-notification/lib/Notification.js:180:20)
at getMessageInstance (node_modules/antd/lib/message/index.js:34:33)
at notice (node_modules/antd/lib/message/index.js:65:5)
at Object.error (node_modules/antd/lib/message/index.js:97:16)
at src/components/form/input/CustomSelect.tsx:30:20
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:160:7)
Process finished with exit code 1
hover Toast 会清除定时器,希望增加 props 可控。
Line 113 in af67623
Our component library has been using rc-notification, and closing the notification started to not work since release v4.5.0. To be more specific, removeNotice method gets called, and I see that the notices array in the React state of rc-notification module removes the correct item. However, the state change does not get reflected in the UI, and the notification does not disappear from the screen.
Expected behavior:
Current behavior:
notification.notice 的 style 默认值是 right: "50%"
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.