@weart

Как заставить работать react-sortable-hoc в кастомном блоке?

Есть вот такой небольшой тестовый блок.

const {__} = wp.i18n;
import {
    SortableContainer,
    SortableElement,
    SortableHandle,
} from 'react-sortable-hoc';
import {arrayMove} from 'array-move';
const {registerBlockType} = wp.blocks;

registerBlockType('ay/video', {
    title: __('Video'),
    icon: 'carrot',
    category: 'common',
    attributes: {
        items: {
            default: [
                'Item 1',
                'Item 2',
                'Item 3',
                'Item 4',
                'Item 5',
                'Item 6',
            ],
        },
    },

    edit: (props) => {
        const {attributes, setAttributes} = props;

        const {items} = attributes;

        const SortableItem = SortableElement(({value}) => <li>{value}</li>);

        const SortableList = SortableContainer(({items}) => {
            return (
                <ul>
                    {items.map((value, index) => (
                        <SortableItem
                            key={`item-${index}`}
                            index={index}
                            value={value}
                        />
                    ))}
                </ul>
            );
        });

        const onSortEnd = ({oldIndex, newIndex}) => {
            setAttributes(({items}) => ({
                items: arrayMove(items, oldIndex, newIndex),
            }));
        };

        return (
            <div className={props.className}>
                <SortableList items={items} onSortEnd={onSortEnd} />
            </div>
        );
    },

    save(props) {
        return null;
    },
});


Пункты перетаскиваются, но сортировка не сохраняется (они возвращаются на обратную позицию, если отпустить курсор). Как сие пофиксить?
  • Вопрос задан
  • 15 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы