Refactor of DataListToolbar. Creates a number of smaller components used by the toolbar. Adds support for passing in an add button node to the toolbar.

src/components/Sort/Sort.jsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  Button,
+  Dropdown,
+  DropdownPosition,
+  DropdownToggle,
+  DropdownItem
+} from '@patternfly/react-core';
+import {
+  SortAlphaDownIcon,
+  SortAlphaUpIcon,
+  SortNumericDownIcon,
+  SortNumericUpIcon
+} from '@patternfly/react-icons';
+
+class Sort extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      isSortDropdownOpen: false,
+    };
+
+    this.onSortDropdownToggle = this.onSortDropdownToggle.bind(this);
+    this.onSortDropdownSelect = this.onSortDropdownSelect.bind(this);
+    this.onSort = this.onSort.bind(this);
+  }
+
+  onSortDropdownToggle (isSortDropdownOpen) {
+    this.setState({ isSortDropdownOpen });
+  }
+
+  onSortDropdownSelect ({ target }) {
+    const { columns, onSort, sortOrder } = this.props;
+    const { innerText } = target;
+
+    const [{ key: searchKey }] = columns.filter(({ name }) => name === innerText);
+
+    this.setState({ isSortDropdownOpen: false });
+    onSort(searchKey, sortOrder);
+  }
+
+  onSort () {
+    const { onSort, sortedColumnKey, sortOrder } = this.props;
+    const newSortOrder = sortOrder === 'ascending' ? 'descending' : 'ascending';
+
+    onSort(sortedColumnKey, newSortOrder);
+  }
+
+  render () {
+    const { up } = DropdownPosition;
+    const {
+      columns,
+      sortedColumnKey,
+      sortOrder
+    } = this.props;
+    const {
+      isSortDropdownOpen
+    } = this.state;
+
+    const [{ name: sortedColumnName, isNumeric }] = columns
+      .filter(({ key }) => key === sortedColumnKey);
+
+    const sortDropdownItems = columns
+      .filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
+      .map(({ key, name }) => (
+        <DropdownItem key={key} component="button">
+          {name}
+        </DropdownItem>
+      ));
+
+    let SortIcon;
+    if (isNumeric) {
+      SortIcon = sortOrder === 'ascending' ? SortNumericUpIcon : SortNumericDownIcon;
+    } else {
+      SortIcon = sortOrder === 'ascending' ? SortAlphaUpIcon : SortAlphaDownIcon;
+    }
+
+    return (
+      <I18n>
+        {({ i18n }) => (
+          <React.Fragment>
+            { sortDropdownItems.length > 1 && (
+              <Dropdown
+                style={{ marginRight: '20px' }}
+                onToggle={this.onSortDropdownToggle}
+                onSelect={this.onSortDropdownSelect}
+                direction={up}
+                isOpen={isSortDropdownOpen}
+                toggle={(
+                  <DropdownToggle
+                    onToggle={this.onSortDropdownToggle}
+                  >
+                    {sortedColumnName}
+                  </DropdownToggle>
+                )}
+                dropdownItems={sortDropdownItems}
+              />
+            )}
+            <Button
+              onClick={this.onSort}
+              variant="plain"
+              aria-label={i18n._(t`Sort`)}
+            >
+              <SortIcon />
+            </Button>
+          </React.Fragment>
+        )}
+      </I18n>
+    );
+  }
+}
+
+Sort.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSort: PropTypes.func,
+  sortOrder: PropTypes.string,
+  sortedColumnKey: PropTypes.string
+};
+
+Sort.defaultProps = {
+  onSort: null,
+  sortOrder: 'ascending',
+  sortedColumnKey: 'name'
+};
+
+export default Sort;

src/components/Sort/index.js

@@ -0,0 +1,3 @@
+import Sort from './Sort';
+
+export default Sort;