fix(list): disabled items not handled correctly

Lundalogik · Sep 10, 2019 · 7d822e3 · 7d822e3
1 parent 49bdc0d
commit 7d822e3
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 6 deletions.
diff --git a/src/components/list/list-renderer.tsx b/src/components/list/list-renderer.tsx
@@ -181,13 +181,18 @@ export class ListRenderer {
                     <CheckboxTemplate
                         id={`c_${index}`}
                         checked={item.selected}
+                        disabled={item.disabled}
                     />
                 </div>,
             ];
         }
         return [
             <div class="mdc-list-item__graphic">
-                <CheckboxTemplate id={`c_${index}`} checked={item.selected} />
+                <CheckboxTemplate
+                    id={`c_${index}`}
+                    checked={item.selected}
+                    disabled={item.disabled}
+                />
             </div>,
             this.renderText(item.text, item.secondaryText),
         ];

diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -17,7 +17,9 @@
 }
 
 .mdc-list {
-    cursor: pointer;
+    &.selectable .mdc-list-item:not(.mdc-list-item--disabled) {
+        cursor: pointer;
+    }
 
     &.mdc-list--avatar-list {
         limel-icon {

diff --git a/src/components/list/list.tsx b/src/components/list/list.tsx
@@ -92,7 +92,7 @@ export class List {
 
     private handleSingleSelect(index: number) {
         const listItems: ListItem[] = this.items.filter(item => {
-            return !('separator' in item);
+            return !('separator' in item) && !item.disabled;
         }) as ListItem[];
         const selectedItem: ListItem = listItems.find((item: ListItem) => {
             return !!item.selected;
@@ -109,7 +109,7 @@ export class List {
 
     private handleMultiSelect(index: number) {
         const listItems = this.items.filter(item => {
-            return !('separator' in item);
+            return !('separator' in item) && !item.disabled;
         });
         const selectedItems: ListItem[] = listItems
             .filter((item: ListItem, listIndex: number) => {

diff --git a/src/examples/list/list-checkbox-icons.tsx b/src/examples/list/list-checkbox-icons.tsx
@@ -20,6 +20,7 @@ export class ListCheckboxIconsExample {
             text: 'Charmander',
             value: 2,
             selected: false,
+            disabled: true,
             icon: 'fire_element',
             iconColor: 'var(--lime-red)',
         },
@@ -34,6 +35,7 @@ export class ListCheckboxIconsExample {
             text: 'Yoshi',
             value: 4,
             selected: false,
+            disabled: true,
             icon: 'easter_egg',
             iconColor: 'var(--lime-green)',
         },

diff --git a/src/examples/list/list-checkbox.tsx b/src/examples/list/list-checkbox.tsx
@@ -10,10 +10,10 @@ export class ListCheckboxExample {
     @State()
     private allItems: Array<ListItem | ListSeparator> = [
         { text: 'Pikachu', value: 1, selected: true },
-        { text: 'Charmander', value: 2, selected: false },
+        { text: 'Charmander', value: 2, selected: false, disabled: true },
         { text: 'Super Mario', value: 3, selected: false },
         { separator: true },
-        { text: 'Yoshi', value: 4, selected: false },
+        { text: 'Yoshi', value: 4, selected: false, disabled: true },
         { text: 'Minion', value: 6, selected: true },
         { text: 'Pokéball', value: 5, selected: false },
     ];