Skip to content

Commit ca4fe7a

Browse files
zwightzwight
committed
fix(chat): update conversation component code style
1 parent 39294d1 commit ca4fe7a

File tree

15 files changed

+79
-81
lines changed

15 files changed

+79
-81
lines changed

‎src/chat/__tests__/__snapshots__/conversations.test.tsx.snap‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
exports[`Test Chat Conversations Match snapshot 1`] = `
44
<DocumentFragment>
55
<div
6-
class="dtc-conversations-wrapper dtc-conversations--collapsed"
6+
class="dtc__conversations__wrapper dtc__conversations--collapsed"
77
>
88
<ul
9-
class="dtc-conversations"
9+
class="dtc__conversations"
1010
/>
1111
</div>
1212
</DocumentFragment>
@@ -15,10 +15,10 @@ exports[`Test Chat Conversations Match snapshot 1`] = `
1515
exports[`Test Chat Conversations Match snapshot: collapsed 1`] = `
1616
<DocumentFragment>
1717
<div
18-
class="dtc-conversations-wrapper dtc-conversations--collapsed"
18+
class="dtc__conversations__wrapper dtc__conversations--collapsed"
1919
>
2020
<ul
21-
class="dtc-conversations"
21+
class="dtc__conversations"
2222
/>
2323
</div>
2424
</DocumentFragment>
@@ -27,14 +27,14 @@ exports[`Test Chat Conversations Match snapshot: collapsed 1`] = `
2727
exports[`Test Chat Conversations Match snapshot: groupable 1`] = `
2828
<DocumentFragment>
2929
<div
30-
class="dtc-conversations-wrapper dtc-conversations--collapsed"
30+
class="dtc__conversations__wrapper dtc__conversations--collapsed"
3131
>
3232
<ul
33-
class="dtc-conversations"
33+
class="dtc__conversations"
3434
>
3535
<li>
3636
<div
37-
class="dtc-conversations-title"
37+
class="dtc__conversations__title"
3838
>
3939
<div
4040
data-testid="ellipsisText"
@@ -43,13 +43,13 @@ exports[`Test Chat Conversations Match snapshot: groupable 1`] = `
4343
</div>
4444
</div>
4545
<ul
46-
class="dtc-conversations-list"
46+
class="dtc__conversations__list"
4747
>
4848
<div
49-
class="dtc-conversations-item"
49+
class="dtc__conversations__item"
5050
>
5151
<div
52-
class="dtc-conversations-item-title"
52+
class="dtc__conversations__item__title"
5353
>
5454
<div
5555
data-testid="ellipsisText"
@@ -62,7 +62,7 @@ exports[`Test Chat Conversations Match snapshot: groupable 1`] = `
6262
</li>
6363
<li>
6464
<div
65-
class="dtc-conversations-title"
65+
class="dtc__conversations__title"
6666
>
6767
<div
6868
data-testid="ellipsisText"
@@ -71,13 +71,13 @@ exports[`Test Chat Conversations Match snapshot: groupable 1`] = `
7171
</div>
7272
</div>
7373
<ul
74-
class="dtc-conversations-list"
74+
class="dtc__conversations__list"
7575
>
7676
<div
77-
class="dtc-conversations-item"
77+
class="dtc__conversations__item"
7878
>
7979
<div
80-
class="dtc-conversations-item-title"
80+
class="dtc__conversations__item__title"
8181
>
8282
<div
8383
data-testid="ellipsisText"
@@ -96,7 +96,7 @@ exports[`Test Chat Conversations Match snapshot: groupable 1`] = `
9696
exports[`Test Chat Conversations Match snapshot: handleCreateChat 1`] = `
9797
<DocumentFragment>
9898
<div
99-
class="dtc-conversations-wrapper dtc-conversations--collapsed"
99+
class="dtc__conversations__wrapper dtc__conversations--collapsed"
100100
>
101101
<button
102102
class="ant-btn ant-btn-default ant-btn-background-ghost dtc__aigc__button prompt-float-chat-add dtc__aigc__button--secondary"
@@ -113,7 +113,7 @@ exports[`Test Chat Conversations Match snapshot: handleCreateChat 1`] = `
113113
</span>
114114
</button>
115115
<ul
116-
class="dtc-conversations"
116+
class="dtc__conversations"
117117
/>
118118
</div>
119119
</DocumentFragment>
@@ -122,12 +122,12 @@ exports[`Test Chat Conversations Match snapshot: handleCreateChat 1`] = `
122122
exports[`Test Chat Conversations Match snapshot: loading 1`] = `
123123
<DocumentFragment>
124124
<div
125-
class="dtc-conversations-wrapper dtc-conversations--collapsed"
125+
class="dtc__conversations__wrapper dtc__conversations--collapsed"
126126
>
127127
<div
128128
aria-busy="true"
129129
aria-live="polite"
130-
class="ant-spin ant-spin-spinning dtc-conversations-spin-wrapper"
130+
class="ant-spin ant-spin-spinning dtc__conversations__spin__wrapper"
131131
>
132132
<span
133133
class="ant-spin-dot ant-spin-dot-spin"
@@ -153,16 +153,16 @@ exports[`Test Chat Conversations Match snapshot: loading 1`] = `
153153
exports[`Test Chat Conversations Match snapshot: normal 1`] = `
154154
<DocumentFragment>
155155
<div
156-
class="dtc-conversations-wrapper dtc-conversations--collapsed"
156+
class="dtc__conversations__wrapper dtc__conversations--collapsed"
157157
>
158158
<ul
159-
class="dtc-conversations"
159+
class="dtc__conversations"
160160
>
161161
<div
162-
class="dtc-conversations-item"
162+
class="dtc__conversations__item"
163163
>
164164
<div
165-
class="dtc-conversations-item-title"
165+
class="dtc__conversations__item__title"
166166
>
167167
<div
168168
data-testid="ellipsisText"
@@ -172,10 +172,10 @@ exports[`Test Chat Conversations Match snapshot: normal 1`] = `
172172
</div>
173173
</div>
174174
<div
175-
class="dtc-conversations-item"
175+
class="dtc__conversations__item"
176176
>
177177
<div
178-
class="dtc-conversations-item-title"
178+
class="dtc__conversations__item__title"
179179
>
180180
<div
181181
data-testid="ellipsisText"
@@ -192,10 +192,10 @@ exports[`Test Chat Conversations Match snapshot: normal 1`] = `
192192
exports[`Test Chat Conversations Match snapshot: select 1`] = `
193193
<DocumentFragment>
194194
<div
195-
class="dtc-conversations-wrapper dtc-conversations--collapsed"
195+
class="dtc__conversations__wrapper dtc__conversations--collapsed"
196196
>
197197
<ul
198-
class="dtc-conversations"
198+
class="dtc__conversations"
199199
/>
200200
</div>
201201
</DocumentFragment>

‎src/chat/__tests__/conversations.test.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -84,17 +84,17 @@ describe('Test Chat Conversations', () => {
8484
it('Should loading', () => {
8585
const { container } = render(<Conversations conversations={[]} loading />);
8686

87-
const ele = container.querySelector('.dtc-conversations-wrapper')?.children[0];
87+
const ele = container.querySelector('.dtc__conversations__wrapper')?.children[0];
8888
expect(ele).toBeInTheDocument();
89-
expect(ele?.className).toContain('dtc-conversations-spin-wrapper');
89+
expect(ele?.className).toContain('dtc__conversations__spin__wrapper');
9090
});
9191

9292
it('Should collapsed', () => {
9393
const { container } = render(<Conversations conversations={[]} collapsed />);
9494

95-
const ele = container.querySelector('.dtc-conversations-wrapper');
95+
const ele = container.querySelector('.dtc__conversations__wrapper');
9696
expect(ele).toBeInTheDocument();
97-
expect(ele?.className).toContain('dtc-conversations--collapsed');
97+
expect(ele?.className).toContain('dtc__conversations--collapsed');
9898
});
9999

100100
it('Should select item', () => {
@@ -103,17 +103,17 @@ describe('Test Chat Conversations', () => {
103103
<Conversations conversations={conversation} activeKey={conversation[0].id} />
104104
);
105105

106-
const ele = container.querySelector('.dtc-conversations-item');
106+
const ele = container.querySelector('.dtc__conversations__item');
107107
expect(ele).toBeInTheDocument();
108-
expect(ele?.className).toContain('dtc-conversations-item--active');
108+
expect(ele?.className).toContain('dtc__conversations__item--active');
109109
});
110110

111111
it('Should group list title', () => {
112112
const { container } = render(
113113
<Conversations conversations={generateConversation()} groupable />
114114
);
115115

116-
const ele = container.querySelectorAll('.dtc-conversations-title');
116+
const ele = container.querySelectorAll('.dtc__conversations__title');
117117
expect(ele).toHaveLength(2);
118118
});
119119

@@ -166,7 +166,7 @@ describe('Test Chat Conversations', () => {
166166
/>
167167
);
168168

169-
const nodeList = container.querySelectorAll<HTMLDivElement>('.dtc-conversations-item');
169+
const nodeList = container.querySelectorAll<HTMLDivElement>('.dtc__conversations__item');
170170
const ele = nodeList?.item(nodeList?.length - 1);
171171

172172
expect(onItemClick).not.toBeCalled();

‎src/chat/conversations/GroupTitle/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.dtc-conversations-title {
1+
.dtc__conversations__title {
22
color: #B1B4C5;
33
line-height: 20px;
44
font-size: 12px;

‎src/chat/conversations/GroupTitle/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { GroupTitleProps } from '../interface';
55
import './index.scss';
66

77
const GroupTitle: React.FC<GroupTitleProps> = (props) => {
8-
const { prefixCls = 'dtc-conversations' } = props;
8+
const { prefixCls = 'dtc__conversations' } = props;
99
return (
10-
<div className={`${prefixCls}-title`}>
10+
<div className={`${prefixCls}__title`}>
1111
{props.children && (
1212
<EllipsisText
1313
value={props.children}

‎src/chat/conversations/Item/index.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.dtc-conversations-item {
1+
.dtc__conversations__item {
22
display: flex;
33
align-items: center;
44
justify-content: center;
@@ -8,17 +8,17 @@
88
border-radius: 4px;
99
cursor: pointer;
1010
color: #3D446E;
11-
&-title {
11+
&__title {
1212
flex: 1;
1313
overflow: hidden;
1414
}
1515
&:hover {
1616
background-color: #EBECF0;
17-
.dtc-conversations-menu-icon {
17+
.dtc__conversations__menu__icon {
1818
display: block;
1919
}
2020
}
21-
.dtc-conversations-menu-icon {
21+
.dtc__conversations__menu__icon {
2222
display: none;
2323
}
2424
&--active, &--active:hover {

‎src/chat/conversations/Item/index.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ import EllipsisText from '../../../ellipsisText';
77
import { ConversationInfo, ConversationsItemProps } from '../interface';
88
import './index.scss';
99

10+
const prefixCls = 'dtc__conversations';
1011
const Item: React.FC<ConversationsItemProps> = (props) => {
11-
const { info, active, prefixCls, dropdown, onClick } = props;
12+
const { info, active, dropdown, onClick } = props;
1213

1314
const { disabled } = info;
1415
const { triggerDom } = dropdown || {};
@@ -22,7 +23,7 @@ const Item: React.FC<ConversationsItemProps> = (props) => {
2223
};
2324
const renderMenuTrigger = (conversation: ConversationInfo) => {
2425
const originTriggerNode = (
25-
<MoreOutlined onClick={stopPropagation} className={`${prefixCls}-menu-icon`} />
26+
<MoreOutlined onClick={stopPropagation} className={`${prefixCls}__menu__icon`} />
2627
);
2728
if (triggerDom) {
2829
return typeof triggerDom === 'function'
@@ -34,14 +35,14 @@ const Item: React.FC<ConversationsItemProps> = (props) => {
3435
return (
3536
<div
3637
className={classNames(
37-
`${prefixCls}-item`,
38-
active && !disabled && `${prefixCls}-item--active`,
39-
disabled && `${prefixCls}-item--disabled`
38+
`${prefixCls}__item`,
39+
active && !disabled && `${prefixCls}__item--active`,
40+
disabled && `${prefixCls}__item--disabled`
4041
)}
4142
onClick={handleClick}
4243
>
43-
{info.icon && <div className={`${prefixCls}-item-icon`}>{info.icon}</div>}
44-
<div className={`${prefixCls}-item-title`}>
44+
{info.icon && <div className={`${prefixCls}__item__icon`}>{info.icon}</div>}
45+
<div className={`${prefixCls}__item__title`}>
4546
<EllipsisText
4647
watchParentSizeChange
4748
value={info.title}

‎src/chat/conversations/groupTitle/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.dtc-conversations-title {
1+
.dtc__conversations__title {
22
color: #B1B4C5;
33
line-height: 20px;
44
font-size: 12px;

‎src/chat/conversations/groupTitle/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { GroupTitleProps } from '../interface';
55
import './index.scss';
66

77
const GroupTitle: React.FC<GroupTitleProps> = (props) => {
8-
const { prefixCls = 'dtc-conversations' } = props;
8+
const { prefixCls = 'dtc__conversations' } = props;
99
return (
10-
<div className={`${prefixCls}-title`}>
10+
<div className={`${prefixCls}__title`}>
1111
{props.children && (
1212
<EllipsisText
1313
value={props.children}

‎src/chat/conversations/index.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.dtc-conversations {
1+
.dtc__conversations {
22
width: 100%;
33
height: 100%;
44
display: flex;
@@ -12,18 +12,18 @@
1212
&--empty {
1313
margin-top: 50%;
1414
}
15-
&-list {
15+
&__list {
1616
display: flex;
1717
flex-direction: column;
1818
gap: 4px;
1919
}
20-
&-spin-wrapper {
20+
&__spin__wrapper {
2121
width: 100%;
2222
display: flex;
2323
justify-content: center;
2424
margin: 40px 0;
2525
}
26-
&-wrapper {
26+
&__wrapper {
2727
display: flex;
2828
flex-direction: column;
2929
width: 0;

0 commit comments

Comments
 (0)