fix(picker): added value generic property to list item

The picker was not working correctly unless the list items contained an integer id property BREAKING CHANGE: Removed the index signature from ListItem interface. Consumers of list items should pass any custom values in the value property instead
Lundalogik · Sep 10, 2019 · b8e43c3 · b8e43c3
1 parent 59bde8f
commit b8e43c3
Show file tree

Hide file tree

Showing 16 changed files with 120 additions and 110 deletions.
diff --git a/src/components/chip-set/chip-set.tsx b/src/components/chip-set/chip-set.tsx
@@ -314,22 +314,22 @@ export class ChipSet {
 
     private handleInteraction(event) {
         const chip = this.value.find(item => {
-            return item.id === event.detail.chipId;
+            return `${item.id}` === event.detail.chipId;
         });
         this.interact.emit(chip);
     }
 
     private handleSelection(event) {
         let chip = this.value.find(item => {
-            return item.id === event.detail.chipId;
+            return `${item.id}` === event.detail.chipId;
         });
         chip = { ...chip, selected: event.detail.selected };
         this.change.emit(chip);
     }
 
     private handleRemove(event) {
         const newValue = this.value.filter(chip => {
-            return chip.id !== event.detail.chipId;
+            return `${chip.id}` !== event.detail.chipId;
         });
         this.change.emit(newValue);
     }
@@ -353,7 +353,7 @@ export class ChipSet {
             <div
                 class={`mdc-chip ${chip.selected ? 'mdc-chip--selected' : ''}`}
                 tabindex="0"
-                id={chip.id}
+                id={`${chip.id}`}
             >
                 {chip.icon ? this.renderIcon(chip) : null}
                 <div class="mdc-chip__text">{chip.text}</div>
@@ -366,7 +366,7 @@ export class ChipSet {
             <div
                 class={`mdc-chip ${chip.selected ? 'mdc-chip--selected' : ''}`}
                 tabindex="0"
-                id={chip.id}
+                id={`${chip.id}`}
             >
                 <div class="mdc-chip__checkmark">
                     <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
@@ -385,7 +385,7 @@ export class ChipSet {
 
     private renderDefaultChip(chip: Chip) {
         return (
-            <div class="mdc-chip" tabindex="0" id={chip.id}>
+            <div class="mdc-chip" tabindex="0" id={`${chip.id}`}>
                 {chip.icon ? this.renderIcon(chip) : null}
                 <div class="mdc-chip__text">{chip.text}</div>
                 {chip.removable ? this.renderTrailingIcon() : null}

diff --git a/src/components/chip-set/chip.ts b/src/components/chip-set/chip.ts
@@ -1,13 +1,13 @@
-export interface Chip {
+export interface Chip<T = any> {
     /**
      * Id of the chip. Needs to be unique
      */
-    id: string;
+    id: number | string;
 
     /**
      * Text to display inside the chip
      */
-    text: string | number;
+    text: string;
 
     /**
      * Name of the icon to use. Not valid for `filter`
@@ -28,4 +28,9 @@ export interface Chip {
      * Wether the chip is selected or not. Only valid for `choice` and `filter`
      */
     selected?: boolean;
+
+    /**
+     * Value of the chip
+     */
+    value?: T;
 }
diff --git a/src/components/list/list-item.ts b/src/components/list/list-item.ts
@@ -1,4 +1,4 @@
-export interface ListItem {
+export interface ListItem<T = any> {
     /**
      * Text to display in the list item
      */
@@ -24,7 +24,10 @@ export interface ListItem {
      */
     iconColor?: string;
 
-    [data: string]: any;
+    /**
+     * Value of the list item
+     */
+    value?: T;
 }
 
 export interface ListSeparator {

diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx
@@ -51,7 +51,7 @@ export class Picker {
      * Currently selected value or values
      */
     @Prop()
-    public value: ListItem | ListItem[];
+    public value: ListItem<number | string> | Array<ListItem<number | string>>;
 
     /**
      * A search function that takes a search-string as an argument,
@@ -71,7 +71,9 @@ export class Picker {
      * Fired when a new value has been selected from the picker
      */
     @Event()
-    private change: EventEmitter<ListItem | ListItem[]>;
+    private change: EventEmitter<
+        ListItem<number | string> | Array<ListItem<number | string>>
+    >;
 
     /**
      * Fired when clicking on a selected value
@@ -80,7 +82,7 @@ export class Picker {
     private interact: EventEmitter<Chip>;
 
     @State()
-    private items: ListItem[];
+    private items: Array<ListItem<number | string>>;
 
     @State()
     private textValue: string;
@@ -193,12 +195,12 @@ export class Picker {
 
         const listItem: ListItem = value as ListItem;
 
-        return [this.createChip(listItem, listItem.id || 0)];
+        return [this.createChip(listItem)];
     }
 
-    private createChip(listItem: ListItem, id: number): Chip {
+    private createChip(listItem: ListItem): Chip {
         return {
-            id: `${id}`,
+            id: `${listItem.value}`,
             text: listItem.text,
             removable: true,
             icon: listItem.icon,
@@ -367,8 +369,8 @@ export class Picker {
         if (this.multiple) {
             const chips = event.detail as Chip[];
             newValue = chips.map(chip => {
-                return (this.value as ListItem[]).find((_, index) => {
-                    return index === parseInt(chip.id, 10);
+                return (this.value as ListItem[]).find(item => {
+                    return `${item.value}` === chip.id;
                 });
             });
         }

diff --git a/src/examples/chip-set/chip-set-choice.tsx b/src/examples/chip-set/chip-set-choice.tsx
@@ -9,18 +9,18 @@ export class ChipSetChoiceExample {
     @State()
     private chips: Chip[] = [
         {
-            id: '1',
+            id: 1,
             text: 'Lime',
             icon: 'citrus',
         },
         {
-            id: '2',
+            id: 2,
             text: 'Apple',
             selected: true,
             icon: 'apple',
         },
         {
-            id: '3',
+            id: 3,
             text: 'Banana',
             icon: 'banana',
         },

diff --git a/src/examples/chip-set/chip-set-filter.tsx b/src/examples/chip-set/chip-set-filter.tsx
@@ -9,16 +9,16 @@ export class ChipSetFilterExample {
     @State()
     private chips: Chip[] = [
         {
-            id: '1',
+            id: 1,
             text: 'Lime',
         },
         {
-            id: '2',
+            id: 2,
             text: 'Apple',
             selected: true,
         },
         {
-            id: '3',
+            id: 3,
             text: 'Banana',
         },
     ];

diff --git a/src/examples/chip-set/chip-set-input.tsx b/src/examples/chip-set/chip-set-input.tsx
@@ -54,23 +54,23 @@ export class ChipSetInputExample {
         ];
     }
 
-    private handleInput(event) {
+    private handleInput(event: CustomEvent<string>) {
         this.textValue = event.detail;
     }
 
-    private handleKeyUp(event) {
+    private handleKeyUp(event: KeyboardEvent) {
         if (event.key === ENTER || event.keyCode === ENTER_KEY_CODE) {
             this.value = [...this.value, this.createChip(this.textValue)];
             this.textValue = null;
         }
     }
 
-    private handleChange(event) {
+    private handleChange(event: CustomEvent<Chip[]>) {
         console.log(event.detail);
         this.value = event.detail;
     }
 
-    private createChip(name): Chip {
+    private createChip(name: string): Chip {
         return {
             id: name,
             text: name,

diff --git a/src/examples/chip-set/chip-set.tsx b/src/examples/chip-set/chip-set.tsx
@@ -23,15 +23,15 @@ export class ChipSetExample {
                 onInteract={this.handleInteract}
                 value={[
                     {
-                        id: '1',
+                        id: 1,
                         text: 'Lime',
                     },
                     {
-                        id: '2',
+                        id: 2,
                         text: 'Apple',
                     },
                     {
-                        id: '3',
+                        id: 3,
                         text: 'Banana',
                     },
                 ]}

diff --git a/src/examples/list/list-badge-icons.tsx b/src/examples/list/list-badge-icons.tsx
@@ -7,38 +7,38 @@ import { ListItem } from '../../interface';
     styleUrl: 'list-badge-icons.scss',
 })
 export class BadgeIconsListExample {
-    private items: ListItem[] = [
+    private items: Array<ListItem<number>> = [
         {
             text: 'King of Tokyo',
             secondaryText: '2-6 players',
-            id: 1,
+            value: 1,
             icon: 'gorilla',
         },
         {
             text: 'Smash Up!',
             secondaryText: '2-4 players',
-            id: 2,
+            value: 2,
             icon: 'alien',
             iconColor: 'var(--lime-green)',
         },
         {
             text: 'Pandemic',
             secondaryText: '2-4 players',
-            id: 3,
+            value: 3,
             icon: 'virus',
             iconColor: 'var(--lime-red)',
         },
         {
             text: 'Catan',
             secondaryText: '3-4 players',
-            id: 4,
+            value: 4,
             icon: 'wheat',
             iconColor: 'var(--lime-orange)',
         },
         {
             text: 'Ticket to Ride',
             secondaryText: '2-5 players',
-            id: 5,
+            value: 5,
             icon: 'steam_engine',
             iconColor: 'var(--lime-dark-blue)',
         },

diff --git a/src/examples/list/list-icons.tsx b/src/examples/list/list-icons.tsx
@@ -6,12 +6,12 @@ import { ListItem } from '../../interface';
     shadow: true,
 })
 export class IconsListExample {
-    private items: ListItem[] = [
-        { text: 'King of Tokyo', id: 1, icon: 'gorilla' },
-        { text: 'Smash Up!', id: 2, icon: 'alien' },
-        { text: 'Pandemic', id: 3, icon: 'virus' },
-        { text: 'Catan', id: 4, icon: 'wheat' },
-        { text: 'Ticket to Ride', id: 5, icon: 'steam_engine' },
+    private items: Array<ListItem<number>> = [
+        { text: 'King of Tokyo', value: 1, icon: 'gorilla' },
+        { text: 'Smash Up!', value: 2, icon: 'alien' },
+        { text: 'Pandemic', value: 3, icon: 'virus' },
+        { text: 'Catan', value: 4, icon: 'wheat' },
+        { text: 'Ticket to Ride', value: 5, icon: 'steam_engine' },
     ];
 
     public render() {

diff --git a/src/examples/list/list-secondary.tsx b/src/examples/list/list-secondary.tsx
@@ -6,12 +6,12 @@ import { ListItem } from '../../interface';
     shadow: true,
 })
 export class SecondaryTextListExample {
-    private items: ListItem[] = [
-        { text: 'King of Tokyo', secondaryText: '2-6 players', id: 1 },
-        { text: 'Smash Up!', secondaryText: '2-4 players', id: 2 },
-        { text: 'Pandemic', secondaryText: '2-4 players', id: 3 },
-        { text: 'Catan', secondaryText: '3-4 players', id: 4 },
-        { text: 'Ticket to Ride', secondaryText: '2-5 players', id: 5 },
+    private items: Array<ListItem<number>> = [
+        { text: 'King of Tokyo', secondaryText: '2-6 players', value: 1 },
+        { text: 'Smash Up!', secondaryText: '2-4 players', value: 2 },
+        { text: 'Pandemic', secondaryText: '2-4 players', value: 3 },
+        { text: 'Catan', secondaryText: '3-4 players', value: 4 },
+        { text: 'Ticket to Ride', secondaryText: '2-5 players', value: 5 },
     ];
 
     public render() {

diff --git a/src/examples/list/list-selectable.tsx b/src/examples/list/list-selectable.tsx
@@ -6,12 +6,12 @@ import { ListItem } from '../../interface';
     shadow: true,
 })
 export class SelectableListExample {
-    private items: ListItem[] = [
-        { text: 'King of Tokyo', id: 1 },
-        { text: 'Smash Up!', id: 2 },
-        { text: 'Pandemic', id: 3 },
-        { text: 'Catan', id: 4 },
-        { text: 'Ticket to Ride', id: 5 },
+    private items: Array<ListItem<number>> = [
+        { text: 'King of Tokyo', value: 1 },
+        { text: 'Smash Up!', value: 2 },
+        { text: 'Pandemic', value: 3 },
+        { text: 'Catan', value: 4 },
+        { text: 'Ticket to Ride', value: 5 },
     ];
 
     public render() {

diff --git a/src/examples/list/list.tsx b/src/examples/list/list.tsx
@@ -6,13 +6,13 @@ import { ListItem, ListSeparator } from '../../interface';
     shadow: true,
 })
 export class ListExample {
-    private items: Array<ListItem | ListSeparator> = [
-        { text: 'King of Tokyo', id: 1 },
-        { text: 'Smash Up!', id: 2 },
-        { text: 'Pandemic', id: 3 },
+    private items: Array<ListItem<number> | ListSeparator> = [
+        { text: 'King of Tokyo', value: 1 },
+        { text: 'Smash Up!', value: 2 },
+        { text: 'Pandemic', value: 3 },
         { separator: true },
-        { text: 'Catan', id: 4 },
-        { text: 'Ticket to Ride', id: 5 },
+        { text: 'Catan', value: 4 },
+        { text: 'Ticket to Ride', value: 5 },
     ];
 
     public render() {