Skip to content

Commit 68f7feb

Browse files
tinaClintinaClin
committed
Fix style issue.
1 parent be19d42 commit 68f7feb

File tree

8 files changed

+64
-35
lines changed

8 files changed

+64
-35
lines changed

‎src/Table.jsx

+42-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import PropTypes from 'prop-types';
22
import React, { Component } from 'react';
3-
import styled, { css } from 'styled-components';
3+
import styled from 'styled-components';
44
import isEqual from 'lodash/isEqual';
55
import TableContext from './context';
66
import Loader from './Loader';
@@ -129,7 +129,6 @@ class Table extends Component {
129129
return (
130130
<TableContext.Provider value={context}>
131131
<WrapperStyle
132-
minimalist={minimalist}
133132
width={tableWidth}
134133
height={tableHeight}
135134
{...props}
@@ -144,13 +143,22 @@ class Table extends Component {
144143
})
145144
: children
146145
}
146+
{ !minimalist && (
147+
<React.Fragment>
148+
<BorderTop />
149+
<BorderRight />
150+
<BorderBottom />
151+
<BorderLeft />
152+
</React.Fragment>
153+
)}
147154
</WrapperStyle>
148155
</TableContext.Provider>
149156
);
150157
}
151158
}
152159

153160
const WrapperStyle = styled.div`
161+
position: relative;
154162
display: flex;
155163
flex-direction: column;
156164
line-height: 20px;
@@ -160,26 +168,45 @@ const WrapperStyle = styled.div`
160168
*, *:before, *:after {
161169
box-sizing: inherit;
162170
}
163-
164-
${props => !props.minimalist && css`
165-
border-top: 1px solid #ddd;
166-
border-bottom: 1px solid #ddd;
167-
`}
168-
169-
${props => props.minimalist && css`
170-
border: 0;
171-
`}
172171
`;
173172

174173
const EmptyBodyStyle = styled.div`
175174
text-align: center;
176175
padding: 44px 12px;
177176
color: #999;
177+
`;
178+
179+
const VerticalLine = styled.div`
180+
border: none;
181+
border-left: 1px solid #ddd;
182+
height: 100%;
183+
width: 1px;
184+
`;
178185

179-
${props => !props.minimalist && css`
180-
border-left: 1px solid #ddd;
181-
border-right: 1px solid #ddd;
182-
`}
186+
const HorizontalLine = styled.div`
187+
border: none;
188+
border-top: 1px solid #ddd;
189+
height: 1px;
190+
width: 100%;
191+
`;
192+
193+
const BorderTop = styled(HorizontalLine)`
194+
position: absolute;
195+
top: 0;
196+
`;
197+
const BorderRight = styled(VerticalLine)`
198+
position: absolute;
199+
top: 0;
200+
right: 0;
201+
`;
202+
const BorderBottom = styled(HorizontalLine)`
203+
position: absolute;
204+
bottom: 0;
205+
`;
206+
const BorderLeft = styled(VerticalLine)`
207+
position: absolute;
208+
top: 0;
209+
left: 0;
183210
`;
184211

185212
export default Table;

‎src/TableCell.jsx

-3
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,6 @@ const CellStyle = styled.div`
3636
${props => !props.minimalist && css`
3737
border-right: 1px solid #ddd;
3838
border-bottom: 1px solid #ddd;
39-
&:first-child {
40-
border-left: 1px solid #ddd;
41-
}
4239
`}
4340
4441
${props => props.minimalist && css`

‎src/TableHeaderCell.jsx

-3
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,6 @@ const HeaderCellStyle = styled.div`
3939
background-color: #EEEEEE;
4040
border-right: 1px solid #ddd;
4141
border-bottom: 2px solid #ccc;
42-
&:first-child {
43-
border-left: 1px solid #ddd;
44-
}
4542
`}
4643
4744
${props => props.minimalist && css`

‎src/TableTemplate.jsx

-2
Original file line numberDiff line numberDiff line change
@@ -120,15 +120,13 @@ class TableTemplate extends Component {
120120
columns,
121121
...props
122122
} = this.props;
123-
const isNoData = (data.length === 0) && !loading;
124123

125124
return (
126125
<TableWrapper
127126
columns={columns}
128127
data={data}
129128
minimalist={minimalist}
130129
height={height}
131-
isNoData={isNoData}
132130
width={width}
133131
{...props}
134132
>

‎styleguide/examples/Expand.jsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -187,9 +187,8 @@ const StyledTableRow = styled(TableRow)`
187187
`;
188188

189189
const ExpandedRowStyle = styled.div`
190-
border: 1px solid #ddd;
191-
border-top-width: 0;
192190
padding: 16px 16px 16px 52px;
191+
border-bottom: 1px solid #ddd;
193192
&:last-child {
194193
border-bottom-width: 0;
195194
}

‎styleguide/examples/FixedColumns.jsx

+15-8
Original file line numberDiff line numberDiff line change
@@ -249,13 +249,13 @@ class Selection extends Component {
249249
const { width: cellWidth, render } = cell;
250250
const cellValue = _get(rowData, cell.dataKey);
251251
return (
252-
<TableCell
252+
<StyledTableCell
253253
key={key}
254254
className="td"
255255
width={cellWidth}
256256
>
257257
{ typeof render === 'function' ? render(cellValue, rowData) : cellValue }
258-
</TableCell>
258+
</StyledTableCell>
259259
);
260260
})
261261
}
@@ -340,13 +340,13 @@ class Selection extends Component {
340340
const { width: cellWidth } = cell;
341341
const cellValue = _get(rowData, cell.dataKey);
342342
return (
343-
<TableCell
343+
<StyledTableCell
344344
key={key}
345345
className="td"
346346
width={cellWidth}
347347
>
348348
{ cellValue }
349-
</TableCell>
349+
</StyledTableCell>
350350
);
351351
})
352352
}
@@ -388,12 +388,19 @@ const ShadowStyle = styled.div`
388388
display: none;
389389
`;
390390

391+
const StyledTableCell = styled(TableCell)``;
392+
391393
const StyledTableRow = styled(TableRow)`
392-
${props => props.active && css`
393-
background-color: #fcf8da;
394-
`}
395394
${props => props.hover && css`
396-
background-color: #e6f4fc;
395+
${StyledTableCell} {
396+
background-color: #e6f4fc;
397+
}
398+
`}
399+
400+
${props => props.active && css`
401+
${StyledTableCell} {
402+
background-color: #fcf8da;
403+
}
397404
`}
398405
`;
399406

‎styleguide/examples/NoDataCustom.md

-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ const columns = [
2222
textAlign: 'center',
2323
fontSize: 24,
2424
padding: 50,
25-
borderLeft: '1px solid #ddd',
26-
borderRight: '1px solid #ddd',
2725
}}
2826
>
2927
~ No data to display ~

‎styleguide/examples/Selection.jsx

+6
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,9 @@ class Selection extends Component {
9595
checked={isChecked}
9696
indeterminate={isIndeterminate}
9797
onClick={this.handleHeaderCheckbox}
98+
inputStyle={{
99+
margin: 0
100+
}}
98101
/>
99102
);
100103
};
@@ -105,6 +108,9 @@ class Selection extends Component {
105108
<Checkbox
106109
checked={checked}
107110
onClick={this.handleRowCheckbox}
111+
inputStyle={{
112+
margin: 0
113+
}}
108114
/>
109115
);
110116
};

0 commit comments

Comments
 (0)