3 * Copyright 2016 RIFT.IO Inc
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
18 import React
from 'react';
19 import _isArrayLike
from 'lodash/isArrayLike';
20 import _isObjectLike
from 'lodash/isObjectLike';
21 import _isEmpty
from 'lodash/isEmpty';
27 export default class Listy
extends React
.Component
{
35 createList(data
, iter
=0) {
36 var groupTag
= this.props
.groupTag
.tag
;
37 var groupClass
= this.props
.groupTag
.className
;
38 var itemTag
= this.props
.itemTag
.tag
;
39 var itemClass
= this.props
.itemTag
.className
;
40 var listHeaderTag
= this.props
.listHeaderTag
.tag
;
41 var listHeaderClass
= this.props
.listHeaderTag
.className
;
45 if (_isArrayLike(data
) && _isObjectLike(data
)) {
47 data
.forEach(function(element
, index
, array
) {
48 if ( _isArrayLike(element
) || _isObjectLike(element
)) {
49 children
.push(self
.createList(element
, iter
+1));
51 children
.push(React
.createElement(itemTag
, {
58 listNode
= React
.createElement(groupTag
, {
60 className
: groupClass
}, children
);
62 else if (_isObjectLike(data
)) {
64 for (var key
in data
) {
65 if ( _isArrayLike(data
[key
]) || _isObjectLike(data
[key
])) {
67 React
.createElement(listHeaderTag
, {
69 className
: listHeaderClass
}, key
+ ":")
72 React
.createElement(groupTag
, {
74 className
: groupClass
},
75 [this.createList(data
[key
], iter
+ 1)])
79 // TODO: Add span to line-wrap the data part (hanging)
80 children
.push(React
.createElement(itemTag
, {
82 className
: itemClass
},
83 key
+ ": " + data
[key
]));
86 listNode
= React
.createElement(groupTag
, {
88 className
: groupClass
}, children
);
90 listNode
= React
.createElement(itemTag
, {
91 className
: itemClass
}, data
);
98 return React
.createElement("div", {
99 className
: this.props
.noDataMessageClass
},
100 this.props
.noDataMessage
);
104 var data
= this.props
.data
;
106 return React
.createElement("div", {
107 className
: "listy" },
109 this.noDataMessage() :
110 this.createList(data
)
115 Listy
.validateTagDefinition = function(props
, propName
, componentName
) {
116 let obj
= props
[propName
];
117 let fullAttr
= componentName
+ "." + propName
;
120 return new Error('Validation failed. "%" is undefined', fullAttr
);
121 if (!obj
.hasOwnProperty("tag") || _isEmpty(obj
.tag
))
122 return new Error('Validation failed. "%s" missing attribute "tag"', fullAttr
);
123 if (!obj
.hasOwnProperty("className") || obj
.className
== undefined)
124 return new Error('Validation failed. "%s" missing attribute "className"', fullAttr
);
128 data
: React
.PropTypes
.object
,
129 groupTag
: Listy
.validateTagDefinition
,
130 itemTag
: Listy
.validateTagDefinition
,
131 listHeaderTag
: Listy
.validateTagDefinition
,
132 debugMode
: React
.PropTypes
.bool
135 Listy
.defaultProps
= {
141 className
: "listyGroup"
145 className
: "listyItem"
149 className
: "listyGroupHeader"
151 noDataMessage
: "No data",
152 noDataMessageClass
: "listyNoDataMessage",