src/TableView.js File

import React,{PropTypes} from 'react';
import Component from './utils/Component';
import {setPhoenixPrefix} from './utils/Tool';
import classnames from 'classnames';

/**
 * 展现形式如表格一般, 用来组织数据, 显示链接的集合, 或一系列的控件。<br />
 * - 使用时如果需要跳转功能可通过添加href属性并赋予正确的url(任何标签)。
 * - 可搭配其他组件一起使用, 如徽章组件Badge, 开关组件Switch等。
 *
 * 示例:
 * ```code
 *     <TableView>
 *         <a href="https://github.com/future-team/phoenix-ui">Item 1</a>
 *         <a>Item 2 <Badge>2</Badge></a>
 *         <a>Item 3 <Switch /></a>
 *     </TableView>
 * ```
 *
 * @class TableView
 * @module 布局组件
 * @extends Component
 * @constructor
 * @since 0.1.0
 * @demo tableview|table-view.js {展示}
 * @show true
 * */

export default class TableView extends Component{

    static propTypes = {
        /**
         * 样式前缀
         * @property classPrefix
         * @type String
         * @default 'table-view'
         * */
        classPrefix: PropTypes.string,
        /**
         * 标签tagName
         * @property componentTag
         * @type String
         * */
        componentTag:PropTypes.string
    };

    static defaultProps = {
        classPrefix:'table-view',
        componentTag:'ul',
        classMapping : {}
    };

    constructor(props, context) {
        super(props, context);
    }

    renderItem(){
        let items = React.Children.map(this.props.children, (options, index)=> {
            let {href, ...other} = options.props;

            return (
                <li className={setPhoenixPrefix("table-view-cell")}>
                    {href && href!=''?<a href={href} {...other} className={
                        classnames(
                            setPhoenixPrefix('navigate-right'),
                            options.props.className
                        )
                }>{options.props.children}</a>:options.props.children}
                </li>
            );
        }, this);

        return items;
    }

    render(){
        let {componentTag:Component} = this.props;

        return (
            <Component {...this.otherProps} className={
                classnames(
                    this.getProperty(true),
                    this.props.className
                )
                } style={this.getStyles(this.props.style) }>{this.renderItem() }</Component>
        );
    }

}