vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

I am fucking tired of copying rowCell/headCell styles

dev
Vitaliy Filippov 2018-11-28 15:43:44 +03:00
parent 185dd37202
commit daf6bac933
4 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/table/Table.js
View File

@ -92,7 +92,7 @@ const factory = (TableHead, TableRow) => {
} = this.props; } = this.props;
return ( return (
<table {...rest} className={classnames(theme.table, className)}> <table {...rest} className={classnames(theme.table, className)}>
<thead className={theme.head}>{this.renderHead()}</thead> <thead>{this.renderHead()}</thead>
<tbody>{this.renderRows()}</tbody> <tbody>{this.renderRows()}</tbody>
</table> </table>
); );

2
components/table/TableCell.js
View File

@ -56,8 +56,6 @@ const factory = (FontIcon) => {
} = this.props; } = this.props;
const _className = classnames(theme.tableCell, { const _className = classnames(theme.tableCell, {
[theme.headCell]: tagName === 'th',
[theme.rowCell]: tagName === 'td',
[theme.sorted]: sorted, [theme.sorted]: sorted,
[theme.numeric]: numeric, [theme.numeric]: numeric,
}, className); }, className);

2
components/table/TableRow.js
View File

@ -29,7 +29,7 @@ const factory = (Checkbox, TableCell) => {
render() { render() {
const { children, className, selectable, idx, selected, theme, ...other } = this.props; // eslint-disable-line const { children, className, selectable, idx, selected, theme, ...other } = this.props; // eslint-disable-line
const _className = classnames(theme.row, { const _className = classnames({
[theme.selected]: selectable && selected, [theme.selected]: selectable && selected,
}, className); }, className);
return ( return (

12
components/table/theme.css
View File

@ -28,12 +28,12 @@
@apply --reset; @apply --reset;
} }
.head { .table > head, .head {
padding-bottom: calc(0.3 * var(--unit)); padding-bottom: calc(0.3 * var(--unit));
white-space: nowrap; white-space: nowrap;
} }
.row { .table > tbody > tr, .row {
color: var(--table-row-color); color: var(--table-row-color);
height: var(--table-row-height); height: var(--table-row-height);
transition-duration: 0.28s; transition-duration: 0.28s;
@ -45,6 +45,10 @@
&.selected { background-color: var(--table-selection-color); } &.selected { background-color: var(--table-selection-color); }
} }
.table > thead > tr > th,
.table > tbody > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.rowCell, .rowCell,
.headCell { .headCell {
padding: 0 var(--table-column-padding) 12px var(--table-column-padding); padding: 0 var(--table-column-padding) 12px var(--table-column-padding);
@ -55,6 +59,8 @@
&.numeric { text-align: right; } &.numeric { text-align: right; }
} }
.table > thead > tr > td,
.table > tbody > tr > td,
.rowCell { .rowCell {
border-bottom: var(--table-dividers); border-bottom: var(--table-dividers);
border-top: var(--table-dividers); border-top: var(--table-dividers);
@ -72,6 +78,8 @@
} }
} }
.table > thead > tr > th,
.table > tbody > tr > th,
.headCell { .headCell {
color: var(--table-header-color); color: var(--table-header-color);
font-size: var(--table-header-font-size); font-size: var(--table-header-font-size);