💥 feat(table): add form values to transform fields #426

itsuki0927 · 2020-09-08T23:04:33Z

添加属性renameKey然后实现表单搜索的时候重命名字段.

重命名某一个字段并且valueType不是日期区间可以传入string | [string].
重命名valueType是日期区间传入[string, string].
不传入则不会进行重命名

const columns = [
  {
    title: '状态',
    dataIndex: 'state',
    renameKey: 'status',
  },
  {
    title: '标签',
    dataIndex: 'labels',
    renameKey: ['label'],
  },
  {
    title: '创建时间',
    key: 'since',
    dataIndex: 'created_at',
    valueType: 'dateRange',
    renameKey: ['startTime', 'endTime'],
  },
];

// 最终生成的`params`:
const params =  {
 status: '',
 label: '',
 startTime: '',
 endTime: ''
}

close #318

codecov · 2020-09-08T23:10:53Z

Codecov Report

Merging #426 into master will increase coverage by 0.05%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master     #426      +/-   ##
==========================================
+ Coverage   91.54%   91.60%   +0.05%     
==========================================
  Files         133      134       +1     
  Lines        3621     3643      +22     
  Branches     1303     1308       +5     
==========================================
+ Hits         3315     3337      +22     
  Misses        302      302              
  Partials        4        4

Impacted Files	Coverage Δ
packages/table/src/Table.tsx	`96.13% <ø> (ø)`
packages/table/src/Form/index.tsx	`97.01% <100.00%> (+0.21%)`	⬆️
...ackages/utils/src/transformKeySubmitValue/index.ts	`100.00% <100.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 068409d...bd55558. Read the comment docs.

hengkx · 2020-09-09T01:38:23Z

你的意思是表格中的列和查询的字段不一致对吗？

chenshuai2144 · 2020-09-09T01:51:04Z

这个名字有点，怎么说呢很山寨的感觉

hengkx · 2020-09-09T01:52:52Z

searchKey😊

itsuki0927 · 2020-09-09T02:31:28Z

如果是ProTable需要这个属性的话,searchKey肯定是更好的,我的想法是不止ProTable可以使用这个属性, 可能到时候ProForm也可能会用到这个属性,比如说在ProForm表单中time:['日期1', '日期2'],需要转化为startTime: '日期1',endTime: '日期2'这样子的数据传递给后端.

在实现的过程中,我考虑过比如说state:[1,2,3]这种要不要进行兼容,后面发现因为数组具有不确定因素(renameKey与需要转换的value数组未必是等长的),所以后面我自己的想法是,最常见的就是将日期数组转换成time:['日期1', '日期2']转换为startTime: '日期1', endTime: '日期2',或者说将某一个key从这个a -> b这样子的, 像复杂的转换可以通过一个函数来实现(想着后面进行实现), 或者说通过beforeSubmitValue 回调来实现.

这是我的一些想法,,有更好的方案和思路,多多指教.

hengkx · 2020-09-09T02:35:44Z

cc @ant-design/ant-design-collaborators

packages/table/src/Form/index.tsx

chenshuai2144 · 2020-09-09T03:02:15Z

nameTransform: ['startDate', 'endDate'],

我们期望做成这样，可以让 range 系列的组件支持一下这个属性吗？这样 table 和 form 都能支持

packages/table/src/Form/index.tsx

hengkx · 2020-09-09T03:07:08Z

nameTransform: ['startDate', 'endDate'],
我们期望做成这样，可以让 range 系列的组件支持一下这个属性吗？这样 table 和 form 都能支持

这是改antd里面多组件增加特性吗？感觉可以但是觉得这个名称有点怪怪的在真实使用场景中大多数都需要自己转换一次 @afc163

itsuki0927 · 2020-09-09T03:09:24Z

nameTransform: ['startDate', 'endDate'],
我们期望做成这样，可以让 range 系列的组件支持一下这个属性吗？这样 table 和 form 都能支持

如果是这样子的话, 只能把这个props写到fieldProps里面配置了, 不能写在顶层.
本质上他们都一个操作就是format, 一个是format value 一个是format key, rename和conversionSubmitValue操作写到一块

kerm1it · 2020-09-09T03:13:24Z

个人比较倾向于像 transformer 这一类的名称，这样其值的格式就比较宽泛，例如，可以用 Map 对象格式去做简单的转换，也可以传入函数做像日期范围那样复杂的转换。

afc163 · 2020-09-09T03:14:46Z

这种太难理解了，也不灵活，不如让 search 属性里增加一个 function，在这里做一些搜索表单请求需要的字段转化。

itsuki0927 · 2020-09-09T03:15:48Z

个人比较倾向于像 transformer 这一类的名称，这样其值的格式就比较宽泛，例如，可以用 Map 对象格式去做简单的转换，也可以传入函数做像日期范围那样复杂的转换。

我之前也是这样子想的, 在ProTable添加一个顶层属性transformer, 然后进行转换, 但是我想的是统一, 因为现在ProTable和Form之间是都是依赖于 column这个props的.

shaodahong · 2020-09-09T03:18:09Z

ant-design/ant-design#19727 (comment)

之前这里讨论过类似的，其实不仅是字段的转化，还会涉及到值的转化

yutingzhao1991 · 2020-09-09T04:05:05Z

nameTransform: ['startDate', 'endDate'], +1，其实就是对 Filed 的 name 做了一个转换。

afc163 · 2020-09-09T04:08:03Z

建议用 function 而不是 array 来描述，另外 nameTransform 看不出来是转换到哪了，转换场景是什么。

这样如何？

search: {
  transform: (fields) => {
    return fields;
  },
  customRequest: (fields) => {
    // axio.get(fileds);
  },
},

itsuki0927 · 2020-09-09T04:09:32Z

建议用 function 而不是 array 来描述。

复杂情况下用function不是更好嘛, 简单的转化使用string | array即可.

chenshuai2144 · 2020-09-09T05:25:41Z

@afc163 这个其实是数组值的 name 映射，如果不能配置要 function 的话，可视化配置就没法完成了。

name-> 多个name 是个比较常见的场景，现在就是要通过 onFinish 这个方法来进行映射，如果是方法反而有点难用了

afc163 · 2020-09-09T05:39:51Z

映射 API 的可读性很差，不太能看出来干啥用的。

itsuki0927 · 2020-09-09T06:51:27Z

@afc163 根据两个数组[key], [value] 生成相对应{key: value}对象. 类似于lodash的zipObject.

映射的话两个元素的数组还算好理解, 如果是三个以上可读性确实是个问题, 所以我感觉这种的话, 在提供一个函数出来进行处理更加适合, 也就是说映射API就只有string, [string]、[string, string], 不提供多的映射API,其他要处理的都算是复杂映射,通过函数来处理.

zombieJ · 2020-09-09T08:45:57Z

要不加个 search，把 hideInSearch 收编到一起？

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    search: false,
  {
    title: '创建时间',
    dataIndex: 'created_at',
    valueType: 'dateRange',
    search: {
      queryParam: ['startTime', 'endTime'],
    },
  },
];

itsuki0927 · 2020-09-09T08:49:51Z

要不加个 search，把 hideInSearch 收编到一起？

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    search: false,
  {
    title: '创建时间',
    dataIndex: 'created_at',
    valueType: 'dateRange',
    search: {
      queryParam: ['startTime', 'endTime'],
    },
  },
];

这样子是可以的, 但是如果是ProForm创建也需要transformer呢?

afc163 · 2020-09-09T08:50:51Z

有函数就够用了，不再提供语法糖了。

itsuki0927 · 2020-09-09T13:11:00Z

如果是采用函数的话, 应该怎么设计呢, search: (fieldName, value, values) => newFieldName这种方式?

kerm1it · 2020-09-09T13:15:52Z

如果是采用函数的话, 应该怎么设计呢, search: (fieldName, value, values) => newFieldName这种方式?

应该是在顶级定义一个函数，把值传进去，然后返回新的值，方法中可以对字段和值进行任意转化，返回的值会直接用于搜索。

itsuki0927 · 2020-09-09T13:33:02Z

如果是采用函数的话, 应该怎么设计呢, search: (fieldName, value, values) => newFieldName这种方式?

应该是在顶级定义一个函数，把值传进去，然后返回新的值，方法中可以对字段和值进行任意转化，返回的值会直接用于搜索。

这样子的话,感觉会有一些重复操作, 比如说dateRange类型的数据, 每一个都得转成{startTime:'xxx', endTime: 'xxx'}, 虽然可以将函数拆分成最小单元, 然后利用组合的方式来进行复用, 但是现在已经有一个顶级API beforeSubmitValue就是这样子的一个功能.

beforeSearchSubmit : 搜索之前进行一些修改

hengkx · 2020-09-11T05:37:39Z

check ci

packages/table/src/Form/index.tsx

hengkx · 2020-09-11T05:40:40Z

单元测试多增加一点

hengkx · 2020-09-11T05:41:39Z

itsuki0927 · 2020-09-11T06:10:11Z

@hengkx 好的, 我晚点增加一些测试用例, 感谢🙏.

hengkx · 2020-09-11T07:14:49Z

标题也改一下吧

chenshuai2144 · 2020-09-15T07:07:19Z

@hengkx @afc163

  transform: fields => {
        return {
          startTime: fields[0],
          endTime: fields[1],
        };
      },

是不是可以支持一下简写，

  //  { [transform[0]: filedValue[0] }
  transform: ['startTime','endTime']

zombieJ · 2020-09-15T07:55:44Z

@hengkx @afc163

  transform: fields => {
        return {
          startTime: fields[0],
          endTime: fields[1],
        };
      },

是不是可以支持一下简写，

  //  { [transform[0]: filedValue[0] }
  transform: ['startTime','endTime']

先别了，否则又绕回来了。fields 作为入参会更清晰些

chenshuai2144 · 2020-09-19T14:25:12Z

加个 demo 吧，输出一下 onFinish 的内容

itsuki0927 · 2020-09-20T03:10:11Z

是文档中加一个demo,还是测试案例加一个demo?

chenshuai2144 · 2020-09-22T04:12:11Z

文档中加一个，用于展示能力，这个api 文档不一定能看懂

s464446877 · 2020-09-23T04:37:38Z

那么最终这个问题是需要怎么弄来解决？

chenshuai2144 · 2020-09-27T13:25:16Z

@itsuki0927 merge 一下 master，这个 pr 可以合了

itsuki0927 · 2020-09-28T01:03:12Z

@chenshuai2144 不好意思,最近课有点多,我今天合并master, 解决了冲突,然后运行yarn test的时候, 有这个错误, 是因为antd版本的问题? 我目前版本antd:4.6.4.我点击到ConfigProvider里面看的属性的时候也没找到这个属性.

chenshuai2144 · 2020-09-28T02:41:52Z

@itsuki0927 你merge 一下master 的yarn ，这个就是4.6.4 增加的新featrue

packages/table/src/Form/index.tsx

github-actions · 2020-09-29T06:11:48Z

⚡️ Deploying PR Preview 10519e9 to surge.sh ... Build logs

_{🤖 By surge-preview}

github-actions · 2020-09-29T06:28:32Z

😭 Deploy PR Preview 10519e9 failed. Build logs

_{🤖 By surge-preview}

github-actions · 2020-09-29T06:39:19Z

⚡️ Deploying PR Preview 10519e9 to surge.sh ... Build logs

_{🤖 By surge-preview}

github-actions · 2020-09-29T06:56:53Z

😭 Deploy PR Preview 10519e9 failed. Build logs

_{🤖 By surge-preview}

💥 feat(table): add form values to rename fields

0ad0a0a

chenshuai2144 reviewed Sep 9, 2020

View reviewed changes

packages/table/src/Form/index.tsx Show resolved Hide resolved

chenshuai2144 reviewed Sep 9, 2020

View reviewed changes

packages/table/src/Form/index.tsx Outdated Show resolved Hide resolved

This was referenced Sep 9, 2020

👑 [需求] pro-table 时间字段在编辑的form 里valueType是datetime在搜索中往往是 dateTimeRange #429

Closed

👑 [需求] pro-table v2.6.1 关于时间范围筛选的问题，搜索值不是一个数组 #318

Closed

hengkx reviewed Sep 11, 2020

View reviewed changes

packages/table/src/Form/index.tsx Outdated Show resolved Hide resolved

🎨 chore(table): fix prettier & add test demo

a691058

yutingzhao1991 approved these changes Sep 15, 2020

View reviewed changes

🎨 chore(table): merge master & update snapshots

43266ae

itsuki0927 changed the title ~~💥 feat(table): add form values to rename fields~~ 💥 feat(table): add form values to transform fields Sep 28, 2020

hengkx reviewed Sep 28, 2020

View reviewed changes

packages/table/src/Form/index.tsx Outdated Show resolved Hide resolved

chenshuai2144 added 4 commits September 29, 2020 13:48

merge master

2d37e06

修改一下文案

2edfc57

add doc and demo

049753b

add doc and demo

bd55558

chenshuai2144 merged commit 10519e9 into ant-design:master Sep 29, 2020

itsuki0927 deleted the feat/rename-submit-value branch September 29, 2020 06:34

💥 feat(table): add form values to transform fields #426

💥 feat(table): add form values to transform fields #426

Conversation

itsuki0927 commented Sep 8, 2020 • edited by chenshuai2144

codecov bot commented Sep 8, 2020 • edited

Codecov Report

hengkx commented Sep 9, 2020

chenshuai2144 commented Sep 9, 2020

hengkx commented Sep 9, 2020

itsuki0927 commented Sep 9, 2020

hengkx commented Sep 9, 2020

chenshuai2144 commented Sep 9, 2020

hengkx commented Sep 9, 2020

itsuki0927 commented Sep 9, 2020 • edited

kerm1it commented Sep 9, 2020

afc163 commented Sep 9, 2020 • edited

itsuki0927 commented Sep 9, 2020

shaodahong commented Sep 9, 2020

yutingzhao1991 commented Sep 9, 2020

afc163 commented Sep 9, 2020 • edited

itsuki0927 commented Sep 9, 2020

chenshuai2144 commented Sep 9, 2020

afc163 commented Sep 9, 2020

itsuki0927 commented Sep 9, 2020 • edited

zombieJ commented Sep 9, 2020

itsuki0927 commented Sep 9, 2020

afc163 commented Sep 9, 2020

itsuki0927 commented Sep 9, 2020

kerm1it commented Sep 9, 2020

itsuki0927 commented Sep 9, 2020 • edited

hengkx commented Sep 11, 2020

hengkx commented Sep 11, 2020

hengkx commented Sep 11, 2020

itsuki0927 commented Sep 11, 2020

hengkx commented Sep 11, 2020

chenshuai2144 commented Sep 15, 2020 • edited

zombieJ commented Sep 15, 2020

chenshuai2144 commented Sep 19, 2020

itsuki0927 commented Sep 20, 2020

chenshuai2144 commented Sep 22, 2020

s464446877 commented Sep 23, 2020

chenshuai2144 commented Sep 27, 2020

itsuki0927 commented Sep 28, 2020 • edited

chenshuai2144 commented Sep 28, 2020

github-actions bot commented Sep 29, 2020

github-actions bot commented Sep 29, 2020

github-actions bot commented Sep 29, 2020

github-actions bot commented Sep 29, 2020

itsuki0927 commented Sep 8, 2020 •

edited by chenshuai2144

codecov bot commented Sep 8, 2020 •

edited

itsuki0927 commented Sep 9, 2020 •

edited

afc163 commented Sep 9, 2020 •

edited

afc163 commented Sep 9, 2020 •

edited

itsuki0927 commented Sep 9, 2020 •

edited

itsuki0927 commented Sep 9, 2020 •

edited

chenshuai2144 commented Sep 15, 2020 •

edited

itsuki0927 commented Sep 28, 2020 •

edited