feat: support textComponent="", fixes #1330 (#1354)

src/components/date.tsx

@@ -26,8 +26,11 @@ const FormattedDate: React.FC<Props> = props => {
   if (typeof children === 'function') {
     return children(formattedDate);
   }
-
-  return <Text>{formattedDate}</Text>;
+  if (Text) {
+    return <Text>{formattedDate}</Text>;
+  }
+  // Work around @types/react where React.FC cannot return string
+  return formattedDate as any;
 };
 
 FormattedDate.displayName = 'FormattedDate';

src/components/message.tsx

@@ -41,7 +41,7 @@ export interface Props extends MessageDescriptor {
   intl: IntlShape;
   values?: any;
   tagName?: React.ElementType<any>;
-  children?(...nodes: Array<React.ReactNode>): React.ReactNode;
+  children?(...nodes: React.ReactNodeArray): React.ReactNode;
 }
 
 export class BaseFormattedMessage extends React.Component<Props> {
@@ -92,7 +92,7 @@ export class BaseFormattedMessage extends React.Component<Props> {
 
     let tokenDelimiter: string = '';
     let tokenizedValues: Record<string, string> = {};
-    let elements: Record<string, string | React.ReactChild> = {};
+    let elements: Record<string, React.ReactChild> = {};
 
     let hasValues = values && Object.keys(values).length > 0;
     if (hasValues) {
@@ -131,7 +131,7 @@ export class BaseFormattedMessage extends React.Component<Props> {
     let descriptor = {id, description, defaultMessage};
     let formattedMessage = formatMessage(descriptor, tokenizedValues || values);
 
-    let nodes: Array<string | React.ReactChild>;
+    let nodes: React.ReactNodeArray;
 
     let hasElements = elements && Object.keys(elements).length > 0;
     if (hasElements) {
@@ -141,7 +141,7 @@ export class BaseFormattedMessage extends React.Component<Props> {
       // keeping React's virtual diffing working properly.
       nodes = formattedMessage
         .split(tokenDelimiter)
-        .filter(part => !!part)
+        .filter(Boolean)
         .map(part => elements[part] || part);
     } else {
       nodes = [formattedMessage];
@@ -151,9 +151,12 @@ export class BaseFormattedMessage extends React.Component<Props> {
       return children(...nodes);
     }
 
-    // Needs to use `createElement()` instead of JSX, otherwise React will
-    // warn about a missing `key` prop with rich-text message formatting.
-    return React.createElement(Component, null, ...nodes);
+    if (Component) {
+      // Needs to use `createElement()` instead of JSX, otherwise React will
+      // warn about a missing `key` prop with rich-text message formatting.
+      return <Component>{nodes}</Component>;
+    }
+    return nodes;
   }
 }
 

src/components/number.tsx

@@ -26,8 +26,11 @@ const FormattedNumber: React.FC<Props> = props => {
   if (typeof children === 'function') {
     return children(formattedNumber);
   }
-
-  return <Text>{formattedNumber}</Text>;
+  if (Text) {
+    return <Text>{formattedNumber}</Text>;
+  }
+  // Work around @types/react where React.FC cannot return string
+  return formattedNumber as any;
 };
 
 FormattedNumber.displayName = 'FormattedNumber';

src/components/plural.tsx

@@ -34,8 +34,11 @@ const FormattedPlural: React.FC<Props> = props => {
   if (typeof children === 'function') {
     return children(formattedPlural);
   }
-
-  return <Text>{formattedPlural}</Text>;
+  if (Text) {
+    return <Text>{formattedPlural}</Text>;
+  }
+  // Work around @types/react where React.FC cannot return string
+  return formattedPlural as any;
 };
 
 FormattedPlural.defaultProps = {

src/components/relative.tsx

@@ -195,7 +195,10 @@ class FormattedRelativeTime extends React.PureComponent<Props, State> {
     if (typeof children === 'function') {
       return children(formattedRelativeTime);
     }
-    return <Text>{formattedRelativeTime}</Text>;
+    if (Text) {
+      return <Text>{formattedRelativeTime}</Text>;
+    }
+    return formattedRelativeTime;
   }
 }
 

src/components/time.tsx

@@ -26,8 +26,11 @@ const FormattedTime: React.FC<Props> = props => {
   if (typeof children === 'function') {
     return children(formattedTime);
   }
-
-  return <Text>{formattedTime}</Text>;
+  if (Text) {
+    return <Text>{formattedTime}</Text>;
+  }
+  // Work around @types/react where React.FC cannot return string
+  return formattedTime as any;
 };
 
 FormattedTime.displayName = 'FormattedTime';

test/unit/components/date.tsx

@@ -52,6 +52,16 @@ describe('<FormattedDate>', () => {
 
     expect(rendered.text()).toBe(intl.formatDate(date));
   });
+  it('renders a formatted date w/o textComponent', () => {
+    const date = Date.now();
+
+    const rendered = mountWithProvider(
+      {value: date},
+      {...intl, textComponent: ''}
+    );
+
+    expect(rendered.text()).toBe(intl.formatDate(date));
+  });
 
   it('accepts valid Intl.DateTimeFormat options as props', () => {
     const date = new Date();

test/unit/components/message.tsx

@@ -56,44 +56,6 @@ describe('<FormattedMessage>', () => {
     expect(rendered.text()).toBe(intl.formatMessage(descriptor));
   });
 
-  it('should not cause a unique "key" prop warning', () => {
-    const descriptor = {
-      id: 'hello',
-      defaultMessage: 'Hello, {name}!',
-    };
-
-    mountWithProvider({...descriptor, values: {name: <b>Jest</b>}}, intl);
-
-    expect(consoleError).toHaveBeenCalledTimes(0);
-  });
-
-  it('should not cause a prop warning when description is a string', () => {
-    const descriptor = {
-      id: 'hello',
-      description: 'Greeting',
-      defaultMessage: 'Hello, {name}!',
-    };
-
-    mountWithProvider({...descriptor, values: {name: <b>Jest</b>}}, intl);
-
-    expect(consoleError).toHaveBeenCalledTimes(0);
-  });
-
-  it('should not cause a prop warning when description is an object', () => {
-    const descriptor = {
-      id: 'hello',
-      description: {
-        text: 'Greeting',
-        ticket: 'GTP-1234',
-      },
-      defaultMessage: 'Hello, {name}!',
-    };
-
-    mountWithProvider({...descriptor, values: {name: <b>Jest</b>}}, intl);
-
-    expect(consoleError).toHaveBeenCalledTimes(0);
-  });
-
   it('accepts `values` prop', () => {
     const descriptor = {
       id: 'hello',

test/unit/components/number.tsx

@@ -45,6 +45,17 @@ describe('<FormattedNumber>', () => {
     expect(rendered.text()).toBe(intl.formatNumber(num));
   });
 
+  it('renders a formatted number w/o textComponent', () => {
+    const num = 1000;
+
+    const rendered = mountWithProvider(
+      {value: num},
+      {...intl, textComponent: null}
+    );
+
+    expect(rendered.text()).toBe(intl.formatNumber(num));
+  });
+
   it('accepts valid Intl.NumberFormat options as props', () => {
     const num = 0.5;
     const options = {style: 'percent'};

test/unit/components/plural.tsx

@@ -62,6 +62,18 @@ describe('<FormattedPlural>', () => {
     expect(rendered.text()).toBe(num === 1 ? one : other);
   });
 
+  it('renders a formatted plural w/o textComponent', () => {
+    const num = 1;
+    const one = 'foo';
+    const other = 'bar';
+
+    const rendered = mountWithProvider(
+      {value: num, one, other},
+      {...intl, textComponent: null}
+    );
+    expect(rendered.text()).toBe(num === 1 ? one : other);
+  });
+
   it('accepts valid IntlPluralFormat options as props', () => {
     const num = 22;
     const props = {two: 'nd'};

test/unit/components/relative.tsx

@@ -68,6 +68,18 @@ describe('<FormattedRelative>', () => {
     );
   });
 
+  it('can render in null textComponent', () => {
+    const options = {style: 'narrow' as 'narrow'};
+    const rendered = mountWithProvider(
+      {value: -60, ...options},
+      {...intl, textComponent: null}
+    );
+
+    expect(rendered.text()).toBe(
+      intl.formatRelativeTime(-60, 'second', options)
+    );
+  });
+
   it('throws an error for invalid unit', () => {
     const rendered = mountWithProvider({value: 0, unit: 'invalid' as any});
     expect(rendered.text()).toBe('0');

test/unit/components/time.tsx

@@ -46,14 +46,25 @@ describe('<FormattedTime>', () => {
     );
   });
 
-  it('renders a formatted time in a <span>', () => {
+  it('renders a formatted time in a <>', () => {
     const date = new Date();
 
     const rendered = mountWithProvider({value: date}, intl);
 
     expect(rendered.text()).toBe(intl.formatTime(date));
   });
 
+  it('renders a formatted time w/o textComponent', () => {
+    const date = new Date();
+
+    const rendered = mountWithProvider(
+      {value: date},
+      {...intl, textComponent: null}
+    );
+
+    expect(rendered.text()).toBe(intl.formatTime(date));
+  });
+
   it('accepts valid Intl.DateTimeFormat options as props', () => {
     const date = Date.now();
     const options = {hour: '2-digit'};