tingle-group-list/src/GroupList.js

常用的列表 Group 区块。提供基础的样式布局。

/**
 * GroupList Component for tingle
 * @author gnosaij
 *
 * Copyright 2014-2015, Tingle Team, Alinw.
 * All rights reserved.
 */
const classnames = require('classnames');
const Context = require('tingle-context');

class GroupList extends React.Component {

    constructor(props) {
        super(props);
        console.warn && console.warn('`tingle-group-list` is deprecated, use `tingle-group` instead. Here it is: https://github.com/tinglejs/tingle-group');
    }

    render() {
        const t = this;
        const items = React.Children.map(this.props.children ,function (Item, index) {
            return <li className="_tGroupListItem">{Item}</li>;
        });

        const itemIndent = t.props.itemIndent;
        return (
            <div>
                {t.props.title && <h4 className="_tGroupListHeader">{t.props.title}</h4>}
                <ul className={classnames({
                    _tGroupList: true,
                    [t.props.className]: !!t.props.className
                })} style={{
                    paddingLeft: itemIndent
                }}>
                    {items}
                </ul>
            </div>
        );
    }
}

GroupList.propTypes = {
    itemIndent: React.PropTypes.number
};

GroupList.defaultProps = {
    itemIndent: 15
};

module.exports = GroupList;