CODEWITHSUNDEEP
javascriptreact-motion
jubi
jubi

Reputation: 11

How to map inside the TransitionMotion wrapper?

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!

Upvotes: 1

Views: 62

Answers (1)

chenglou
chenglou

Reputation: 3640

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?

Upvotes: 0

Related Questions