add textPath prop to Text component

packages/visx-text/src/Text.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import reduceCSSCalc from 'reduce-css-calc';
 import getStringWidth from './util/getStringWidth';
+import uniqueId from 'lodash/uniqueId';
 
 const SVG_STYLE = { overflow: 'visible' };
 
@@ -67,12 +68,15 @@ type OwnProps = {
   width?: number;
   /** String (or number coercible to one) to be styled and positioned. */
   children?: string | number;
+  /** Path for the text to follow along. */
+  textPath?: string;
 };
 
 export type TextProps = OwnProps & Omit<SVGTextProps, keyof OwnProps>;
 
 type TextState = {
   wordsByLines: WordsWithWidth[];
+  textPathId: string;
 };
 
 class Text extends React.Component<TextProps, TextState> {
@@ -90,6 +94,7 @@ class Text extends React.Component<TextProps, TextState> {
 
   state: TextState = {
     wordsByLines: [],
+    textPathId: ''
   };
 
   private wordsWithWidth: WordWithWidth[] = [];
@@ -98,6 +103,7 @@ class Text extends React.Component<TextProps, TextState> {
 
   componentDidMount() {
     this.updateWordsByLines(this.props, true);
+    this.updateTextPathId(this.props);
   }
 
   componentDidUpdate(prevProps: TextProps, prevState: TextState) {
@@ -111,6 +117,12 @@ class Text extends React.Component<TextProps, TextState> {
     this.updateWordsByLines(this.props, needCalculate);
   }
 
+  updateTextPathId(props: TextProps) {
+    if(props.textPath) {
+      this.setState({ textPathId: uniqueId('text-path-') })
+    }
+  }
+
   updateWordsByLines(props: TextProps, needCalculate: boolean = false) {
     // Only perform calculations if using features that require them (multiline, scaleToFit)
     if (props.width || props.scaleToFit) {
@@ -178,10 +190,11 @@ class Text extends React.Component<TextProps, TextState> {
       capHeight,
       innerRef,
       width,
+      textPath,
       ...textProps
     } = this.props;
 
-    const { wordsByLines } = this.state;
+    const { wordsByLines, textPathId } = this.state;
     const { x, y } = textProps;
 
     // Cannot render <text> if x or y is invalid
@@ -214,15 +227,19 @@ class Text extends React.Component<TextProps, TextState> {
     }
 
     const transform = transforms.length > 0 ? transforms.join(' ') : undefined;
+    const text = wordsByLines.map((line, index) => (
+      <tspan key={index} x={x} dy={(index === 0 ? startDy : lineHeight)}>
+        {line.words.join(' ')}
+      </tspan>
+    ));
 
     return (
       <svg ref={innerRef} x={dx} y={dy} fontSize={textProps.fontSize} style={SVG_STYLE}>
+        {textPath && <path id={textPathId} d={textPath} fill="none" />}
         <text transform={transform} {...textProps} textAnchor={textAnchor}>
-          {wordsByLines.map((line, index) => (
-            <tspan key={index} x={x} dy={index === 0 ? startDy : lineHeight}>
-              {line.words.join(' ')}
-            </tspan>
-          ))}
+          {textPath ? (<textPath href={`#${textPathId}`}>
+            {text}
+          </textPath>) : text}
         </text>
       </svg>
     );

packages/visx-text/test/Text.test.tsx

@@ -162,4 +162,23 @@ describe('<Text />', () => {
     wrapper.setProps({ verticalAnchor: 'start' });
     expect(getVerticalOffset(wrapper)).toBe('0.71em');
   });
+  it('Should render textPath when textPath is passed', () => {
+    const wrapper = mount<Text>(<Text textPath='M10 10'>Text path test</Text>);
+
+    const textPath = wrapper.find('textPath');
+    const path = wrapper.find('path');
+
+    expect(textPath).toHaveLength(1);
+    expect(path).toHaveLength(1);
+
+    expect(textPath.props().href).toEqual(`#${path.props().id}`);
+    expect(path.props().d).toEqual('M10 10');
+  });
+
+  it('Should not render textPath when textPath is not passed', () => {
+    const wrapper = mount<Text>(<Text>Text path test</Text>);
+
+    expect(wrapper.find('textPath')).toHaveLength(0);
+    expect(wrapper.find('path')).toHaveLength(0);
+  });
 });