Feature: Nested Matchers about react-native-parsed-text HOT 4 OPEN

import React, { FunctionComponent, useState } from 'react';
import { StyleProp, Text, TextProps, TextStyle } from 'react-native';

interface P9TextParserConfig {
  pattern: RegExp;
  style?: StyleProp<TextStyle>;
  transform?(text: string): string;
}

interface P9TextParseResult {
  match: string;
  style?: StyleProp<TextStyle>;
}

export interface P9ParsedTextProps extends TextProps {
  parsers: P9TextParserConfig[];
}

export const P9ParsedText: FunctionComponent<P9ParsedTextProps> = ({
  children,
  parsers,
  style: rootStyle,
  ...rest
}) => {
  const [parsed] = useState(parseText([{ match: children as string }], parsers, 0, []));

  return (
    <>
      <Text {...rest} style={rootStyle}>
        {parsed.map(({ match, style }, index) =>
          style ? (
            <Text key={index.toString()} style={[rootStyle, style]}>
              {match}
            </Text>
          ) : (
            match
          )
        )}
      </Text>
    </>
  );
};

function parseText(
  input: P9TextParseResult[],
  parsers: P9TextParserConfig[],
  current: number,
  matches: P9TextParseResult[]
): P9TextParseResult[] {
  if (current === parsers.length) {
    return matches;
  }

  const { pattern, style, transform } = parsers[current];

  matches = input
    .map(({ match: parent, style: parentStyle }) =>
      parent
        .split(pattern)
        .map((match) =>
          pattern.test(match) ? { match: transform ? transform(match) : match, style } : { match, style: parentStyle }
        )
    )
    .reduce((output, next) => output.concat(next), []);

  return parseText(matches, parsers, ++current, matches);
}