From 05e102138bc0b6a922a23659a1af1a2fe409f605 Mon Sep 17 00:00:00 2001 From: Emil Zhai Date: Wed, 20 Mar 2024 08:58:06 +0000 Subject: [PATCH 1/5] feat(drip-table): add popover to group component --- .../cell-components/group/index.tsx | 84 ++++++++++++++++--- 1 file changed, 72 insertions(+), 12 deletions(-) diff --git a/packages/drip-table/src/components/cell-components/group/index.tsx b/packages/drip-table/src/components/cell-components/group/index.tsx index 309c781d2..a7ca08c9b 100644 --- a/packages/drip-table/src/components/cell-components/group/index.tsx +++ b/packages/drip-table/src/components/cell-components/group/index.tsx @@ -17,6 +17,7 @@ import { } from '@/types'; import Col from '@/components/react-components/col'; import Row from '@/components/react-components/row'; +import Tooltip from '@/components/react-components/tooltip'; import { type ExtractDripTableExtraOption, TABLE_LAYOUT_COLUMN_RENDER_GENERATOR_DO_NOT_USE_IN_PRODUCTION as columnRenderGenerator } from '@/index'; import { type DripTableColumnRenderOptions } from '@/layouts/table/types'; @@ -52,6 +53,27 @@ export type DTCGroupColumnSchema | CustomColumnSchema | null)[]; + /** + * 悬浮框配置 + */ + popover?: { + /** + * 自定义样式 + */ + style?: React.CSSProperties; + /** + * 触发器 + */ + trigger?: 'click' | 'hover'; + /** + * 提示文案显示位置 + */ + placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'; + /** + * 渲染 Schema + */ + schema: (DripTableBuiltInColumnSchema | CustomColumnSchema); + }; }>; interface DTCGroupProps< @@ -80,6 +102,26 @@ ExtraOptions extends Partial = never, type: 'array', items: {}, }, + popover: { + type: 'object', + properties: { + style: { + type: 'object', + patternProperties: { + '^.*$': { + anyOf: [ + { type: 'string' }, + { type: 'number' }, + ], + }, + }, + }, + trigger: { enum: ['click', 'hover'] }, + placement: { enum: ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'] }, + schema: {}, + }, + required: ['schema'], + }, }, }; @@ -107,30 +149,30 @@ ExtraOptions extends Partial = never, } public render() { - const schema = this.props.schema; - const rowLength = schema.options.layout?.length; + const options = this.props.schema.options; + const rowLength = options.layout?.length; const rows = [...Array.from({ length: rowLength }).keys()]; - return ( + let el = (
{ rows.map((row, index) => ( - { schema.options.layout[index] - && [...Array.from({ length: schema.options.layout[index] || 1 }).keys()] + { options.layout[index] + && [...Array.from({ length: options.layout[index] || 1 }).keys()] .map(col => ( = never, }
); + if (options.popover) { + el = ( + + { this.renderGenerator(options.popover.schema) } + + )} + placement={options.popover.placement} + > + { el } + + ); + } + return el; } } From 50e931cd1beea9b086fbc5197553c1a2054df51f Mon Sep 17 00:00:00 2001 From: Emil Zhai Date: Wed, 20 Mar 2024 08:59:11 +0000 Subject: [PATCH 2/5] feat: add group component document --- docs/drip-table/components/group.md | 213 ++++++++++++++++++++++++++++ docs/drip-table/components/index.md | 19 +++ 2 files changed, 232 insertions(+) create mode 100644 docs/drip-table/components/group.md diff --git a/docs/drip-table/components/group.md b/docs/drip-table/components/group.md new file mode 100644 index 000000000..e75ad8477 --- /dev/null +++ b/docs/drip-table/components/group.md @@ -0,0 +1,213 @@ +--- +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, + }, + }, + ], + popover: { + placement: 'top', + schema: { + "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" + } + ] + } + }, + }, + }, + }, + { + 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 ( + + { + 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); + } + }} + /> + + ); +}; + +export default Demo; +``` + +## API + +| 参数名 | 描述 | 类型 | 是否必填 | 默认值 | 详情 | +| ----------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------- | ------------------------- | ---- | +| style | 自定义样式 | React.CSSProperties | 否 | 无 | -- | diff --git a/docs/drip-table/components/index.md b/docs/drip-table/components/index.md index 186728017..cb2ffa55d 100644 --- a/docs/drip-table/components/index.md +++ b/docs/drip-table/components/index.md @@ -189,6 +189,25 @@ toc: false +## 容器组件 + +
+ +
+
+
+
容器组件 group
+
+
+
+
+ switch +
+
+
+ +
+