From a193938bbf6c934fcf762a54493d755d23f44947 Mon Sep 17 00:00:00 2001
From: RUNZE LU <36724300+lurunze1226@users.noreply.github.com>
Date: Fri, 27 May 2022 18:30:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20select=E7=BB=84=E4=BB=B6table=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E6=A8=A1=E5=BC=8F=E4=B8=8B=E6=97=A0=E6=B3=95=E7=82=B9?=
 =?UTF-8?q?=E9=80=89=E9=97=AE=E9=A2=98=20(#4477)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 __tests__/event-action/drawer.test.tsx        |  2 +-
 .../Form/__snapshots__/select.test.tsx.snap   | 49 +++++++++++---
 scss/components/form/_selection.scss          | 15 +++--
 scss/themes/cxd.scss                          |  2 -
 src/components/ResultTableList.tsx            | 65 +++++++++----------
 src/components/TableSelection.tsx             | 23 ++++---
 6 files changed, 98 insertions(+), 58 deletions(-)

diff --git a/__tests__/event-action/drawer.test.tsx b/__tests__/event-action/drawer.test.tsx
index b6a24ac11..e747dc9cb 100644
--- a/__tests__/event-action/drawer.test.tsx
+++ b/__tests__/event-action/drawer.test.tsx
@@ -214,4 +214,4 @@ test('EventAction:drawer', async () => {
     expect(container.querySelector('[role="dialog"]')).not.toBeInTheDocument();
   });
   expect(container).toMatchSnapshot();
-});
+}, 7000);
diff --git a/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap
index 8ff75cd2e..4afe9b0fa 100644
--- a/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap
@@ -959,11 +959,40 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
               style="position: relative;"
               tabindex="-1"
             >
-              <span
-                class="cxd-ResultBox-placeholder"
+              <div
+                class="cxd-ResultBox-value"
               >
-                请选择
-              </span>
+                <span
+                  class="cxd-ResultBox-valueLabel"
+                >
+                  诸葛亮
+                </span>
+                <a
+                  data-index="0"
+                >
+                  <icon-mock
+                    classname="icon icon-close"
+                    icon="close"
+                  />
+                </a>
+              </div>
+              <div
+                class="cxd-ResultBox-value"
+              >
+                <span
+                  class="cxd-ResultBox-valueLabel"
+                >
+                  李白
+                </span>
+                <a
+                  data-index="1"
+                >
+                  <icon-mock
+                    classname="icon icon-close"
+                    icon="close"
+                  />
+                </a>
+              </div>
               <span
                 class="cxd-TransferDropDown-icon"
               >
@@ -1038,7 +1067,7 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
                             class="cxd-Table-checkCell"
                           >
                             <label
-                              class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--full cxd-Checkbox--sm"
+                              class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--sm"
                             >
                               <input
                                 type="checkbox"
@@ -1059,7 +1088,7 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
                       </thead>
                       <tbody>
                         <tr
-                          class=""
+                          class="is-active"
                         >
                           <td
                             class="cxd-Table-checkCell"
@@ -1146,7 +1175,7 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
                           </td>
                         </tr>
                         <tr
-                          class=""
+                          class="is-active"
                         >
                           <td
                             class="cxd-Table-checkCell"
@@ -1340,7 +1369,11 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
 </div>
 `;
 
-exports[`Renderer:select table with labelField & valueField 2`] = `Object {}`;
+exports[`Renderer:select table with labelField & valueField 2`] = `
+Object {
+  "a": "zhugeliang,libai",
+}
+`;
 
 exports[`Renderer:select tree 1`] = `
 <div>
diff --git a/scss/components/form/_selection.scss b/scss/components/form/_selection.scss
index 2c59639bd..158aac2de 100644
--- a/scss/components/form/_selection.scss
+++ b/scss/components/form/_selection.scss
@@ -46,7 +46,6 @@
   user-select: none;
   padding: var(--gap-xs) 0;
 
-
   &-group > &-itemLabel {
     padding: var(--gap-xs) var(--gap-base);
     color: var(--FileControl-icon-color);
@@ -78,10 +77,10 @@
 
     &:hover {
       background: var(--Tree-item-onHover-bg);
-      
-        i {
-          border: 1px solid var(--menu-active-color);
-        }
+
+      i {
+        border: 1px solid var(--menu-active-color);
+      }
     }
 
     &.is-disabled {
@@ -117,6 +116,10 @@
     border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
   }
 
+  .#{$ns}Table-table > tbody > tr {
+    cursor: pointer;
+  }
+
   .#{$ns}Table-table > thead > tr > th,
   .#{$ns}Table-table > tbody > tr > td {
     font-size: var(--fontSizeSm);
@@ -347,4 +350,4 @@
     float: right;
     cursor: pointer;
   }
-}
\ No newline at end of file
+}
diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss
index d9974ad44..74673649a 100644
--- a/scss/themes/cxd.scss
+++ b/scss/themes/cxd.scss
@@ -124,8 +124,6 @@
   }
 }
 
-
-
 .#{$ns}Toast {
   .#{$ns}Toast-icon {
     margin-right: #{px2rem(8px)};
diff --git a/src/components/ResultTableList.tsx b/src/components/ResultTableList.tsx
index 23325b4d3..823adb65e 100644
--- a/src/components/ResultTableList.tsx
+++ b/src/components/ResultTableList.tsx
@@ -43,7 +43,10 @@ export interface ResultTableSelectionState {
   searchTableOptions: Options;
 }
 
-export class BaseResultTableSelection extends BaseSelection<ResultTableSelectionProps, ResultTableSelectionState> {
+export class BaseResultTableSelection extends BaseSelection<
+  ResultTableSelectionProps,
+  ResultTableSelectionState
+> {
   static defaultProps = {
     ...BaseSelection.defaultProps,
     cellRender: (
@@ -55,25 +58,21 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
       option: Option,
       colIndex: number,
       rowIndex: number
-    ) => <span>{resolveVariable(column.name, option)}</span>,
+    ) => <span>{resolveVariable(column.name, option)}</span>
   };
 
   state: ResultTableSelectionState = {
     tableOptions: [],
     searching: false,
     searchTableOptions: []
-  }
+  };
 
   static getDerivedStateFromProps(props: ResultTableSelectionProps) {
-    const {
-      options,
-      value,
-      option2value,
-    } = props;
+    const {options, value, option2value} = props;
     const valueArray = BaseSelection.value2array(value, options, option2value);
     return {
       tableOptions: valueArray
-    }
+    };
   }
 
   @autobind
@@ -117,15 +116,16 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
     }
 
     const {value, onSearch} = this.props;
-    const searchOptions = ((value || []) as Options)
-      .filter(item => onSearch?.(inputValue, item));
+    const searchOptions = ((value || []) as Options).filter(item =>
+      onSearch?.(inputValue, item)
+    );
 
     this.setState({
       searching: true,
       searchTableOptions: searchOptions
     });
   }
-  
+
   @autobind
   clearSearch() {
     this.setState({
@@ -152,9 +152,7 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
 
     return (
       <div className={cx('ResultTableList', className)}>
-        {
-          Array.isArray(value) && value.length ?
-          (
+        {Array.isArray(value) && value.length ? (
           <TableSelection
             columns={columns}
             options={!searching ? tableOptions : searchTableOptions}
@@ -163,6 +161,7 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
             option2value={option2value}
             onChange={onChange}
             multiple={false}
+            resultMode={true}
             cellRender={(
               column: {
                 name: string;
@@ -176,27 +175,28 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
               const raw = cellRender(column, option, colIndex, rowIndex);
               if (colIndex === columns.length - 1) {
                 return (
-                <>
-                  {raw}
-                  {
-                    <span
-                      className={cx('ResultTableList-close-btn')}
-                      onClick={(e: React.SyntheticEvent<HTMLElement>) => {
-                        e.stopPropagation();
-                        this.handleCloseItem(option);
-                      }}
-                    >
-                      <CloseIcon />
-                    </span>
-                  }
-                </>)
+                  <>
+                    {raw}
+                    {
+                      <span
+                        className={cx('ResultTableList-close-btn')}
+                        onClick={(e: React.SyntheticEvent<HTMLElement>) => {
+                          e.stopPropagation();
+                          this.handleCloseItem(option);
+                        }}
+                      >
+                        <CloseIcon />
+                      </span>
+                    }
+                  </>
+                );
               }
               return raw;
             }}
           />
-          )
-          : (<div className={cx('Selections-placeholder')}>{__(placeholder)}</div>)
-        }
+        ) : (
+          <div className={cx('Selections-placeholder')}>{__(placeholder)}</div>
+        )}
       </div>
     );
   }
@@ -211,7 +211,6 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
       placeholder = __('Transfer.searchKeyword')
     } = this.props;
 
-
     return (
       <div className={cx('Selections', className)}>
         {title ? <div className={cx('Selections-title')}>{title}</div> : null}
diff --git a/src/components/TableSelection.tsx b/src/components/TableSelection.tsx
index 1ee350841..bce5d38f3 100644
--- a/src/components/TableSelection.tsx
+++ b/src/components/TableSelection.tsx
@@ -5,9 +5,12 @@ import {uncontrollable} from 'uncontrollable';
 import Checkbox from './Checkbox';
 import {Option} from './Select';
 import {resolveVariable} from '../utils/tpl-builtin';
+import {noop} from '../utils/helper';
 import {localeable} from '../locale';
 
 export interface TableSelectionProps extends BaseSelectionProps {
+  /** 是否为结果渲染列表 */
+  resultMode?: boolean;
   columns: Array<{
     name: string;
     label: string;
@@ -108,7 +111,8 @@ export class TableSelection extends BaseSelection<TableSelectionProps> {
       multiple,
       option2value,
       translate: __,
-      itemClassName
+      itemClassName,
+      resultMode
     } = this.props;
     const columns = this.getColumns();
     let valueArray = BaseSelection.value2array(value, options, option2value);
@@ -122,6 +126,12 @@ export class TableSelection extends BaseSelection<TableSelectionProps> {
             return (
               <tr
                 key={rowIndex}
+                /** 被ResultTableList引用，如果设置click事件，会导致错误删除结果列表的内容，先加一个开关判断 */
+                onClick={
+                  resultMode
+                    ? noop
+                    : e => e.defaultPrevented || this.toggleOption(option)
+                }
                 className={cx(
                   itemClassName,
                   option.className,
@@ -130,18 +140,15 @@ export class TableSelection extends BaseSelection<TableSelectionProps> {
                 )}
               >
                 {multiple ? (
-                  <td className={cx('Table-checkCell')}
+                  <td
+                    className={cx('Table-checkCell')}
                     key="checkbox"
                     onClick={e => {
                       e.stopPropagation();
                       this.toggleOption(option);
                     }}
                   >
-                    <Checkbox
-                      size="sm"
-                      checked={checked}
-                      disabled={disabled}
-                    />
+                    <Checkbox size="sm" checked={checked} disabled={disabled} />
                   </td>
                 ) : null}
                 {columns.map((column, colIndex) => (
@@ -183,4 +190,4 @@ export default themeable(
       value: 'onChange'
     })
   )
-);
\ No newline at end of file
+);