Merge pull request #806 from hectorqin/master

新增表格表头排序,搜索,过滤等状态激活显示以及重置功能

scss/_variables.scss

@@ -507,6 +507,10 @@ $TableCell-sortBtn-width: px2rem(8px) !default;
 $TableCell-sortBtn--default-opacity: 0 !default;
 $TableCell-sortBtn--default-onActive-opacity: 1 !default;
 
+$TableCell-searchBtn--onActive-color: $primary !default;
+$TableCell-filterBtn--onActive-color: $primary !default;
+$TableCell-sortBtn--onActive-color: $primary !default;
+
 // Cards
 $Cards-fixedTop-boxShadow: $boxShadow !default;
 $Cards-toolbar-paddingY: 0 !default;

scss/components/_table.scss

@@ -549,10 +549,16 @@
       &.is-active {
         color: $text--muted-color;
         &:hover {
-          color: $icon-onHover-color;
+          color: $text-color;
         }
       }
     }
+    &--up,
+    &--down {
+      &.is-active {
+        color: $TableCell-sortBtn--onActive-color;
+      }
+    }
   }
 
   &Cell-searchBtn {
@@ -572,6 +578,9 @@
     &:hover {
       color: $text-color;
     }
+    &.is-active {
+      color: $TableCell-searchBtn--onActive-color;
+    }
   }
 
   &Cell-searchPopOver {
@@ -602,6 +611,10 @@
       color: $text-color;
     }
 
+    &.is-active {
+      color: $TableCell-filterBtn--onActive-color;
+    }
+
     .#{$ns}Remark {
       display: inline;
     }

src/locale/en.ts

@@ -205,5 +205,6 @@ register('en', {
   '保存并下一步': 'Save & Next',
   '完成': 'Finish',
   '点击选择图片或者将图片拖入该区域':
-    'Click to select the picture or drag the picture into the area'
+    'Click to select the picture or drag the picture into the area',
+  '重置': 'Reset'
 });

src/renderers/Table.tsx

@@ -1108,10 +1108,19 @@ export default class Table extends React.Component<TableProps, object> {
           className={cx('TableCell-sortBtn')}
           onClick={() => {
             if (column.name === store.orderBy) {
+              if (store.orderDir === 'desc') {
+                // 降序之后取消排序
+                store.setOrderByInfo(
+                  '',
+                  'asc'
+                );
+              } else {
+                // 升序之后降序
                 store.setOrderByInfo(
                   column.name,
-                store.orderDir === 'desc' ? 'asc' : 'desc'
+                  'desc'
                 );
+              }
             } else {
               store.setOrderByInfo(column.name as string, 'asc');
             }
@@ -2175,6 +2184,7 @@ export class HeadCellSearchDropDown extends React.Component<
     isOpened: false
   };
 
+  formItems: Array<string> = [];
   constructor(props: HeadCellSearchProps) {
     super(props);
 
@@ -2249,11 +2259,26 @@ export class HeadCellSearchDropDown extends React.Component<
     }
 
     if (schema) {
+      const formItems = [];
+      if (schema.controls) {
+        for (let item of schema.controls) {
+          if (item.name) {
+            formItems.push(item.name);
+          }
+        }
+      }
+      this.formItems = formItems;
       schema = {
         ...schema,
         type: 'form',
         wrapperComponent: 'div',
         actions: [
+          {
+            type: 'button',
+            label: __('重置'),
+            actionType: 'reset'
+          },
+
           {
             type: 'button',
             label: __('取消'),
@@ -2296,9 +2321,32 @@ export class HeadCellSearchDropDown extends React.Component<
       return;
     }
 
+    if (action.actionType === 'reset') {
+      this.close();
+      this.handleReset();
+      return;
+    }
+
     onAction && onAction(e, action, ctx);
   }
 
+  handleReset() {
+    const {onQuery, data, name} = this.props;
+    const values = {...data};
+    for (let item of this.formItems) {
+      if (item !== 'orderBy' && item !== 'orderDir') {
+        if (values[item]) {
+          values[item] = undefined;
+        }
+      }
+    }
+    if (values.orderBy && values.orderBy === name) {
+      values.orderBy = '';
+      values.orderDir = 'asc';
+    }
+    onQuery(values);
+  }
+
   handleSubmit(values: any) {
     const {onQuery, name} = this.props;
 
@@ -2314,6 +2362,21 @@ export class HeadCellSearchDropDown extends React.Component<
     onQuery(values);
   }
 
+  isActive() {
+    const {data, name} = this.props;
+    if (data.orderBy === name) {
+      return true;
+    }
+    for (let item of this.formItems) {
+      if (item !== 'orderBy' && item !== 'orderDir') {
+        if (data[`${item}`]) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   render() {
     const {
       render,
@@ -2326,8 +2389,11 @@ export class HeadCellSearchDropDown extends React.Component<
       classPrefix: ns
     } = this.props;
 
+    const formSchema = this.buildSchema();
+    const isActive = this.isActive();
+
     return (
-      <span className={cx(`${ns}TableCell-searchBtn`)}>
+      <span className={cx(`${ns}TableCell-searchBtn`, isActive ? 'is-active' : '')}>
         <span onClick={this.open}>
           <Icon icon="search" className="icon" />
         </span>
@@ -2350,7 +2416,7 @@ export class HeadCellSearchDropDown extends React.Component<
               overlay
             >
               {
-                render('quick-search-form', this.buildSchema(), {
+                render('quick-search-form', formSchema, {
                   data: {
                     ...data,
                     orderBy: orderBy,
@@ -2518,17 +2584,28 @@ export class HeadCellFilterDropDown extends React.Component<
     });
   }
 
+  handleReset() {
+    const {name, onQuery} = this.props;
+    onQuery({
+      [name]: undefined
+    })
+    this.close();
+  }
+
   render() {
     const {isOpened, filterOptions} = this.state;
     const {
+      data,
+      name,
       filterable,
       popOverContainer,
       classPrefix: ns,
-      classnames: cx
+      classnames: cx,
+      translate: __
     } = this.props;
 
     return (
-      <span className={cx(`${ns}TableCell-filterBtn`)}>
+      <span className={cx(`${ns}TableCell-filterBtn`, data[name] ? 'is-active' : '')}>
         <span onClick={this.open}>
           <Icon icon="column-filter" className="icon" />
         </span>
@@ -2575,6 +2652,7 @@ export class HeadCellFilterDropDown extends React.Component<
                           </Checkbox>
                         </li>
                       ))}
+                  <li key="DropDown-menu-reset" className={cx('DropDown-divider')} onClick={this.handleReset.bind(this)}>{__('重置')}</li>
                 </ul>
               ) : null}
             </PopOver>

src/types.ts

@@ -100,7 +100,8 @@ export interface Action extends Button {
     | 'cancel'
     | 'close'
     | 'next'
-    | 'prev';
+    | 'prev'
+    | 'reset';
   api?: Api;
   asyncApi?: Api;
   payload?: any;