Merge pull request #2600 from louisbl/fix-sort-arrow-with-sortBy

[RFR] Fixes arrow in sorted column header when field use sortBy props
marmelab · Dec 13, 2018 · 968af0f · 968af0f
2 parents 1d2d45e + 5ff475f
commit 968af0f
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/cypress/integration/list.js b/cypress/integration/list.js
@@ -167,4 +167,29 @@ describe('List Page', () => {
             cy.contains('1-10 of 10');
         });
     });
+
+    describe("Sorting", () => {
+        it('should display a sort arrow when clicking on a sortable column header', () => {
+            ListPagePosts.toggleColumnSort('id');
+            cy.get(ListPagePosts.elements.sortBy('id')).get("svg").should('be.visible');
+
+            ListPagePosts.toggleColumnSort('"tags.name"');
+            cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("svg").should('be.visible');
+        });
+
+        it('should hide the sort arrow when clicking on another sortable column header', () => {
+            ListPagePosts.toggleColumnSort('published_at');
+            cy.get(ListPagePosts.elements.sortBy('id')).get("svg").should('be.hidden');
+            cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("svg").should('be.hidden');
+        });
+
+        it('should reverse the sort arrow when clicking on an already sorted column header', () => {
+            ListPagePosts.toggleColumnSort('published_at');
+            ListPagePosts.toggleColumnSort('"tags.name"');
+            cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("[class*=iconDirectionAsc]").should('exist');
+
+            ListPagePosts.toggleColumnSort('"tags.name"');
+            cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("[class*=iconDirectionDesc]").should('exist');
+        });
+    })
 });
diff --git a/cypress/support/ListPage.js b/cypress/support/ListPage.js
@@ -15,6 +15,7 @@ export default url => ({
         recordRows: '.datagrid-body tr',
         viewsColumn: '.datagrid-body tr td:nth-child(6)',
         datagridHeaders: 'th',
+        sortBy: name => `th span[data-sort=${name}]`,
         logout: '.logout',
         bulkActionsToolbar: '[data-test=bulk-actions-toolbar]',
         customBulkActionsButton:
@@ -101,4 +102,8 @@ export default url => ({
     applyDeleteBulkAction() {
         cy.get(this.elements.deleteBulkActionsButton).click();
     },
+
+    toggleColumnSort(name) {
+        cy.get(this.elements.sortBy(name)).click();
+    }
 });
diff --git a/examples/simple/src/posts/PostList.js b/examples/simple/src/posts/PostList.js
@@ -114,6 +114,7 @@ const PostList = withStyles(styles)(({ classes, ...props }) => (
                         label="Tags"
                         reference="tags"
                         source="tags"
+                        sortBy="tags.name"
                         cellClassName={classes.hiddenOnSmallScreens}
                         headerClassName={classes.hiddenOnSmallScreens}
                     >

diff --git a/packages/ra-ui-materialui/src/list/Datagrid.js b/packages/ra-ui-materialui/src/list/Datagrid.js
@@ -156,8 +156,8 @@ class Datagrid extends Component {
                                         currentSort={currentSort}
                                         field={field}
                                         isSorting={
-                                            field.props.source ===
-                                            currentSort.field
+                                            currentSort.field ===
+                                            (field.props.sortBy || field.props.source)
                                         }
                                         key={field.props.source || index}
                                         resource={resource}