Pass sorting icons to Table through props (#13)

Author: bedrich-schindler

demo/generated/demo.js

@@ -1619,13 +1619,15 @@ class DemoContainer extends React.Component {
                     },
                   ]}
                   sort={{
+                    ascendingIcon: <Icon icon="arrow_upward" />,
                     changeHandler: (column, direction) => {
                       this.setState({
                         tableSortColumn: column,
                         tableSortDirection: direction === 'asc' ? 'desc' : 'asc',
                       });
                     },
                     column: this.state.tableSortColumn,
+                    descendingIcon: <Icon icon="arrow_downward" />,
                     direction: this.state.tableSortDirection,
                   }}
                 />

dist/lib.js

@@ -32,7 +32,11 @@ class Table extends React.Component {
           <div className={styles.sortButton}>
             <Button
               clickHandler={() => sort.changeHandler(column.name, sortDirection)}
-              icon={sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward'}
+              beforeLabel={
+                sortDirection === 'asc'
+                  ? sort.ascendingIcon
+                  : sort.descendingIcon
+              }
               label={sortDirection}
               labelVisibility="none"
               priority="flat"
@@ -126,8 +130,10 @@ Table.propTypes = {
     ]).isRequired,
   })).isRequired,
   sort: PropTypes.shape({
+    ascendingIcon: PropTypes.element.isRequired,
     changeHandler: PropTypes.func.isRequired,
     column: PropTypes.string.isRequired,
+    descendingIcon: PropTypes.element.isRequired,
     direction: PropTypes.oneOf(['asc', 'desc']).isRequired,
   }),
 };

src/demo/pages/DemoContainer.jsx

@@ -5,6 +5,7 @@ import {
   shallow,
 } from 'enzyme';
 import { shallowToJson } from 'enzyme-to-json';
+import Icon from '../../Icon';
 import Table from '../Table';
 
 jest.mock('../../Icon/load-material-design-icons');
@@ -51,8 +52,10 @@ describe('rendering', () => {
       id="custom-id"
       rows={rowsData}
       sort={{
+        ascendingIcon: <Icon icon="arrow_upward" />,
         changeHandler: () => {},
         column: 'id',
+        descendingIcon: <Icon icon="arrow_downward" />,
         direction: 'asc',
       }}
     />);
@@ -69,8 +72,10 @@ describe('functionality', () => {
         columns={columnsData}
         rows={rowsData}
         sort={{
+          ascendingIcon: <Icon icon="arrow_upward" />,
           changeHandler: spy,
           column: 'id',
+          descendingIcon: <Icon icon="arrow_downward" />,
           direction: 'asc',
         }}
       />

src/lib/components/ui/Table/Table.jsx

@@ -82,13 +82,17 @@ exports[`rendering renders correctly with all props 1`] = `
           >
             <Button
               afterLabel={null}
-              beforeLabel={null}
+              beforeLabel={
+                <Icon
+                  icon="arrow_upward"
+                  size="medium"
+                />
+              }
               block={false}
               clickHandler={[Function]}
               disabled={false}
               endCorner={null}
               grouped={false}
-              icon="arrow_upward"
               id="custom-id__headerCell__id__sortButton"
               label="asc"
               labelVisibility="none"
@@ -112,13 +116,17 @@ exports[`rendering renders correctly with all props 1`] = `
           >
             <Button
               afterLabel={null}
-              beforeLabel={null}
+              beforeLabel={
+                <Icon
+                  icon="arrow_upward"
+                  size="medium"
+                />
+              }
               block={false}
               clickHandler={[Function]}
               disabled={false}
               endCorner={null}
               grouped={false}
-              icon="arrow_upward"
               id="custom-id__headerCell__name__sortButton"
               label="asc"
               labelVisibility="none"