Fixing more docs implementations

elastic · Feb 21, 2019 · aa54cc8 · aa54cc8
1 parent c377822
commit aa54cc8
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 54 deletions.
diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js
@@ -218,19 +218,22 @@ export class Table extends Component {
       name: 'First Name',
       truncateText: true,
       sortable: true,
-      hideForMobile: true,
+      mobileOptions: {
+        render: (item) => (
+          <span>{item.firstName} {item.lastName}</span>
+        ),
+        header: false,
+        truncateText: false,
+        enlarge: true,
+        fullWidth: true,
+      }
     }, {
       field: 'lastName',
       name: 'Last Name',
       truncateText: true,
-      hideForMobile: true,
-    }, {
-      field: 'firstName',
-      name: 'Full Name',
-      isMobileHeader: true,
-      render: (name, item) => (
-        <span>{item.firstName} {item.lastName}</span>
-      ),
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'github',
       name: 'Github',

diff --git a/src-docs/src/views/tables/basic/basic.js b/src-docs/src/views/tables/basic/basic.js
@@ -37,23 +37,26 @@ export const Table = () => {
     field: 'firstName',
     name: 'First Name',
     sortable: true,
-    hideForMobile: true,
     'data-test-subj': 'firstNameCell',
+    mobileOptions: {
+      render: (item) => (
+        <span>{item.firstName} <EuiLink href="#" target="_blank">{item.lastName}</EuiLink></span>
+      ),
+      header: false,
+      truncateText: false,
+      enlarge: true,
+      fullWidth: true,
+    }
   }, {
     field: 'lastName',
     name: 'Last Name',
     truncateText: true,
-    hideForMobile: true,
     render: (name) => (
       <EuiLink href="#" target="_blank">{name}</EuiLink>
     ),
-  }, {
-    field: 'firstName',
-    name: 'Full Name',
-    isMobileHeader: true,
-    render: (name, item) => (
-      <span>{item.firstName} <EuiLink href="#" target="_blank">{item.lastName}</EuiLink></span>
-    ),
+    mobileOptions: {
+      show: false,
+    }
   }, {
     field: 'github',
     name: 'Github',

diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js
@@ -221,18 +221,27 @@ export default class extends Component {
       alignment: LEFT_ALIGNMENT,
       width: '24px',
       cellProvider: cell => <EuiIcon type={cell} size="m" />,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       id: 'title',
       label: 'Title',
       footer: <em>Title</em>,
       alignment: LEFT_ALIGNMENT,
       isSortable: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       id: 'title_type',
       label: 'Title',
-      isMobileHeader: true,
+      mobileOptions: {
+        only: true,
+        header: false,
+        enlarge: true,
+        fullWidth: true,
+      },
       render: (title, item) => (
         <span><EuiIcon type={item.type} size="m" style={{ verticalAlign: 'text-top' }} /> {title}</span>
       ),
@@ -420,7 +429,7 @@ export default class extends Component {
             onSort={column.isSortable ? this.onSort.bind(this, column.id) : undefined}
             isSorted={this.state.sortedColumn === column.id}
             isSortAscending={this.sortableProperties.isAscendingByName(column.id)}
-            isMobileHeader={column.isMobileHeader}
+            mobileOptions={column.mobileOptions}
           >
             {column.label}
           </EuiTableHeaderCell>
@@ -527,12 +536,13 @@ export default class extends Component {
         return (
           <EuiTableRowCell
             key={column.id}
-            header={column.label}
             align={column.alignment}
             truncateText={cell && cell.truncateText}
             textOnly={cell ? cell.textOnly : true}
-            hideForMobile={column.hideForMobile}
-            isMobileHeader={column.isMobileHeader}
+            mobileOptions={{
+              header: column.label,
+              ...column.mobileOptions
+            }}
           >
             {child}
           </EuiTableRowCell>

diff --git a/src-docs/src/views/tables/expanding_rows/expanding_rows.js b/src-docs/src/views/tables/expanding_rows/expanding_rows.js
@@ -151,20 +151,22 @@ export class Table extends Component {
       name: 'First Name',
       sortable: true,
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        render: (item) => (
+          <span>{item.firstName} {item.lastName}</span>
+        ),
+        header: false,
+        truncateText: false,
+        enlarge: true,
+        fullWidth: true,
+      }
     }, {
       field: 'lastName',
       name: 'Last Name',
       truncateText: true,
-      hideForMobile: true,
-    }, {
-      field: 'firstName',
-      name: 'Full Name',
-      sortable: true,
-      isMobileHeader: true,
-      render: (name, item) => (
-        <span>{item.firstName} {item.lastName}</span>
-      )
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'dateOfBirth',
       name: 'Date of Birth',

diff --git a/src-docs/src/views/tables/footer/footer.js b/src-docs/src/views/tables/footer/footer.js
@@ -132,16 +132,23 @@ export class Table extends Component {
       footer: <em>Page totals:</em>,
       sortable: true,
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'lastName',
       name: 'Last Name',
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'firstName',
       name: 'Full Name',
-      isMobileHeader: true,
+      mobileOptions: {
+        only: true,
+        fullWidth: true,
+      },
       render: (name, item) => (
         <EuiFlexGroup responsive={false} alignItems="center">
           <EuiFlexItem>{item.firstName} {item.lastName}</EuiFlexItem>

diff --git a/src-docs/src/views/tables/paginated/paginated.js b/src-docs/src/views/tables/paginated/paginated.js
@@ -87,15 +87,25 @@ export class Table extends Component {
       name: 'First Name',
       truncateText: true,
       hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'lastName',
       name: 'Last Name',
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'firstName',
       name: 'Full Name',
-      isMobileHeader: true,
+      mobileOptions: {
+        header: false,
+        only: true,
+        enlarge: true,
+        fullWidth: true,
+      },
       render: (name, item) => (
         <EuiFlexGroup responsive={false} alignItems="center">
           <EuiFlexItem>{item.firstName} {item.lastName}</EuiFlexItem>

diff --git a/src-docs/src/views/tables/selection/selection.js b/src-docs/src/views/tables/selection/selection.js
@@ -129,16 +129,25 @@ export class Table extends Component {
       name: 'First Name',
       sortable: true,
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'lastName',
       name: 'Last Name',
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'firstName',
       name: 'Full Name',
-      isMobileHeader: true,
+      mobileOptions: {
+        only: true,
+        header: false,
+        enlarge: true,
+        fullWidth: true,
+      },
       render: (name, item) => (
         <EuiFlexGroup responsive={false} alignItems="center">
           <EuiFlexItem>{item.firstName} {item.lastName}</EuiFlexItem>
@@ -174,7 +183,9 @@ export class Table extends Component {
         this.renderStatus(online)
       ),
       sortable: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }];
 
     const pagination = {

diff --git a/src-docs/src/views/tables/sorting/sorting.js b/src-docs/src/views/tables/sorting/sorting.js
@@ -85,21 +85,23 @@ export class Table extends Component {
       name: 'First Name',
       sortable: true,
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        render: (item) => (
+          <span>{item.firstName} {item.lastName}</span>
+        ),
+        header: false,
+        truncateText: false,
+        enlarge: true,
+        fullWidth: true,
+      }
     }, {
       field: 'lastName',
       name: 'Last Name',
       sortable: true,
       truncateText: true,
-      hideForMobile: true,
-    }, {
-      field: 'firstName',
-      name: 'Full Name',
-      sortable: true,
-      isMobileHeader: true,
-      render: (name, item) => (
-        <span>{item.firstName} {item.lastName}</span>
-      )
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'github',
       name: (