Skip to content

Commit 87a2862

Browse files
teodosiahteodosiah
committed
refactor(chat): remove the expansion panel usage as default attachment template
1 parent 0ca9772 commit 87a2862

File tree

2 files changed

+92
-109
lines changed

2 files changed

+92
-109
lines changed

‎src/components/chat/chat.spec.ts‎

Lines changed: 45 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -629,65 +629,55 @@ describe('Chat', () => {
629629
if (index === 0) {
630630
expect(attachments).shadowDom.to.equal(
631631
`<div part="attachments-container">
632-
<igc-expansion-panel indicator-position="none" open="">
633-
<div part="attachment" slot="title">
634-
<div part="details">
635-
<slot name="attachment-icon">
636-
<igc-icon
637-
part="attachment-icon"
638-
collection="material"
639-
name="image"
640-
>
641-
</igc-icon>
642-
</slot>
643-
<slot name="attachment-name">
644-
<span part="file-name">
645-
img1.png
646-
</span>
647-
</slot>
648-
</div>
649-
<div part="actions">
650-
</div>
651-
</div>
652-
<slot name="attachment-content">
653-
<img
654-
alt="img1.png"
655-
part="image-attachment"
656-
src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
657-
>
658-
</slot>
659-
</igc-expansion-panel>
660-
</div>`
632+
<div part="attachment">
633+
<div part="attachment-header" role="button">
634+
<div part="details">
635+
<igc-icon
636+
part="attachment-icon"
637+
collection="material"
638+
name="image"
639+
>
640+
</igc-icon>
641+
<span part="file-name">
642+
img1.png
643+
</span>
644+
</div>
645+
<div part="actions">
646+
</div>
647+
</div>
648+
<div part="attachment-content">
649+
<img
650+
alt="img1.png"
651+
part="image-attachment"
652+
src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
653+
>
654+
</div>
655+
</div>
656+
</div>`
661657
);
662658
}
663659
// Check if non-image attachments are rendered correctly
664660
if (index === 1) {
665661
expect(attachments).shadowDom.to.equal(
666662
`<div part="attachments-container">
667-
<igc-expansion-panel indicator-position="none">
668-
<div part="attachment" slot="title">
669-
<div part="details">
670-
<slot name="attachment-icon">
671-
<igc-icon
672-
part="attachment-icon"
673-
collection="material"
674-
name="file"
675-
>
676-
</igc-icon>
677-
</slot>
678-
<slot name="attachment-name">
679-
<span part="file-name">
680-
img2.png
681-
</span>
682-
</slot>
683-
</div>
684-
<div part="actions">
685-
</div>
686-
</div>
687-
<slot name="attachment-content">
688-
</slot>
689-
</igc-expansion-panel>
690-
</div>`
663+
<div part="attachment">
664+
<div part="attachment-header" role="button">
665+
<div part="details">
666+
<igc-icon
667+
part="attachment-icon"
668+
collection="material"
669+
name="file"
670+
>
671+
</igc-icon>
672+
<span part="file-name">
673+
img2.png
674+
</span>
675+
</div>
676+
<div part="actions">
677+
</div>
678+
</div>
679+
</div>
680+
</div>`
691681
);
692682
}
693683
});
@@ -1303,8 +1293,8 @@ describe('Chat', () => {
13031293

13041294
const attachmentHeader = messageElement?.shadowRoot
13051295
?.querySelector('igc-message-attachments')
1306-
?.shadowRoot?.querySelector('igc-expansion-panel')
1307-
?.shadowRoot?.querySelector(`div[part='header']`) as HTMLElement;
1296+
?.shadowRoot?.querySelector(`div[part='attachment']`)
1297+
?.querySelector(`div[part='attachment-header']`) as HTMLElement;
13081298

13091299
simulateClick(attachmentHeader);
13101300
expect(eventSpy).calledWith('igcAttachmentClick', {

‎src/components/chat/message-attachments.ts‎

Lines changed: 47 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,10 @@ import {
2727
*
2828
* @element igc-message-attachments
2929
*
30-
* @slot attachment-icon - Slot to override the attachment icon (image or file).
31-
* @slot attachment-name - Slot to override the displayed attachment name.
32-
* @slot attachment-content - Slot to override the content shown inside the attachment panel.
33-
*
3430
* @csspart attachments-container - Container wrapping all attachments.
35-
* @csspart attachment - Wrapper for a single attachment header.
31+
* @csspart attachment - Wrapper for a single attachment.
32+
* @csspart attachment-header - Wrapper for a single attachment header.
33+
* @csspart attachments-content - Part representing the attachment preview.
3634
* @csspart attachment-icon - Icon part representing the attachment type.
3735
* @csspart file-name - Part representing the attachment's file name.
3836
* @csspart actions - Container for header action buttons.
@@ -79,9 +77,8 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
7977
registerIconFromText('more', moreIcon, 'material');
8078
}
8179

82-
private handleToggle(e: CustomEvent, attachment: IgcMessageAttachment) {
80+
private handleHeaderClick(attachment: IgcMessageAttachment) {
8381
this._chatState?.emitEvent('igcAttachmentClick', { detail: attachment });
84-
e.preventDefault();
8582
}
8683

8784
private getURL(attachment: IgcMessageAttachment): string {
@@ -94,31 +91,36 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
9491
return '';
9592
}
9693

94+
private defaulAttachmentContent(attachment: IgcMessageAttachment) {
95+
return html`${attachment.type === 'image' ||
96+
attachment.file?.type.startsWith('image/')
97+
? html`<img
98+
part="image-attachment"
99+
src=${this.getURL(attachment)}
100+
alt=${attachment.name}
101+
/>`
102+
: nothing}`;
103+
}
104+
97105
private renderAttachmentHeaderText(attachment: IgcMessageAttachment) {
98106
return html`<div part="details">
99107
${this._chatState?.options?.templates?.attachmentHeaderTemplate
100108
? this._chatState.options.templates.attachmentHeaderTemplate(
101109
this.attachments
102110
)
103-
: html`
104-
<slot name="attachment-icon">
105-
${attachment.type === 'image' ||
106-
attachment.file?.type.startsWith('image/')
107-
? html`<igc-icon
108-
name="image"
109-
collection="material"
110-
part="attachment-icon"
111-
></igc-icon>`
112-
: html`<igc-icon
113-
name="file"
114-
collection="material"
115-
part="attachment-icon"
116-
></igc-icon>`}
117-
</slot>
118-
<slot name="attachment-name">
119-
<span part="file-name">${attachment.name}</span>
120-
</slot>
121-
`}
111+
: html`${attachment.type === 'image' ||
112+
attachment.file?.type.startsWith('image/')
113+
? html`<igc-icon
114+
name="image"
115+
collection="material"
116+
part="attachment-icon"
117+
></igc-icon>`
118+
: html`<igc-icon
119+
name="file"
120+
collection="material"
121+
part="attachment-icon"
122+
></igc-icon>`}
123+
<span part="file-name">${attachment.name}</span> `}
122124
</div>`;
123125
}
124126

@@ -133,43 +135,34 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
133135
}
134136

135137
private renderAttachmentContent(attachment: IgcMessageAttachment) {
136-
return html` ${this._chatState?.options?.templates
137-
?.attachmentContentTemplate
138-
? this._chatState.options.templates.attachmentContentTemplate(
139-
this.attachments
140-
)
141-
: html`
142-
<slot name="attachment-content">
143-
${attachment.type === 'image' ||
144-
attachment.file?.type.startsWith('image/')
145-
? html` <img
146-
part="image-attachment"
147-
src=${this.getURL(attachment)}
148-
alt=${attachment.name}
149-
/>`
150-
: nothing}
151-
</slot>
152-
`}`;
138+
return html`<div part="attachment-content">
139+
${this._chatState?.options?.templates?.attachmentContentTemplate
140+
? this._chatState.options.templates.attachmentContentTemplate(
141+
this.attachments
142+
)
143+
: this.defaulAttachmentContent(attachment)}
144+
</div>`;
153145
}
154146

155147
private renderDefaultAttachmentsTemplate() {
156148
return html`${this.attachments.map(
157149
(attachment) =>
158-
html`<igc-expansion-panel
159-
indicator-position="none"
160-
.open=${attachment.type === 'image' ||
161-
attachment.file?.type.startsWith('image/') ||
162-
this._chatState?.options?.templates?.attachmentContentTemplate}
163-
@igcClosing=${(ev: CustomEvent) => this.handleToggle(ev, attachment)}
164-
@igcOpening=${(ev: CustomEvent) => this.handleToggle(ev, attachment)}
165-
>
166-
<div slot="title" part="attachment">
150+
html`<div part="attachment">
151+
<div
152+
part="attachment-header"
153+
role="button"
154+
@click=${() => this.handleHeaderClick(attachment)}
155+
>
167156
${this.renderAttachmentHeaderText(attachment)}
168157
${this.renderAttachmentHeaderActions()}
169158
</div>
170159
171-
${this.renderAttachmentContent(attachment)}
172-
</igc-expansion-panel>`
160+
${attachment.type === 'image' ||
161+
attachment.file?.type.startsWith('image/') ||
162+
this._chatState?.options?.templates?.attachmentContentTemplate
163+
? this.renderAttachmentContent(attachment)
164+
: nothing}
165+
</div>`
173166
)}`;
174167
}
175168

0 commit comments

Comments
 (0)