Refactor KuiTableHeaderCell into KuiListingTable

isChecked => isSelected contents => content refactor KuiTableRowCell internally
elastic · Oct 5, 2017 · f50f916 · f50f916
1 parent 83cca1d
commit f50f916
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 110 deletions.
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js b/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
@@ -128,38 +128,30 @@ export class VisualizeListingTable extends React.Component {
 
   renderHeader() {
     return [
-      <KuiTableHeaderCell
-        key="title"
-        onSort={this.sortByTitle}
-        isSorted={this.state.sortedColumn === 'title'}
-        isSortAscending={this.sortableProperties.isAscendingByName('title')}
-      >
-        Title
-      </KuiTableHeaderCell>,
-      <KuiTableHeaderCell
-        key="type"
-        onSort={this.sortByType}
-        isSorted={this.state.sortedColumn === 'type'}
-        isSortAscending={this.sortableProperties.isAscendingByName('type')}
-      >
-        Type
-      </KuiTableHeaderCell>
+      {
+        content: 'Title',
+        onSort: this.sortByTitle,
+        isSorted: this.state.sortedColumn === 'title',
+        isSortAscending: this.sortableProperties.isAscendingByName('title'),
+      },
+      {
+        content: 'Type',
+        onSort: this.sortByType,
+        isSorted: this.state.sortedColumn === 'type',
+        isSortAscending: this.sortableProperties.isAscendingByName('type'),
+      },
     ];
   }
 
   renderRowCells(item) {
     return [
-      <KuiTableRowCell key="title">
-        <a className="kuiLink" href={this.getUrlForItem(item)}>
-          {item.title}
-        </a>
-      </KuiTableRowCell>,
-      <KuiTableRowCell key="type">
-        <span className="kuiStatusText">
-          {this.renderItemTypeIcon(item)}
-          {item.type.title}
-        </span>
-      </KuiTableRowCell>
+      <a className="kuiLink" href={this.getUrlForItem(item)}>
+        {item.title}
+      </a>,
+      <span className="kuiStatusText">
+        {this.renderItemTypeIcon(item)}
+        {item.type.title}
+      </span>
     ];
   }
 

diff --git a/ui_framework/doc_site/src/views/table/listing_table.js b/ui_framework/doc_site/src/views/table/listing_table.js
@@ -4,24 +4,13 @@ import {
   KuiButton,
   KuiButtonIcon,
   KuiPager,
-  KuiTableRowCell,
-  KuiTableHeaderCell,
   KuiListingTable,
 } from '../../../../components';
 
 import {
-  LEFT_ALIGNMENT,
   RIGHT_ALIGNMENT
 } from '../../../../services';
 
-function wrapInRowCell(cell, key, alignment = LEFT_ALIGNMENT) {
-  return (
-    <KuiTableRowCell align={alignment} key={key}>
-      {cell}
-    </KuiTableRowCell>
-  );
-}
-
 export class ListingTable extends React.Component {
   constructor(props) {
     super(props);
@@ -33,37 +22,49 @@ export class ListingTable extends React.Component {
       {
         id: '1',
         cells: [
-          wrapInRowCell(<a className="kuiLink" href="#">Alligator</a>, 'title1'),
-          wrapInRowCell(<div className="kuiIcon kuiIcon--success fa-check"/>, 'status1'),
-          wrapInRowCell('Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', 'time1'),
-          wrapInRowCell('1', 'order1', RIGHT_ALIGNMENT)
+          <a className="kuiLink" href="#">Alligator</a>,
+          <div className="kuiIcon kuiIcon--success fa-check"/>,
+          'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
+          {
+            content: '1',
+            align: RIGHT_ALIGNMENT
+          },
         ]
       },
       {
         id: '2',
         cells: [
-          wrapInRowCell(<a className="kuiLink" href="#">Boomerang</a>, 'title2'),
-          wrapInRowCell(<div className="kuiIcon kuiIcon--success fa-check"/>, 'status2'),
-          wrapInRowCell('Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', 'time2'),
-          wrapInRowCell('10', 'order2', RIGHT_ALIGNMENT),
+          <a className="kuiLink" href="#">Boomerang</a>,
+          <div className="kuiIcon kuiIcon--success fa-check"/>,
+          'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
+          {
+            content: '10',
+            align: RIGHT_ALIGNMENT
+          },
         ]
       },
       {
         id: '3',
         cells: [
-          wrapInRowCell(<a className="kuiLink" href="#">Celebration</a>, 'title3'),
-          wrapInRowCell(<div className="kuiIcon kuiIcon--warning fa-bolt"/>, 'status3'),
-          wrapInRowCell('Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', 'time3'),
-          wrapInRowCell('100', 'order3', RIGHT_ALIGNMENT)
+          <a className="kuiLink" href="#">Celebration</a>,
+          <div className="kuiIcon kuiIcon--warning fa-bolt"/>,
+          'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
+          {
+            content: '100',
+            align: RIGHT_ALIGNMENT
+          },
         ]
       },
       {
         id: '4',
         cells: [
-          wrapInRowCell(<a className="kuiLink" href="#">Dog</a>, 'title4'),
-          wrapInRowCell(<div className="kuiIcon kuiIcon--error fa-warning"/>, 'status4'),
-          wrapInRowCell('Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', 'time4'),
-          wrapInRowCell('1000', 'order4', RIGHT_ALIGNMENT)
+          <a className="kuiLink" href="#">Dog</a>,
+          <div className="kuiIcon kuiIcon--error fa-warning"/>,
+          'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
+          {
+            content: '1000',
+            align: RIGHT_ALIGNMENT
+          },
         ]
       }
     ];
@@ -109,21 +110,13 @@ export class ListingTable extends React.Component {
 
   renderHeader() {
     return [
-      <KuiTableHeaderCell key="title">
-        Title
-      </KuiTableHeaderCell>,
-      <KuiTableHeaderCell key="status">
-        Status
-      </KuiTableHeaderCell>,
-      <KuiTableHeaderCell key="created">
-        Date created
-      </KuiTableHeaderCell>,
-      <KuiTableHeaderCell
-        key="order"
-        className="kuiTableHeaderCell--alignRight"
-      >
-        Orders of magnitude
-      </KuiTableHeaderCell>
+      'Title',
+      'Status',
+      'Date created',
+      {
+        content: 'Orders of magnitude',
+        align: RIGHT_ALIGNMENT
+      }
     ];
   }
 

diff --git a/ui_framework/doc_site/src/views/table/listing_table_loading_items.js b/ui_framework/doc_site/src/views/table/listing_table_loading_items.js
@@ -5,27 +5,22 @@ import {
   KuiButtonIcon,
   KuiPager,
   KuiListingTable,
-  KuiTableHeaderCell,
   KuiListingTableLoadingPrompt,
 } from '../../../../components';
 
+import {
+  RIGHT_ALIGNMENT
+} from '../../../../services';
+
 function renderHeader() {
   return [
-    <KuiTableHeaderCell key="title">
-      Title
-    </KuiTableHeaderCell>,
-    <KuiTableHeaderCell key="status">
-      Status
-    </KuiTableHeaderCell>,
-    <KuiTableHeaderCell key="created">
-      Date created
-    </KuiTableHeaderCell>,
-    <KuiTableHeaderCell
-      key="order"
-      className="kuiTableHeaderCell--alignRight"
-    >
-      Orders of magnitude
-    </KuiTableHeaderCell>
+    'Title',
+    'Status',
+    'Date created',
+    {
+      content: 'Orders of magnitude',
+      align: RIGHT_ALIGNMENT
+    }
   ];
 }
 

diff --git a/ui_framework/doc_site/src/views/table/listing_table_with_no_items.js b/ui_framework/doc_site/src/views/table/listing_table_with_no_items.js
@@ -55,21 +55,13 @@ function renderPager() {
 
 function renderHeader() {
   return [
-    <KuiTableHeaderCell key="title">
-      Title
-    </KuiTableHeaderCell>,
-    <KuiTableHeaderCell key="status">
-      Status
-    </KuiTableHeaderCell>,
-    <KuiTableHeaderCell key="created">
-      Date created
-    </KuiTableHeaderCell>,
-    <KuiTableHeaderCell
-      key="order"
-      align={RIGHT_ALIGNMENT}
-    >
-      Orders of magnitude
-    </KuiTableHeaderCell>
+    'Title',
+    'Status',
+    'Date created',
+    {
+      content: 'Orders of magnitude',
+      align: RIGHT_ALIGNMENT
+    }
   ];
 }
 

diff --git a/ui_framework/src/components/table/listing_table/listing_table.js b/ui_framework/src/components/table/listing_table/listing_table.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import _ from 'lodash';
+
 import { KuiListingTableToolBar } from './listing_table_tool_bar';
 import { KuiListingTableToolBarFooter } from './listing_table_tool_bar_footer';
 import { KuiListingTableRow } from './listing_table_row';
@@ -11,11 +13,17 @@ import {
   KuiTableBody,
   KuiTableHeader,
   KuiTable,
+  KuiTableHeaderCell,
 } from '../../index';
 
+import {
+  LEFT_ALIGNMENT,
+  RIGHT_ALIGNMENT,
+} from '../../../services';
+
 export function KuiListingTable({
   rows,
-  columns,
+  header,
   pager,
   toolBarActions,
   onFilter,
@@ -54,14 +62,32 @@ export function KuiListingTable({
       return (
         <KuiListingTableRow
           key={rowIndex}
-          isChecked={selectedRowIds.indexOf(row.id) >= 0}
+          isSelected={selectedRowIds.indexOf(row.id) >= 0}
           onSelectionChanged={toggleRow}
           row={row}
         />
       );
     });
   }
 
+  function renderHeader() {
+    return header.map((cell, index) => {
+      let { content, ...props } = cell;
+      if (React.isValidElement(cell) || !_.isObject(cell)) {
+        props = [];
+        content = cell;
+      }
+      return (
+        <KuiTableHeaderCell
+          key={index}
+          {...props}
+        >
+          {content}
+        </KuiTableHeaderCell>
+      );
+    });
+  }
+
   function renderInnerTable() {
     return (
       <KuiTable>
@@ -70,7 +96,7 @@ export function KuiListingTable({
             isChecked={areAllRowsChecked()}
             onChange={toggleAll}
           />
-          {columns}
+          {renderHeader()}
         </KuiTableHeader>
 
         <KuiTableBody>
@@ -100,10 +126,29 @@ export function KuiListingTable({
 }
 
 KuiListingTable.PropTypes = {
-  header: PropTypes.arrayOf(PropTypes.node),
+  header: PropTypes.arrayOf(
+    PropTypes.oneOf([
+      PropTypes.node,
+      PropTypes.shape({
+        content: PropTypes.node,
+        align: PropTypes.oneOf([LEFT_ALIGNMENT, RIGHT_ALIGNMENT]),
+        onSort: PropTypes.func,
+        isSortAscending: PropTypes.bool,
+        isSorted: PropTypes.bool,
+      }),
+    ]
+  )),
   rows: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
-    cells: PropTypes.arrayOf(PropTypes.node),
+    cells: PropTypes.arrayOf(
+      PropTypes.oneOf([
+        PropTypes.node,
+        PropTypes.shape({
+          content: PropTypes.node,
+          align: PropTypes.oneOf([LEFT_ALIGNMENT, RIGHT_ALIGNMENT]),
+        }),
+      ],
+    )),
   })),
   pager: PropTypes.node,
   onItemSelectionChanged: PropTypes.func.isRequired,