Fix sorting icon issue

josephspens · Oct 31, 2016 · 6b81af8 · 6b81af8
1 parent c3369ee
commit 6b81af8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/lib/Table/index.js b/src/lib/Table/index.js
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import propTypes from './propTypes';
 import Pagination from '../Pagination';
+import { getSortableIcon } from './utils';
 
 export default class Table extends Component {
   static defaultProps = {
@@ -36,10 +37,15 @@ export default class Table extends Component {
                   {name}
                   <span
                     style={this.context.theme.tableColumnHeaderDirection}
-                    dangerouslySetInnerHTML={{ __html: this.props.sortable.includes(id) && this.props.sort !== id && '&#8645;' }}
-                  >
-                    {/* {this.props.sortable.includes(id) && this.props.sort !== id && '&#8645;'} */}
-                  </span>
+                    dangerouslySetInnerHTML={{
+                      __html: getSortableIcon({
+                        sortableColumns: this.props.sortable,
+                        sortedColumn: this.props.sort,
+                        columnId: id,
+                        sortDirection: this.props.direction
+                      })
+                    }}
+                  ></span>
                 </th>
               ))}
             </tr>

diff --git a/src/lib/Table/utils.js b/src/lib/Table/utils.js
@@ -0,0 +1,6 @@
+export const getSortableIcon = ({ sortableColumns, sortedColumn, columnId, sortDirection }) => {
+  if (!sortableColumns.includes(columnId)) return;
+  if (sortedColumn !== columnId) return '&#8645;';
+  if (sortDirection === 'ASC') return '&#8593;';
+  if (sortDirection === 'DESC') return '&#8595;';
+}