import React from 'react';
import PropTypes from 'prop-types';
import CheckedTable from './CheckedTable';
import styled from 'styled-components';

const OtherStyles = styled.div`${({ height }) => `
.ReactTable .rt-tbody {
  height :${height ? height + 'px' : '100%'};
}
`}`

export default class CheckedTableWithScroll extends React.Component {
  render() {
    return (
      <OtherStyles height={this.props.height}>
        <CheckedTable
          data={this.props.data}
          columns={this.props.columns}
          primaryKey={this.props.primaryKey}
          getSelectedRows={this.props.getSelectedRows}
          getSelectedKeys={this.props.getSelectedKeys}
          checkBoxWidth={this.props.checkBoxWidth}
          enableAll={this.props.enableAll}
          defaultPageSize={this.props.data.length}
          showPagination={false}
          fetchData={this.props.fetchData}
          serialNoWidth={this.props.serialNoWidth}
          enabledKey={this.props.enabledKey}
          {...this.props}
          loading={this.props.loading}
        />
      </OtherStyles>
    )
  }
}


CheckedTableWithScroll.propTypes = {
  data: PropTypes.array,
  columns: PropTypes.array,
  primaryKey: PropTypes.string,
  checkBoxWidth: PropTypes.number,
  serialNoWidth: PropTypes.number,
  fetchData: PropTypes.func,
  getSelectedKeys: PropTypes.func,
  getSelectedKeys: PropTypes.func,
  enabledKey: PropTypes.string,
  enableAll: PropTypes.bool,
}