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 _
from 'lodash';
25 export default class Listy
extends React
.Component
{
33 createList(data
, iter
=0) {
34 var groupTag
= this.props
.groupTag
.tag
;
35 var groupClass
= this.props
.groupTag
.className
;
36 var itemTag
= this.props
.itemTag
.tag
;
37 var itemClass
= this.props
.itemTag
.className
;
38 var listHeaderTag
= this.props
.listHeaderTag
.tag
;
39 var listHeaderClass
= this.props
.listHeaderTag
.className
;
43 if (_
.isArrayLike(data
) && _
.isObjectLike(data
)) {
45 data
.forEach(function(element
, index
, array
) {
46 if ( _
.isArrayLike(element
) || _
.isObjectLike(element
)) {
47 children
.push(self
.createList(element
, iter
+1));
49 children
.push(React
.createElement(itemTag
, {
56 listNode
= React
.createElement(groupTag
, {
58 className
: groupClass
}, children
);
60 else if (_
.isObjectLike(data
)) {
62 for (var key
in data
) {
63 if ( _
.isArrayLike(data
[key
]) || _
.isObjectLike(data
[key
])) {
65 React
.createElement(listHeaderTag
, {
67 className
: listHeaderClass
}, key
+ ":")
70 React
.createElement(groupTag
, {
72 className
: groupClass
},
73 [this.createList(data
[key
], iter
+ 1)])
77 // TODO: Add span to line-wrap the data part (hanging)
78 children
.push(React
.createElement(itemTag
, {
80 className
: itemClass
},
81 key
+ ": " + data
[key
]));
84 listNode
= React
.createElement(groupTag
, {
86 className
: groupClass
}, children
);
88 listNode
= React
.createElement(itemTag
, {
89 className
: itemClass
}, data
);
96 return React
.createElement("div", {
97 className
: this.props
.noDataMessageClass
},
98 this.props
.noDataMessage
);
102 var data
= this.props
.data
;
104 return React
.createElement("div", {
105 className
: "listy" },
107 this.noDataMessage() :
108 this.createList(data
)
113 Listy
.validateTagDefinition = function(props
, propName
, componentName
) {
114 let obj
= props
[propName
];
115 let fullAttr
= componentName
+ "." + propName
;
118 return new Error('Validation failed. "%" is undefined', fullAttr
);
119 if (!obj
.hasOwnProperty("tag") || _
.isEmpty(obj
.tag
))
120 return new Error('Validation failed. "%s" missing attribute "tag"', fullAttr
);
121 if (!obj
.hasOwnProperty("className") || obj
.className
== undefined)
122 return new Error('Validation failed. "%s" missing attribute "className"', fullAttr
);
126 data
: React
.PropTypes
.object
,
127 groupTag
: Listy
.validateTagDefinition
,
128 itemTag
: Listy
.validateTagDefinition
,
129 listHeaderTag
: Listy
.validateTagDefinition
,
130 debugMode
: React
.PropTypes
.bool
133 Listy
.defaultProps
= {
139 className
: "listyGroup"
143 className
: "listyItem"
147 className
: "listyGroupHeader"
149 noDataMessage
: "No data",
150 noDataMessageClass
: "listyNoDataMessage",