ArrayTable.SortHandle 拖拽完的回调函数？如何 JSON Schema 自定义此回调

[hylerrix]

API 文档没写哇。https://antd.formilyjs.org/components/array-table ArrayTable.SortHandle。

sortHandler: {
  type: 'void',
  'x-component': 'ArrayTable.Column',
  'x-component-props': {
    width: 50,
    title: 'Sort',
    align: 'center',
  },
  properties: {
    sort: {
      type: 'string',
      'x-decorator': 'FormItem',
      'x-component': 'ArrayTable.SortHandle',
      'x-component-props': {
        onSort: () => {
          props.dragRow()
        },
        onMoveUp: () => {
          debugger
          props.dragRow()
        },
      },
      required: true,
    },
  },
},

• 这个 onSort 是 ChatGPT 4 告诉我的。并不存在这个回调函数。
• 文档里说的 onMoveUp 我看也没用。

我在别的地方输出整个表格变量的值，顺序是变了。但也不能通过如下来监听：

useEffect(() => {
  console.log('!!!props.data changed', props.data)
}, [JSON.stringify(props.data)])

这样也没用？props.data 即是这个表格数据，里面是 Proxy 数组。

[hylerrix]

官网就一行文字 “Reference https://ant.design/components/icon-cn/” 毫不相关，让人摸不着头脑。

本来从不看源码的我，被迫看了下源码：

// node_ modules > @formily > antd > esm > array-base > index.js
// ArrayBase.SortHandle 定义了实现，使用到了 SortableHandle
// SortableHandle 来源于别的开源框架 `react-sortable-hoc`，这个框架支持 onSortOver

但我直接：

'x-component-props': {
  onSortOver: () => {
    props.dragRow()
  },
},

并没有成功。但是 node_modules 上述文件的 debugger 中 props.onSortOver 是存在的。

var SortHandle = SortableHandle(function (props) {
  debugger
  if (props.onSortEnd) {
      console.log('!!!nodemodules...onSortEnd')
  }
  var prefixCls = usePrefixCls('formily-array-base');
  return (React.createElement(MenuOutlined, __assign({}, props, { className: cls("".concat(prefixCls, "-sort-handle"), props.className), style: __assign({}, props.style) })));
});

看起来没真正传入给 react-sortable-hoc。目前正在研究中。

官网就一行文字 “Reference https://ant.design/components/icon-cn/ 毫不相关，让人摸不着头脑。

这里应该指的是 table-cn 吧？但是 AntD 的 Table 的拖拽基于 dnd-kit，并不是 formily-antd 里基于的 react-sortable-hoc。

[janryWang]

ArrayTable 目前没有开放这个功能，可以考虑提个 PR 来支持吗？

[hylerrix]

暂时水平不够 🤣 我最后只能遗憾使用粘贴源码到仓库中的方式来维护了：