From b30e7ae9a35c20edb0864669b50b43e698830081 Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Wed, 19 Apr 2023 16:00:27 +0800
Subject: [PATCH] feat: support clear all selected data for select-table

Support clear all selected data for the select-table and tab-select-table component.

Change-Id: If639e04f5c3327eda1bdce3652f013f628e0c1b5
---
 ...pport-Clear-Selected-80e66080d37c96e3.yaml |  5 +++
 src/components/FormItem/SelectTable/index.jsx | 35 +++++++++++++++++--
 .../FormItem/TabSelectTable/index.jsx         | 23 ++++++++++--
 src/locales/en.json                           |  1 +
 src/locales/ko-kr.json                        |  1 +
 src/locales/zh-hans.json                      |  1 +
 6 files changed, 62 insertions(+), 4 deletions(-)
 create mode 100644 releasenotes/notes/Support-Clear-Selected-80e66080d37c96e3.yaml

diff --git a/releasenotes/notes/Support-Clear-Selected-80e66080d37c96e3.yaml b/releasenotes/notes/Support-Clear-Selected-80e66080d37c96e3.yaml
new file mode 100644
index 00000000..91e17791
--- /dev/null
+++ b/releasenotes/notes/Support-Clear-Selected-80e66080d37c96e3.yaml
@@ -0,0 +1,5 @@
+---
+features:
+  - |
+    Add clear selected button to clear all the selected data for the
+    select-table and tab-select-table component.
diff --git a/src/components/FormItem/SelectTable/index.jsx b/src/components/FormItem/SelectTable/index.jsx
index e3b8dd5b..0e7cba12 100644
--- a/src/components/FormItem/SelectTable/index.jsx
+++ b/src/components/FormItem/SelectTable/index.jsx
@@ -13,7 +13,8 @@
 // limitations under the License.
 
 import React from 'react';
-import { Radio, Tag } from 'antd';
+import { Radio, Tag, Button, Tooltip } from 'antd';
+import { ClearOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import MagicInput from 'components/MagicInput';
@@ -49,6 +50,23 @@ const getInitRows = (value, data, backendPageStore) => {
   return rows;
 };
 
+export const renderClearButton = (self, rows, props = {}) => {
+  const { showSelected = true } = props;
+  if (!showSelected) {
+    return null;
+  }
+  if (!rows || !rows.length) {
+    return null;
+  }
+  return (
+    <Tooltip title={t('Clear selected')}>
+      <Button size="small" onClick={self.clearSelected}>
+        <ClearOutlined />
+      </Button>
+    </Tooltip>
+  );
+};
+
 @observer
 export default class SelectTable extends React.Component {
   static propTypes = {
@@ -581,6 +599,13 @@ export default class SelectTable extends React.Component {
     });
   };
 
+  clearSelected = () => {
+    this.setState({
+      selectedRowKeys: [],
+      selectedRows: [],
+    });
+  };
+
   initTabChange() {
     const { defaultTabValue, onTabChange, value } = this.props;
     if (defaultTabValue !== undefined && onTabChange !== undefined) {
@@ -795,6 +820,10 @@ export default class SelectTable extends React.Component {
     </Tag>
   );
 
+  renderClearButton = (rows) => {
+    return renderClearButton(this, rows, this.props);
+  };
+
   renderSelected() {
     const { showSelected = true, selectedLabel, maxSelectedCount } = this.props;
     if (maxSelectedCount === -1) {
@@ -806,9 +835,11 @@ export default class SelectTable extends React.Component {
     }
     const rows = isEmpty(selectedRows) ? this.getSelectedRows() : selectedRows;
     const items = rows.map((it) => this.renderTag(it));
+    const clearButton = this.renderClearButton(rows);
     return (
       <div>
-        {t('Selected')} {selectedLabel}:&nbsp;&nbsp;{items}
+        {t('Selected')} {selectedLabel}:&nbsp;&nbsp;{clearButton}&nbsp;&nbsp;
+        {items}
       </div>
     );
   }
diff --git a/src/components/FormItem/TabSelectTable/index.jsx b/src/components/FormItem/TabSelectTable/index.jsx
index eaf038e8..a36b1182 100644
--- a/src/components/FormItem/TabSelectTable/index.jsx
+++ b/src/components/FormItem/TabSelectTable/index.jsx
@@ -13,7 +13,9 @@
 // limitations under the License.
 
 import React, { Component } from 'react';
-import SelectTable from 'components/FormItem/SelectTable';
+import SelectTable, {
+  renderClearButton,
+} from 'components/FormItem/SelectTable';
 import { Tabs, Tag } from 'antd';
 import { isEmpty } from 'lodash';
 
@@ -81,6 +83,18 @@ export default class TabSelectTable extends Component {
     });
   };
 
+  clearSelected = () => {
+    this.setState(
+      {
+        selectedRowKeys: [],
+        selectedRows: [],
+      },
+      () => {
+        this.onChangeValue();
+      }
+    );
+  };
+
   onTagClose = (itemKey) => {
     const { selectedRowKeys, selectedRows } = this.state;
     const newKeys = selectedRowKeys.filter((it) => it !== itemKey);
@@ -162,12 +176,17 @@ export default class TabSelectTable extends Component {
     </Tag>
   );
 
+  renderClearButton = (rows) => {
+    return renderClearButton(this, rows);
+  };
+
   renderSelected() {
     const { selectedRows } = this.state;
     const items = selectedRows.map((it) => this.renderTag(it));
+    const clearButton = this.renderClearButton(selectedRows);
     return (
       <div>
-        {t('Selected')} :&nbsp;&nbsp;{items}
+        {t('Selected')} :&nbsp;&nbsp;{clearButton}&nbsp;&nbsp;{items}
       </div>
     );
   }
diff --git a/src/locales/en.json b/src/locales/en.json
index 143be4ad..188d543e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -348,6 +348,7 @@
   "Clean Wait": "Clean Wait",
   "Cleaning": "Cleaning",
   "Clear Gateway": "Clear Gateway",
+  "Clear selected": "Clear selected",
   "Click To View": "Click To View",
   "Click here for filters.": "Click here for filters.",
   "Click to Upload": "Click to Upload",
diff --git a/src/locales/ko-kr.json b/src/locales/ko-kr.json
index 15ebfc39..5f3b4f3c 100644
--- a/src/locales/ko-kr.json
+++ b/src/locales/ko-kr.json
@@ -347,6 +347,7 @@
   "Clean Wait": "",
   "Cleaning": "",
   "Clear Gateway": "",
+  "Clear selected": "선택 비우기",
   "Click To View": "",
   "Click here for filters.": "",
   "Click to Upload": "",
diff --git a/src/locales/zh-hans.json b/src/locales/zh-hans.json
index 43984a28..5d57b3fb 100644
--- a/src/locales/zh-hans.json
+++ b/src/locales/zh-hans.json
@@ -347,6 +347,7 @@
   "Clean Wait": "等待清除",
   "Cleaning": "清除中",
   "Clear Gateway": "清除网关",
+  "Clear selected": "清空选中",
   "Click To View": "点击查看",
   "Click here for filters.": "筛选",
   "Click to Upload": "点击上传文件",