diff --git a/CHANGELOG.md b/CHANGELOG.md index cca9d556b..2af066060 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ * Conform ``'s internal state when the value prop changes after the initial render. Refs STCOM-1311. * Make `` less strict about item removal via `itemToKey` setting (`downshift`). Refs STCOM-1311. * Conform ``'s internal state when dataOptions prop changes after initial render. Refs STCOM-1313. +* Add the `showSortIndicator` property to MLC to display a sort indicator next to the sortable column names. Refs STCOM-1328. ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12) [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0) diff --git a/lib/MultiColumnList/MCLRenderer.css b/lib/MultiColumnList/MCLRenderer.css index 0dde724f3..0282d287e 100644 --- a/lib/MultiColumnList/MCLRenderer.css +++ b/lib/MultiColumnList/MCLRenderer.css @@ -263,6 +263,16 @@ &.mclSorted .mclHeaderInner { text-decoration: underline; } + + &.mclSortIndicator .mclHeaderInner::after { + content: ''; + width: var(--gutter-static); + height: 18px; + background: + url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22%23888%22%20class%3D%22stripes__icon%22%20d%3D%22M7%202.9l5.77%206.92-1.54%201.28L7%206.02%202.77%2011.1%201.23%209.82%207%202.9z%22/%3E%3C/svg%3E') no-repeat center top, + url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22%23888%22%20class%3D%22stripes__icon%22%20d%3D%22M7%2011.1L1.23%204.18%202.77%202.9%207%207.98l4.23-5.08%201.54%201.28L7%2011.1z%22/%3E%3C/svg%3E') no-repeat center 8px; + background-size: 10px; + } } .mclHeaderOuter:active, diff --git a/lib/MultiColumnList/MCLRenderer.js b/lib/MultiColumnList/MCLRenderer.js index 53364cca1..7e4f2b830 100644 --- a/lib/MultiColumnList/MCLRenderer.js +++ b/lib/MultiColumnList/MCLRenderer.js @@ -253,6 +253,7 @@ class MCLRenderer extends React.Component { scrollToIndex: PropTypes.number, selectedClass: PropTypes.string, selectedRow: PropTypes.object, + showSortIndicator: PropTypes.bool, sortDirection: PropTypes.oneOf(['ascending', 'descending']), sortedColumn: PropTypes.string, sortOrder: PropTypes.string, @@ -295,6 +296,7 @@ class MCLRenderer extends React.Component { rowUpdater: noop, scrollToIndex: 0, selectedClass: css.mclSelected, + showSortIndicator: false, striped: true, totalCount: 0, minimumRowHeight: 30.8, @@ -1546,12 +1548,15 @@ class MCLRenderer extends React.Component { }; getHeaderClassName = (column, sortedBy, isInteractive) => { + const { showSortIndicator } = this.props; + return classnames( css.mclHeader, { [`${css.mclClickable}`]: isInteractive }, { [`${css.mclSorted}`]: sortedBy }, { [`${css.mclAscending}`]: (sortedBy && this.props.sortDirection === 'ascending') }, { [`${css.mclDescending}`]: (sortedBy && this.props.sortDirection === 'descending') }, + { [`${css.mclSortIndicator}`]: showSortIndicator && isInteractive && !sortedBy }, ); }; diff --git a/lib/MultiColumnList/readme.md b/lib/MultiColumnList/readme.md index c28ad4695..d77c6c8df 100644 --- a/lib/MultiColumnList/readme.md +++ b/lib/MultiColumnList/readme.md @@ -113,6 +113,7 @@ Name | type | description | default | required `rowUpdater` | func(`rowData`, `rowIndex`) | This function should return a shallow data structure (flattened object) or primitive (string, number) that will indicate that exterior data for a row has changed. It will receive two parameters of the `rowData` and the `rowIndex` that can be used to base return values. This result is fed directly to the data rows via props, keeping them pure. You should rarely have to use this prop, as most changes will be relayed directly in the `contentData` array itself. | `noop` | `selectedClass` | string | override class for the default style applied to selected rows. | built-in | `selectedRow` | object | **legacy API** Applies 'selected' class to the table row matching the property in the object, e.g. {id: '1224'}. | | +`showSortIndicator` | bool | If true, an icon for sortable fields will be displayed next to the column name. It will not be displayed for the currently sorted column. | false | `sortedColumn` | string | Used to apply styling to the appropriate column. | | `sortDirection` | string | 'ascending' or 'descending' direction. | | `stickyFirstColumn` | bool | Pins the first column in place so that it will remain visible when scrolled out of view. | | diff --git a/lib/MultiColumnList/stories/BasicMCL.js b/lib/MultiColumnList/stories/BasicMCL.js index ffbf8def9..535fc9c1f 100644 --- a/lib/MultiColumnList/stories/BasicMCL.js +++ b/lib/MultiColumnList/stories/BasicMCL.js @@ -35,6 +35,7 @@ export default class BasicMCL extends React.Component { {row.active ? 'active' : 'inactive'} }} + nonInteractiveHeaders={['phone']} /> ); }