All files DOMMarkdown.js

96% Statements 24/25
100% Branches 2/2
94.74% Functions 18/19
100% Lines 24/24
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109        1x 16x   56x       1x   1x     12x           1x       1x       1x     1x   1x       13x       1x       6x       2x   1x             1x                 1x 1x             1x         1x   14x               14x     14x                          
import React, { PureComponent } from 'react';
import mapValues from 'lodash.mapvalues';
import Markdown from './Markdown';
 
const pure = render =>
  class extends PureComponent {
    render() {
      return render(this.props);
    }
  };
 
const LineBreak = () => <br />;
 
export const DOMComponents = mapValues(
  {
    Text: ({ children }) =>
      <span>
        {children}
      </span>,
    LineBreak,
    SoftBreak: LineBreak,
    Em: ({ children }) =>
      <em>
        {children}
      </em>,
    Strong: ({ children }) =>
      <strong>
        {children}
      </strong>,
    Link: ({ title, destination, children }) =>
      <a title={title} href={destination}>
        {children}
      </a>,
    Image: ({ title, destination }) => <img src={destination} title={title} />,
    Code: ({ children }) =>
      <code>
        {children}
      </code>,
    Paragraph: ({ children }) =>
      <p>
        {children}
      </p>,
    BlockQuote: ({ children }) =>
      <blockquote>
        {children}
      </blockquote>,
    Item: ({ children }) =>
      <li>
        {children}
      </li>,
    List: ({ children, listType, listStart }) => {
      switch (listType) {
        case 'ordered': {
          return (
            <ol start={listStart}>
              {children}
            </ol>
          );
        }
        default: {
          return (
            <ul>
              {children}
            </ul>
          );
        }
      }
    },
    Heading: ({ children, level }) => {
      const Heading = 'h' + level;
      return (
        <Heading>
          {children}
        </Heading>
      );
    },
    CodeBlock: ({ children, info }) =>
      <pre>
        <code>
          {children}
        </code>
      </pre>,
    ThematicBreak: () => <hr />,
    Document: ({ className, children }) =>
      <div className={className}>
        {children}
      </div>,
  },
  pure,
);
 
class DOMMarkdown extends PureComponent {
  Document = props => <DOMComponents.Document {...props} className={this.props.className} />;
 
  render() {
    return (
      <Markdown
        {...this.props}
        components={{
          ...DOMComponents,
          Document: this.Document,
        }}
      />
    );
  }
}
 
export default DOMMarkdown;