chore: handleKeyPress as a prop to SheetContentSegments

Sefaria · Jan 8, 2025 · 34400cc · 34400cc
1 parent 030fa8b
commit 34400cc
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/static/js/sheets/SheetContent.jsx b/static/js/sheets/SheetContent.jsx
@@ -110,14 +110,14 @@ class SheetContent extends Component {
 
     if (!sources.length) return null;
 
-    return sources.map((source, index) => {
+    return sources.map(source => {
       const addToSheetButton = this.props.highlightedNode === source.node &&
                                               <AddToSheetButton sheetID={this.props.sheetID}
                                                                 highlightedRefs={this.props.highlightedRefs}
                                                                 highlightedNode={this.props.highlightedNode}
                                                                 toggleSignUpModal={this.props.toggleSignUpModal}/>;
       const { highlightedNode, sheetSourceClick } = this.props;
-      let highlighted = this.props.source.node === this.props.highlightedNode;
+      let highlighted = source.node === this.props.highlightedNode;
       let ComponentToRender;
       if ("ref" in source) {
         const highlightedRef = this.props.highlightedRefsInSheet ? Sefaria.normRefList(this.props.highlightedRefsInSheet) : null;
@@ -138,6 +138,7 @@ class SheetContent extends Component {
         key={source.node}
         source={source}
         sheetSourceClick={() => sheetSourceClick(source)}
+        handleKeyPress={(e) => e.charCode === 13 && sheetSourceClick(e)}
         highlighted={highlighted}
         addToSheetButton={addToSheetButton}/>;
     });

diff --git a/static/js/sheets/SheetContentSegments.jsx b/static/js/sheets/SheetContentSegments.jsx
@@ -24,9 +24,7 @@ class SheetSource extends Component {
           data-node={this.props.source.node}
           aria-label={"Click to see connections to this source"}
           tabIndex="0"
-          onKeyPress={function(e) {
-            e.charCode === 13 ? this.props.sheetSourceClick(e):null}.bind(this)
-          } >
+          onKeyPress={this.props.handleKeyPress} >
           {this.props.source.title ?
           <div className="customSourceTitle" role="heading" aria-level="3">
             <div className="titleBox">{this.props.source.title.stripHtml()}</div>
@@ -73,7 +71,7 @@ class SheetComment extends Component {
     );
     return (
       <section className="SheetComment">
-        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
+        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={this.props.handleKeyPress} >
           <div className={lang}>
               <div
                 className="sourceContentText"
@@ -103,7 +101,7 @@ class SheetHeader extends Component {
         this.props.source.options ? this.props.source.options.indented : null
     );
     return (
-        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
+        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={this.props.handleKeyPress} >
           <div className={lang}>
               <div className="sourceContentText"><h1><span>{this.props.source.outsideText.stripHtml()}</span></h1></div>
           </div>
@@ -132,7 +130,7 @@ class SheetOutsideText extends Component {
     );
     return (
       <section className="SheetOutsideText">
-        <div className={containerClasses} data-node={this.props.source.node} onClick={(e) => this.shouldPassClick(e)} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
+        <div className={containerClasses} data-node={this.props.source.node} onClick={(e) => this.shouldPassClick(e)} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={this.props.handleKeyPress} >
           <div className={lang}>{this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
               <div className="sourceContentText" dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.outsideText)} }></div>
           </div>
@@ -162,7 +160,7 @@ class SheetOutsideBiText extends Component {
     );
     return (
       <section className={sectionClasses}>
-        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode === 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
+        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={this.props.handleKeyPress} >
           <div className="he">
             {this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix !== "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
             <div className="sourceContentText outsideBiText" dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.outsideBiText.he)} }></div>
@@ -231,7 +229,7 @@ class SheetMedia extends Component {
     );
     return (
       <section className="SheetMedia">
-        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to  " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
+        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to  " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={this.props.handleKeyPress} >
           <div className="sourceContentText centeredSheetContent" dangerouslySetInnerHTML={ {__html: this.makeMediaEmbedContent()} }></div>
           <div className="clearFix"></div>
           {this.props.source.addedBy ?