diff --git a/es/components/browse/components/table-commons/HeadersRow.js b/es/components/browse/components/table-commons/HeadersRow.js index 3d2efde7..58750835 100644 --- a/es/components/browse/components/table-commons/HeadersRow.js +++ b/es/components/browse/components/table-commons/HeadersRow.js @@ -40,7 +40,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } -import React, { memo, useMemo } from 'react'; +import React, { useRef, useEffect, useMemo } from 'react'; import PropTypes from 'prop-types'; import _ from 'underscore'; import memoize from 'memoize-one'; @@ -714,7 +714,8 @@ var ColumnSorterIcon = /*#__PURE__*/function (_React$PureComponent3) { tooltip = "" + sort_fields.length + " sort options"; } - return /*#__PURE__*/React.createElement("span", { + return /*#__PURE__*/React.createElement("button", { + type: "button", className: cls, onClick: this.onIconClick, "data-tip": tooltip, @@ -828,18 +829,29 @@ var SortOptionsMenu = /*#__PURE__*/React.memo(function (_ref15) { // TODO grab title from schemas if not provided. var isActive = currentSortColumn === field; var cls = "dropdown-item" + " clickable no-highlight no-user-select" + " d-flex align-items-center justify-content-between" + (isActive ? " active" : ""); - var onClick = sortByField.bind(sortByField, field); - return /*#__PURE__*/React.createElement("div", { + return /*#__PURE__*/React.createElement("a", { + href: "#", className: cls, key: field, - onClick: onClick + onClick: function onClick(e) { + e.preventDefault(); + e.stopPropagation(); + sortByField(field); + } }, title || field, !isActive ? null : /*#__PURE__*/React.createElement("i", { className: "small icon fas ml-12 icon-arrow-".concat(descend ? "down" : "up") })); }); + var menuRef = useRef(null); + useEffect(function () { + var firstLinkElement = menuRef.current.querySelector("a"); + firstLinkElement && firstLinkElement.focus(); + }, []); // Empty array 2nd arg == performed only on mount. + return /*#__PURE__*/React.createElement("div", { className: "dropdown-menu show", - style: style + style: style, + ref: menuRef }, header, options); }); var ColumnSorterIconElement = /*#__PURE__*/React.memo(function (_ref17) { @@ -869,11 +881,11 @@ var ColumnSorterIconElement = /*#__PURE__*/React.memo(function (_ref17) { if (descend) { return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", { - className: "sort-icon icon icon-fw icon-sort-down fas align-top" + className: "sort-icon icon icon-fw icon-sort-down fas align-text-top" }), sequence); } else { return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", { - className: "sort-icon icon icon-fw icon-sort-up fas align-bottom" + className: "sort-icon icon icon-fw icon-sort-up fas align-text-bottom" }), sequence); } }); diff --git a/package-lock.json b/package-lock.json index b5ca4ad2..d53831df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@hms-dbmi-bgm/shared-portal-components", - "version": "0.0.2", + "version": "0.1.27", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 20daded4..2020fe4b 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ "react-bootstrap": "*", "react-tooltip": ">=3.11.6", "react-transition-group": ">=4.4.1", - "underscore": ">=1.9.1" + "underscore": ">=1.9.1", + "url": ">=0.11.0" } } diff --git a/scss/search-view-table.scss b/scss/search-view-table.scss index e9ab2d77..db565124 100644 --- a/scss/search-view-table.scss +++ b/scss/search-view-table.scss @@ -546,14 +546,19 @@ $search-results-above-results-row-bottom-padding: 5px !default; > .column-sort-icon { color: transparentize($color: $search-results-header-text-color, $amount: 0.6); // rgba(255,255,255,0.35); text-decoration: none !important; - padding-left: 0; + padding-left: 5px; padding-right: 5px; - display: inline-block; - /* float: right; */ + position: absolute; cursor: pointer; right: 9px; + height: $search-results-header-row-height - 24px; + line-height: $search-results-header-row-height - 24px; transition: color .35s ease-out; + + border: none; + background-color: transparent; + &:hover, &:active, &:focus { color: $search-results-header-text-color; } diff --git a/src/components/browse/components/table-commons/HeadersRow.js b/src/components/browse/components/table-commons/HeadersRow.js index da447549..c4ab9f6e 100644 --- a/src/components/browse/components/table-commons/HeadersRow.js +++ b/src/components/browse/components/table-commons/HeadersRow.js @@ -1,4 +1,4 @@ -import React, { memo, useMemo } from 'react'; +import React, { useRef, useEffect, useMemo } from 'react'; import PropTypes from 'prop-types'; import _ from 'underscore'; import memoize from 'memoize-one'; @@ -495,9 +495,9 @@ class ColumnSorterIcon extends React.PureComponent { tooltip = "" + sort_fields.length + " sort options"; } return ( - + ); } } @@ -565,17 +565,28 @@ const SortOptionsMenu = React.memo(function SortOptionsMenu({ " d-flex align-items-center justify-content-between" + (isActive ? " active" : "") ); - const onClick = sortByField.bind(sortByField, field); + const onClick = function(e){ + e.preventDefault(); + e.stopPropagation(); + sortByField(field); + }; return ( -
+ { title || field } { !isActive ? null : } -
+ ); }); + const menuRef = useRef(null); + + useEffect(function(){ + const firstLinkElement = menuRef.current.querySelector("a"); + firstLinkElement && firstLinkElement.focus(); + }, []); // Empty array 2nd arg == performed only on mount. + return ( -
+
{ header } { options }
@@ -585,7 +596,7 @@ const SortOptionsMenu = React.memo(function SortOptionsMenu({ const ColumnSorterIconElement = React.memo(function ColumnSorterIconElement({ descend, showingSortOptionsMenu, isLoading = false, sequence : propSequence }){ if (isLoading) { - return ; + return ; } if (showingSortOptionsMenu) { return ; @@ -599,14 +610,14 @@ const ColumnSorterIconElement = React.memo(function ColumnSorterIconElement({ de if (descend){ return ( - - {sequence} + + { sequence } ); } else { return ( - - {sequence} + + { sequence } ); } }); @@ -639,4 +650,4 @@ export function flattenColumnsDefinitionsSortFields(columnDefinitions) { allSortFieldsMap[sortField.field] = sortField; }); return { allSortFields, allSortFieldsMap }; -} \ No newline at end of file +}