/**
 * @file Td component
 * @author liangxiaojun(liangxiaojun@derbysoft.com)
 */

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import HorizontalAlign from '../_statics/HorizontalAlign';
import SortingType from '../_statics/SortingType';

import Util from '../_vendors/Util';

class Td extends Component {

    static Align = HorizontalAlign;

    constructor(props, ...restArgs) {
        super(props, ...restArgs);
    }

    handleRenderer = () => {

        const {collapsed, renderer, rowIndex, colIndex, data, parentData, tableData, depth, path, scrollEl} = this.props;

        switch (typeof renderer) {
            case 'function':
                return renderer(data, rowIndex, colIndex, parentData, tableData, collapsed, depth, path, scrollEl);
            default:
                return renderer;
        }

    };

    handleClick = e => {
        const {data, rowIndex, colIndex, disabled, onCellClick} = this.props;
        !disabled && onCellClick && onCellClick(data, rowIndex, colIndex, e);
    };

    render() {

        const {
            className, style, align, span, noWrap,
            sortable, sortingProp, sorting
        } = this.props;

        return (
            <td className={classNames({
                [`align-${align}`]: align && align !== HorizontalAlign.LEFT,
                'no-wrap': noWrap,
                sorting: sortable && sortingProp && sorting && sorting.prop && sorting.prop === sortingProp,
                [className]: className
            })}
                style={style}
                colSpan={span || null}
                onClick={this.handleClick}>
                {this.handleRenderer()}
            </td>
        );

    }
}

Td.propTypes = {

    className: PropTypes.string,
    style: PropTypes.object,

    rowIndex: PropTypes.number,
    colIndex: PropTypes.number,

    data: PropTypes.object,
    parentData: PropTypes.object,
    tableData: PropTypes.array,
    renderer: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    align: PropTypes.oneOf(Util.enumerateValue(HorizontalAlign)),
    span: PropTypes.number,
    disabled: PropTypes.bool,
    noWrap: PropTypes.bool,
    collapsed: PropTypes.bool,
    depth: PropTypes.number,
    path: PropTypes.array,
    scrollEl: PropTypes.object,

    /**
     * sorting
     */
    sortable: PropTypes.bool,
    sortingProp: PropTypes.string,
    sorting: PropTypes.shape({
        prop: PropTypes.string,
        type: PropTypes.oneOf(Util.enumerateValue(SortingType))
    }),

    /**
     * callback
     */
    onRowClick: PropTypes.func,
    onCellClick: PropTypes.func,
    onExpandChange: PropTypes.func

};

Td.defaultProps = {

    rowIndex: 0,
    colIndex: 0,

    disabled: false,
    noWrap: false,
    collapsed: true,
    depth: 0

};

export default Td;

@@ -888,24 +888,415 @@
  %7D%0A%0A    %7D;%0A%0A
+    handleTitle = () =%3E %7B%0A%0A        const %7Bcollapsed, title, rowIndex, colIndex, data, parentData, tableData, depth, path, scrollEl%7D = this.props;%0A%0A        switch (typeof title) %7B%0A            case 'function':%0A                return title(data, rowIndex, colIndex, parentData, tableData, collapsed, depth, path, scrollEl);%0A            default:%0A                return title;%0A        %7D%0A%0A    %7D;%0A%0A
     handleCl
@@ -1308,16 +1308,16 @@
  e =%3E %7B%0A
-
         
@@ -2025,16 +2025,79 @@
 %7C null%7D%0A
+                title=%7Bthis.handleTitle()?.toString() %7C%7C null%7D%0A
         
@@ -2357,16 +2357,16 @@
 umber,%0A%0A
-
     data
@@ -2381,24 +2381,50 @@
 pes.object,%0A
+    title: PropTypes.any,%0A
     parentDa

update Td