From 68f7feb5c227dca09e6fd62af50eeab62b51a64e Mon Sep 17 00:00:00 2001 From: "Tina C Lin (RD-TW)" Date: Fri, 17 Jan 2020 10:41:25 +0800 Subject: [PATCH 1/3] Fix style issue. --- src/Table.jsx | 57 ++++++++++++++++++++-------- src/TableCell.jsx | 3 -- src/TableHeaderCell.jsx | 3 -- src/TableTemplate.jsx | 2 - styleguide/examples/Expand.jsx | 3 +- styleguide/examples/FixedColumns.jsx | 23 +++++++---- styleguide/examples/NoDataCustom.md | 2 - styleguide/examples/Selection.jsx | 6 +++ 8 files changed, 64 insertions(+), 35 deletions(-) diff --git a/src/Table.jsx b/src/Table.jsx index f7dcee0..dfd207a 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import isEqual from 'lodash/isEqual'; import TableContext from './context'; import Loader from './Loader'; @@ -129,7 +129,6 @@ class Table extends Component { return ( + + + + + + )} ); @@ -151,6 +158,7 @@ class Table extends Component { } const WrapperStyle = styled.div` + position: relative; display: flex; flex-direction: column; line-height: 20px; @@ -160,26 +168,45 @@ const WrapperStyle = styled.div` *, *:before, *:after { box-sizing: inherit; } - - ${props => !props.minimalist && css` - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; - `} - - ${props => props.minimalist && css` - border: 0; - `} `; const EmptyBodyStyle = styled.div` text-align: center; padding: 44px 12px; color: #999; +`; + +const VerticalLine = styled.div` + border: none; + border-left: 1px solid #ddd; + height: 100%; + width: 1px; +`; - ${props => !props.minimalist && css` - border-left: 1px solid #ddd; - border-right: 1px solid #ddd; - `} +const HorizontalLine = styled.div` + border: none; + border-top: 1px solid #ddd; + height: 1px; + width: 100%; +`; + +const BorderTop = styled(HorizontalLine)` + position: absolute; + top: 0; +`; +const BorderRight = styled(VerticalLine)` + position: absolute; + top: 0; + right: 0; +`; +const BorderBottom = styled(HorizontalLine)` + position: absolute; + bottom: 0; +`; +const BorderLeft = styled(VerticalLine)` + position: absolute; + top: 0; + left: 0; `; export default Table; diff --git a/src/TableCell.jsx b/src/TableCell.jsx index 1234f30..8caca92 100644 --- a/src/TableCell.jsx +++ b/src/TableCell.jsx @@ -36,9 +36,6 @@ const CellStyle = styled.div` ${props => !props.minimalist && css` border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; - &:first-child { - border-left: 1px solid #ddd; - } `} ${props => props.minimalist && css` diff --git a/src/TableHeaderCell.jsx b/src/TableHeaderCell.jsx index f47dc30..915b28a 100644 --- a/src/TableHeaderCell.jsx +++ b/src/TableHeaderCell.jsx @@ -39,9 +39,6 @@ const HeaderCellStyle = styled.div` background-color: #EEEEEE; border-right: 1px solid #ddd; border-bottom: 2px solid #ccc; - &:first-child { - border-left: 1px solid #ddd; - } `} ${props => props.minimalist && css` diff --git a/src/TableTemplate.jsx b/src/TableTemplate.jsx index dd61bbb..9852993 100644 --- a/src/TableTemplate.jsx +++ b/src/TableTemplate.jsx @@ -120,7 +120,6 @@ class TableTemplate extends Component { columns, ...props } = this.props; - const isNoData = (data.length === 0) && !loading; return ( diff --git a/styleguide/examples/Expand.jsx b/styleguide/examples/Expand.jsx index 910c319..3217101 100644 --- a/styleguide/examples/Expand.jsx +++ b/styleguide/examples/Expand.jsx @@ -187,9 +187,8 @@ const StyledTableRow = styled(TableRow)` `; const ExpandedRowStyle = styled.div` - border: 1px solid #ddd; - border-top-width: 0; padding: 16px 16px 16px 52px; + border-bottom: 1px solid #ddd; &:last-child { border-bottom-width: 0; } diff --git a/styleguide/examples/FixedColumns.jsx b/styleguide/examples/FixedColumns.jsx index 2e5901b..aa46d00 100644 --- a/styleguide/examples/FixedColumns.jsx +++ b/styleguide/examples/FixedColumns.jsx @@ -249,13 +249,13 @@ class Selection extends Component { const { width: cellWidth, render } = cell; const cellValue = _get(rowData, cell.dataKey); return ( - { typeof render === 'function' ? render(cellValue, rowData) : cellValue } - + ); }) } @@ -340,13 +340,13 @@ class Selection extends Component { const { width: cellWidth } = cell; const cellValue = _get(rowData, cell.dataKey); return ( - { cellValue } - + ); }) } @@ -388,12 +388,19 @@ const ShadowStyle = styled.div` display: none; `; +const StyledTableCell = styled(TableCell)``; + const StyledTableRow = styled(TableRow)` - ${props => props.active && css` - background-color: #fcf8da; - `} ${props => props.hover && css` - background-color: #e6f4fc; + ${StyledTableCell} { + background-color: #e6f4fc; + } + `} + + ${props => props.active && css` + ${StyledTableCell} { + background-color: #fcf8da; + } `} `; diff --git a/styleguide/examples/NoDataCustom.md b/styleguide/examples/NoDataCustom.md index 7f221e8..55ae78a 100644 --- a/styleguide/examples/NoDataCustom.md +++ b/styleguide/examples/NoDataCustom.md @@ -22,8 +22,6 @@ const columns = [ textAlign: 'center', fontSize: 24, padding: 50, - borderLeft: '1px solid #ddd', - borderRight: '1px solid #ddd', }} > ~ No data to display ~ diff --git a/styleguide/examples/Selection.jsx b/styleguide/examples/Selection.jsx index 3f109ed..84aea74 100644 --- a/styleguide/examples/Selection.jsx +++ b/styleguide/examples/Selection.jsx @@ -95,6 +95,9 @@ class Selection extends Component { checked={isChecked} indeterminate={isIndeterminate} onClick={this.handleHeaderCheckbox} + inputStyle={{ + margin: 0 + }} /> ); }; @@ -105,6 +108,9 @@ class Selection extends Component { ); }; From 9222216ac32535aa80a548f972433d42e2a7d9f1 Mon Sep 17 00:00:00 2001 From: "Tina C Lin (RD-TW)" Date: Fri, 17 Jan 2020 11:02:52 +0800 Subject: [PATCH 2/3] Fix style issue. --- styleguide/examples/FixedColumns.jsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/styleguide/examples/FixedColumns.jsx b/styleguide/examples/FixedColumns.jsx index aa46d00..508c678 100644 --- a/styleguide/examples/FixedColumns.jsx +++ b/styleguide/examples/FixedColumns.jsx @@ -161,6 +161,9 @@ class Selection extends Component { checked={isChecked} indeterminate={isIndeterminate} onClick={this.handleHeaderCheckbox} + inputStyle={{ + margin: 0 + }} /> ); }; @@ -171,6 +174,9 @@ class Selection extends Component { ); }; From f89dc3d898c51c8e5ccf11de28da01e5806320e8 Mon Sep 17 00:00:00 2001 From: "Tina C Lin (RD-TW)" Date: Mon, 20 Jan 2020 11:29:23 +0800 Subject: [PATCH 3/3] Upgrade styled-components to v5.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9ab2fe8..71c0370 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "lodash.get": "^4.4.2", "prop-types": "^15.5.8", "react-custom-scrollbars": "^4.2.1", - "styled-components": "^4.4.1" + "styled-components": "^5.0.0" }, "devDependencies": { "@babel/cli": "~7.6.0",