All files / components/text list.jsx

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
 
 
 
 
 
2x
4x
4x
4x
1x
3x
2x
2x
 
4x
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
1x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
 
class List extends React.Component {
  render() {
    const contents = this.props.items.map((item, i) => {
      const obj = {};
      const isElement = Object.keys(item).indexOf('type') >= 0;
      if (typeof item === 'string') {
        obj.content = item;
      } else if (!isElement) {
        obj.content = item.content;
        obj.theme = item.theme;
      }
      return !isElement ? (
        <li key={i} className={obj.theme}>{obj.content}</li>
      ) : item;
    });
    const list = this.props.ordered ? (
      <ol
        id={this.props.id}
        className={`${this.props.unstyled ? 'list-unstyled' : ''} ${this.props.inline ? 'list-inline' : ''} ${this.props.theme ? this.props.theme : ''}`}
      >
        {contents}
      </ol>
    ) : (
      <ul
        id={this.props.id}
        className={`${this.props.unstyled ? 'list-unstyled' : ''} ${this.props.inline ? 'list-inline' : ''} ${this.props.theme ? this.props.theme : ''}`}
      >
        {contents}
      </ul>
    );
    return list;
  }
}
 
List.propTypes = {
  id: PropTypes.string,
  theme: PropTypes.string,
  items: PropTypes.array,
  ordered: PropTypes.bool,
  unstyled: PropTypes.bool,
  inline: PropTypes.bool
};
 
List.defaultProps = {
  items: [],
  ordered: false,
  unstyled: false,
  inline: false
};
 
export default List;