pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

🐛[BUG]升级后表格搜索区域的addonBefore属性失效

Open aofong opened this issue 2 years ago • 2 comments

🐛 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}
            />
          }
        />
      );
    }
  }

升级后的错误效果: image

🏞 期望结果

这是升级前的效果: image

💻 复现代码

© 版本信息

  • ProComponents 版本: 1.1.21
  • umi 版本 3.5.34
  • 浏览器环境 104.0.1293.54 (正式版本) (x86_64)
  • 开发环境 macos

🚑 其他信息

aofong avatar Sep 06 '22 01:09 aofong

去掉noStyle

wangmeijian avatar Sep 09 '22 02:09 wangmeijian

@wangmeijian 去掉noStyle后是可以显示出来了,但会有下边距过高的问题 image

aofong avatar Sep 15 '22 02:09 aofong

这个修复了,可以重试了

chenshuai2144 avatar Nov 02 '22 03:11 chenshuai2144