Skip to content

Commit 5daa991

Browse files
jbetancurjbetancur
authored
Merge pull request #69 from jbetancur/enhancement-themeing-2
customeTheme should be immutable
2 parents 0a1d240 + 29d19ac commit 5daa991

8 files changed

Lines changed: 113 additions & 37 deletions

File tree

‎src/DataTable/DataTable.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import NoData from './NoData';
2020
import { propTypes, defaultProps } from './propTypes';
2121
import { decorateColumns, getSortDirection } from './util';
2222
import { handleSelectAll, handleRowSelected, handleSort, clearSelected } from './statemgmt';
23-
import defaultTheme from '../themes/default';
23+
import getDefaultTheme from '../themes/default';
2424

2525
class DataTable extends Component {
2626
static propTypes = propTypes;
@@ -223,7 +223,7 @@ class DataTable extends Component {
223223
currentPage,
224224
} = this.state;
225225

226-
const theme = this.mergeTheme(defaultTheme, customTheme);
226+
const theme = this.mergeTheme(getDefaultTheme(), customTheme);
227227
const enabledPagination = pagination && !progressPending && data.length > 0;
228228
const init = {
229229
...this.props,

‎src/DataTable/TableRow.js‎

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,48 @@ import TableCellCheckbox from './TableCellCheckbox';
77
import TableCellExpander from './TableCellExpander';
88
import ExpanderRow from './ExpanderRow';
99

10+
const defaultRowsCSS = css`
11+
border-top: ${props => props.theme.rows.borderWidth} solid ${props => props.theme.rows.borderColor};
12+
`;
13+
14+
const spacedRowsCSS = css`
15+
margin-top: ${props => props.theme.rows.spacingMargin || 0};
16+
margin-bottom: ${props => props.theme.rows.spacingMargin || 0};
17+
border-radius: ${props => props.theme.rows.spacingBorderRadius || 0};
18+
border: ${props => props.theme.rows.borderWidth} solid ${props => props.theme.rows.borderColor};
19+
${props => props.theme.rows.spacingShadow && `box-shadow: ${props.theme.rows.spacingShadow}`};
20+
`;
21+
22+
const stripedCSS = css`
23+
&:nth-child(odd) {
24+
background-color: ${props => props.theme.rows.stripedColor};
25+
}
26+
`;
27+
28+
const hightlightCSS = css`
29+
&:hover {
30+
color: ${props => props.theme.rows.hoverFontColor};
31+
background-color: ${props => props.theme.rows.hoverColor};
32+
transition-duration: 0.15s;
33+
transition-property: background-color;
34+
}
35+
`;
36+
37+
const pointerCSS = css`
38+
&:hover {
39+
cursor: pointer;
40+
}
41+
`;
42+
1043
const TableRowStyle = styled.div`
1144
display: flex;
1245
width: 100%;
13-
border-top: 1px solid ${props => props.theme.rows.borderColor};
46+
${props => (props.theme.rows.spacing === 'spaced' ? spacedRowsCSS : defaultRowsCSS)};
1447
background-color: ${props => props.theme.rows.backgroundColor};
1548
color: ${props => props.theme.rows.fontColor};
16-
${props => props.striped && css`
17-
&:nth-child(odd) {
18-
background-color: ${props.theme.rows.stripedColor};
19-
}
20-
`};
21-
${props => props.highlightOnHover && css`
22-
&:hover {
23-
color: ${props.theme.rows.hoverFontColor};
24-
background-color: ${props.theme.rows.hoverColor};
25-
transition-duration: 0.15s;
26-
transition-property: background-color;
27-
}
28-
`};
29-
${props => props.pointerOnHover && css`
30-
&:hover {
31-
cursor: pointer;
32-
}
33-
`};
49+
${props => props.striped && stripedCSS};
50+
${props => props.highlightOnHover && hightlightCSS};
51+
${props => props.pointerOnHover && pointerCSS};
3452
`;
3553

3654
class TableRow extends PureComponent {
@@ -124,4 +142,5 @@ class TableRow extends PureComponent {
124142
);
125143
}
126144
}
145+
127146
export default TableRow;

‎src/DataTable/__tests__/Pagination.test.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ test('should render correctly with default props', () => {
1717
rowCount={40}
1818
onChangePage={jest.fn()}
1919
onChangeRowsPerPage={jest.fn()}
20-
theme={{ ...theme }}
20+
theme={{ ...theme() }}
2121
/>
2222
</DataTableProvider>,
2323
);
@@ -36,7 +36,7 @@ describe('when clicking the First Page button', () => {
3636
rowCount={40}
3737
onChangePage={onChangePageMock}
3838
onChangeRowsPerPage={jest.fn()}
39-
theme={{ ...theme }}
39+
theme={{ ...theme() }}
4040
/>
4141
</DataTableProvider>,
4242
);
@@ -55,7 +55,7 @@ describe('when clicking the First Page button', () => {
5555
rowCount={40}
5656
onChangePage={onChangePageMock}
5757
onChangeRowsPerPage={jest.fn()}
58-
theme={{ ...theme }}
58+
theme={{ ...theme() }}
5959
/>
6060
</DataTableProvider>,
6161
);
@@ -76,7 +76,7 @@ describe('when clicking the Last Page button', () => {
7676
rowCount={40}
7777
onChangePage={onChangePageMock}
7878
onChangeRowsPerPage={jest.fn()}
79-
theme={{ ...theme }}
79+
theme={{ ...theme() }}
8080
/>
8181
</DataTableProvider>,
8282
);
@@ -95,7 +95,7 @@ describe('when clicking the Last Page button', () => {
9595
rowCount={40}
9696
onChangePage={onChangePageMock}
9797
onChangeRowsPerPage={jest.fn()}
98-
theme={{ ...theme }}
98+
theme={{ ...theme() }}
9999
/>
100100
</DataTableProvider>,
101101
);
@@ -116,7 +116,7 @@ describe('when clicking the Next Page button', () => {
116116
rowCount={40}
117117
onChangePage={onChangePageMock}
118118
onChangeRowsPerPage={jest.fn()}
119-
theme={{ ...theme }}
119+
theme={{ ...theme() }}
120120
/>
121121
</DataTableProvider>,
122122
);
@@ -135,7 +135,7 @@ describe('when clicking the Next Page button', () => {
135135
rowCount={40}
136136
onChangePage={onChangePageMock}
137137
onChangeRowsPerPage={jest.fn()}
138-
theme={{ ...theme }}
138+
theme={{ ...theme() }}
139139
/>
140140
</DataTableProvider>,
141141
);
@@ -156,7 +156,7 @@ describe('when clicking the Previous Page button', () => {
156156
rowCount={40}
157157
onChangePage={onChangePageMock}
158158
onChangeRowsPerPage={jest.fn()}
159-
theme={{ ...theme }}
159+
theme={{ ...theme() }}
160160
/>
161161
</DataTableProvider>,
162162
);
@@ -175,7 +175,7 @@ describe('when clicking the Previous Page button', () => {
175175
rowCount={40}
176176
onChangePage={onChangePageMock}
177177
onChangeRowsPerPage={jest.fn()}
178-
theme={{ ...theme }}
178+
theme={{ ...theme() }}
179179
/>
180180
</DataTableProvider>,
181181
);
@@ -197,7 +197,7 @@ describe('when there is no paging to be done', () => {
197197
rowCount={5}
198198
onChangePage={onChangePageMock}
199199
onChangeRowsPerPage={jest.fn()}
200-
theme={{ ...theme }}
200+
theme={{ ...theme() }}
201201
/>
202202
</DataTableProvider>,
203203
);
@@ -236,7 +236,7 @@ describe('when clicking the Previous Page button', () => {
236236
rowCount={40}
237237
onChangePage={onChangePageMock}
238238
onChangeRowsPerPage={onChangeRowsPerPageMock}
239-
theme={{ ...theme }}
239+
theme={{ ...theme() }}
240240
/>
241241
</DataTableProvider>,
242242
);

‎src/DataTable/__tests__/TableRow.test.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ test('should render correctly with no columns', () => {
2323
<DataTableProvider initialState={{ columns: [] }}>
2424
<TableRow
2525
row={rowMock}
26-
2726
onRowClicked={jest.fn()}
2827
onRowSelected={jest.fn()}
2928
/>

‎src/test-helpers.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import 'jest-styled-components';
55
import theme from './themes/default';
66

77
export const renderWithTheme = (tree, ...args) =>
8-
render(<ThemeProvider theme={theme}>{tree}</ThemeProvider>, ...args);
8+
render(<ThemeProvider theme={theme()}>{tree}</ThemeProvider>, ...args);
99

1010
export function syntheticEvent(a) {
1111
return ({

‎src/themes/default.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default {
1+
export default () => ({
22
title: {
33
fontSize: '22px',
44
fontColor: 'rgba(0,0,0,.87)',
@@ -17,9 +17,12 @@ export default {
1717
},
1818
},
1919
rows: {
20+
// default || spaced
21+
spacing: 'default',
2022
fontSize: '13px',
2123
fontColor: 'rgba(0,0,0,.87)',
2224
backgroundColor: 'transparent',
25+
borderWidth: '1px',
2326
borderColor: 'rgba(0,0,0,.12)',
2427
stripedColor: 'rgba(0,0,0,.03)',
2528
hoverFontColor: 'rgba(0,0,0,.87)',
@@ -41,4 +44,4 @@ export default {
4144
buttonFontColor: 'rgba(0,0,0,.54)',
4245
buttonHoverBackground: 'rgba(0,0,0,.12)',
4346
},
44-
};
47+
});

stories/DataTable/Themes/Theme.stories.js renamed to stories/DataTable/Themes/ThemeDark.stories.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ const BasicTable = () => (
6161
highlightOnHover
6262
pointerOnHover
6363
pagination
64-
expandableRows
6564
/>
6665
);
6766

‎stories/DataTable/Themes/ThemeRows.stories.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
2+
import React from 'react';
3+
import { storiesOf } from '@storybook/react';
4+
import data from '../constants/sampleMovieData';
5+
import DataTable from '../../../src/DataTable/DataTable';
6+
7+
const darkTheme = {
8+
rows: {
9+
// spaced allows the following properties
10+
spacing: 'spaced',
11+
spacingBorderRadius: 0,
12+
spacingMargin: '3px',
13+
spacingShadow: '0 1px 3px 0 rgba(0,0,0,0.15)',
14+
15+
borderColor: 'transparent',
16+
backgroundColor: 'white',
17+
height: '64px',
18+
},
19+
cells: {
20+
cellPadding: '48px',
21+
},
22+
};
23+
24+
const columns = [
25+
{
26+
name: 'Title',
27+
selector: 'title',
28+
sortable: true,
29+
},
30+
{
31+
name: 'Director',
32+
selector: 'director',
33+
sortable: true,
34+
},
35+
{
36+
name: 'Year',
37+
selector: 'year',
38+
sortable: true,
39+
},
40+
];
41+
42+
const BasicTable = () => (
43+
<DataTable
44+
title="Movie List"
45+
columns={columns}
46+
data={data}
47+
customTheme={darkTheme}
48+
highlightOnHover
49+
pointerOnHover
50+
pagination
51+
/>
52+
);
53+
54+
55+
storiesOf('Custom Theme', module)
56+
.add('Custom Rows', BasicTable);

0 commit comments

Comments
 (0)