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

👑 [需求]SchemaForm中当valueType是formList时,columns支持RenderProps模式

Open soradaisuke opened this issue 3 years ago • 0 comments
trafficstars

🔩 所属模块或组件

SchemaForm

🥰 需求描述

当valueType是formList时,columns支持函数格式,以支持ProFormList RenderProps 模式

⛰ 功能需求适用场景

List中某个column的数据发生变化时,希望通过action.setCurrentRowData修改本行数据

🧐 解决方案

https://github.com/ant-design/pro-components/blob/47fe90c1d90ef6b8e28bdbdda86a915454cb1d64/packages/form/src/components/SchemaForm/valueType/formList.tsx

export const formList: ProSchemaRenderValueTypeFunction = (item, { genItems }) => {
  if (item.valueType === 'formList' && item.dataIndex) {
    if (!item.columns || !Array.isArray(item.columns)) return null;
    return (
      <ProFormList
        key={item.key}
        name={item.dataIndex}
        label={item.label}
        initialValue={item.initialValue}
        colProps={item.colProps}
        rowProps={item.rowProps}
        {...item.getFieldProps?.()}
      >
        {genItems(item.columns)}
      </ProFormList>
    );
  }

  return true;
};

这里支持columns作为renderProps

export const formList: ProSchemaRenderValueTypeFunction = (item, { genItems }) => {
  if (item.valueType === 'formList' && item.dataIndex) {
    if (!item.columns || (!Array.isArray(item.columns) && !isFunction(item.columns))) return null;
    return (
      <ProFormList
        key={item.key}
        name={item.dataIndex}
        label={item.label}
        initialValue={item.initialValue}
        colProps={item.colProps}
        rowProps={item.rowProps}
        {...item.getFieldProps?.()}
      >
        {isFunction(item.columns) ? ((...args) => genItems(item.columns(...args))) : genItems(item.columns)}
      </ProFormList>
    );
  }

  return true;
};

🚑 其他信息

soradaisuke avatar Jul 22 '22 04:07 soradaisuke