All files / ts/components/prototyping dab-ipsum.tsx

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
20x
20x
20x
20x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20x
19x
 
 
 
 
10x
 
 
 
 
 
1x
 
 
 
 
 
 
8x
 
 
 
 
 
 
 
 
 
 
20x
20x
3x
 
 
 
20x
10x
10x
 
 
 
5x
 
 
 
1x
 
5x
 
 
 
1x
 
5x
 
 
 
1x
 
 
2x
 
8x
 
 
 
 
20x
 
20x
 
import * as React from 'react';
import { PureComponent } from 'react';
import { generateIpsum } from '../../utils';
import { WORDS } from '../../words';
 
export interface DabIpsumProps {
  /**
   * Set the component to render a different element type.
   * @default "'p'"
   */
  component?: 'ul' | 'ol' | 'p' | 'text';
  /**
   * The number of elements (e.g. paragraphs) to render.
   * @default 5
   */
  count?: number;
}
 
const ipsumItem = (component: DabIpsumProps['component'], index: number) => {
  const ipsum = generateIpsum(WORDS);
 
  switch (component) {
    case 'ol':
    case 'ul':
      return (
        <li key={index}>
          {ipsum}
        </li>
      );
    case 'text':
      return (
        <span key={index}>
          {ipsum}
        </span>
      );
    // case 'p': NOTE: this is the default, so a case for it is not needed
    default:
      return (
        <p key={index}>
          {ipsum}
        </p>
      );
  }
};
 
/**
 * Custom Ipsum component, useful for rendering placeholder text when prototyping.
 */
export class DabIpsum extends PureComponent<DabIpsumProps, {}> {
  public shouldComponentUpdate (prevProps: DabIpsumProps) {
    return prevProps.component !== this.props.component ||
      prevProps.count !== this.props.count;
  }
 
  public render () {
    const {
      component = 'p',
      count = 5
    } = this.props;
 
    const items = Array.apply(null, new Array(count));
 
    switch (component) {
      case 'ul':
        return (
          <ul>
            {items.map((value: void, index: number) => ipsumItem(component, index))}
          </ul>
        );
      case 'ol':
        return (
          <ol>
            {items.map((value: void, index: number) => ipsumItem(component, index))}
          </ol>
        );
      case 'text':
        return ipsumItem(component, 0);
      // case 'p'
      default:
        return (
          <div>
            {items.map((value: void, index: number) => ipsumItem(component, index))}
          </div>
        );
    }
  }
}
 
export default DabIpsum;