新增 table 的行高亮功能

examples/components/CRUD/Table.jsx

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

scss/_mixins.scss

@@ -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,
-  & .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) {

scss/_variables.scss

@@ -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-iconColor: inherit !default;
-$QuickEdit-onHover-iconColor: $icon-onHover-color !default;
+$QuickEdit-onHover-iconColor: inherit !default;
 $QuickEdit-onFocus-borderColor: $info !default;
 $QuickEdit-onFocus-borderWidth: $borderWidth !default;
 
 // Copyable
-$Copyable-iconColor: $icon-color !default;
+$Copyable-iconColor: inherit !default;
-$Copyable-onHover-iconColor: $icon-onHover-color !default;
+$Copyable-onHover-iconColor: inherit !default;
 
 // PopOverAble
-
+$PopOverAble-iconColor: inherit !default;
-$PopOverAble-iconColor: $icon-color !default;
+$PopOverAble-onHover-iconColor: inherit !default;
-$PopOverAble-onHover-iconColor: $icon-onHover-color !default;
 
 // PopOver
 $PopOver-bg: white !default;

scss/components/_popoverable.scss

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

scss/components/_quick-edit.scss

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

scss/components/_table.scss

@@ -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;
-
-          & + tr {
-            border-color: $Table-onModified-onHover-borderColor;
       }
+
+      &.bg-light {
+        @include color-variant($light, 2%, 3%, 3%, 5%);
+        color: $text-color;
       }
+
+      &.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 {

src/renderers/Table.tsx

@@ -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, {
+          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}

src/utils/tpl-builtin.ts

@@ -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;
 }