import React from 'react'
import { Table } from 'antd'
import { connect } from 'dva'
import './tableView.less'

const TableView = ({ contentSize, chartDesigner, dispatch }) => {
    const { chartOption, styleConfig } = chartDesigner;
    const { columns, dataSource } = chartOption;

    const { table } = styleConfig || {};
    const { bordered } = table || {};
    const tableContentHeight = contentSize.height - 38 - 42;
    const tableRowHeight = 38;

    return (
        <Table
            className='table-view'
            columns={columns}
            dataSource={dataSource}
            size='small'
            bordered={bordered}
            scroll={{
                x: columns ? columns.length * 200 : 0,
                y: tableContentHeight
            }}
            pagination={{ defaultPageSize: Math.floor(tableContentHeight/tableRowHeight) || 10 }}
        />
    );
}

function mapStateToProps({ present: { chartDesigner } }) {
    return { chartDesigner: chartDesigner }
}

export default connect(mapStateToProps)(TableView);