p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

新增 table 的行高亮功能

This commit is contained in:
liaoxuezhi 2019-12-12 19:30:46 +08:00
parent f9f941031e
commit 5a06bb2985
8 changed files with 89 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/components/CRUD/Table.jsx
View File

@ -149,6 +149,7 @@ export default {
} }
], ],
footerToolbar: ['statistics', 'switch-per-page', 'pagination'], footerToolbar: ['statistics', 'switch-per-page', 'pagination'],
// rowClassNameExpr: '<%= data.id == 1 ? "bg-success" : "" %>',
columns: [ columns: [
{ {
name: 'id', name: 'id',

29
scss/_mixins.scss
View File

@ -94,7 +94,8 @@
$hover-color: #fff; $hover-color: #fff;
color: $font-color; color: $font-color;
& a { & a,
& .#{$ns}Button--link {
color: $link-color; color: $link-color;
&:hover { &:hover {
@ -118,20 +119,20 @@
color: lighten($font-color, 25%) !important; color: lighten($font-color, 25%) !important;
} }
&.auto, // &.auto,
& .auto { // & .auto {
& .list-group-item { // & .list-group-item {
border-color: darken($bg-color, 5%) !important; // border-color: darken($bg-color, 5%) !important;
background-color: transparent; // background-color: transparent;
&:hover, // &:hover,
&:focus, // &:focus,
&:active, // &:active,
&.active { // &.active {
@include color-schema($bg-color, 5%, 2.5% !important); // @include color-schema($bg-color, 5%, 2.5% !important);
} // }
} // }
} // }
} }
@mixin text-wariant($bg-color, $name) { @mixin text-wariant($bg-color, $name) {

25
scss/_variables.scss
View File

@ -477,22 +477,10 @@ $Table-onHover-boxShadow: $boxShadow !default;
$Table-onChecked-bg: #d9f3fb !default; $Table-onChecked-bg: #d9f3fb !default;
$Table-onChecked-borderColor: darken($Table-onChecked-bg, 10%) !default; $Table-onChecked-borderColor: darken($Table-onChecked-bg, 10%) !default;
$Table-onChecked-color: darken($Table-onChecked-bg, 40%) !default; $Table-onChecked-color: darken($Table-onChecked-bg, 40%) !default;
$Table-onChecked-onHover-bg: darken($Table-onChecked-bg, 5%) !default;
$Table-onChecked-onHover-borderColor: darken(
$Table-onChecked-borderColor,
5%
) !default;
$Table-onChecked-onHover-color: darken($Table-onChecked-color, 5%) !default;
$Table-onModified-bg: #e8f0fe !default; $Table-onModified-bg: #e8f0fe !default;
$Table-onModified-color: #4285f4 !default; $Table-onModified-color: #4285f4 !default;
$Table-onModified-borderColor: darken($Table-onModified-bg, 5%) !default; $Table-onModified-borderColor: darken($Table-onModified-bg, 5%) !default;
$Table-onModified-onHover-bg: darken($Table-onModified-bg, 2.5%) !default;
$Table-onModified-onHover-borderColor: darken(
$Table-onModified-onHover-bg,
5%
) !default;
$Table-onModified-onHover-color: darken($Table-onModified-color, 5%) !default;
$Table-onDragging-opacity: 0.1 !default; $Table-onDragging-opacity: 0.1 !default;
$TableCell-searchBtn-width: px2rem(16px) !default; $TableCell-searchBtn-width: px2rem(16px) !default;
@ -573,19 +561,18 @@ $ListItem-onModified-borderColor: darken($ListItem-onModified-bg, 10%) !default;
$ListItem-onDragging-opacity: 0.1 !default; $ListItem-onDragging-opacity: 0.1 !default;
// QuickEdit // QuickEdit
$QuickEdit-iconColor: $icon-color !default; $QuickEdit-iconColor: inherit !default;
$QuickEdit-onHover-iconColor: $icon-onHover-color !default; $QuickEdit-onHover-iconColor: inherit !default;
$QuickEdit-onFocus-borderColor: $info !default; $QuickEdit-onFocus-borderColor: $info !default;
$QuickEdit-onFocus-borderWidth: $borderWidth !default; $QuickEdit-onFocus-borderWidth: $borderWidth !default;
// Copyable // Copyable
$Copyable-iconColor: $icon-color !default; $Copyable-iconColor: inherit !default;
$Copyable-onHover-iconColor: $icon-onHover-color !default; $Copyable-onHover-iconColor: inherit !default;
// PopOverAble // PopOverAble
$PopOverAble-iconColor: inherit !default;
$PopOverAble-iconColor: $icon-color !default; $PopOverAble-onHover-iconColor: inherit !default;
$PopOverAble-onHover-iconColor: $icon-onHover-color !default;
// PopOver // PopOver
$PopOver-bg: white !default; $PopOver-bg: white !default;

2
scss/components/_popoverable.scss
View File

@ -4,9 +4,11 @@
visibility: hidden; visibility: hidden;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
opacity: 0.6;
&:hover { &:hover {
color: $PopOverAble-onHover-iconColor; color: $PopOverAble-onHover-iconColor;
opacity: 1;
} }
} }

2
scss/components/_quick-edit.scss
View File

@ -4,9 +4,11 @@
visibility: hidden; visibility: hidden;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
opacity: 0.6;
&:hover { &:hover {
color: $QuickEdit-onHover-iconColor; color: $QuickEdit-onHover-iconColor;
opacity: 1;
} }
} }

58
scss/components/_table.scss
View File

@ -264,17 +264,6 @@
& + tr { & + tr {
border-color: $Table-onChecked-borderColor; border-color: $Table-onChecked-borderColor;
} }
&:hover,
&.is-hovered {
background-color: $Table-onChecked-onHover-bg;
border-color: $Table-onChecked-onHover-borderColor;
color: $Table-onChecked-onHover-color;
& + tr {
border-color: $Table-onChecked-onHover-borderColor;
}
}
} }
&.is-moved, &.is-moved,
@ -286,17 +275,46 @@
& + tr { & + tr {
border-color: $Table-onModified-borderColor; border-color: $Table-onModified-borderColor;
} }
}
&:hover, &.bg-light {
&.is-hovered { @include color-variant($light, 2%, 3%, 3%, 5%);
background-color: $Table-onModified-onHover-bg; color: $text-color;
border-color: $Table-onModified-onHover-borderColor; }
color: $Table-onModified-onHover-color;
& + tr { &.bg-dark {
border-color: $Table-onModified-onHover-borderColor; @include color-variant($dark, 5%, 10%, 5%, 10%);
} @include font-variant($dark);
} }
&.bg-black {
@include color-variant($black, 5%, 10%, 5%, 10%);
@include font-variant($black);
}
&.bg-primary {
@include color-variant($primary, 5%, 10%, 5%, 10%);
@include font-variant($primary);
}
&.bg-success {
@include color-variant($success, 5%, 10%, 5%, 10%);
@include font-variant($success);
}
&.bg-info {
@include color-variant($info, 5%, 10%, 5%, 10%);
@include font-variant($info);
}
&.bg-warning {
@include color-variant($warning, 5%, 10%, 5%, 10%);
@include font-variant($warning);
}
&.bg-danger {
@include color-variant($danger, 5%, 10%, 5%, 10%);
@include font-variant($danger);
} }
&.is-dragging { &.is-dragging {

29
src/renderers/Table.tsx
View File

@ -1255,6 +1255,7 @@ export default class Table extends React.Component<TableProps, object> {
) { ) {
const { const {
rowClassName, rowClassName,
rowClassNameExpr,
placeholder, placeholder,
store, store,
onAction, onAction,
@ -1310,7 +1311,11 @@ export default class Table extends React.Component<TableProps, object> {
key={item.id} key={item.id}
itemIndex={rowIndex} itemIndex={rowIndex}
item={item} item={item}
itemClassName={rowClassName} itemClassName={cx(
rowClassNameExpr
? filter(rowClassNameExpr, item.data)
: rowClassName
)}
columns={columns} columns={columns}
renderCell={this.renderCell} renderCell={this.renderCell}
regionPrefix="fixed/" regionPrefix="fixed/"
@ -1582,6 +1587,7 @@ export default class Table extends React.Component<TableProps, object> {
const { const {
store, store,
rowClassName, rowClassName,
rowClassNameExpr,
onAction, onAction,
buildItemProps, buildItemProps,
checkOnItemClick, checkOnItemClick,
@ -1600,11 +1606,16 @@ export default class Table extends React.Component<TableProps, object> {
key={item.id} key={item.id}
itemIndex={rowIndex} itemIndex={rowIndex}
item={item} item={item}
itemClassName={cx(rowClassName, { itemClassName={cx(
'is-last': item.depth > 1 && rowIndex === rows.length - 1, rowClassNameExpr
'is-expanded': item.expanded, ? filter(rowClassNameExpr, item.data)
'is-expandable': item.expandable : rowClassName,
})} {
'is-last': item.depth > 1 && rowIndex === rows.length - 1,
'is-expanded': item.expanded,
'is-expandable': item.expandable
}
)}
columns={store.filteredColumns} columns={store.filteredColumns}
renderCell={this.renderCell} renderCell={this.renderCell}
onAction={onAction} onAction={onAction}
@ -1625,7 +1636,11 @@ export default class Table extends React.Component<TableProps, object> {
key={`foot-${item.id}`} key={`foot-${item.id}`}
itemIndex={rowIndex} itemIndex={rowIndex}
item={item} item={item}
itemClassName={rowClassName} itemClassName={cx(
rowClassNameExpr
? filter(rowClassNameExpr, item.data)
: rowClassName
)}
columns={store.footableColumns} columns={store.footableColumns}
renderCell={this.renderCell} renderCell={this.renderCell}
onAction={onAction} onAction={onAction}

6
src/utils/tpl-builtin.ts
View File

@ -443,12 +443,12 @@ export const tokenize = (
); );
}; };
function resolveMapping(value: any, data: PlainObject) { function resolveMapping(value: any, data: PlainObject, defaultFilter = '| raw') {
return typeof value === 'string' && return typeof value === 'string' &&
/^\$(?:([a-z0-9_.]+)|{[^}{]+})$/.test(value) /^\$(?:([a-z0-9_.]+)|{[^}{]+})$/.test(value)
? resolveVariableAndFilter(value, data, '| raw') ? resolveVariableAndFilter(value, data, defaultFilter)
: typeof value === 'string' && ~value.indexOf('$') : typeof value === 'string' && ~value.indexOf('$')
? tokenize(value, data, '| raw') ? tokenize(value, data, defaultFilter)
: value; : value;
} }