withSequence

[felippenardi]

@raphamorim @emersonlaurentino How do you guys see the implementation of this?

[felippenardi]

I was thinking on making the next HOC know what is the animationDuration of the previous HOC so it can set a animationDelay for itself.

[emersonlaurentino]

@felippenardi is a good idea, but I believe that before you should put the parameterization in hoc.

something like:

import { withBounce } from 'react-motions'

const ComponentWithBounce = withBounce(<div>Let's bounce here</div>, { duration: 2 })

[felippenardi]

@emersonlaurentino Thanks for the suggestion!

In this example, how could we pass a custom animation duration for withJello?

const SequencialAnimations = withSequence(
  withShake,
  withJello,
  <div>First shake it then jello! </div>
)

[raphamorim]

@felippenardi what do you think:

const composedShake = withConfig(withShake, {}) // 
const composedJello = withConfig(withJello, {}) //

const SequencialAnimations = withSequence(
  composedShake,
  composedJello,
  <div>First shake it then jello! </div>
)

[raphamorim]

I guess if we want to keep the "whole idea of animations based on pure functions compositions" is to compose everything (even the configuration)

[felippenardi]

@raphamorim withConfig would generate a new HOC with the set config, correct?

When withSequence is iterating through each HOC, how can it access the animation-duration that is going to be generated using it?

[felippenardi]

@raphamorim Another question, to implement withConfig(withShake, {})), the withShake function would have to accept the config as a second argument, wouldn't it? If not, how can you pass the options information from withConfig to withShake?

[raphamorim]

Yes, for while let's move forward with withAnimation(e.g: withShake, withBounce..) receiving animation configuration as the second argument.

Here's a draft of what I'm thinking about

const withSequence = (...fns) =>
  fns.reverse().reduce((prevFn, nextFn) =>
    value => nextFn(prevFn(value)),
    value => value
  );

const withConfig = (fns, configuration, component = null) => (
   (component) => fns(component, configuration)
);

So probably will something like:

const composedShake = withConfig(withShake, {}) 
const composedJello = withConfig(withJello, {})

const SequencialAnimations = withSequence(
  composedShake,
  composedJello,
  <div>First shake it then jello! </div>
)

[felippenardi]

@emersonlaurentino @raphamorim Guys! Just managed to get a working withSequence and withConfig :) Just need to polish it up and will send a PR so you can give your feedbacks on it.

What is the interface do you think is the best fit for withConfig configuration argument? Are we going to use predefined values such as delay, duration, fillMode and name?

[raphamorim]

Yes, let's keep it. If it change so we need to release some breaking version

[emersonlaurentino]

@felippenardi name dont need, he is static inside hoc.

would avoid this situation:

withConfig(withJello (), { name: 'shake' })