feat(list-item): Add slot for specialized content. #3032

Esri · Dec 1, 2022 · 7dc4f11 · 7dc4f11
1 parent 3ed53e7
commit 7dc4f11
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/src/components/list-item/list-item.tsx b/src/components/list-item/list-item.tsx
@@ -175,6 +175,8 @@ export class ListItem implements InteractiveComponent, LoadableComponent {
 
   @State() hasActionsEnd = false;
 
+  @State() hasContent = false;
+
   @State() hasContentStart = false;
 
   @State() hasContentEnd = false;
@@ -321,6 +323,15 @@ export class ListItem implements InteractiveComponent, LoadableComponent {
     );
   }
 
+  renderContent(): VNode {
+    const { hasContent } = this;
+    return (
+      <div class={CSS.content} hidden={!hasContent}>
+        <slot name={SLOTS.content} onSlotchange={this.handleContentSlotChange} />
+      </div>
+    );
+  }
+
   renderContentEnd(): VNode {
     const { hasContentEnd } = this;
     return (
@@ -330,10 +341,10 @@ export class ListItem implements InteractiveComponent, LoadableComponent {
     );
   }
 
-  renderContent(): VNode {
-    const { label, description } = this;
+  renderContentProperties(): VNode {
+    const { label, description, hasContent } = this;
 
-    return !!label || !!description ? (
+    return !hasContent && (!!label || !!description) ? (
       <div class={CSS.content} key="content">
         {label ? (
           <div class={CSS.label} key="label">
@@ -350,9 +361,14 @@ export class ListItem implements InteractiveComponent, LoadableComponent {
   }
 
   renderContentContainer(): VNode {
-    const { description, label, selectionMode } = this;
-    const hasCenterContent = !!label || !!description;
-    const content = [this.renderContentStart(), this.renderContent(), this.renderContentEnd()];
+    const { description, label, selectionMode, hasContent } = this;
+    const hasCenterContent = hasContent || !!label || !!description;
+    const content = [
+      this.renderContentStart(),
+      this.renderContent(),
+      this.renderContentProperties(),
+      this.renderContentEnd()
+    ];
 
     return (
       <td
@@ -435,6 +451,10 @@ export class ListItem implements InteractiveComponent, LoadableComponent {
   //
   // --------------------------------------------------------------------------
 
+  handleContentSlotChange = (event: Event): void => {
+    this.hasContent = slotChangeHasAssignedElement(event);
+  };
+
   handleActionsStartSlotChange = (event: Event): void => {
     this.hasActionsStart = slotChangeHasAssignedElement(event);
   };

diff --git a/src/components/list-item/resources.ts b/src/components/list-item/resources.ts
@@ -21,6 +21,7 @@ export const CSS = {
 export const SLOTS = {
   actionsStart: "actions-start",
   contentStart: "content-start",
+  content: "content",
   contentEnd: "content-end",
   actionsEnd: "actions-end"
 };