From c4e8a3014420cf7f540b77e1bd4d32973d48e1eb Mon Sep 17 00:00:00 2001 From: Barrior Date: Wed, 25 Sep 2024 11:03:26 +0800 Subject: [PATCH] feat: add long-text and long-text-modal valueTypes --- examples/search-table-react/060-value-type.md | 22 ++++++----- .../helpers/columns-value-type.ts | 34 +++++++++++++---- .../helpers/createDataSource-vt.ts | 4 ++ .../src/components/ImagesPreview/index.tsx | 8 ++-- .../src/hooks/useColumns/helpers/traverse.tsx | 2 +- .../search-table-react/src/typings/table.d.ts | 7 +++- .../src/valueTypes/CommaNumber.tsx | 23 +++++++++++ .../src/valueTypes/LongText.tsx | 23 +++++++++++ .../src/valueTypes/LongTextModal.tsx | 38 +++++++++++++++++++ .../src/valueTypes/index.tsx | 32 +++++++--------- 10 files changed, 153 insertions(+), 40 deletions(-) create mode 100644 packages/search-table-react/src/valueTypes/CommaNumber.tsx create mode 100644 packages/search-table-react/src/valueTypes/LongText.tsx create mode 100644 packages/search-table-react/src/valueTypes/LongTextModal.tsx diff --git a/examples/search-table-react/060-value-type.md b/examples/search-table-react/060-value-type.md index bab2c69..6e6aed7 100644 --- a/examples/search-table-react/060-value-type.md +++ b/examples/search-table-react/060-value-type.md @@ -64,7 +64,7 @@ const columns: IColumnType[] = [ return { // 必须返回 type 字段，对应数据显示类型 type: 'tags', - // 其他参数，将透传给类型渲染组件，对应 options 字段 + // 其他参数，将透传给类型渲染组件，对应组件接收的 options 字段 color: Array.isArray(record.tags) ? 'blue' : 'green', } }, @@ -94,15 +94,17 @@ export default Demo ## 内置数据显示类型参数详解 -| **参数** | **描述** | **数据值类型** | -| ---------------- | ------------------ | -------------------- | -| **code** | 代码块形式显示 | `string` | -| **rate** | 评分形式显示 | `number` | -| **switch** | 开关形式显示 | `boolean \| 1 \| 0` | -| **images** | 图片预览形式显示 | `string \| string[]` | -| **tags** | 标签形式 | `string \| string[]` | -| **comma-number** | 数字千分位处理显示 | `number \| string` | -| **percent** | 数字加百分号显示 | `number \| string` | +| **参数** | **描述** | **数据值类型** | **传参说明** | +| ------------------- | ------------------- | -------------------- | ------------------------------------------------------------------ | +| **code** | 代码块形式显示 | `string` | - | +| **rate** | 评分形式显示 | `number` | Antd Rate 组件参数 | +| **switch** | 开关形式显示 | `boolean \| 1 \| 0` | Antd Switch 组件参数 | +| **images** | 图片预览形式显示 | `string \| string[]` | Antd Image 组件参数 | +| **tags** | 标签形式 | `string \| string[]` | Antd Tag 组件参数 | +| **comma-number** | 数字千分位处理显示 | `number \| string` | - | +| **percent** | 数字加百分号显示 | `number \| string` | - | +| **long-text** | 长文案 tooltip 显示 | `number \| string` | `maxLength:` 溢出省略长度，默认为 10，其他为 Antd Tooltip 组件参数 | +| **long-text-modal** | 长文案点击弹窗显示 | `number \| string` | `maxLength:` 溢出省略长度，默认为 10，其他为 Antd Modal 组件参数 | ## 注册数据显示类型 diff --git a/examples/search-table-react/helpers/columns-value-type.ts b/examples/search-table-react/helpers/columns-value-type.ts index 9d72afc..63c5f1b 100644 --- a/examples/search-table-react/helpers/columns-value-type.ts +++ b/examples/search-table-react/helpers/columns-value-type.ts @@ -6,38 +6,58 @@ const columns: IColumnType[] = [ dataIndex: 'title', }, { - title: '评级', + title: '评级(rate)', dataIndex: 'rate', valueType: 'rate', }, { - title: '代码块', + title: '代码块(code)', dataIndex: 'code', valueType: 'code', }, { - title: '千分位数字', + title: '千分位数字(comma-number)', dataIndex: 'comma_number', valueType: 'comma-number', }, { - title: '百分比', + title: '百分比(percent)', dataIndex: 'percent', valueType: 'percent', }, { - title: '状态开关', + title: '长文案(long-text)', + dataIndex: 'long_text', + valueType: (_record, index) => ({ + type: 'long-text', + maxLength: 20, + color: index % 2 ? '#1677ff' : '#000', + }), + width: 270, + }, + { + title: '长文案(long-text-modal)', + dataIndex: 'long_text_modal', + valueType: () => ({ + type: 'long-text-modal', + maxLength: 20, + width: 500, + }), + width: 270, + }, + { + title: '状态开关(switch)', dataIndex: 'switch_status', valueType: 'switch', }, { - title: '标签', + title: '标签(tags)', dataIndex: 'tags', valueType: 'tags', width: 140, }, { - title: '图片', + title: '图片(images)', dataIndex: 'image_list', valueType: 'images', }, diff --git a/examples/search-table-react/helpers/createDataSource-vt.ts b/examples/search-table-react/helpers/createDataSource-vt.ts index 8026656..c103bc5 100644 --- a/examples/search-table-react/helpers/createDataSource-vt.ts +++ b/examples/search-table-react/helpers/createDataSource-vt.ts @@ -31,6 +31,10 @@ function rangeNumber(min, max) { 'https://raw.githubusercontent.com/Barrior/assets/main/gift.png', ], deploy_status: rangeNumber(0, 3), + long_text: + 'SearchTable 是基于 Search + Antd Table 封装的条件搜索表格组件；常用于后台管理系统数据检索、显示与操作。', + long_text_modal: + 'SearchTable 是基于 Search + Antd Table 封装的条件搜索表格组件；常用于后台管理系统数据检索、显示与操作。', }) } diff --git a/packages/search-table-react/src/components/ImagesPreview/index.tsx b/packages/search-table-react/src/components/ImagesPreview/index.tsx index 4ee68c1..f133a7a 100644 --- a/packages/search-table-react/src/components/ImagesPreview/index.tsx +++ b/packages/search-table-react/src/components/ImagesPreview/index.tsx @@ -5,10 +5,11 @@ import { useState } from 'react' interface IProps { imgList: string[] - options: IObjectAny + imgProps?: IObjectAny + groupProps?: IObjectAny } -const ImagesPreview: FC = ({ imgList, options }) => { +const ImagesPreview: FC = ({ imgList, imgProps, groupProps }) => { const [visible, setVisible] = useState(false) const [current, setCurrent] = useState(0) @@ -19,6 +20,7 @@ const ImagesPreview: FC = ({ imgList, options }) => { return ( = ({ imgList, options }) => { {imgList.map((imgUrl, i) => ( openPreview(i)} diff --git a/packages/search-table-react/src/hooks/useColumns/helpers/traverse.tsx b/packages/search-table-react/src/hooks/useColumns/helpers/traverse.tsx index 64c2bba..93e571a 100644 --- a/packages/search-table-react/src/hooks/useColumns/helpers/traverse.tsx +++ b/packages/search-table-react/src/hooks/useColumns/helpers/traverse.tsx @@ -70,7 +70,7 @@ export function processRawColumns( if (valueType) { if (isFunction(valueType)) { - const { type, ...options } = valueType(record) + const { type, ...options } = valueType(record, index) innerValueType = type innerValueTypeOptions = options } else { diff --git a/packages/search-table-react/src/typings/table.d.ts b/packages/search-table-react/src/typings/table.d.ts index 6e07428..3035c5b 100644 --- a/packages/search-table-react/src/typings/table.d.ts +++ b/packages/search-table-react/src/typings/table.d.ts @@ -11,6 +11,8 @@ type IValueType = | 'percent' | 'images' | 'tags' + | 'long-text' + | 'long-text-modal' | T /** @@ -40,7 +42,10 @@ export type IColumnType = ColumnType & { */ valueType?: | IValueType - | ((record: IObjectAny) => { + | (( + record: IObjectAny, + index: number + ) => { type: IValueType [attr: string]: any }) diff --git a/packages/search-table-react/src/valueTypes/CommaNumber.tsx b/packages/search-table-react/src/valueTypes/CommaNumber.tsx new file mode 100644 index 0000000..587f007 --- /dev/null +++ b/packages/search-table-react/src/valueTypes/CommaNumber.tsx @@ -0,0 +1,23 @@ +import { REG_COMMA_NUMBER } from '../constants/regexp' +import { isEmpty } from '../utils/common' + +interface ICommaNumberProps { + value?: any +} + +const CommaNumber = ({ value }: ICommaNumberProps) => { + // 排除空数据 + if (isEmpty(value)) { + return '-' + } + + // 保证 value 是数字 + if (isNaN(Number(value))) { + return value + } + + // 千分位处理 + return String(value).replace(REG_COMMA_NUMBER, ',') +} + +export default CommaNumber diff --git a/packages/search-table-react/src/valueTypes/LongText.tsx b/packages/search-table-react/src/valueTypes/LongText.tsx new file mode 100644 index 0000000..95e0298 --- /dev/null +++ b/packages/search-table-react/src/valueTypes/LongText.tsx @@ -0,0 +1,23 @@ +import type { IObjectAny } from '@schema-render/core-react' +import { Tooltip } from 'antd' +import type { FC } from 'react' + +interface ILongTextProps { + value?: string + options?: IObjectAny +} + +const LongText: FC = ({ value, options = {} }) => { + const text = value ? String(value) : '-' + const { maxLength = 10, ...tooltipProps } = options + + return text.length > maxLength ? ( + + {text.slice(0, maxLength - 1)}... + + ) : ( + <>{text} + ) +} + +export default LongText diff --git a/packages/search-table-react/src/valueTypes/LongTextModal.tsx b/packages/search-table-react/src/valueTypes/LongTextModal.tsx new file mode 100644 index 0000000..dbcf08e --- /dev/null +++ b/packages/search-table-react/src/valueTypes/LongTextModal.tsx @@ -0,0 +1,38 @@ +import type { IObjectAny } from '@schema-render/core-react' +import { Button, Modal } from 'antd' +import type { FC } from 'react' +import { useState } from 'react' + +interface ILongTextModalProps { + value?: string + options?: IObjectAny +} + +const LongTextModal: FC = ({ value, options = {} }) => { + const text = value ? String(value) : '-' + const { maxLength = 10, ...modalProps } = options + const [isOpen, setIsOpen] = useState(false) + + return text.length > maxLength ? ( + <> + {text.slice(0, maxLength - 3)}... + + setIsOpen(false)} + > + {text} + + + ) : ( + <>{text} + ) +} + +export default LongTextModal diff --git a/packages/search-table-react/src/valueTypes/index.tsx b/packages/search-table-react/src/valueTypes/index.tsx index e6c1238..45de31f 100644 --- a/packages/search-table-react/src/valueTypes/index.tsx +++ b/packages/search-table-react/src/valueTypes/index.tsx @@ -2,10 +2,12 @@ import { utils } from '@schema-render/core-react' import { Rate, Switch, Tag } from 'antd' import ImagesPreview from '../components/ImagesPreview' -import { REG_COMMA_NUMBER } from '../constants/regexp' import { STYLE_CODE } from '../constants/style' import type { ITableProps } from '../typings/table' import { isEmpty } from '../utils/common' +import CommaNumber from './CommaNumber' +import LongText from './LongText' +import LongTextModal from './LongTextModal' const { isArray } = utils @@ -48,22 +50,7 @@ export const BUILT_IN_VALUE_TYPES: ITableProps['registerValueType'] = { /** * 数字千分位 */ - 'comma-number': ({ value }) => { - // 排除空数据 - if (isEmpty(value)) { - return '-' - } - - const numValue = Number(value) - - // 排除 NaN - if (isNaN(numValue)) { - return value - } - - // 千分位处理 - return String(value).replace(REG_COMMA_NUMBER, ',') - }, + 'comma-number': (props) => , /** * 图片显示 */ @@ -73,6 +60,15 @@ export const BUILT_IN_VALUE_TYPES: ITableProps['registerValueType'] = { return '-' } const imgList = isArray(value) ? value : [value] - return + const { groupProps, ...imgProps } = options + return }, + /** + * 长文案 Tooltips 方式显示 + */ + 'long-text': (props) => , + /** + * 长文案点击弹窗方式显示 + */ + 'long-text-modal': (props) => , }