pro-components
pro-components copied to clipboard
🐛[BUG]升级后表格搜索区域的addonBefore属性失效
🐛 bug 描述
@ant-design/pro-components
升级后,表格搜索区域的输入框addonBefore
属性实现,通过自定义的valueType
类型实现
📷 复现步骤
tdComboDateSelector: {
render: (text, props, dom) => dom,
renderFormItem(text, props) {
const [picker, setPicker] = useState('date');
const [value, setValue] = useState(null);
const format = {
date: 'YYYY-MM-DD',
week: 'YYYY-wo',
year: 'YYYY',
month: 'YYYY-MM',
quarter: 'YYYY-[Q]Q'
};
useEffect(() => {
value && onChangeDate(value, value.format(format[picker]));
}, [picker]);
const onChangePicker = (vl) => {
setPicker(vl);
};
const onChangeDate = (date, dateStr) => {
setValue(date);
props.fieldProps.onChange && props.fieldProps.onChange(toValue(date, dateStr));
};
const toValue = (date, dateStr) => {
return picker === 'week'
? [date.clone().startOf('w'), date.clone().endOf('w')].map((x) => x.format('YYYY-MM-DD'))
: picker === 'year'
? [date.clone().startOf('y'), date.clone().endOf('y')].map((x) => x.format('YYYY-MM-DD'))
: picker === 'month'
? [date.clone().startOf('M'), date.clone().endOf('M')].map((x) => x.format('YYYY-MM-DD'))
: picker === 'quarter'
? [date.clone().startOf('Q'), date.clone().endOf('Q')].map((x) => x.format('YYYY-MM-DD'))
: [dateStr, dateStr];
};
return (
<ProFormSelect
picker={picker}
value={value}
noStyle
onChange={onChangeDate}
addonBefore={
<Select
style={{ width: 80 }}
value={picker}
options={[
{ label: '日期', value: 'date' },
{ label: '周', value: 'week' },
{ label: '年度', value: 'year' },
{ label: '月度', value: 'month' },
{ label: '季度', value: 'quarter' }
]}
onChange={onChangePicker}
/>
}
/>
);
}
}
升级后的错误效果:
🏞 期望结果
这是升级前的效果:
💻 复现代码
© 版本信息
- ProComponents 版本: 1.1.21
- umi 版本 3.5.34
- 浏览器环境 104.0.1293.54 (正式版本) (x86_64)
- 开发环境 macos
🚑 其他信息
去掉noStyle
@wangmeijian 去掉noStyle
后是可以显示出来了,但会有下边距过高的问题
这个修复了,可以重试了