index.tsx 4.37 KB
import React from 'react';
import { StyleSheet } from 'react-native';
import ListGrid, {
  HeaderRow,
  ItemRow,
  PassingColumn,
  PlayerColumn,
  ReceivingColumn,
  RushingColumn
} from '../../ListGrid';
import HeaderColumn from '../../ListGrid/HeaderColumn';
import { BorderRadius } from '../constants';

const styles = StyleSheet.create({
  itemWrapper: {
    height: 50,
    borderRadius: BorderRadius
  },
  player: {
    justifyContent: 'center'
  },
  stats: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});

const StatsList: React.FC<any> = () => {
  return (
    <ListGrid style={{ marginTop: 10 }}>
      <HeaderRow style={{ marginBottom: 5 }}>
        <HeaderColumn align="center" size={3} fontSize="sm" label="Player" />
        <HeaderColumn
          align="center"
          size={2}
          fontSize="sm"
          label="Passing"
          helpText="PaYD / PaTD"
        />
        <HeaderColumn
          align="center"
          size={2.5}
          fontSize="sm"
          label="Rushing"
          helpText="Att / RuYd / RuTD"
        />
        <HeaderColumn
          align="center"
          size={2.5}
          fontSize="sm"
          label="Receiving"
          helpText="Rec / ReYd / ReTD"
        />
      </HeaderRow>
      <ItemRow style={styles.itemWrapper}>
        <PlayerColumn
          owned
          name="EZEKEL ELLIOT"
          position="RB"
          team="DAL"
          rating={4.3}
          size={3}
          style={styles.player}
        />
        <PassingColumn size={2} yards="0.0" td="0.0" style={styles.stats} />
        <RushingColumn
          size={2.5}
          attempts="16.3"
          yards="87.5"
          td="0.7"
          style={styles.stats}
        />
        <ReceivingColumn
          size={2.5}
          receptions="4.1"
          yards="56.7"
          td="0.3"
          style={styles.stats}
        />
      </ItemRow>
      <ItemRow style={styles.itemWrapper}>
        <PlayerColumn
          name="MICHAEL THOMAS"
          position="WR"
          team="NO"
          rating={3.5}
          size={3}
          style={styles.player}
        />
        <PassingColumn size={2} yards="0.0" td="0.0" style={styles.stats} />
        <RushingColumn
          size={2.5}
          attempts="16.3"
          yards="87.5"
          td="0.7"
          style={styles.stats}
        />
        <ReceivingColumn
          size={2.5}
          receptions="4.1"
          yards="56.7"
          td="0.3"
          style={styles.stats}
        />
      </ItemRow>
      <ItemRow style={styles.itemWrapper}>
        <PlayerColumn
          name="JULIO JONES"
          position="WR"
          team="ATL"
          rating={4}
          size={3}
          style={styles.player}
        />
        <PassingColumn size={2} yards="0.0" td="0.0" style={styles.stats} />
        <RushingColumn
          size={2.5}
          attempts="16.3"
          yards="87.5"
          td="0.7"
          style={styles.stats}
        />
        <ReceivingColumn
          size={2.5}
          receptions="4.1"
          yards="56.7"
          td="0.3"
          style={styles.stats}
        />
      </ItemRow>
      <ItemRow style={styles.itemWrapper}>
        <PlayerColumn
          name="DESEAN WATSON"
          position="QB"
          team="HOU"
          rating={4}
          size={3}
          style={styles.player}
        />
        <PassingColumn size={2} yards="0.0" td="0.0" style={styles.stats} />
        <RushingColumn
          size={2.5}
          attempts="16.3"
          yards="87.5"
          td="0.7"
          style={styles.stats}
        />
        <ReceivingColumn
          size={2.5}
          receptions="4.1"
          yards="56.7"
          td="0.3"
          style={styles.stats}
        />
      </ItemRow>
      <ItemRow style={styles.itemWrapper}>
        <PlayerColumn
          name="COOPER KUPP"
          position="WR"
          team="STL"
          rating={3}
          size={3}
          style={styles.player}
        />
        <PassingColumn size={2} yards="0.0" td="0.0" style={styles.stats} />
        <RushingColumn
          size={2.5}
          attempts="16.3"
          yards="87.5"
          td="0.7"
          style={styles.stats}
        />
        <ReceivingColumn
          size={2.5}
          receptions="4.1"
          yards="56.7"
          td="0.3"
          style={styles.stats}
        />
      </ItemRow>
    </ListGrid>
  );
};

export default StatsList;