From ff958e806e785ea816f23bec089f2594138be265 Mon Sep 17 00:00:00 2001 From: Jeremy Myers Date: Thu, 29 Feb 2024 13:10:06 -0500 Subject: [PATCH 1/3] Delete unused components --- .../components/common/RemoteContent.jsx | 39 ------ .../common/VerticalScrollHelper.jsx | 124 ------------------ 2 files changed, 163 deletions(-) delete mode 100644 packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/common/RemoteContent.jsx delete mode 100644 packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/common/VerticalScrollHelper.jsx diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/common/RemoteContent.jsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/common/RemoteContent.jsx deleted file mode 100644 index 39e9d538cf..0000000000 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/common/RemoteContent.jsx +++ /dev/null @@ -1,39 +0,0 @@ -/** - * Load remote content and embed within component node. Any javascript - * included in the remote content will be executed. This is useful for - * embedding HTML fragments. - */ -import $ from 'jquery'; -import React from 'react'; - -export default class RemoteContent extends React.PureComponent { - componentDidMount() { - this.loadContent(this.props.url); - } - - componentWillReceiveProps(props) { - if (props.url !== this.props.url) { - this.loadContent(props.url); - } - } - - loadContent(url) { - // Fetch the html and append it. - // Handling script tags in the received html is hard, so using jquery for the time being. - $(this.node).html('Loading...'); - $.get(url).always((response) => { - let html = - typeof response === 'string' ? response : response.responseText; - $(this.node).html(html); - this.props.onLoad(this.node); - }); - } - - render() { - return
(this.node = node)} />; - } -} - -RemoteContent.defaultProps = { - onLoad() {}, -}; diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/common/VerticalScrollHelper.jsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/common/VerticalScrollHelper.jsx deleted file mode 100644 index 5eb0323a3d..0000000000 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/common/VerticalScrollHelper.jsx +++ /dev/null @@ -1,124 +0,0 @@ -import $ from 'jquery'; -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { bindAll, throttle } from 'lodash'; -import { isNodeOverflowing } from '@veupathdb/web-common/lib/util/domUtils'; - -/** - * Renders buttons to scroll scroll vertically. - */ -export default class VerticalScrollHelper extends Component { - constructor(props) { - super(props); - this.state = { - leftButtonActive: false, - rightButtonActive: false, - }; - this.node = null; - bindAll(this, 'setNode', 'scrollLeft', 'scrollRight'); - this.updateButtonState = throttle(this.updateButtonState.bind(this), 250); - } - - componentDidMount() { - this.updateButtonState(); - window.addEventListener('resize', this.updateButtonState); - } - - componentWillReceiveProps() { - this.updateButtonState(); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.updateButtonState); - } - - setNode(node) { - this.node = node; - } - - updateButtonState() { - this.setState({ - showButtons: isNodeOverflowing(this.node), - leftButtonActive: this.node.scrollLeft > 0, - rightButtonActive: - this.node.scrollWidth - this.node.scrollLeft > this.node.clientWidth, - }); - } - - scrollLeft(event) { - event.preventDefault(); - this.updateScroll(this.node.clientWidth * -1); - } - - scrollRight(event) { - event.preventDefault(); - this.updateScroll(this.node.clientWidth); - } - - updateScroll(scrollDelta) { - // this.node.scrollLeft += scrollDelta; - $(this.node).animate( - { scrollLeft: this.node.scrollLeft + scrollDelta }, - this.updateButtonState - ); - } - - renderLeftButton() { - return this.renderButton( - , - this.state.leftButtonActive, - this.scrollLeft - ); - } - - renderRightButton() { - return this.renderButton( - , - this.state.rightButtonActive, - this.scrollRight - ); - } - - renderButton(text, active, onClick) { - return ( - - ); - } - - renderButtons() { - if (this.state.showButtons) { - return ( -
- {this.renderLeftButton()} - {this.renderRightButton()} -
- ); - } - } - - render() { - return ( -
-
- {this.props.children} -
- {this.renderButtons()} -
- ); - } -} - -VerticalScrollHelper.propTypes = { - children: PropTypes.element.isRequired, - scrollDelta: PropTypes.number.isRequired, -}; - -VerticalScrollHelper.defaultProps = { - scrollDelta: 50, -}; From ccd004b5a83fba6fdd4e6b7bf8d87104c118c96c Mon Sep 17 00:00:00 2001 From: Jeremy Myers Date: Thu, 29 Feb 2024 13:38:54 -0500 Subject: [PATCH 2/3] Remove jquery from click-off logic in AnswerFilterSelector --- .../src/Views/Answer/AnswerFilterSelector.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/libs/wdk-client/src/Views/Answer/AnswerFilterSelector.jsx b/packages/libs/wdk-client/src/Views/Answer/AnswerFilterSelector.jsx index 5a8446eb7b..1737b6fef8 100644 --- a/packages/libs/wdk-client/src/Views/Answer/AnswerFilterSelector.jsx +++ b/packages/libs/wdk-client/src/Views/Answer/AnswerFilterSelector.jsx @@ -1,9 +1,7 @@ -import $ from 'jquery'; import { includes } from 'lodash'; import React, { Component } from 'react'; -import ReactDOM from 'react-dom'; import TabbableContainer from '../../Components/Display/TabbableContainer'; -import { wrappable, lazy } from '../../Utils/ComponentUtils'; +import { wrappable } from '../../Utils/ComponentUtils'; /** Filter text input */ function renderFilterField(field, isChecked, handleChange) { @@ -22,6 +20,8 @@ function renderFilterField(field, isChecked, handleChange) { ); } +const ANSWER_FILTER_CLASSNAME = 'wdk-Answer-filterFieldSelector'; + /** Record fields to match filter expression against */ class AnswerFilterSelector extends Component { constructor(props) { @@ -33,8 +33,7 @@ class AnswerFilterSelector extends Component { }; this.handleDocumentClick = (e) => { // close if the click target is not contained by this node - let node = ReactDOM.findDOMNode(this); - if ($(e.target).closest(node).length === 0) { + if (!e.target.closest(`.${ANSWER_FILTER_CLASSNAME}`)) { this.props.onClose(); } }; @@ -78,7 +77,7 @@ class AnswerFilterSelector extends Component {

From cf5b8d6dfe14d722ca6ff80db235c56bd468d5b0 Mon Sep 17 00:00:00 2001 From: Jeremy Myers Date: Fri, 1 Mar 2024 12:50:01 -0500 Subject: [PATCH 3/3] Remove jquery from TabbableContainer --- .../Components/Display/TabbableContainer.tsx | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/libs/wdk-client/src/Components/Display/TabbableContainer.tsx b/packages/libs/wdk-client/src/Components/Display/TabbableContainer.tsx index 1401a1e7c5..42fa18660d 100644 --- a/packages/libs/wdk-client/src/Components/Display/TabbableContainer.tsx +++ b/packages/libs/wdk-client/src/Components/Display/TabbableContainer.tsx @@ -1,4 +1,3 @@ -import $ from 'jquery'; import React from 'react'; type RKeyboardEvent = React.KeyboardEvent; @@ -35,7 +34,6 @@ class TabbableContainer extends React.Component { !this.node.contains(document.activeElement) ) { this.node.focus(); - // $(this.node).find(':tabbable:first').focus(); } } @@ -53,14 +51,32 @@ class TabbableContainer extends React.Component { if (event.key !== 'Tab') { return; } - let tabbables = $(':tabbable', this.node!); - let l = tabbables.length; - let index = tabbables.index($(event.target as HTMLElement)); + // Assuming `this.node` refers to the container node, get all tabbable elements within the container + const tabbables: HTMLElement[] | null = + this.node && + Array.from( + this.node.querySelectorAll( + 'a[href], button, input, select, textarea, [tabindex]' + ) + ); + + // Filter out elements that are not tabbable + const filteredTabbables = + tabbables?.filter((element) => { + const tabIndex = element.getAttribute('tabindex'); + const isDisabled = + 'disabled' in element && + (element as HTMLElement & { disabled: boolean }).disabled; + return !isDisabled && tabIndex !== '-1'; + }) ?? []; + + let l = filteredTabbables.length; + let index = filteredTabbables.findIndex((el) => el === event.target); let delta = event.shiftKey ? l - 1 : 1; let nextIndex = (index + delta) % l; - let nextTarget = tabbables[nextIndex]; + let nextTarget = filteredTabbables[nextIndex]; if (nextTarget == null) { - nextTarget = tabbables[0]; + nextTarget = filteredTabbables[0]; } nextTarget.focus(); event.preventDefault();