jd-opensource · tinymins · Mar 21, 2024 · Mar 20, 2024 · Mar 20, 2024 · Mar 21, 2024
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -57,6 +57,10 @@ const DRIP_TABLE_SIDEBAR = [
           { title: '日期 DatePicker', link: '/drip-table/components/date-picker' },
           { title: '网页 PopUpPage', link: '/drip-table/components/pop-up-page' },
           { title: '数字 InputNumber', link: '/drip-table/components/input-number' },
+          { title: '开关 Switch', link: '/drip-table/components/switch' },
+          { title: '图标 Icon', link: '/drip-table/components/icon' },
+          { title: '组合 Group', link: '/drip-table/components/group' },
+          { title: '浮窗 Popover', link: '/drip-table/components/popover' },
         ],
       },
       {

diff --git a/docs/drip-table/components/group.md b/docs/drip-table/components/group.md
@@ -0,0 +1,167 @@
+---
+title: 组合组件 Group
+toc: content
+---
+
+## 组合组件 group
+
+组合组件
+
+## 代码演示
+
+```jsx
+/**
+ * transform: true
+ * defaultShowCode: false
+ * hideActions: ["CSB"]
+ */
+import { message } from "antd";
+import * as Icons from '@ant-design/icons';
+import React from "react";
+import DripTable from "drip-table";
+
+const dataSource = [
+  {
+    id: 1,
+    name: "商品一",
+    price: 7999,
+    soldOut: false,
+    status: "onSale",
+    description:
+      "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
+    pictureUrl:
+      "https://img14.360buyimg.com/imagetools/jfs/t1/119951/14/21336/15771/6218427eE68f8f468/e0647b9b7507755d.png",
+  },
+  {
+    id: 2,
+    name: "商品二",
+    price: 7999,
+    soldOut: true,
+    status: "offSale",
+    description:
+      "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
+    pictureUrl:
+      "https://img14.360buyimg.com/imagetools/jfs/t1/119951/14/21336/15771/6218427eE68f8f468/e0647b9b7507755d.png",
+  },
+];
+
+const Demo = () => {
+  const schema = {
+    columns: [
+      {
+        key: "mock_3",
+        title: "名称",
+        align: "center",
+        verticalAlign: "middle",
+        dataIndex: "",
+        component: "group",
+        options: {
+          layout: [2],
+          wrap: false,
+          horizontalAlign: "center",
+          items: [
+            {
+              key: "mock_1",
+              title: "名称",
+              align: "center",
+              dataIndex: "name",
+              component: "text",
+              options: {
+                mode: "single",
+                showTooltip: false,
+              },
+            },
+          ],
+        },
+      },
+      {
+        key: "mock_2",
+        title: "价格",
+        align: "center",
+        dataIndex: "price",
+        component: "text",
+        options: {
+          mode: "single",
+        },
+      },
+      {
+        key: "mock_3",
+        title: "操作",
+        align: "center",
+        verticalAlign: "middle",
+        dataIndex: "",
+        component: "group",
+        options: {
+          layout: [2],
+          wrap: false,
+          horizontalAlign: "center",
+          items: [
+            {
+              dataIndex: "",
+              align: "center",
+              verticalAlign: "middle",
+              key: "mock_icon_1",
+              title: "",
+              component: "icon",
+              options: {
+                icon: "CopyOutlined",
+                style: {
+                  padding: '0 3px',
+                  color: "#2a64ff",
+                  fontSize: "16px",
+                },
+                event: "copy-icon",
+              },
+            },
+            {
+              dataIndex: "",
+              align: "center",
+              verticalAlign: "middle",
+              key: "mock_icon_1",
+              title: "",
+              component: "icon",
+              options: {
+                icon: "DeleteOutlined",
+                style: {
+                  padding: '0 3px',
+                  color: "#ff4d4f",
+                  fontSize: "16px",
+                },
+                event: "delete-icon",
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  const [ds, setDs] = React.useState(dataSource);
+
+  return (
+    <React.Fragment>
+      <DripTable
+        schema={schema}
+        dataSource={ds}
+        icons={Icons}
+        onEvent={(event, tableInfo) => {
+          const { record, recordIndex } = event;
+          if (event.type === "drip-icon-click") {
+            const name = event.payload.name;
+            message.info(`第${recordIndex + 1}行“${record.name} (ID: ${record.id})”的“${name}”图标被点击。`);
+            console.log(name, record, recordIndex);
+          }
+        }}
+      />
+    </React.Fragment>
+  );
+};
+
+export default Demo;
+```
+
+## API
+
+| 参数名      | 描述                                                                             | 类型                                                                          | 是否必填 | 默认值                      | 详情 |
+| ----------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------- | ------------------------- | ---- |
+| style       | 自定义样式                                                                       | React.CSSProperties                                                           | 否       | 无                         | --   |
diff --git a/docs/drip-table/components/index.md b/docs/drip-table/components/index.md
@@ -189,6 +189,39 @@ toc: false
   </a>
 </div>
 
+## 容器组件
+
+<div class="components-overview-card">
+  <a href="/drip-table/components/group">
+    <div class="card-container">
+      <div class="card-head">
+        <div class="card-head-title">
+          <div class="components-overview-title">组合组件 group</div>
+        </div>
+      </div>
+      <div class="card-body" style="background-repeat: no-repeat; background-position: right bottom;">
+        <div class="components-overview-img">
+          <img src="https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg" alt="switch">
+        </div>
+      </div>
+    </div>
+  </a>
+  <a href="/drip-table/components/popover">
+    <div class="card-container">
+      <div class="card-head">
+        <div class="card-head-title">
+          <div class="components-overview-title">浮窗组件 popover</div>
+        </div>
+      </div>
+      <div class="card-body" style="background-repeat: no-repeat; background-position: right bottom;">
+        <div class="components-overview-img">
+          <img src="https://gw.alipayobjects.com/zos/alicdn/1PNL1p_cO/Popover.svg" alt="switch">
+        </div>
+      </div>
+    </div>
+  </a>
+</div>
+
 <!-- | 组件名 | 描述 | 详情 |
 | ----- | ---- | ---- |
 | [text](/drip-table/components/text) | 文本组件 | [🔗 示例](/drip-table/components/text) |

diff --git a/docs/drip-table/components/popover.md b/docs/drip-table/components/popover.md
@@ -0,0 +1,157 @@
+---
+title: 浮窗组件 Popover
+toc: content
+---
+
+## 浮窗组件 popover
+
+浮窗组件
+
+## 代码演示
+
+```jsx
+/**
+ * transform: true
+ * defaultShowCode: false
+ * hideActions: ["CSB"]
+ */
+import { message } from "antd";
+import * as Icons from '@ant-design/icons';
+import React from "react";
+import DripTable from "drip-table";
+
+const dataSource = [
+  {
+    id: 1,
+    name: "商品一",
+    price: 7999,
+    soldOut: false,
+    status: "onSale",
+    description:
+      "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
+    pictureUrl:
+      "https://img14.360buyimg.com/imagetools/jfs/t1/119951/14/21336/15771/6218427eE68f8f468/e0647b9b7507755d.png",
+  },
+  {
+    id: 2,
+    name: "商品二",
+    price: 7999,
+    soldOut: true,
+    status: "offSale",
+    description:
+      "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
+    pictureUrl:
+      "https://img14.360buyimg.com/imagetools/jfs/t1/119951/14/21336/15771/6218427eE68f8f468/e0647b9b7507755d.png",
+  },
+];
+
+const Demo = () => {
+  const schema = {
+    columns: [
+      {
+        key: "mock_3",
+        title: "名称",
+        align: "center",
+        verticalAlign: "middle",
+        dataIndex: "",
+        component: "popover",
+        options: {
+          placement: 'top',
+          popover: {
+            "key": "18e5af30cb0-12e6",
+            "title": "",
+            "width": 140,
+            "align": "center",
+            "verticalAlign": "middle",
+            "dataIndex": "",
+            "component": "group",
+            "options": {
+              "layout": [
+                1,
+                1
+              ],
+              "horizontalAlign": "center",
+              "verticalAlign": "middle",
+              "gutter": [
+                8,
+                8
+              ],
+              "wrap": false,
+              "items": [
+                {
+                  "key": "mock_1_1",
+                  "title": "",
+                  "component": "image",
+                  "options": {
+                    "imageWidth": 86,
+                    "imageHeight": 86
+                  },
+                  "dataIndex": "pictureUrl"
+                },
+                {
+                  "key": "mock_1_2",
+                  "title": "",
+                  "component": "text",
+                  "options": {
+                    "mode": "single"
+                  },
+                  "dataIndex": "name"
+                }
+              ]
+            }
+          },
+          content: {
+            key: "mock_1",
+            title: "名称",
+            align: "center",
+            dataIndex: "name",
+            component: "text",
+            options: {
+              mode: "single",
+              showTooltip: false,
+            },
+          },
+        },
+      },
+      {
+        key: "mock_2",
+        title: "价格",
+        align: "center",
+        dataIndex: "price",
+        component: "text",
+        options: {
+          mode: "single",
+        },
+      },
+    ],
+  };
+
+  const [ds, setDs] = React.useState(dataSource);
+
+  return (
+    <React.Fragment>
+      <DripTable
+        schema={schema}
+        dataSource={ds}
+        icons={Icons}
+        onEvent={(event, tableInfo) => {
+          const { record, recordIndex } = event;
+          if (event.type === "drip-icon-click") {
+            const name = event.payload.name;
+            message.info(`第${recordIndex + 1}行“${record.name} (ID: ${record.id})”的“${name}”图标被点击。`);
+            console.log(name, record, recordIndex);
+          }
+        }}
+      />
+    </React.Fragment>
+  );
+};
+
+export default Demo;
+```
+
+## API
+
+| 参数名      | 描述                                                                             | 类型                                                                          | 是否必填 | 默认值                      | 详情 |
+| ----------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------- | ------------------------- | ---- |
+| style       | 自定义样式                                                                       | React.CSSProperties                                                           | 否       | 无                         | --   |
diff --git a/packages/drip-table/src/components/cell-components/component.ts b/packages/drip-table/src/components/cell-components/component.ts
@@ -43,6 +43,10 @@ export interface DripTableComponentProps<
    * 获取该行其他渲染单元格数据（`record[dataIndex]`）
    */
   indexValue: (dataIndex: ColumnSchema['dataIndex'], defaultValue?: unknown) => unknown;
+  /**
+   * 手动渲染组件 Schema
+   */
+  renderSchema: (schema: DripTableColumnSchema, record: RecordType, recordIndex: number) => React.ReactNode;
   /**
    * 是否处于禁用状态
    */