From 8d59193949b19f39e39c5ba25fd2c644fe09276b Mon Sep 17 00:00:00 2001
From: liaoxuezhi <liaoxuezhi@baidu.com>
Date: Mon, 1 Feb 2021 19:42:08 +0800
Subject: [PATCH] =?UTF-8?q?TableCell=20=E7=9A=84=20filterable=20=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E4=BC=98=E5=8C=96=20(#1500)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 快速编辑默认就显示，否则别人不知道可以编辑

* TableCell  filterable 优化，简单配置为 true 时直接从结果集中提取
---
 scss/components/_quick-edit.scss              |  2 +-
 .../Table/HeadCellFilterDropdown.tsx          | 69 ++++++++++++-------
 src/renderers/Table/index.tsx                 |  7 +-
 3 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/scss/components/_quick-edit.scss b/scss/components/_quick-edit.scss
index 2aa103099..382cda44c 100644
--- a/scss/components/_quick-edit.scss
+++ b/scss/components/_quick-edit.scss
@@ -1,8 +1,8 @@
 .#{$ns}Field-quickEditBtn {
   color: var(--QuickEdit-iconColor);
   margin-left: var(--gap-xs);
-  visibility: hidden;
   display: inline-block;
+  vertical-align: text-top;
   cursor: pointer;
   opacity: 0.6;
 
diff --git a/src/renderers/Table/HeadCellFilterDropdown.tsx b/src/renderers/Table/HeadCellFilterDropdown.tsx
index dfa2d4694..5a4df6c03 100644
--- a/src/renderers/Table/HeadCellFilterDropdown.tsx
+++ b/src/renderers/Table/HeadCellFilterDropdown.tsx
@@ -9,6 +9,7 @@ import {findDOMNode} from 'react-dom';
 import Checkbox from '../../components/Checkbox';
 import xor from 'lodash/xor';
 import {normalizeOptions} from '../../components/Select';
+import {getVariable} from '../../utils/helper';
 
 export interface QuickFilterConfig {
   options: Array<any>;
@@ -48,42 +49,60 @@ export class HeadCellFilterDropDown extends React.Component<
 
     if (filterable.source) {
       this.fetchOptions();
-    } else if (filterable.options.length > 0) {
+    } else if (filterable.options?.length > 0) {
       this.setState({
         filterOptions: this.alterOptions(filterable.options)
       });
     }
   }
 
-  componentWillReceiveProps(nextProps: HeadCellFilterProps) {
-    const props = this.props;
-
-    if (
-      props.name !== nextProps.name ||
-      props.filterable !== nextProps.filterable ||
-      props.data !== nextProps.data
-    ) {
-      if (nextProps.filterable.source) {
-        this.sourceInvalid = isApiOutdated(
-          props.filterable.source,
-          nextProps.filterable.source,
-          props.data,
-          nextProps.data
-        );
-      } else if (nextProps.filterable.options) {
-        this.setState({
-          filterOptions: this.alterOptions(nextProps.filterable.options || [])
-        });
-      }
-    }
-  }
-
   componentDidUpdate(prevProps: HeadCellFilterProps, prevState: any) {
     const name = this.props.name;
 
+    const props = this.props;
+
+    if (
+      prevProps.name !== props.name ||
+      prevProps.filterable !== props.filterable ||
+      prevProps.data !== props.data
+    ) {
+      if (props.filterable.source) {
+        this.sourceInvalid = isApiOutdated(
+          prevProps.filterable.source,
+          props.filterable.source,
+          prevProps.data,
+          props.data
+        );
+      } else if (props.filterable.options) {
+        this.setState({
+          filterOptions: this.alterOptions(props.filterable.options || [])
+        });
+      } else if (
+        name &&
+        !this.state.filterOptions.length &&
+        Array.isArray(props.store?.data.itemsRaw)
+      ) {
+        const itemsRaw = props.store?.data.itemsRaw;
+        const values: Array<any> = [];
+        itemsRaw.forEach((item: any) => {
+          const value = getVariable(item, name);
+
+          if (!~values.indexOf(value)) {
+            values.push(value);
+          }
+        });
+
+        if (values.length) {
+          this.setState({
+            filterOptions: this.alterOptions(values)
+          });
+        }
+      }
+    }
+
     if (
       this.props.data[name] !== prevProps.data[name] &&
-      this.props.filterable.source &&
+      this.state.filterOptions.length &&
       prevState.filterOptions !== this.props.filterOptions
     ) {
       this.setState({
diff --git a/src/renderers/Table/index.tsx b/src/renderers/Table/index.tsx
index 508268641..9c3b31b6c 100644
--- a/src/renderers/Table/index.tsx
+++ b/src/renderers/Table/index.tsx
@@ -108,7 +108,12 @@ export type TableColumnObject = {
   /**
    * todo
    */
-  filterable?: any;
+  filterable?:
+    | boolean
+    | {
+        source?: string;
+        options?: Array<any>;
+      };
 
   /**
    * 结合表格的 footable 一起使用。