How to map inside the TransitionMotion wrapper?

Question

I'm trying to implement react-motion's TransitionMotion wrapper and made it to the home stretch but there's one more issue. In this example the interpolated -array consists of two elements (because chartConfigs.length is currently 2) and I've nested another map inside the first one. Everything else works fine except I obviously get two rows when I only want one. How to go around this in a clean way?

const getStyles = () => {
    return chartConfigs.map(datum => ({
      data: datum,
      style: {
        opacity: spring(1, { stiffness: 30})
      },
      key: datum.name
    }))
  }

  const getDefaultStyles = () => {
    return chartConfigs.map(datum =>({
      data: datum,
      style: {
        opacity: 0
      },
      key: datum.name
    }))
  }

return (
      <TransitionMotion
        defaultStyles={getDefaultStyles()}
        styles={getStyles()}

      >
        {(interpolated) => (
          <div>
            {interpolated.map((config) => (
              <div key={config.key} style={{ ...config.style }}>
                <div className='row' style={{ paddingTop: "30px" }}>
                  {chartConfigs.length > 1 && 
                    chartConfigs.map((chartConfig, i) => {
                      return (
                        <div
                          className={`col-lg-${columnsCount}`}
                          key={"chart-toggler" + i}
                        >
                            <div className='card m-b-30'>
                              <h4 className='card-title font-16 mt-0'>
                                {chartConfig.name}
                              </h4>
                            </div>
                          </div>                  
                      )
                    })}
                </div>
              </div>
            ))}
          </div>
        )}
      </TransitionMotion>
    )

EDIT:

Here's the new version of my solution but with the struggle of displaying elements next to each other on the row:

<div className='row' style={{ paddingTop: "30px" }}>
    {chartConfigs.length > 1 ? 
      <TransitionMotion
        defaultStyles={getDefaultStyles()}
        styles={getStyles()}
        willEnter={willEnter}
        willLeave={willLeave}
      >
        {interpolated => (
          <div id='container' style={{width: '100%', display: 'inline-block'}} >
            {interpolated.map((config, i) => (
              <div key={config.key} style={{ ...config.style }}>
                {(selected = config.data.name === currentChartName)}
                <div
                  className={`col-lg-${columnsCount}`}
                  key={"chart-toggler" + i}
                >
                  <div
                    className={
                      selected
                        ? "card m-b-30 text-white bg-primary"
                        : "card m-b-30"
                    }
                    style={{
                      width: '100%',
                      height: "calc(100% - 30px)",
                    }}
                    onClick={() => setCurrentChartName(config.data.name)}
                  >
                    <div className='card-body'>
                      <h4 className='card-title font-16 mt-0'>
                        {config.data.name}
                      </h4>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </TransitionMotion>
      : null }
    </div>

Additionally, I'm having trouble understanding how to use TransitionMotion when component unmounts. So basically the fade out effect when I render a different component on the page. Can I use the willLeave() function for this? Currently this is what it looks like but I don't know how to take it further:

const willLeave = () => ({
  opacity: spring(0)
})

Thanks for your time and help!

score 0 · Answer 1 · answered May 24 '19 at 02:27

0

TransitionMotion intentionally gives you more than the number of rows you’re currently rendering, since it remembers all the rows that are in the process of animating out.

So it depends on what you’re trying to achieve here. My hunch is that you’re probably misused chatConfigs in the inner level. You should be accessing config.data.name instead of chartConfig.name, no? You know what I mean?

answered May 24 '19 at 02:27

chenglou

3,640
2
25
33

Yes, thanks for pointing that out! I did originally try that and it gets me quite far as well. Where I do eventually get stuck again is arranging the divs inside the row div. Again, this is not necessarily a problem with react-motion, but because I'm still new at coding :) So I got rid of the duplicate row issue, all elements are inside one row element but all on top of each other. I'm not sure why `display: inline-block` doesn't fix that, and the only difference to the previous styling I can think of is the div right before mapping interpolated. I'll post the edited version below – jubi May 27 '19 at 10:33

How to map inside the TransitionMotion wrapper?

1 Answers1