использовать переход с реагирующей пружиной при изменении компонента - PullRequest
Новая
       2

использовать переход с реагирующей пружиной при изменении компонента

0 голосов
/ 11 ноября 2019

Я пытаюсь оживить карту и выйти. Если выбрано значение, появится карта. Если выбранный элемент не определен, карта исчезает. Я получил это на работу.

Следующее, что я попытался сделать, это сделать так, чтобы, если выбор изменился (Новый элемент) - оживить карту и оживить новую. Я запутался в том, как заставить это работать ... вот что я пытался сделать такого рода работы.

Очевидно, я не понимаю, как это должно быть сделано. Мне интересно, нужно ли мне разбить это на две карты и запустить useChain. 

const App: React.FC = () => {

  //...

  const [selectedItem, setSelectedItem] = useState<TimelineItem | undefined>(undefined);
  const [lastSelectedItem, setLastSelectedItem] = useState<TimelineItem>({
    content: '',
    start: new Date(),
    id: 0,
  });

 //...

  const transitions = useTransition(
    [selectedItem, lastSelectedItem],
    item => (item ? item.id : 0),
    {
      from: { opacity: 0 },
      enter: { opacity: 1 },
      leave: { opacity: 0 },
    }
  );

  return (
      <Timeline
        onItemSelect={item => {
          if (selectedItem) setLastSelectedItem(selectedItem);
          setSelectedItem(item);
        }}
      />
      {transitions.map(({ item, key, props }) => {
        return (
          item && (
            <animated.div style={props}>
              {item === selectedItem ? (
                <ItemDetails
                  item={selectedItem} // If the selected item is undefined, this will not be running (happens when unselecting something)
                  groups={groups}
                  key={key || undefined} // key becomes undefined since item is
                ></ItemDetails>
              ) : (
                false && ( // The last item never shows, it still has the data for the lastSelectedItem (For the fade out while the new Item is being shown or there is no new item).
                  <ItemDetails
                    item={lastSelectedItem}
                    groups={groups}
                    key={key || undefined}
                  ></ItemDetails>
                )
              )}
            </animated.div>
          )
        );
      })}
  );
};
...