react-life-design/src/DataTable/DataTable.tsx

import * as React from 'react';
import styled from 'styled-components';

import { Sizes, Colors } from '../index';
import { getChildrenOfClass } from '../utils/elementsHelper';
import { styledByMediaQuery } from '../utils/styles';

interface IProps {
  data?: Object[];
  defaultHeader?: boolean;
  header?: Object;
  children: any;
  isActive?: boolean;
}

const DataTableWrapper = styled.div`
  max-height: 367px;
  overflow-y: scroll;
  margin-bottom: 25px;
`;

const DataHeader = styled.div`
  font-size: ${Sizes.s2}px;
  padding-bottom: ${Sizes.s1}px;
  padding-left: ${Sizes.s1}px;
  border-bottom: 1px solid ${Colors.line};
  min-width: 25%;
  display: flex;
  ${styledByMediaQuery(`padding-left: ${Sizes.s4}px;`)}
`;

const TableLine = styled.div<{isActive?: boolean; onClick?: any}>`
  padding: ${Sizes.s3 + 1}px ${Sizes.s1}px;

  border-bottom: 1px solid ${Colors.line};
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: all 0.3s;
  position: relative;

  ${styledByMediaQuery(`padding: ${Sizes.s3 + 1}px ${Sizes.s4}px;`)}

  &:hover {
    background-color: ${Colors.heaven};
  }
`;

export default class DataTable extends React.PureComponent<IProps> {
  static Header = DataHeader;
  static Line = TableLine;

  render () {
    const { children } = this.props;

    const isHeader = getChildrenOfClass(DataHeader, children);
    const isContent = getChildrenOfClass(TableLine, children);

    return (
      <React.Fragment>
        {isHeader}
        <DataTableWrapper>
          {isContent}
        </DataTableWrapper>
      </React.Fragment>
    );
  }
}