Преглед изворни кода

HUE-9485 [frontend] Switch to slots for dynamic cell contents in the HueTable components

Johan Ahlen пре 5 година
родитељ
комит
38cfbb8ca1

+ 8 - 13
desktop/core/src/desktop/js/components/HueTable.test.ts

@@ -15,7 +15,6 @@
 // limitations under the License.
 
 import { mount, shallowMount } from '@vue/test-utils';
-import TimeAgo from 'components/TimeAgo.vue';
 import { Column, Row } from './HueTable';
 import HueTable from './HueTable.vue';
 
@@ -23,7 +22,7 @@ describe('HueTable.vue', () => {
   it('should render a table', () => {
     const wrapper = shallowMount(HueTable, {
       propsData: {
-        columns: <Column[]>[
+        columns: <Column<unknown>[]>[
           { key: 'a', label: 'A' },
           { key: 'd', label: 'D' },
           { key: 'c', label: 'C' },
@@ -41,22 +40,18 @@ describe('HueTable.vue', () => {
   });
 
   it('should render a table with a custom component for a cell', () => {
-    const now = Date.now() + 30000000000; // Guarantees future ~year, i.e, TimeAgo will show "now"
     const wrapper = mount(HueTable, {
-      components: { 'time-ago': TimeAgo },
+      scopedSlots: {
+        'cell-a': '<div>{{ props.a + props.b }}</div>'
+      },
       propsData: {
-        columns: <Column[]>[
+        columns: <Column<unknown>[]>[
           { key: 'a', label: 'A' },
-          {
-            key: 'b',
-            label: 'B',
-            cellComponent: TimeAgo,
-            cellProps: (key, row) => ({ value: row[key] })
-          }
+          { key: 'b', label: 'B' }
         ],
         rows: <Row[]>[
-          { a: '1', b: now },
-          { a: '4', b: now }
+          { a: 1, b: 2 },
+          { a: 4, b: 5 }
         ]
       }
     });

+ 9 - 9
desktop/core/src/desktop/js/components/HueTable.vue

@@ -31,15 +31,7 @@
     <tbody>
       <tr v-for="(row, rowIndex) in rows" :key="rowIndex" @click="$emit('row-clicked', row)">
         <td v-for="(column, colIndex) in columns" :key="colIndex">
-          <component
-            :is="column.cellComponent"
-            v-if="column.cellComponent"
-            v-bind="
-              column.cellProps
-                ? column.cellProps(column.key, row)
-                : { value: column.adapter ? column.adapter(column.key, row) : row[column.key] }
-            "
-          />
+          <slot v-if="hasCellSlot(column)" :name="cellSlotName(column)" v-bind="row" />
           <template v-else>
             {{ column.adapter ? column.adapter(column.key, row) : row[column.key] }}
           </template>
@@ -61,6 +53,14 @@
     rows?: Row[];
     @Prop({ required: false, default: () => [] })
     columns?: Column<T>[];
+
+    hasCellSlot(column: Column<T>): boolean {
+      return !!this.$scopedSlots[this.cellSlotName(column)];
+    }
+
+    cellSlotName(column: Column<T>): string {
+      return 'cell-' + column.key;
+    }
   }
 </script>
 

+ 12 - 12
desktop/core/src/desktop/js/components/__snapshots__/HueTable.test.ts.snap

@@ -128,26 +128,26 @@ exports[`HueTable.vue should render a table with a custom component for a cell 1
   <tbody>
     <tr>
       <td>
-        
-          1
-        
+        <div>
+          3
+        </div>
       </td>
       <td>
-        <span>
-          now
-        </span>
+        
+          2
+        
       </td>
     </tr>
     <tr>
       <td>
-        
-          4
-        
+        <div>
+          9
+        </div>
       </td>
       <td>
-        <span>
-          now
-        </span>
+        
+          5
+        
       </td>
     </tr>
   </tbody>