Установить выбранное событие с помощью redux и response-window / virtualized с анимацией - PullRequest
0 голосов
/ 21 июня 2020

Я использую виртуальный список с виртуальным списком материала UI и окном реакции

Я пытаюсь достичь двух вещей:

1- в новом событии мне нужно добавить анимацию, которая подталкивает в списке и поместите новое событие первым

2 - событие щелчка изменит маршрут по идентификатору события. и теперь с URL-адресом мы можем загрузить страницу (и go для выбранного события)

в моем списке будет около 50-100 событий, которые будут обновляться во время обновления событий, это не статистика c список. лучше использовать простой список, который отображает все элементы вместо виртуального списка? ?

my Component

const EventsContainer: React.FC = () => {
  console.log('render events contiNER');
  const events = useSelector<AppState, Events[]>(selectAllEvents);
  const containerStyle = useStyles();
  const [selectedIndex, updateSelectedIndex] = useState({});

  const renderItem = (itemProps: ListChildComponentProps) => {
    console.log('render ITEM');
    const { style, index } = itemProps;
    return (
      <EventItem
        style={style}
        data={events[index]}
        selected={selectedIndex === index}
        onSelect={(event: Event) => updateSelectedIndex(event.id)}
      />
    );
  };

  return (
    <Card variant="outlined" className={containerStyle.root}>
      <Box className={containerStyle.list}>
        <AutoSizer>
          {({ height, width }) => (
            <FixedSizeList
              width={width}
              height={height}
              itemSize={55}
              itemCount={events.length}
            >
              {renderItem}
            </FixedSizeList>
          )}
        </AutoSizer>
      </Box>
    </Card>
  );
};

В моем хранилище redux у меня есть объекты событий, которые я выбираю с помощью селектора, который превращает его в массив, и у меня есть «currrentEvent», который сохраняет текущий идентификатор события

Щелчок по событиям должен изменить маршрут (без refre sh)

, поэтому теперь я пытаюсь достичь двух вышеперечисленных задач, спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...