From 787f3f16a211a881946ff59f33ebcdaae6b5ca9c Mon Sep 17 00:00:00 2001
From: danranVm <danranvm@gmail.com>
Date: Thu, 22 Sep 2022 11:24:52 +0800
Subject: [PATCH] feat(comp:table): the selectable column supports custom cell
 (#1153)

---
 .eslintrc.js                                         |  2 +-
 packages/components/checkbox/src/Checkbox.tsx        |  2 ++
 packages/components/radio/src/Radio.tsx              |  2 ++
 packages/components/table/docs/Api.zh.md             |  1 +
 packages/components/table/src/main/body/BodyCell.tsx | 10 ++++++----
 packages/components/table/src/types.ts               | 10 ++++++++++
 packages/components/table/style/index.less           | 12 ++++++------
 7 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 0d7296644..68e5d34c3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -184,7 +184,7 @@ module.exports = {
   },
   ignorePatterns: [
     'dist',
-    'packages/site/components.ts',
+    'packages/site/components.d.ts',
     'packages/site/src/router.ts',
     'packages/site/src/sideNav.ts',
     'packages/site/src/components/global/themeConfig.ts',
diff --git a/packages/components/checkbox/src/Checkbox.tsx b/packages/components/checkbox/src/Checkbox.tsx
index 9d8772fe5..908c3e837 100644
--- a/packages/components/checkbox/src/Checkbox.tsx
+++ b/packages/components/checkbox/src/Checkbox.tsx
@@ -5,6 +5,8 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
+/* eslint-disable vue/no-ref-as-operand */
+
 import { type ComputedRef, computed, defineComponent, inject, normalizeClass, ref } from 'vue'
 
 import { isNil } from 'lodash-es'
diff --git a/packages/components/radio/src/Radio.tsx b/packages/components/radio/src/Radio.tsx
index f52e04896..e8feb31a3 100644
--- a/packages/components/radio/src/Radio.tsx
+++ b/packages/components/radio/src/Radio.tsx
@@ -5,6 +5,8 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
+/* eslint-disable vue/no-ref-as-operand */
+
 import { type ComputedRef, type Ref, computed, defineComponent, inject, normalizeClass, ref } from 'vue'
 
 import { isNil } from 'lodash-es'
diff --git a/packages/components/table/docs/Api.zh.md b/packages/components/table/docs/Api.zh.md
index 4f89715f9..796594906 100644
--- a/packages/components/table/docs/Api.zh.md
+++ b/packages/components/table/docs/Api.zh.md
@@ -108,6 +108,7 @@ export type TableColumn<T = any, V = any> =
 | `onSelectInvert` | 点击反选所有时触发 | `(selectedRowKeys: (string \| number)[]) => void` | - | - | 配置 `menus= ['invert']` 时生效 |
 | `onSelectNone` | 点击清空所有时触发 | `() => void` | - | - | 配置 `menus= ['none']` 时生效 |
 | `onSelectPageInvert` | 点击反选当页所有时触发 | `() => void` | - | - | 配置 `menus= ['pageInvert']` 时生效 |
+| `customCell` | 自定义单元格内容 | `string \| ((data: { checked: boolean;  disabled: boolean;  indeterminate?: boolean, onChange: () => void,  onClick: () => void }) => VNodeChild)` | - | - | 类型为 `string` 时，对应插槽名 |
 
 ##### TableColumnSortable
 
diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
index 0761d1218..d8a84b9ca 100644
--- a/packages/components/table/src/main/body/BodyCell.tsx
+++ b/packages/components/table/src/main/body/BodyCell.tsx
@@ -98,7 +98,7 @@ export default defineComponent({
       let title: string | undefined
 
       if (type === 'selectable') {
-        children = renderSelectableChildren(props, selectable, handleClick)
+        children = renderSelectableChildren(props, slots, selectable, handleClick)
       } else {
         const { ellipsis = tableProps.ellipsis } = column
         const text = dataValue.value
@@ -205,16 +205,18 @@ function renderExpandableChildren(
 
 function renderSelectableChildren(
   props: TableBodyCellProps,
+  slots: Slots,
   selectable: ComputedRef<TableColumnMergedSelectable | undefined>,
   onClick: (evt: Event) => void,
 ) {
   const { selected: checked, indeterminate, disabled, handleSelect: onChange } = props
-  const { multiple } = selectable.value!
+  const { multiple, customCell } = selectable.value!
+  const customRender = isString(customCell) ? slots[customCell] : customCell
   if (multiple) {
     const checkboxProps = { checked, disabled, indeterminate, onChange, onClick }
-    return <IxCheckbox {...checkboxProps}></IxCheckbox>
+    return customRender ? customRender(checkboxProps) : <IxCheckbox {...checkboxProps}></IxCheckbox>
   } else {
     const radioProps = { checked, disabled, onChange, onClick }
-    return <IxRadio {...radioProps}></IxRadio>
+    return customRender ? customRender(radioProps) : <IxRadio {...radioProps}></IxRadio>
   }
 }
diff --git a/packages/components/table/src/types.ts b/packages/components/table/src/types.ts
index c6075d971..f217678aa 100644
--- a/packages/components/table/src/types.ts
+++ b/packages/components/table/src/types.ts
@@ -155,6 +155,16 @@ export interface TableColumnSelectable<T = any, K = VKey> extends TableColumnCom
   onSelectInvert?: (selectedRowKeys: K[]) => void
   onSelectNone?: () => void
   onSelectPageInvert?: (selectedRowKeys: K[]) => void
+
+  customCell?:
+    | string
+    | ((data: {
+        checked: boolean
+        disabled: boolean
+        indeterminate?: boolean
+        onChange: () => void
+        onClick: () => void
+      }) => VNodeChild)
 }
 
 export interface TableCustomAdditional<T = any, K = VKey> {
diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less
index 0ce6ee956..4c1177d53 100644
--- a/packages/components/table/style/index.less
+++ b/packages/components/table/style/index.less
@@ -50,9 +50,6 @@
   }
 
   th {
-    position: relative;
-    text-align: start;
-    overflow-wrap: break-word;
     color: @table-head-color;
     background-color: @table-head-background-color;
     font-weight: @table-head-font-weight;
@@ -73,9 +70,6 @@
   }
 
   td {
-    position: relative;
-    text-align: start;
-    overflow-wrap: break-word;
     transition: background @transition-duration-base;
 
     // TODO: Nest Table
@@ -98,6 +92,12 @@
     }
   }
 
+  &-cell {
+    position: relative;
+    text-align: start;
+    overflow-wrap: break-word;
+  }
+
   &-cell-align {
     &-center {
       text-align: center;