Skip to content

Commit

Permalink
Multiple fixes for mobile tables (#1462)
Browse files Browse the repository at this point in the history
  • Loading branch information
cchaos committed Feb 25, 2019
1 parent 693e09b commit 898d5e6
Show file tree
Hide file tree
Showing 23 changed files with 2,005 additions and 452 deletions.
11 changes: 10 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
## [`master`](https://github.com/elastic/eui/tree/master)

No public interface changes since `8.0.0`.
- Added `mobileOptions` object prop for handling of all the mobile specific options of `EuiBasicTable` ([#1462](https://github.com/elastic/eui/pull/1462))
- Table headers now accept `React.node` types ([#1462](https://github.com/elastic/eui/pull/1462))

**Bug fixes**

- `EuiBasicTable` select all shows up on mobile ([#1462](https://github.com/elastic/eui/pull/1462))

**Breaking changes**

- `EuiBasicTable`'s select all checkbox appends a `makeId` string to the id ([#1462](https://github.com/elastic/eui/pull/1462))

## [`8.0.0`](https://github.com/elastic/eui/tree/v8.0.0)

Expand Down
21 changes: 12 additions & 9 deletions src-docs/src/views/tables/actions/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
21 changes: 12 additions & 9 deletions src-docs/src/views/tables/basic/basic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
50 changes: 48 additions & 2 deletions src-docs/src/views/tables/basic/props_info.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,20 @@ export const propsInfo = {
type: { name: 'object[]' }
},
itemId: {
description: 'describes how to extract a unique ID from each item, used for selections & expanded rows',
description: 'Describes how to extract a unique ID from each item, used for selections & expanded rows',
required: false,
type: { name: 'string | (item) => string' }
},
itemIdToExpandedRowMap: {
description: 'Row expansion uses the `itemId` prop to identify each row',
required: false,
type: { name: 'object[]' }
},
cellProps: {
description: 'Applied to `EuiTableRowCell`',
required: false,
type: { name: 'func | object[]' }
},
compressed: {
description: 'Makes the font and padding smaller for the entire table',
type: { name: 'bool' }
Expand All @@ -22,11 +32,47 @@ export const propsInfo = {
required: true,
type: { name: '(#FieldDataColumn | #ComputedColumn | #ActionsColumn)[]' }
},
error: {
description: 'Error message to display',
required: false,
type: { name: 'string' }
},
hasActions: {
description: 'Needed at the top level for responsive positioning',
type: { name: 'bool' }
},
isExpandable: {
description: 'Needed at the top level for responsive positioning',
type: { name: 'bool' }
},
isSelectable: {
description: 'Needed at the top level for responsive positioning',
type: { name: 'bool' }
},
loading: {
description: 'Provides an infinite loading indicator',
type: { name: 'bool' }
},
noItemsMessage: {
description: 'Message to display if table is empty',
required: false,
type: { name: 'node' }
},
pagination: {
description: 'Configures pagination',
required: false,
type: { name: '#Pagination' }
},
responsive: {
description: 'If `true`, will convert table to cards in mobile view',
type: { name: 'bool' },
defaultValue: { value: 'true' },
},
rowProps: {
description: 'Applied to `EuiTableRow`',
required: false,
type: { name: 'func | object[]' }
},
sorting: {
description: 'Configures sorting',
required: false,
Expand All @@ -38,7 +84,7 @@ export const propsInfo = {
type: { name: '#Selection' }
},
onChange: {
description: 'Called whenever pagination or sorting changes (this property is required when either' +
description: 'Called whenever pagination or sorting changes (this property is required when either ' +
'pagination or sorting is configured',
required: false,
type: { name: '(criteria: #Criteria) => void' }
Expand Down
24 changes: 17 additions & 7 deletions src-docs/src/views/tables/custom/custom.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
),
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src-docs/src/views/tables/custom/custom_section.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
EuiTableHeaderCellCheckbox,
EuiTablePagination,
EuiTableRow,
EuiTableRowCell,
EuiTableRowCellCheckbox,
EuiTableHeaderMobile,
EuiTableSortMobile,
Expand All @@ -22,6 +21,7 @@ import { renderToHtml } from '../../../services';
import Custom from './custom';
const source = require('!!raw-loader!./custom');
const html = renderToHtml(Custom);
import { cellPropsInfo } from './props_info';

export const section = {
title: 'Build a custom table from individual components',
Expand Down Expand Up @@ -50,12 +50,12 @@ export const section = {
Responsive extras
</h3>
<p>
You must supply a <EuiCode>header</EuiCode> prop equivalent to the column header
You must supply a <EuiCode>mobileOptions.header</EuiCode> prop equivalent to the column header
on each <EuiCode>EuiTableRowCell</EuiCode> so that the mobile version will use that
to populate the per cell headers.
</p>
<p>
Also, custom table implementation <strong>will not</strong> auto-populate any header level functions
Also, custom table implementations <strong>will not</strong> auto-populate any header level functions
like selection and filtering. In order to add mobile support for these functions,
you will need to implement the <EuiCode>EuiTableHeaderMobile</EuiCode> component
as a wrapper around these and use <EuiCode>EuiTableSortMobile</EuiCode>
Expand All @@ -73,8 +73,8 @@ export const section = {
EuiTableHeaderCellCheckbox,
EuiTablePagination,
EuiTableRow,
EuiTableRowCell,
EuiTableRowCellCheckbox,
...cellPropsInfo,
EuiTableHeaderMobile,
EuiTableSortMobile,
EuiTableSortMobileItem,
Expand Down
128 changes: 128 additions & 0 deletions src-docs/src/views/tables/custom/props_info.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
export const cellPropsInfo = {

EuiTableRowCell: {
__docgenInfo: {
props: {
sharedProps: {
description: 'These props can be passed at the top level or within #mobileOptions',
type: { name: '#sharedProps' },
},
colSpan: {
description: 'Number of columns to span',
required: false,
type: { name: 'number' },
},
hasActions: {
description: 'Indicates if the column is dedicated to icon-only actions (currently affects mobile only)',
required: false,
type: { name: 'bool' }
},
isExpander: {
description: 'Indicates if the column is dedicated as the expandable row toggle',
required: false,
type: { name: 'bool' }
},
mobileOptions: {
description: 'Object of mobile specific options for displaying differently at small screens',
required: false,
type: { name: '#mobileOptions' },
},
header: {
description: 'DEPRECATED: use `mobileOptions.header`',
required: false,
type: { name: 'bool' }
},
isMobileHeader: {
description: 'DEPRECATED: use `mobileOptions.only = true & mobileOptions.header = false`',
required: false,
type: { name: 'bool' }
},
hideForMobile: {
description: 'DEPRECATED: use `mobileOptions.show = false`',
required: false,
type: { name: 'bool' }
},
isMobileFullWidth: {
description: 'DEPRECATED: use `mobileOptions.fullWidth`',
required: false,
type: { name: 'bool' }
},
}
}
},

sharedProps: {
__docgenInfo: {
_euiObjectType: 'type',
props: {
align: {
description: 'Horizontal alignment of the text in the cell',
required: false,
type: { name: 'left | right | center' },
defaultValue: { value: 'left' },
},
truncateText: {
description: 'Don\'t allow line breaks within cells',
required: false,
type: { name: 'bool' }
},
textOnly: {
description: 'Setting `textOnly` to `false` will break words unnecessarily on FF and IE. ' +
'To combat this problem on FF, wrap contents with the css utility `.eui-textBreakWord`.',
required: false,
type: { name: 'bool' }
},
showOnHover: {
description: '_Should only be used for action cells_',
required: false,
type: { name: 'bool' }
},
}
}
},

mobileOptions: {
__docgenInfo: {
_euiObjectType: 'type',
props: {
show: {
description: 'If false, will not render the cell at all for mobile',
required: false,
type: { name: 'bool' },
defaultValue: { value: 'true' },
},
only: {
description: 'Only show for mobile? If true, will not render the column at all for desktop',
required: false,
type: { name: 'bool' }
},
render: {
description: 'Custom render/children if different from desktop',
required: false,
type: { name: 'node' }
},
header: {
description: 'The column\'s header for use in mobile view (automatically passed down when using `EuiBasicTable`). ' +
'Or pass `false` to not show a header at all.',
required: false,
type: { name: 'node | bool' }
},
enlarge: {
description: 'Increase text size compared to rest of cells',
required: false,
type: { name: 'bool' }
},
fullWidth: {
description: 'Allocates 100% of the width of the container in mobile view (typically cells are contained to 50%)',
required: false,
type: { name: 'bool' }
},
sharedProps: {
description: 'These props will only work if a mobile specific `render` function is also passed',
type: { name: '#sharedProps' },
},
}
}
},

};
Loading

0 comments on commit 898d5e6

Please sign in to comment.