ant-design / ant-design/pro-components
🧐[问题] ProColumn的formItemProps里,找不到transform的api
- 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
### 呈现效果

### 版本信息
- "color": "^5.0.0",
- "@ant-design/pro-components": "^2.8.2",
- "antd": "^5.25.0",
Contributor 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