bug on 0 / pair

Author: Julien Tassin

examples/src/FormExample.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import TextField from 'material-ui/TextField';
+import FlatButton from 'material-ui/FlatButton';
 import Playground from 'component-playground';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import { Table, Row, Cell } from '../../src/index';
-import TextField from 'material-ui/TextField';
-import FlatButton from 'material-ui/FlatButton';
+
 
 export default function render() {
  return (

src/Row/__tests__/Row.test.jsx

@@ -52,6 +52,8 @@ describe('Row', () => {
  describe('material', () => {
 
  const MATERIAL_UNSTRIPED_ROW_RESULT = '<div style="display:flex;flex-direction:row;flex-wrap:wrap;flex-grow:0;width:100%;color:rgba(0, 0, 0, 0.87);min-height:48px;"></div>';
+
+ const MATERIAL_STRIPED_ROW_RESULT = '<div style="display:flex;flex-direction:row;flex-wrap:wrap;flex-grow:0;width:100%;color:rgba(0, 0, 0, 0.87);background-color:rgba(127, 221, 233, 0.4);min-height:48px;"></div>';
 
  it('does not take striped boolean into account if material is false', () => {
  const wrapper = shallow(
@@ -71,10 +73,15 @@ describe('Row', () => {
  const wrapper = rowWrapper({material: true});
  expect(wrapper.html()).to.equal(MATERIAL_UNSTRIPED_ROW_RESULT);
  });
+
+ it('considers 0 index as pair', () => {
+ const wrapper = rowWrapper({material: true, index: 0});
+ expect(wrapper.html()).to.equal(MATERIAL_STRIPED_ROW_RESULT);
+ });
 
  it('add correct style if index is pair and striped is true', () => {
  const wrapper = rowWrapper({index: 2});
- expect(wrapper.html()).to.equal('<div style="display:flex;flex-direction:row;flex-wrap:wrap;flex-grow:0;width:100%;color:rgba(0, 0, 0, 0.87);background-color:rgba(127, 221, 233, 0.4);min-height:48px;"></div>');
+ expect(wrapper.html()).to.equal(MATERIAL_STRIPED_ROW_RESULT);
  });
 
  it('add correct style if index is impair and striped is true', () => {

src/Row/index.jsx

@@ -44,7 +44,7 @@ Row.getStyles = (props, context) => {
  if (props.header) {
  style.borderBottom = `1px solid ${tableHeader.borderColor}`;
  }
- if (props.striped && props.index && (props.index % 2 === 0)) {
+ if (props.striped && (props.index || props.index === 0) && (props.index % 2 === 0)) {
  style.backgroundColor = context.muiTheme.tableRow.stripeColor;
  }
  style.minHeight = context.muiTheme.tableRow.height;