ant-design / ant-design/pro-components

🧐[问题] ProColumn的formItemProps里,找不到transform的api

Open
#9,151 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🧐 问题描述
在ProTable row里配置自定义的formItemProps时,发现找不到transform这个功能

### 💻 示例代码
```
import Color, {ColorInstance} from "color";

function ParseColour(input: string): { isValid: boolean, colorInstance?: ColorInstance } {
try {
const colorInstance = Color(input.toLowerCase());
return { isValid: true, colorInstance };
} catch (e) {
return { isValid: false };
}
}
```
```
{
title: 'Colour Code',
dataIndex: 'value',
valueType: 'color',
hideInSearch: true,
render: (_dom, entity) => {
return {
const parsed = colourUtil.ParseColour(color.toHexString());
return {parsed.colorInstance?.keyword()} ({color.toHexString().toUpperCase()})
}}/>
},
formItemProps: () => ({
rules: [
formRules.RequiredRule(),
{
validator: (_rule, newValue: AggregationColor) => {
const colorCode = newValue.toHexString().toUpperCase();
if (newValue) {
const existingRecord = colourOptions.find((x) => x.value.toLowerCase() === colorCode.toLowerCase());
if (existingRecord) {
return Promise.reject(`Value '${colorCode}' is used for Colour ${existingRecord.name}`);
}
}
return Promise.resolve(true);
}
}],
// transform 不见了
}),
renderFormItem: () => {
return {
const parsed = colourUtil.ParseColour(color.toHexString());
return {parsed.colorInstance?.keyword()} ({color.toHexString().toUpperCase()})
}}/>
}
},
```
> 这里的dataIndex传递进来的value,只是hex string (比如:#FFFFFF )

### 🚑 其他信息

用的是antd的ColorPicker

### 呈现效果

![Image](https://github.com/user-attachments/assets/a7469b6a-f5b9-4f30-b7e8-3abd217f695d)

### 版本信息
- "color": "^5.0.0",
- "@ant-design/pro-components": "^2.8.2",
- "antd": "^5.25.0",

Contributor guide

Open the contributing guide

Research direction

Start by tracing ProTable's formItemProps typing and the path from the antd ColorPicker value to the row's dataIndex value. Confirm how the missing transform behavior should convert the picker value to the stored hex string, then verify that custom formItemProps can use it without breaking validation.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.