Skip to content

Commit b9a2a0e

Browse files
zombieJclaude
zombieJ
and
claude
committed
refactor: replace content with description and add title/icon props
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 1be087c commit b9a2a0e

File tree

12 files changed

+102
-78
lines changed

12 files changed

+102
-78
lines changed

‎assets/index.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,12 @@
5656
width: 300px;
5757
}
5858

59-
// Content
60-
&-content {
59+
// Section
60+
&-section {
6161
padding: 7px 20px 7px 10px;
6262
}
6363

64-
&-closable &-content {
64+
&-closable &-section {
6565
padding-right: 20px;
6666
}
6767

‎docs/examples/NotificationList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const Demo = () => {
2323
(key: number): NotificationListConfig => ({
2424
key,
2525
duration: false,
26-
content: `Config ${key + 1}`,
26+
description: `Config ${key + 1}`,
2727
}),
2828
[],
2929
);

‎docs/examples/context.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import motion from './motion';
77
const Context = React.createContext({ name: 'light' });
88

99
const NOTICE = {
10-
content: <span>simple show</span>,
10+
description: <span>simple show</span>,
1111
onClose() {
1212
console.log('simple close');
1313
},
@@ -24,7 +24,7 @@ const Demo = () => {
2424
onClick={() => {
2525
open({
2626
...NOTICE,
27-
content: <Context.Consumer>{({ name }) => `Hi ${name}!`}</Context.Consumer>,
27+
description: <Context.Consumer>{({ name }) => `Hi ${name}!`}</Context.Consumer>,
2828
props: {
2929
'data-testid': 'my-data-testid',
3030
},

‎docs/examples/hooks.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const App = () => {
3232
type="button"
3333
onClick={() => {
3434
notice.open({
35-
content: `${new Date().toISOString()}`,
35+
description: `${new Date().toISOString()}`,
3636
});
3737
}}
3838
>
@@ -44,7 +44,7 @@ const App = () => {
4444
type="button"
4545
onClick={() => {
4646
notice.open({
47-
content: `${Array(Math.round(Math.random() * 5) + 1)
47+
description: `${Array(Math.round(Math.random() * 5) + 1)
4848
.fill(1)
4949
.map(() => new Date().toISOString())
5050
.join('\n')}`,
@@ -60,7 +60,7 @@ const App = () => {
6060
type="button"
6161
onClick={() => {
6262
notice.open({
63-
content: `${Array(5)
63+
description: `${Array(5)
6464
.fill(1)
6565
.map(() => new Date().toISOString())
6666
.join('\n')}`,
@@ -78,7 +78,7 @@ const App = () => {
7878
type="button"
7979
onClick={() => {
8080
notice.open({
81-
content: `No Close! ${new Date().toISOString()}`,
81+
description: `No Close! ${new Date().toISOString()}`,
8282
duration: null,
8383
closable: false,
8484
key: 'No Close',

‎docs/examples/maxCount.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default () => {
1212
<button
1313
onClick={() => {
1414
notice.open({
15-
content: `${new Date().toISOString()}`,
15+
description: `${new Date().toISOString()}`,
1616
});
1717
}}
1818
>

‎docs/examples/showProgress.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default () => {
1212
<button
1313
onClick={() => {
1414
notice.open({
15-
content: `${new Date().toISOString()}`,
15+
description: `${new Date().toISOString()}`,
1616
});
1717
}}
1818
>
@@ -21,7 +21,7 @@ export default () => {
2121
<button
2222
onClick={() => {
2323
notice.open({
24-
content: `${new Date().toISOString()}`,
24+
description: `${new Date().toISOString()}`,
2525
pauseOnHover: false,
2626
});
2727
}}

‎docs/examples/stack.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import motion from './motion';
77
const Context = React.createContext({ name: 'light' });
88

99
const getConfig = () => ({
10-
content: `${Array(Math.round(Math.random() * 5) + 1)
10+
description: `${Array(Math.round(Math.random() * 5) + 1)
1111
.fill(1)
1212
.map(() => new Date().toISOString())
1313
.join('\n')}`,

‎src/Notification.tsx‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,17 @@ import useClosable, { type ClosableType } from './hooks/useClosable';
77
export interface NotificationClassNames {
88
wrapper?: string;
99
root?: string;
10-
content?: string;
10+
icon?: string;
11+
section?: string;
1112
close?: string;
1213
progress?: string;
1314
}
1415

1516
export interface NotificationStyles {
1617
wrapper?: React.CSSProperties;
1718
root?: React.CSSProperties;
18-
content?: React.CSSProperties;
19+
icon?: React.CSSProperties;
20+
section?: React.CSSProperties;
1921
close?: React.CSSProperties;
2022
progress?: React.CSSProperties;
2123
}
@@ -29,7 +31,9 @@ export interface NotificationProps {
2931
styles?: NotificationStyles;
3032

3133
// UI
32-
content?: React.ReactNode;
34+
title?: React.ReactNode;
35+
description?: React.ReactNode;
36+
icon?: React.ReactNode;
3337
actions?: React.ReactNode;
3438
closable?: ClosableType;
3539
offset?: {
@@ -63,7 +67,9 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
6367
styles,
6468

6569
// UI
66-
content,
70+
title,
71+
description,
72+
icon,
6773
actions,
6874
closable,
6975
offset,
@@ -166,11 +172,24 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
166172
onMouseEnter={onInternalMouseEnter}
167173
onMouseLeave={onInternalMouseLeave}
168174
>
169-
<div
170-
className={clsx(`${noticePrefixCls}-content`, classNames?.content)}
171-
style={styles?.content}
172-
>
173-
{content}
175+
<div className={classNames?.wrapper} style={styles?.wrapper}>
176+
{icon && (
177+
<div className={clsx(`${noticePrefixCls}-icon`, classNames?.icon)} style={styles?.icon}>
178+
{icon}
179+
</div>
180+
)}
181+
182+
<div
183+
className={clsx(`${noticePrefixCls}-section`, classNames?.section)}
184+
style={styles?.section}
185+
>
186+
{title !== undefined && title !== null && (
187+
<div className={`${noticePrefixCls}-title`}>{title}</div>
188+
)}
189+
{description !== undefined && description !== null && (
190+
<div className={`${noticePrefixCls}-description`}>{description}</div>
191+
)}
192+
</div>
174193
</div>
175194

176195
{mergedClosable && (

‎src/NotificationList.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,8 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
191191
style={config.style}
192192
classNames={{
193193
root: clsx(classNames?.root, config.classNames?.root),
194-
content: clsx(classNames?.content, config.classNames?.content),
194+
icon: clsx(classNames?.icon, config.classNames?.icon),
195+
section: clsx(classNames?.section, config.classNames?.section),
195196
close: clsx(classNames?.close, config.classNames?.close),
196197
progress: clsx(classNames?.progress, config.classNames?.progress),
197198
}}
@@ -200,9 +201,13 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
200201
...styles?.root,
201202
...config.styles?.root,
202203
},
203-
content: {
204-
...styles?.content,
205-
...config.styles?.content,
204+
icon: {
205+
...styles?.icon,
206+
...config.styles?.icon,
207+
},
208+
section: {
209+
...styles?.section,
210+
...config.styles?.section,
206211
},
207212
close: {
208213
...styles?.close,

‎tests/hooks.test.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ describe('Notification.Hooks', () => {
4141
onClick={() => {
4242
api.open({
4343
duration: 0.1,
44-
content: (
44+
description: (
4545
<Context.Consumer>
4646
{({ name }) => <div className="context-content">{name}</div>}
4747
</Context.Consumer>
@@ -78,14 +78,14 @@ describe('Notification.Hooks', () => {
7878
api.open({
7979
key: 'little',
8080
duration: 1000,
81-
content: <div className="context-content">light</div>,
81+
description: <div className="context-content">light</div>,
8282
});
8383

8484
setTimeout(() => {
8585
api.open({
8686
key: 'little',
8787
duration: 1000,
88-
content: <div className="context-content">bamboo</div>,
88+
description: <div className="context-content">bamboo</div>,
8989
});
9090
}, 500);
9191
}}
@@ -115,7 +115,7 @@ describe('Notification.Hooks', () => {
115115

116116
act(() => {
117117
instance.open({
118-
content: <div className="bamboo" />,
118+
description: <div className="bamboo" />,
119119
});
120120
});
121121

@@ -129,7 +129,7 @@ describe('Notification.Hooks', () => {
129129
// Can be override
130130
act(() => {
131131
instance.open({
132-
content: <div className="little" />,
132+
description: <div className="little" />,
133133
duration: 1,
134134
});
135135
});
@@ -142,7 +142,7 @@ describe('Notification.Hooks', () => {
142142
// Can be undefined
143143
act(() => {
144144
instance.open({
145-
content: <div className="light" />,
145+
description: <div className="light" />,
146146
duration: undefined,
147147
});
148148
});
@@ -171,7 +171,7 @@ describe('Notification.Hooks', () => {
171171

172172
act(() => {
173173
instance.open({
174-
content: <div className="bamboo" />,
174+
description: <div className="bamboo" />,
175175
style: { color: 'red' },
176176
className: 'custom-notice',
177177
});
@@ -191,7 +191,7 @@ describe('Notification.Hooks', () => {
191191

192192
act(() => {
193193
instance.open({
194-
content: <div className="bamboo" />,
194+
description: <div className="bamboo" />,
195195
duration: 0,
196196
closable: true,
197197
classNames: {
@@ -212,7 +212,7 @@ describe('Notification.Hooks', () => {
212212

213213
act(() => {
214214
instance.open({
215-
content: <div className="bamboo" />,
215+
description: <div className="bamboo" />,
216216
duration: 0,
217217
});
218218
});

0 commit comments

Comments
 (0)