allow ref forwarding through to SVG

weng-lab · Oct 9, 2019 · 1379c2e · 1379c2e
1 parent 589bb4f
commit 1379c2e
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git a/src/components/logo/completelogo.jsx b/src/components/logo/completelogo.jsx
@@ -75,8 +75,8 @@ export const CompleteAlphabet = [
     { component: N9, regex: "9", color: "firebrick" }
 ];
 
-const CompleteLogo = ({ ppm, pfm, scale, startpos, mode }) => (
+const CompleteLogo = React.forwardRef( ({ ppm, pfm, scale, startpos, mode }, ref) => (
     <Logo ppm={ppm} alphabet={CompleteAlphabet} scale={scale}
-          mode={mode} startpos={startpos} pfm={pfm} />
-);
+          mode={mode} startpos={startpos} pfm={pfm} ref={ref} />
+));
 export default CompleteLogo;
diff --git a/src/components/logo/dnalogo.jsx b/src/components/logo/dnalogo.jsx
@@ -24,7 +24,7 @@ export const DNAAlphabet = [
  * @prop startpos number to assign the first position in the logo; defaults to 1.
  * @prop yAxisMax if set, uses an explicit maximum value for the y-axis rather than the total number of bits possible. This is ignored in FREQUENCY mode.
  */
-const DNALogo = props => (
-    <Logo alphabet={DNAAlphabet} {...props} />
-);
+const DNALogo = React.forwardRef( (props, ref) => (
+    <Logo alphabet={DNAAlphabet} {...props} ref={ref} />
+));
 export default DNALogo;
diff --git a/src/components/logo/logo.jsx b/src/components/logo/logo.jsx
@@ -52,7 +52,7 @@ export const RawLogo = ({ values, glyphWidth, stackHeight, alphabet }) => {
  * @prop inverted if set, renders negative letters upright rather than upside down.
  * @prop yAxisMax if set, uses an explicit maximum value for the y-axis rather than the total number of bits possible. This is ignored in FREQUENCY mode.
  */
-const Logo = ({ ppm, pfm, mode, height, width, alphabet, glyphwidth, scale, startpos, showGridLines, backgroundFrequencies, yAxisMax }) => {
+const Logo = React.forwardRef( ({ ppm, pfm, mode, height, width, alphabet, glyphwidth, scale, startpos, showGridLines, backgroundFrequencies, yAxisMax }, ref) => {
 
     /* compute likelihood; need at least one entry to continue */
     if (!ppm && pfm && pfm.map)
@@ -86,7 +86,7 @@ const Logo = ({ ppm, pfm, mode, height, width, alphabet, glyphwidth, scale, star
 	viewBoxW > viewBoxH ? width = scale : height = scale;
 
     return (
-	<svg width={width} height={height} viewBox={'0 0 ' + viewBoxW + ' ' + viewBoxH}>
+	<svg width={width} height={height} viewBox={'0 0 ' + viewBoxW + ' ' + viewBoxH} ref={ref}>
           {showGridLines && (
               <YGridlines
                 {...{
@@ -110,5 +110,5 @@ const Logo = ({ ppm, pfm, mode, height, width, alphabet, glyphwidth, scale, star
         </svg>
     );
 
-};
+});
 export default Logo;
diff --git a/src/components/logo/logowithnegatives.jsx b/src/components/logo/logowithnegatives.jsx
@@ -28,7 +28,7 @@ const _position = (width, height, alpha, inverted) => (lv, transform, key, alpha
  * @prop showGridLines if set, shows vertical grid lines.
  * @prop inverted if set, renders negative letters upright rather than upside down.
  */
-const LogoWithNegatives = ({ values, height, width, alphabet, scale, startpos, negativealpha, showGridLines, inverted }) => {
+const LogoWithNegatives = React.forwardRef( ({ values, height, width, alphabet, scale, startpos, negativealpha, showGridLines, inverted }, ref) => {
 
     /* need at least one entry to continue */
     if (values.length === 0 || values[0].length === 0) {
@@ -65,7 +65,7 @@ const LogoWithNegatives = ({ values, height, width, alphabet, scale, startpos, n
 	viewBoxW > viewBoxH ? width = scale : height = scale;
 
     return (
-	<svg width={width} height={height} viewBox={'0 0 ' + viewBoxW + ' ' + viewBoxH}>
+	<svg ref={ref} width={width} height={height} viewBox={'0 0 ' + viewBoxW + ' ' + viewBoxH}>
         {showGridLines && (
             <YGridlines
                 {...{
@@ -97,5 +97,5 @@ const LogoWithNegatives = ({ values, height, width, alphabet, scale, startpos, n
     </svg>
     );
 
-};
+});
 export default LogoWithNegatives;
diff --git a/src/components/logo/proteinlogo.jsx b/src/components/logo/proteinlogo.jsx
@@ -47,7 +47,7 @@ export const ProteinAlphabet = [
  * @prop startpos number to assign the first position in the logo; defaults to 1.
  * @prop yAxisMax if set, uses an explicit maximum value for the y-axis rather than the total number of bits possible. This is ignored in FREQUENCY mode.
  */
-const ProteinLogo = props => (
-    <Logo alphabet={ProteinAlphabet} {...props} />
-);
+const ProteinLogo = React.forwardRef( (props, ref) => (
+    <Logo alphabet={ProteinAlphabet} {...props} ref={ref} />
+));
 export default ProteinLogo;
diff --git a/src/components/logo/rnalogo.jsx b/src/components/logo/rnalogo.jsx
@@ -24,7 +24,7 @@ export const RNAAlphabet = [
  * @prop startpos number to assign the first position in the logo; defaults to 1.
  * @prop yAxisMax if set, uses an explicit maximum value for the y-axis rather than the total number of bits possible. This is ignored in FREQUENCY mode.
  */
-const RNALogo = props => (
-    <Logo alphabet={RNAAlphabet} {...props} />
-);
+const RNALogo = React.forwardRef( (props, ref) => (
+    <Logo alphabet={RNAAlphabet} {...props} ref={ref} />
+));
 export default RNALogo;