2016-05-29 21:59:54 +03:00
|
|
|
import React, { Component, PropTypes } from 'react';
|
2016-05-22 20:08:47 +03:00
|
|
|
import classnames from 'classnames';
|
|
|
|
import { themr } from 'react-css-themr';
|
2016-05-29 21:59:54 +03:00
|
|
|
import { LIST } from '../identifiers.js';
|
|
|
|
import InjectListItem from './ListItem.js';
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2016-11-18 21:15:13 +03:00
|
|
|
const mergeProp = (propName, child, parent) => (
|
|
|
|
child[propName] !== undefined
|
|
|
|
? child[propName]
|
|
|
|
: parent[propName]
|
|
|
|
);
|
|
|
|
|
2016-05-29 21:59:54 +03:00
|
|
|
const factory = (ListItem) => {
|
|
|
|
class List extends Component {
|
|
|
|
static propTypes = {
|
|
|
|
children: PropTypes.node,
|
|
|
|
className: PropTypes.string,
|
|
|
|
ripple: PropTypes.bool,
|
|
|
|
selectable: PropTypes.bool,
|
|
|
|
theme: PropTypes.shape({
|
2016-06-04 00:44:33 +03:00
|
|
|
list: PropTypes.string
|
2016-05-29 21:59:54 +03:00
|
|
|
})
|
|
|
|
};
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2016-05-29 21:59:54 +03:00
|
|
|
static defaultProps = {
|
|
|
|
className: '',
|
|
|
|
ripple: false,
|
|
|
|
selectable: false
|
|
|
|
};
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2016-05-29 21:59:54 +03:00
|
|
|
renderItems () {
|
|
|
|
return React.Children.map(this.props.children, (item) => {
|
2017-01-11 21:31:41 +03:00
|
|
|
if (item === null || item === undefined) {
|
|
|
|
return item;
|
|
|
|
} else if (item.type === ListItem) {
|
2016-11-18 21:15:13 +03:00
|
|
|
const selectable = mergeProp('selectable', item.props, this.props);
|
|
|
|
const ripple = mergeProp('ripple', item.props, this.props);
|
|
|
|
return React.cloneElement(item, { selectable, ripple });
|
2016-05-29 21:59:54 +03:00
|
|
|
} else {
|
|
|
|
return React.cloneElement(item);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2016-05-29 21:59:54 +03:00
|
|
|
render () {
|
|
|
|
return (
|
|
|
|
<ul data-react-toolbox='list' className={classnames(this.props.theme.list, this.props.className)}>
|
|
|
|
{this.renderItems()}
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
}
|
2015-10-19 03:38:25 +03:00
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
|
2016-05-29 21:59:54 +03:00
|
|
|
return List;
|
|
|
|
};
|
|
|
|
|
|
|
|
const List = factory(InjectListItem);
|
|
|
|
export default themr(LIST)(List);
|
|
|
|
export { factory as listFactory };
|
|
|
|
export { List };
|