Pass sorting icons to Table through props (#13)

react-ui-org · Feb 7, 2020 · b029265 · b029265
1 parent 99be881
commit b029265
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 7 deletions.
diff --git a/demo/generated/demo.js b/demo/generated/demo.js
diff --git a/dist/lib.js b/dist/lib.js
diff --git a/src/demo/pages/DemoContainer.jsx b/src/demo/pages/DemoContainer.jsx
@@ -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,
                   }}
                 />

diff --git a/src/lib/components/ui/Table/Table.jsx b/src/lib/components/ui/Table/Table.jsx
@@ -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,
   }),
 };

diff --git a/src/lib/components/ui/Table/__tests__/Table.test.jsx b/src/lib/components/ui/Table/__tests__/Table.test.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',
         }}
       />

diff --git a/src/lib/components/ui/Table/__tests__/__snapshots__/Table.test.jsx.snap b/src/lib/components/ui/Table/__tests__/__snapshots__/Table.test.jsx.snap
@@ -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"