[英]Custom react-admin drag & drop list
It can't drag.拖不动。 What is wrong with it?
它有什么问题?
I'm using react-sortable-hoc with material-ui to custom react-admin list page with drag & drop sortable.我正在使用带有 material-ui 的 react-sortable-hoc 来自定义具有拖放排序功能的 react-admin 列表页面。
Demo: https://codesandbox.io/s/vibrant-visvesvaraya-4k3gs演示: https://codesandbox.io/s/vibrant-visvesvaraya-4k3gs
Source code: https://github.com/tangbearrrr/poc-ra-sort-drag/tree/main源代码: https://github.com/tangbearrrr/poc-ra-sort-drag/tree/main
The sortable method you are using is from react-sortable-hoc , which adds huge complexity to react-admin.您使用的 sortable 方法来自react-sortable-hoc ,这给 react-admin 增加了巨大的复杂性。
Not so fast, I have run out of attempts trying to debug your code and come up with another solution works just fine but not so ideal, is to use sortablejs
:不是那么快,我已经尝试调试你的代码并提出另一个解决方案工作得很好但不太理想,就是使用
sortablejs
:
yarn add sortablejs
yarn add @types/sortablejs --dev
Do not mess up with
react-sortablejs
, this also applies the same complexity level asreact-sortable-hoc
.不要搞砸
react-sortablejs
,这也适用于与react-sortable-hoc
相同的复杂度级别。
Let's use your cmsLanguage as an example, with changes to use Datagrid
instead.让我们以您的cmsLanguage为例,更改为使用
Datagrid
。
Just be reminded that this working solution needs several retries on null el
(eg your data is fetching, slow.network speed, etc).请注意,此工作解决方案需要在 null
el
上重试几次(例如,您的数据正在获取、网络速度慢等)。 The code below has 3 retries, 1500 milliseconds per each retry.下面的代码有 3 次重试,每次重试 1500 毫秒。 The initialisation will stop after 3 attempts.
初始化将在 3 次尝试后停止。
import {Datagrid, ShowButton, TextField} from "react-admin";
import * as React from "react";
import MenuIcon from '@mui/icons-material/Menu';
import {useEffect} from "react";
import Sortable from 'sortablejs';
const LanguageList = () => {
// This will run the effect after every render
useEffect(() => {
// https://github.com/SortableJS/Sortable
const retries = 3;
const millisecords = 1500;
let attempts = 0;
const retrySortable = () => {
const el = document.querySelector('#sortable-list tbody');
if (!el) {
if (++attempts >= retries) {
console.log(`cannot initialise sortable after ${retries} retries.`);
} else {
setTimeout(() => retrySortable(), millisecords);
}
} else {
// @ts-ignore
new Sortable(el, {
handle: ".handle",
draggable: "tr",
animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
// Element dragging ended
onEnd: (evt) => {
// @ts-ignore
const reorderedList: string[] = [];
const list = document.querySelectorAll('#sortable-list tbody td.column-name span');
[].forEach.call(list, function (span: Element) {
reorderedList.push(span.innerHTML);
});
console.log(JSON.stringify(reorderedList));
console.log(evt);
},
});
}
}
retrySortable();
}, []);
return (
<section id="sortable-list">
<Datagrid>
<MenuIcon sx={{cursor: "pointer"}} className="handle"/>
<TextField source="name"/>
<ShowButton/>
</Datagrid>
</section>
);
};
export default LanguageList;
When someone has a request for a demo, I will draw some time to make this a GitHub repo for better reference.当有人要求演示时,我会抽出一些时间将其制作成 GitHub repo 以供更好地参考。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.