Skip to content

Headers row sort -> literal buttons instead of icon with onClick handler #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
alexkb0009 wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Headers row sort -> literal buttons instead of icon with onClick handler #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eaa9413
Accessibility:
alexkb0009 Nov 19, 2021
0e49702
Fix for navigation
alexkb0009 Nov 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 20 additions & 8 deletions es/components/browse/components/table-commons/HeadersRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
});
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
11 changes: 8 additions & 3 deletions scss/search-view-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
37 changes: 24 additions & 13 deletions src/components/browse/components/table-commons/HeadersRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -495,9 +495,9 @@ class ColumnSorterIcon extends React.PureComponent {
tooltip = "" + sort_fields.length + " sort options";
}
return (
<span className={cls} onClick={this.onIconClick} data-tip={tooltip} data-html>
<button type="button" className={cls} onClick={this.onIconClick} data-tip={tooltip} data-html>
<ColumnSorterIconElement {...{ showingSortOptionsMenu, hasMultipleSortOptions, isLoading, sequence }} descend={!sortMap || descend} />
</span>
</button>
);
}
}
Expand Down Expand Up @@ -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 (
<div className={cls} key={field} onClick={onClick}>
<a href="#" className={cls} key={field} onClick={onClick}>
{ title || field }
{ !isActive ? null : <i className={`small icon fas ml-12 icon-arrow-${descend ? "down" : "up"}`}/> }
</div>
</a>
);
});

const menuRef = useRef(null);

useEffect(function(){
const firstLinkElement = menuRef.current.querySelector("a");
firstLinkElement && firstLinkElement.focus();
}, []); // Empty array 2nd arg == performed only on mount.

return (
<div className="dropdown-menu show" style={style}>
<div className="dropdown-menu show" style={style} ref={menuRef}>
{ header }
{ options }
</div>
Expand All @@ -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 <i className="icon icon-fw icon-circle-notch icon-spin fas"/>;
return <i className="icon icon-fw icon-circle-notch icon-spin fas" />;
}
if (showingSortOptionsMenu) {
return <i className="icon icon-fw icon-times fas"/>;
Expand All @@ -599,14 +610,14 @@ const ColumnSorterIconElement = React.memo(function ColumnSorterIconElement({ de
if (descend){
return (
<React.Fragment>
<i className="sort-icon icon icon-fw icon-sort-down fas align-top" />
{sequence}
<i className="sort-icon icon icon-fw icon-sort-down fas align-text-top" />
{ sequence }
</React.Fragment>);
} else {
return (
<React.Fragment>
<i className="sort-icon icon icon-fw icon-sort-up fas align-bottom" />
{sequence}
<i className="sort-icon icon icon-fw icon-sort-up fas align-text-bottom" />
{ sequence }
</React.Fragment>);
}
});
Expand Down Expand Up @@ -639,4 +650,4 @@ export function flattenColumnsDefinitionsSortFields(columnDefinitions) {
allSortFieldsMap[sortField.field] = sortField;
});
return { allSortFields, allSortFieldsMap };
}
}