Skip to content

Commit

Permalink
feat: add long-text and long-text-modal valueTypes
Browse files Browse the repository at this point in the history
  • Loading branch information
Barrior committed Sep 25, 2024
1 parent 66c6c59 commit c4e8a30
Show file tree
Hide file tree
Showing 10 changed files with 153 additions and 40 deletions.
22 changes: 12 additions & 10 deletions examples/search-table-react/060-value-type.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const columns: IColumnType[] = [
return {
// 必须返回 type 字段,对应数据显示类型
type: 'tags',
// 其他参数,将透传给类型渲染组件,对应 options 字段
// 其他参数,将透传给类型渲染组件,对应组件接收的 options 字段
color: Array.isArray(record.tags) ? 'blue' : 'green',
}
},
Expand Down Expand Up @@ -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 组件参数 |

## 注册数据显示类型

Expand Down
34 changes: 27 additions & 7 deletions examples/search-table-react/helpers/columns-value-type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand Down
4 changes: 4 additions & 0 deletions examples/search-table-react/helpers/createDataSource-vt.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 封装的条件搜索表格组件;常用于后台管理系统数据检索、显示与操作。',
})
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ import { useState } from 'react'

interface IProps {
imgList: string[]
options: IObjectAny
imgProps?: IObjectAny
groupProps?: IObjectAny
}

const ImagesPreview: FC<IProps> = ({ imgList, options }) => {
const ImagesPreview: FC<IProps> = ({ imgList, imgProps, groupProps }) => {
const [visible, setVisible] = useState(false)
const [current, setCurrent] = useState(0)

Expand All @@ -19,6 +20,7 @@ const ImagesPreview: FC<IProps> = ({ imgList, options }) => {

return (
<Image.PreviewGroup
{...groupProps}
items={imgList}
preview={{
visible,
Expand All @@ -31,7 +33,7 @@ const ImagesPreview: FC<IProps> = ({ imgList, options }) => {
{imgList.map((imgUrl, i) => (
<Image
width={60}
{...options}
{...imgProps}
src={imgUrl}
key={i}
onClick={() => openPreview(i)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 6 additions & 1 deletion packages/search-table-react/src/typings/table.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ type IValueType<T extends string = ''> =
| 'percent'
| 'images'
| 'tags'
| 'long-text'
| 'long-text-modal'
| T

/**
Expand Down Expand Up @@ -40,7 +42,10 @@ export type IColumnType<VT extends string = ''> = ColumnType<IObjectAny> & {
*/
valueType?:
| IValueType<VT>
| ((record: IObjectAny) => {
| ((
record: IObjectAny,
index: number
) => {
type: IValueType<VT>
[attr: string]: any
})
Expand Down
23 changes: 23 additions & 0 deletions packages/search-table-react/src/valueTypes/CommaNumber.tsx
Original file line number Diff line number Diff line change
@@ -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
23 changes: 23 additions & 0 deletions packages/search-table-react/src/valueTypes/LongText.tsx
Original file line number Diff line number Diff line change
@@ -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<ILongTextProps> = ({ value, options = {} }) => {
const text = value ? String(value) : '-'
const { maxLength = 10, ...tooltipProps } = options

return text.length > maxLength ? (
<Tooltip title={text} {...tooltipProps}>
{text.slice(0, maxLength - 1)}...
</Tooltip>
) : (
<>{text}</>
)
}

export default LongText
38 changes: 38 additions & 0 deletions packages/search-table-react/src/valueTypes/LongTextModal.tsx
Original file line number Diff line number Diff line change
@@ -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<ILongTextModalProps> = ({ 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)}...
<Button type="link" style={{ padding: 0 }} onClick={() => setIsOpen(true)}>
全部
</Button>
<Modal
width={600}
title="全部"
footer={null}
{...modalProps}
open={isOpen}
onCancel={() => setIsOpen(false)}
>
{text}
</Modal>
</>
) : (
<>{text}</>
)
}

export default LongTextModal
32 changes: 14 additions & 18 deletions packages/search-table-react/src/valueTypes/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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) => <CommaNumber {...props} />,
/**
* 图片显示
*/
Expand All @@ -73,6 +60,15 @@ export const BUILT_IN_VALUE_TYPES: ITableProps['registerValueType'] = {
return '-'
}
const imgList = isArray(value) ? value : [value]
return <ImagesPreview imgList={imgList} options={options} />
const { groupProps, ...imgProps } = options
return <ImagesPreview imgList={imgList} imgProps={imgProps} groupProps={groupProps} />
},
/**
* 长文案 Tooltips 方式显示
*/
'long-text': (props) => <LongText {...props} />,
/**
* 长文案点击弹窗方式显示
*/
'long-text-modal': (props) => <LongTextModal {...props} />,
}

0 comments on commit c4e8a30

Please sign in to comment.