Блог

Я хотел бы разрешить своим пользователям одновременно расширять только одну строку. С помощью сетки данных по умолчанию вы можете развернуть столько строк, сколько захотите, увеличивая занимаемое вертикальное пространство вместе с увеличением объема данных, отображаемых на экране.

Предполагая, что настройки по умолчанию нет (я ее не нашел), я думаю, что единственный способ добиться этого-вручную настроить состояние в магазине исправлений. Я могу видеть состояние в магазине redux здесь:

Я довольно слаб в редактировании, и я не уверен, что лучший способ обеспечить, чтобы в «расширенном» массиве было только одно значение. У кого-нибудь есть какие-нибудь идеи, чтобы я попробовал? Заранее спасибо!

Я удивил самого себя, проб и ошибок прокладывая свой путь к решению. В основном я использовал useSelector, чтобы получить состояние того, что расширено в моем списке, а затем настроить эффект для отслеживания изменений этого массива. Если массив больше единицы, я просто переключаю первый элемент в массиве с помощью useDispatch.

Фрагмент кода:

     const expanded  = useSelector(state => 
        state.admin.resources.PackageInfo.list.expanded
    );

    const dispatch = useDispatch();

    useEffect(() => {
      if(expanded.length > 1) 
        dispatch(toggleListItemExpand('PackageInfo', expanded[0]));
    }, [expanded]);
 

Мне любопытно получить какую-либо обратную связь по этому поводу, я не уверен, каковы будут побочные эффекты или последствия пользовательских отправок в магазин. Я думаю, что завтра я попытаюсь расширить это до многоразового использования, которое я смогу использовать во всех своих списках.

Редактировать:

Я переместил это в крюк, и теперь он работает в нескольких списках. Вот полный крючок:

     import { useEffect } from "react";
    import { useSelector, useDispatch } from "react-redux";
    import { toggleListItemExpand } from "react-admin";
        
    const useExpandOnlyOne = (resource) => {
      const expanded = useSelector(
        (state) => state.admin.resources[resource].list.expanded
      );
      const dispatch = useDispatch();
    
      useEffect(() => {
        if (expanded.length > 1)
          dispatch(toggleListItemExpand(resource, expanded[0]));
      }, [expanded]);
    };
    
    export default useExpandOnlyOne;
 

Я просто называю это в своих списках на верхнем уровне так:

     const PackageList = (props) => {
        useExpandOnlyOne(props.resource);
    ....