test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:58:07 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

新增 table 的行高亮功能

Browse Source
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'],
// rowClassNameExpr: '<%= data.id == 1 ? "bg-success" : "" %>',
columns: [
{
name: 'id',

29
scss/_mixins.scss
View File

@ -94,7 +94,8 @@
$hover-color: #fff;
color: $font-color;
& a {
& a,
& .#{$ns}Button--link {
color: $link-color;
&:hover {
@ -118,20 +119,20 @@
color: lighten($font-color, 25%) !important;
}
&.auto,
& .auto {
& .list-group-item {
border-color: darken($bg-color, 5%) !important;
background-color: transparent;
// &.auto,
// & .auto {
// & .list-group-item {
// border-color: darken($bg-color, 5%) !important;
// background-color: transparent;
&:hover,
&:focus,
&:active,
&.active {
@include color-schema($bg-color, 5%, 2.5% !important);
}
}
}
// &:hover,
// &:focus,
// &:active,
// &.active {
// @include color-schema($bg-color, 5%, 2.5% !important);
// }
// }
// }
}
@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-borderColor: darken($Table-onChecked-bg, 10%) !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-color: #4285f4 !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;
$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;
// QuickEdit
$QuickEdit-iconColor: $icon-color !default;
$QuickEdit-onHover-iconColor: $icon-onHover-color !default;
$QuickEdit-iconColor: inherit !default;
$QuickEdit-onHover-iconColor: inherit !default;
$QuickEdit-onFocus-borderColor: $info !default;
$QuickEdit-onFocus-borderWidth: $borderWidth !default;
// Copyable
$Copyable-iconColor: $icon-color !default;
$Copyable-onHover-iconColor: $icon-onHover-color !default;
$Copyable-iconColor: inherit !default;
$Copyable-onHover-iconColor: inherit !default;
// PopOverAble
$PopOverAble-iconColor: $icon-color !default;
$PopOverAble-onHover-iconColor: $icon-onHover-color !default;
$PopOverAble-iconColor: inherit !default;
$PopOverAble-onHover-iconColor: inherit !default;
// PopOver
$PopOver-bg: white !default;

2
scss/components/_popoverable.scss
View File

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

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

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

58
scss/components/_table.scss
View File

@ -264,17 +264,6 @@
& + tr {
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,
@ -286,17 +275,46 @@
& + tr {
border-color: $Table-onModified-borderColor;
}
}
&:hover,
&.is-hovered {
background-color: $Table-onModified-onHover-bg;
border-color: $Table-onModified-onHover-borderColor;
color: $Table-onModified-onHover-color;
&.bg-light {
@include color-variant($light, 2%, 3%, 3%, 5%);
color: $text-color;
}
& + tr {
border-color: $Table-onModified-onHover-borderColor;
}
}
&.bg-dark {
@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 {

29
src/renderers/Table.tsx
View File

@ -1255,6 +1255,7 @@ export default class Table extends React.Component<TableProps, object> {
) {
const {
rowClassName,
rowClassNameExpr,
placeholder,
store,
onAction,
@ -1310,7 +1311,11 @@ export default class Table extends React.Component<TableProps, object> {
key={item.id}
itemIndex={rowIndex}
item={item}
itemClassName={rowClassName}
itemClassName={cx(
rowClassNameExpr
? filter(rowClassNameExpr, item.data)
: rowClassName
)}
columns={columns}
renderCell={this.renderCell}
regionPrefix="fixed/"
@ -1582,6 +1587,7 @@ export default class Table extends React.Component<TableProps, object> {
const {
store,
rowClassName,
rowClassNameExpr,
onAction,
buildItemProps,
checkOnItemClick,
@ -1600,11 +1606,16 @@ export default class Table extends React.Component<TableProps, object> {
key={item.id}
itemIndex={rowIndex}
item={item}
itemClassName={cx(rowClassName, {
'is-last': item.depth > 1 && rowIndex === rows.length - 1,
'is-expanded': item.expanded,
'is-expandable': item.expandable
})}
itemClassName={cx(
rowClassNameExpr
? filter(rowClassNameExpr, item.data)
: rowClassName,
{
'is-last': item.depth > 1 && rowIndex === rows.length - 1,
'is-expanded': item.expanded,
'is-expandable': item.expandable
}
)}
columns={store.filteredColumns}
renderCell={this.renderCell}
onAction={onAction}
@ -1625,7 +1636,11 @@ export default class Table extends React.Component<TableProps, object> {
key={`foot-${item.id}`}
itemIndex={rowIndex}
item={item}
itemClassName={rowClassName}
itemClassName={cx(
rowClassNameExpr
? filter(rowClassNameExpr, item.data)
: rowClassName
)}
columns={store.footableColumns}
renderCell={this.renderCell}
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' &&
/^\$(?:([a-z0-9_.]+)|{[^}{]+})$/.test(value)
? resolveVariableAndFilter(value, data, '| raw')
? resolveVariableAndFilter(value, data, defaultFilter)
: typeof value === 'string' && ~value.indexOf('$')
? tokenize(value, data, '| raw')
? tokenize(value, data, defaultFilter)
: value;
}