spring-range.txs

const SpringRange = (p) => {
  const { items, children, keys, from, enter, exit, update, ...rest } = p;
  let map = new Map();

  const renderChild = ({ delta }, item, index) => {
    const range = [index / items.length, 1]
    const itemKey = keys(item, index);
    let prevItem = map.get(index);

    console.log(prevItem)

    let fromProps;
    let toProps;
    if (!prevItem) {
      fromProps = from({ item, index });
      toProps = enter({ item, index });
    } else {
      fromProps = prevItem;
      toProps = update({ item, index });
    }

    const props = {};
    for (const k in fromProps) {
      const fromVal = fromProps[k];
      const toVal = toProps[k];
      if (toVal !== undefined) {
        props[k] = delta.interpolate(range, [fromVal, toVal]);
      } else {
        props[k] = fromVal;
      }
    }

    map.set(index, props);

    return children({ item, index, props, key: itemKey });
  };

  return (
    <Spring
      native={true}
      config={{ duration: 1000, easing: easePolyOut }}
      from={{ delta: 0 }}
      to={{ delta: 1 }}
      reset={true}
      {...rest}
    >
      {props => items.map((item, index) => renderChild(props as any, item, index))}
    </Spring>
  )
};