diff --git a/CHANGELOG.md b/CHANGELOG.md index d740c707ed8..4760f0d0805 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Altered functionality of `truncate` on `EuiBreadcrumbs` and added `truncate` ability on breadcrumb item ([#1346](https://github.com/elastic/eui/pull/1346)) - Altered `EuiHeader`'s location of `EuiHeaderBreadcrumbs` based on the new `truncate` ability ([#1346](https://github.com/elastic/eui/pull/1346)) +- Added support for `href` and `target` props in `EuiBasicTable` actions ([#1347](https://github.com/elastic/eui/pull/1347)) ## [`5.4.0`](https://github.com/elastic/eui/tree/v5.4.0) diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js index cc5f5e909af..a037e58d7fa 100644 --- a/src-docs/src/views/tables/actions/actions.js +++ b/src-docs/src/views/tables/actions/actions.js @@ -203,12 +203,13 @@ export class Table extends Component { } }] : [{ - name: 'Delete', - description: 'Delete this user', - icon: 'trash', - color: 'danger', + name: 'Elastic.co', + description: 'Go to elastic.co', + icon: 'editorLink', + color: 'primary', type: 'icon', - onClick: this.deleteUser + href: 'https://elastic.co', + target: '_blank', }]; } diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js index 42e9f38dfe2..9f854e6e435 100644 --- a/src/components/basic_table/basic_table.js +++ b/src/components/basic_table/basic_table.js @@ -63,7 +63,9 @@ const DefaultItemActionType = PropTypes.shape({ type: PropTypes.oneOf(['icon', 'button']), // default is 'button' name: PropTypes.string.isRequired, description: PropTypes.string.isRequired, - onClick: PropTypes.func.isRequired, // (item) => void, + onClick: PropTypes.func, // (item) => void, + href: PropTypes.string, + target: PropTypes.string, available: PropTypes.func, // (item) => boolean; enabled: PropTypes.func, // (item) => boolean; isPrimary: PropTypes.bool, diff --git a/src/components/basic_table/default_item_action.js b/src/components/basic_table/default_item_action.js index 0705cba833d..4aab6e69617 100644 --- a/src/components/basic_table/default_item_action.js +++ b/src/components/basic_table/default_item_action.js @@ -15,11 +15,13 @@ export class DefaultItemAction extends Component { render() { const { action, enabled, item, className } = this.props; - if (!action.onClick) { - throw new Error(`Cannot render item action [${action.name}]. Missing required 'onClick' callback. If you want - to provide a custom action control, make sure to define the 'render' callback`); + + if (!action.onClick && !action.href) { + throw new Error(`Cannot render item action [${action.name}]. Missing required 'onClick' callback + or 'href' string. If you want to provide a custom action control, make sure to define the 'render' callback`); } - const onClick = () => action.onClick(item); + + const onClick = action.onClick ? () => action.onClick(item) : undefined; const color = this.resolveActionColor(); const icon = this.resolveActionIcon(); @@ -37,6 +39,8 @@ export class DefaultItemAction extends Component { color={color} iconType={icon} onClick={onClick} + href={action.href} + target={action.target} /> ); } else { @@ -48,6 +52,8 @@ export class DefaultItemAction extends Component { color={color} iconType={icon} onClick={onClick} + href={action.href} + target={action.target} flush="right" > {action.name}