mirror of https://github.com/apache/superset.git
Fix colors in ellipsis (#7632)
* Fix colors in ellipsis * Change method name to align with convention * Fix js lint
This commit is contained in:
parent
6d1f6e9df9
commit
ddd7f8fb17
|
@ -60,7 +60,7 @@ export default class FilterableTable extends PureComponent {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.list = List(this.formatTableData(props.data));
|
this.list = List(this.formatTableData(props.data));
|
||||||
this.headerRenderer = this.headerRenderer.bind(this);
|
this.renderHeader = this.renderHeader.bind(this);
|
||||||
this.rowClassName = this.rowClassName.bind(this);
|
this.rowClassName = this.rowClassName.bind(this);
|
||||||
this.sort = this.sort.bind(this);
|
this.sort = this.sort.bind(this);
|
||||||
|
|
||||||
|
@ -139,27 +139,6 @@ export default class FilterableTable extends PureComponent {
|
||||||
return values.some(v => v.includes(lowerCaseText));
|
return values.some(v => v.includes(lowerCaseText));
|
||||||
}
|
}
|
||||||
|
|
||||||
headerRenderer({ dataKey, label, sortBy, sortDirection }) {
|
|
||||||
return (
|
|
||||||
<TooltipWrapper label="header" tooltip={label}>
|
|
||||||
<div className="header-style">
|
|
||||||
<span
|
|
||||||
className={
|
|
||||||
this.props.expandedColumns.indexOf(label) > -1
|
|
||||||
? 'header-style-disabled'
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</span>
|
|
||||||
{sortBy === dataKey &&
|
|
||||||
<SortIndicator sortDirection={sortDirection} />
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</TooltipWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
rowClassName({ index }) {
|
rowClassName({ index }) {
|
||||||
let className = '';
|
let className = '';
|
||||||
if (this.props.striped) {
|
if (this.props.striped) {
|
||||||
|
@ -172,6 +151,22 @@ export default class FilterableTable extends PureComponent {
|
||||||
this.setState({ sortBy, sortDirection });
|
this.setState({ sortBy, sortDirection });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderHeader({ dataKey, label, sortBy, sortDirection }) {
|
||||||
|
const className = this.props.expandedColumns.indexOf(label) > -1
|
||||||
|
? 'header-style-disabled'
|
||||||
|
: 'header-style';
|
||||||
|
return (
|
||||||
|
<TooltipWrapper label="header" tooltip={label}>
|
||||||
|
<div className={className}>
|
||||||
|
{label}
|
||||||
|
{sortBy === dataKey &&
|
||||||
|
<SortIndicator sortDirection={sortDirection} />
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</TooltipWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { sortBy, sortDirection } = this.state;
|
const { sortBy, sortDirection } = this.state;
|
||||||
const {
|
const {
|
||||||
|
@ -229,7 +224,7 @@ export default class FilterableTable extends PureComponent {
|
||||||
<Column
|
<Column
|
||||||
dataKey={columnKey}
|
dataKey={columnKey}
|
||||||
disableSort={false}
|
disableSort={false}
|
||||||
headerRenderer={this.headerRenderer}
|
headerRenderer={this.renderHeader}
|
||||||
width={this.widthsForColumnsByKey[columnKey]}
|
width={this.widthsForColumnsByKey[columnKey]}
|
||||||
label={columnKey}
|
label={columnKey}
|
||||||
key={columnKey}
|
key={columnKey}
|
||||||
|
|
|
@ -78,5 +78,8 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.header-style-disabled {
|
.header-style-disabled {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue