@startlibs/components 1.0.4 → 1.1.0

package/src/Flip.jsx

@@ -0,0 +1,560 @@
+import React, {useLayoutEffect} from 'react'
+import _ from 'lodash/fp'
+import {_s, animationTiming, callIfFunction, oneWayAnimation} from '@startlibs/utils'
+import {useConstant, useHiddenFill, willUseSharedCallback} from '@startlibs/core'
+import {ifUndefined} from '@startlibs/utils'
+
+const getMargins = (domNode) => {
+  const {marginTop,marginLeft,marginBottom,marginRight,paddingTop} = window.getComputedStyle(domNode);
+  return {marginTop,marginLeft,marginBottom,marginRight,paddingTop}
+}
+
+const getParentProperties = (parentNode) => {
+  if (!parentNode) return {}
+  const {marginTop,marginLeft,marginBottom,marginRight,paddingBottom,paddingTop} = window.getComputedStyle(parentNode);
+  return {parentStyle:{marginTop,marginLeft,marginBottom,marginRight,paddingBottom,paddingTop},parentNode}
+
+}
+
+export const toPosition = (domNode, parentRect = (domNode.offsetParent ? domNode.offsetParent.getBoundingClientRect() : {
+  top: 0,
+  left: 0
+}), {allowFixed, finalPosition,withMargins} = {}) => {
+  if ((!allowFixed && domNode.style.position === 'fixed') || domNode.style.display === 'none') return
+  const {left, top, height, width} = domNode.getBoundingClientRect()
+  const margins = withMargins ? getMargins(domNode) : {}
+
+  // const {offsetLeft, offsetTop} = domNode
+  return {
+    domNode,
+    nextSibling: domNode.nextSibling,
+    top: finalPosition ? domNode.offsetTop : (top - parentRect.top),
+    left: finalPosition ? domNode.offsetLeft : (left - parentRect.left),
+    height, width,
+    ...getParentProperties(domNode.parentNode),
+    ...margins
+  }
+}
+
+const sumWithPx = (...args) => args.map(parseFloat).reduce((a, b) => a + b, 0) + 'px'
+
+const childMAp = (childs, fn) => {
+  for (var c of childs) {
+    fn(c)
+  }
+}
+
+export const defaultAnimationMaker = animationTiming('0.25s ease-out')
+const defaultEnterAnimation = oneWayAnimation('opacity: 0;', 'opacity: 1;')
+const defaultSwitchAnimation = oneWayAnimation(`opacity: 1;`, `opacity: 0;`, `opacity: 0;`)
+
+const SHORT_ANIMATIONS = {
+  fadeIn: defaultEnterAnimation
+}
+const applyDefault = (k) => SHORT_ANIMATIONS[k] || k
+
+export const formatAnimation = (animationName /* array or string or fn with array or string*/, animationTimer /* string or fn */, reverse) => {
+  const animationMaker = typeof animationTimer === 'string' ? ((k) => k + ' ' + animationTimer) : animationTimer
+  const animationNameExecuted = typeof animationName === 'function' ? animationName() : animationName
+  const keyframes = [].concat(typeof animationNameExecuted === 'string' ? animationNameExecuted.split(',') : animationNameExecuted)
+  const applyReverse = (k) => reverse ? k + ' reverse' : k
+  return keyframes.map(k => applyReverse(k.trim().indexOf(' ') < 0 ? animationMaker(k) : applyDefault(k))).join(', ')
+}
+
+const cloneWrapper = (element) => {
+  const cloned = element.cloneNode(true)
+  const tempWrapper = document.createElement('div');
+  [].slice.call(cloned.childNodes).forEach(c => tempWrapper.append(c))
+  const {display, width, height, padding, borderLeftWidth, borderRightWidth, borderBottomWidth, borderTopWidth} = window.getComputedStyle(element)
+  Object.assign(tempWrapper.style, {
+    display,
+    width: sumWithPx(width, '-' + borderLeftWidth, '-' + borderRightWidth),
+    height: sumWithPx(height, '-' + borderBottomWidth, '-' + borderTopWidth),
+    padding,
+    position: 'absolute',
+    top: 0,
+    left: 0
+  })
+  return tempWrapper
+}
+
+const morphingEndEvents = new Map()
+const morphTime = new Map()
+const continueSwitchCallbacks = new Map()
+
+const continueSwitchOnClone = (oldWrapper) => (newWrapper) => {
+  const prevOldClone = oldWrapper.querySelector('.JS-old-snap')
+  const prevNewClone = oldWrapper.querySelector('.JS-new-snap')
+  const oldClone = newWrapper.querySelector('.JS-old-snap')
+  const newClone = newWrapper.querySelector('.JS-new-snap')
+  oldClone.style.animationDelay = getDelays(prevOldClone, oldClone.style.animation)
+  newClone.style.animationDelay = getDelays(prevNewClone, newClone.style.animation)
+  morphTime.set(oldClone, morphTime.get(prevOldClone))
+  morphTime.set(newClone, morphTime.get(prevNewClone))
+  oldClone.addEventListener('animationend', oldClone.remove)
+  newClone.addEventListener('animationend', finishSwitchNew(newClone, newWrapper))
+  continueSwitchCallbacks.delete(oldWrapper)
+  continueSwitchCallbacks.set(newWrapper, continueSwitchOnClone(newWrapper))
+}
+
+const finishSwitchNew = (clone, wrapper) => () => {
+  clone.remove()
+  const newChildren = [].slice.call(wrapper.children)
+  childMAp(newChildren, c => {
+    if (c.dataset) {
+      // Guard against stale "0" from a prior uncompleted cycle: always restore
+      // to empty when prev is "0" since "0" is never a legitimate captured value.
+      const prev = c.dataset.prevOpacity
+      c.style.opacity = (prev && prev !== '0') ? prev : ''
+    }
+  })
+  // wrapper.style.willChange = ''
+  continueSwitchCallbacks.delete(wrapper)
+}
+const supportsEvent = "onanimationend" in HTMLElement.prototype
+export const morph = (node, animation, callback) => {
+  if (!animation) {return}
+  const [cachedAnimation, cachedCallback] = morphingEndEvents.get(node) || []
+  const oldAnimation = cachedAnimation || node.style.animation
+  morphTime.set(node, Date.now())
+  const didNotStartPromise = Promise
+    .race([
+      new Promise(res => node.addEventListener('animationstart', res)),
+      new Promise((res,rej) => setTimeout(rej,supportsEvent? 1000 : 200)),
+    ])
+
+  node.style.animation = animation
+  if (!cachedCallback) {
+    const end = ({target}) => {
+      if (target !== node) return
+      morphTime.delete(node)
+      morphingEndEvents.delete(node)
+      node.removeEventListener('animationend', end)
+      callback && callback()
+      node.style.animation = oldAnimation
+    }
+    didNotStartPromise
+      .catch(() => end({target:node}))
+    node.addEventListener('animationend', end)
+    morphingEndEvents.set(node, [oldAnimation, end])
+  }
+}
+
+const hasClientRectChanged = (oldSnap, newSnap) => !['top', 'left', 'height', 'width'].every(_ => oldSnap[_] === newSnap[_])
+
+export const getClientRectAnimation = (oldSnap, newSnap, {skipTransform, smallJumpFix } = {}) => {
+  if (oldSnap && newSnap && hasClientRectChanged(oldSnap, newSnap)) {
+    const node = newSnap.domNode
+    const {offsetLeft, offsetTop, scrollHeight, clientHeight, scrollWidth, clientWidth} = node
+    const scrollTop = (node.parentNode && node.parentNode.scrollTop) || 0
+    const scrollLeft = (node.parentNode && node.parentNode.scrollLeft) || 0
+    const left = oldSnap.left - offsetLeft + scrollLeft
+    const top = oldSnap.top - offsetTop + scrollTop
+    const deltaHeight = oldSnap.height - newSnap.height
+    let heightFix = ''
+    let finalPadding = ''
+    if (deltaHeight > 0) {
+      const {paddingBottom} = window.getComputedStyle(node)
+      finalPadding = 'padding-bottom:' + paddingBottom + ';'
+      heightFix = `padding-bottom: ${sumWithPx(deltaHeight, paddingBottom) + (smallJumpFix || 0)};`
+    }
+    const overflowFix = scrollHeight > clientHeight || scrollWidth > clientWidth ? `overflow: hidden;` : ``
+    const transform = ((left !== 0 || top !== 0) && !skipTransform) ? `transform: translate(${left}px,${top}px);` : ''
+    const parentPaddingTopDelta = (parseInt(oldSnap.parentStyle?.paddingTop) || 0) - (parseInt(newSnap.parentStyle?.paddingTop) || 0)
+    const parentPaddingBottomDelta = (parseInt(oldSnap.parentStyle?.paddingBottom) || 0) - (parseInt(newSnap.parentStyle?.paddingBottom) || 0)
+    const oldMarginTop = (parseInt(oldSnap.marginTop) || 0) + parentPaddingTopDelta
+    const oldMarginBottom = (parseInt(oldSnap.marginBottom) || 0) + parentPaddingBottomDelta
+
+    const oldTransform = node.style.transform
+    return [oneWayAnimation(`
+        ${transform}
+        ${heightFix}
+        ${overflowFix}
+        margin-top: ${oldMarginTop}px;
+        margin-bottom: ${oldMarginBottom}px;
+        width: ${oldSnap.width}px;
+        height: ${Math.max(0,oldSnap.height+(smallJumpFix || 0))}px;
+        `, `
+        ${finalPadding}
+        ${oldTransform ? `transform:${oldTransform};` : ''}
+        ${overflowFix}
+        margin-top:${parseInt(newSnap.marginTop) || 0}px;
+        margin-bottom:${parseInt(newSnap.marginBottom) || 0}px;
+        width: ${newSnap.width}px;
+        height: ${Math.max(0,newSnap.height+(smallJumpFix || 0))}px;
+        `)]
+  } else {
+    return []
+  }
+}
+
+const getClientRectAnimationForSwitch = (oldSnap, newSnap, {skipTransform } = {}) => {
+  if (hasClientRectChanged(oldSnap, newSnap)) {
+    const node = newSnap.domNode
+    const {offsetLeft, offsetTop, scrollHeight, clientHeight, scrollWidth, clientWidth} = node
+    const scrollTop = node.parentNode?.scrollTop || 0
+    const scrollLeft = node.parentNode?.scrollLeft || 0
+
+
+    // get margin-bottom
+    const prevBorder = node.style.border
+    node.style.border = '1px solid transparent'
+    const borderHeight = node.clientHeight
+    node.style.border = prevBorder
+
+    // get negative margin top
+    const prevPadding = newSnap.paddingTop
+    const nonPaddingFixTop = newSnap.clonedNode.getBoundingClientRect().top
+    let topWithPaddingFix = nonPaddingFixTop
+    if (!parseInt(prevPadding)) {
+      node.style.paddingTop = '1px'
+      topWithPaddingFix = newSnap.clonedNode.getBoundingClientRect().top
+      node.style.paddingTop = ''
+    }
+
+    const newSnapNegativeTopMarginDelta = topWithPaddingFix - nonPaddingFixTop
+    const newSnapBottomMarginDelta = clientHeight - borderHeight
+
+    const left = oldSnap.left - offsetLeft + scrollLeft
+    const top = oldSnap.top - offsetTop + scrollTop - newSnapNegativeTopMarginDelta
+
+
+    const deltaHeight = oldSnap.height - newSnap.height
+    let heightFix = ''
+    let finalPadding = ''
+    if (deltaHeight > 0) {
+      const {paddingBottom} = window.getComputedStyle(node)
+      finalPadding = 'padding-bottom:' + paddingBottom + ';'
+      heightFix = `padding-bottom: ${sumWithPx(deltaHeight, paddingBottom)};`
+    }
+    const overflowFix = scrollHeight > clientHeight || scrollWidth > clientWidth ? `overflow: hidden;` : ``
+    const transform = ((left !== 0 || top !== 0) && !skipTransform) ? `transform: translate(${left}px,${top}px);` : ''
+
+
+    const oldTransform = node.style.transform
+    return [oneWayAnimation(`
+        ${transform}
+        ${heightFix}
+        ${overflowFix}
+        width: ${oldSnap.width}px;
+        height: ${oldSnap.height}px;
+        `, `
+        ${finalPadding}
+        ${oldTransform ? `transform:${oldTransform};` : ''}
+        ${overflowFix}
+        width: ${newSnap.width}px;
+        height: ${(newSnap.height - newSnapBottomMarginDelta)}px;
+        `)]
+  } else {
+    return []
+  }
+}
+
+const willPlaySwitch = (oldSnap, newSnap, {switchIn, switchOut, switchAnimation, timing, transformHeight = _.identity}) => {
+  const realWrapper = newSnap.domNode
+  const newChildren = [].slice.call(realWrapper.children)
+  // realWrapper.style.willChange = 'width,height,margin-top;'
+  if (realWrapper.firstChild) {
+    realWrapper.insertBefore(oldSnap.clonedNode, realWrapper.firstChild)
+    realWrapper.insertBefore(newSnap.clonedNode, realWrapper.firstChild)
+  } else {
+    realWrapper.append(oldSnap.clonedNode)
+    realWrapper.append(newSnap.clonedNode)
+  }
+
+  oldSnap.clonedNode.className = oldSnap.clonedNode.className + ' JS-old-snap'
+  newSnap.clonedNode.className = newSnap.clonedNode.className + ' JS-new-snap'
+  // newSnap.clonedNode.style.willChange = 'width,height,opacity'
+  // oldSnap.clonedNode.style.willChange = 'width,height,opacity'
+  const realWrapperRect = realWrapper.getBoundingClientRect()
+  const resizeToNew = oneWayAnimation(`
+    overflow: hidden;
+    width: ${oldSnap.width}px;
+    height: ${oldSnap.height}px;
+    `, `
+    overflow: hidden;
+    width: ${newSnap.clonedNode.style.width};
+    height: ${callIfFunction(transformHeight,newSnap.clonedNode.style.height,realWrapperRect)};
+    `)
+
+  childMAp(newChildren, c => {
+    if (c.dataset && !c.dataset.noFlip) {
+      // Don't capture "0" as prevOpacity — it's always a transient value from
+      // a prior uncompleted willPlaySwitch. Otherwise finishSwitchNew restores
+      // opacity to "0" permanently, leaving content invisible.
+      if (c.style.opacity && c.style.opacity !== '0') {
+        c.dataset.prevOpacity = c.style.opacity
+      }
+      c.style.opacity = '0'
+    }
+  })
+  childMAp([].slice.call(oldSnap.clonedNode.children), c => {
+    if (c.dataset && c.dataset.noFlip) {
+      c.style.opacity = '0'
+    }
+  })
+
+  const resizeOld = (oldSnap.width > newSnap.width || oldSnap.height > newSnap.height) ? [resizeToNew] : [resizeToNew]
+  const resizeNew = (oldSnap.width < newSnap.width || oldSnap.height < newSnap.height) ? [resizeToNew] : [resizeToNew]
+
+  return () => {
+    morph(oldSnap.clonedNode,
+      formatAnimation([].concat(switchOut || switchAnimation, resizeOld), timing),
+      () => oldSnap.clonedNode.remove()
+    )
+    newSnap.clonedNode.style.opacity = '0'
+    continueSwitchCallbacks.set(realWrapper, continueSwitchOnClone(realWrapper))
+
+    morph(newSnap.clonedNode,
+      formatAnimation([formatAnimation(
+        switchIn || switchAnimation,
+        timing,
+        !switchIn
+      )].concat(resizeNew), timing),
+      finishSwitchNew(newSnap.clonedNode, realWrapper)
+    )
+  }
+}
+
+
+const getDelays = (el, animation) => {
+  const delayStr = (morphTime.get(el) - Date.now()) + 'ms'
+  return animation.split(',').map(_ => delayStr).join(',')
+}
+
+class Snapshoter extends React.Component {
+
+  getSnapshotBeforeUpdate(oldProps) {
+    if (oldProps.on !== this.props.on) {
+      console.log('on', 'UHUL')
+    } else if (oldProps.moveOn !== this.props.moveOn) {
+      console.log('moveOn', 'UHUL')
+    }
+    return null
+  }
+
+  render() {
+    return null
+  }
+}
+
+export const useFlip = ({on, moveOn}) => {
+  useHiddenFill(<Snapshoter on={on} moveOn={moveOn} callback={console.log}/>)
+}
+
+const getAnimationNames = (animation) => animation.split(',').map(_ => _.replace(/\s*(\S+).*/, '$1'))
+
+export const willUseFlip = () => {
+
+  let controlElement = null
+  let morphEnabled = false
+  const disableMorph = () => {
+    controlElement = null
+    morphEnabled = false
+  }
+  const [useRegisterEnter, enterChildrenCallback] = willUseSharedCallback(useLayoutEffect)
+  const [useRegisterLeave, leaveChildrenCallback] = willUseSharedCallback(useLayoutEffect)
+  const [useRegisterMorph, morphChildrenCallback, getSize] = willUseSharedCallback(useLayoutEffect)
+
+
+  const useEnterAnimation = (ref, onEnter = defaultEnterAnimation, {onEnterEnd, timing = defaultAnimationMaker, enterEffect} = {}) => {
+    useLayoutEffect(() => {
+      if (!morphEnabled && onEnter && ref.current) {
+        const el = ref.current
+        const animation = formatAnimation(onEnter, timing)
+        const endEffect = callIfFunction(enterEffect,el)
+        morph(
+          el,
+          animation,
+          () => {
+            callIfFunction(onEnterEnd)
+            callIfFunction(endEffect,el)
+          }
+        )
+        enterChildrenCallback(timing)
+      }
+    }, [onEnter])
+  }
+
+  const useLeaveAnimation = (ref, onLeave = defaultEnterAnimation, {ref: removeRef, leaveEffect, timing = defaultAnimationMaker, nestedFlip = false, events = {}, reverse = true} = {}) => {
+    useLayoutEffect(() => () => {
+      if (onLeave && ref.current) {
+        const el = ref.current
+        const animation = formatAnimation(onLeave, timing, reverse)
+        // on leave animations require a clone, as the real node will be intantaneousy removed by react
+        leaveChildrenCallback(timing)
+        const isNested = callIfFunction(nestedFlip)
+        const clone = isNested ? el : el.cloneNode(true)
+        _s.each((callback, type) => clone.addEventListener(type, callback), events)
+
+        const endEffect = callIfFunction(leaveEffect,clone,el)
+
+        if (removeRef) { removeRef.current = clone }
+        if (!isNested) {
+          el.parentNode.insertBefore(clone, el)
+        }
+        // sometimes the clone may need to trigger events (usual case: onmouseover to reopen the element)
+
+        // allow clone to be continued by another animation
+        controlElement = clone
+        // the animation
+        const animate = () => {
+          morph(
+            clone,
+            animation,
+            () => {
+              clone.remove()
+              disableMorph()
+              callIfFunction(endEffect,clone,el)
+            }
+          )
+        }
+
+        // wait for current animation to end and then animate
+        if (clone.style.animation) {
+          const maxAnimationTime = _.max((clone.style.animationDuration.split(",") || ["0.25s"]).map(s => parseFloat(s.trim() || "0.25") * (s.indexOf("m")>0 ? 1 : 1000)))
+          const timeoutRef = {}
+          const animationEnd = (e) => {
+            clearTimeout(timeoutRef.current || -1)
+            clone.removeEventListener('animationend', animationEnd)
+            clone.style.animationDelay = ''
+            e?.stopImmediatePropagation()
+            setTimeout(animate, 1)
+          }
+          timeoutRef.current = setTimeout(animationEnd,maxAnimationTime)
+          clone.addEventListener('animationend', animationEnd)
+
+          clone.style.animationDelay = getDelays(el, clone.style.animation)
+        } else {
+          animate()
+        }
+      }
+    }, [onLeave])
+  }
+
+  const useMorphAnimation = (ref, ready = true, {timing = defaultAnimationMaker} = {}) => {
+    useLayoutEffect(() => {
+      if (ready && controlElement && ref.current) {
+        // const controlElement =getControlElement()
+        const el = ref.current
+        const animation = oneWayAnimation(`opacity:${window.getComputedStyle(controlElement).opacity};`, `opacity: 1`)
+        const oldSnap = {
+          ...toPosition(controlElement, undefined, {allowFixed: true}),
+          clonedNode: cloneWrapper(controlElement)
+        }
+        const newSnap = {...toPosition(el, undefined, {allowFixed: true}), clonedNode: cloneWrapper(el)}
+        const rectAnimation = getClientRectAnimation(oldSnap, newSnap)
+        morph(newSnap.domNode, formatAnimation(rectAnimation.concat(animation), timing), disableMorph)
+        morphChildrenCallback((executeAnimation) => executeAnimation(timing))
+        if (rectAnimation.length) {
+          willPlaySwitch(oldSnap, newSnap, {switchAnimation: defaultSwitchAnimation, timing})()
+        }
+        controlElement.remove()
+        disableMorph()
+      }
+      return () => {
+        morphEnabled = true
+        // continue existing switch animation on the clone
+        if (continueSwitchCallbacks.has(ref.current)) {
+          continueSwitchCallbacks.get(ref.current)(controlElement)
+        }
+      }
+    }, [ready])
+  }
+
+  const useNestedEnterAnimation = (ref, onEnter, {timing} = {}) => {
+    useRegisterEnter((parentTiming) => {
+      const el = ref.current
+      const animation = formatAnimation(onEnter, timing || parentTiming)
+      morph(el, animation)
+      return getAnimationNames(animation)
+    })
+  }
+  const useNestLeaveAnimation = (ref, onLeave, {timing, events} = {}) => {
+    useRegisterLeave((parentTiming) => {
+      const el = ref.current
+      const animation = formatAnimation(onLeave, timing || parentTiming)
+      morph(el, animation)
+      return getAnimationNames(animation)
+    })
+  }
+
+  const willUseNestedMorphAnimation = () => {
+    const morphId = _.uniqueId('JS-')
+    return (ref) => {
+      useLayoutEffect(() => {
+        if (ref.current?.dataset) {
+          ref.current.dataset.morphId = morphId
+        }
+      })
+      const executeAnimation = useConstant((timing) => {
+        const prev = controlElement.querySelector(`[data-morph-id='${morphId}']`)
+        const next = ref.current
+        if (next.dataset) {
+          next.dataset.noFlip = true
+        }
+        next.style.opacity = '1'
+        const prevPos = prev.getBoundingClientRect()
+        const nextPos = next.getBoundingClientRect()
+        const originalTransform = next.style.transform || ''
+        const deltaX = Math.round(nextPos.left - prevPos.left)
+        const deltaY = Math.round(nextPos.top - prevPos.top)
+        const newLeft = deltaX > 0 ? -deltaX : -deltaX
+        const animation = oneWayAnimation(`
+          transform: translate(${newLeft}px,${deltaY}px) ${originalTransform};
+        `, `
+          transform: translate(0,0) ${originalTransform};
+        `)
+        morph(next, formatAnimation(animation, timing))
+      })
+      useRegisterMorph(executeAnimation)
+    }
+  }
+
+  return [[useEnterAnimation, useLeaveAnimation, useMorphAnimation], [useNestedEnterAnimation, useNestLeaveAnimation], willUseNestedMorphAnimation]
+}
+
+export const willUseFlipSwitch = () => {
+  let oldSnap = null
+  const getTempWrapper = (parent,positionConfig = {}) => {
+    const tempWrapper = cloneWrapper(parent)
+    return {...toPosition(parent,undefined,positionConfig), clonedNode: tempWrapper}
+  }
+
+  return (ref, onEnter, onLeave, {timing = defaultAnimationMaker, switchAnimation = defaultSwitchAnimation, effect} = {}) => {
+    useLayoutEffect(() => {
+      if (oldSnap && ref.current) {
+        const newSnap = getTempWrapper(ref.current,{withMargins:true})
+        let switchToPlay = _.identity
+        if (oldSnap.clonedNode) {
+          switchToPlay = willPlaySwitch(oldSnap, newSnap, {
+            switchIn: callIfFunction(onEnter),
+            switchOut: callIfFunction(onLeave),
+            switchAnimation: callIfFunction(switchAnimation),
+            timing
+          })
+        }
+        const animation = getClientRectAnimationForSwitch(oldSnap, newSnap)
+        const endEffect = callIfFunction(effect,oldSnap.clonedNode,newSnap.clonedNode,ref.current)
+        switchToPlay()
+        morph(newSnap.domNode, formatAnimation(animation, timing), () => callIfFunction(endEffect,oldSnap.clonedNode,newSnap.clonedNode))
+      }
+      return () => {
+        oldSnap = getTempWrapper(ref.current,{withMargins:true})
+      }
+    }, [])
+  }
+}
+
+const flipHooks = willUseFlip()
+const useFlipEnter = flipHooks[0][0]
+const useFlipLeave = flipHooks[0][1]
+export {useFlipEnter, useFlipLeave}
+
+export const useFlipAnimation = (ref, onEnterOrBoth, onLeaveOrIgnore = true, config = {}) => {
+  const onEnter = ifUndefined(onEnterOrBoth && onEnterOrBoth.onEnter,onEnterOrBoth)
+  const onLeave = ifUndefined(onEnterOrBoth && onEnterOrBoth.onLeave,onLeaveOrIgnore)
+  useFlipEnter(ref, onEnter, config)
+  useFlipLeave(ref, onLeave === true ? onEnter : onLeave, {...config, reverse: onLeave === true})
+}
+

package/src/FlipList.jsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {defaultAnimationMaker, morph, formatAnimation, getClientRectAnimation, toPosition} from './Flip'
+import {oneWayAnimation} from '@startlibs/utils'
+import {callIfFunction} from '@startlibs/utils'
+
+
+export class FlipList extends React.Component {
+
+  static defaultProps = {
+    timing: defaultAnimationMaker,
+    animation: oneWayAnimation(`transform: scale(1); transform-origin: center; opacity: 1;`, `transform: scale(0); transform-origin: center; opacity: 0;`)
+  }
+
+  componentDidUpdate(prevProps, prevState, snap) {
+    if (snap) {
+      const useLockedParentRect = (this.props.anchoredDownList) && snap.parentRect
+      const newSnap = this.calculatePositionForAnimation(useLockedParentRect ? snap.parentRect : undefined)
+       if (newSnap) { // se não tiver parentNode, verficar se há uma div sendo offsetParent, body não serve
+         this.play(snap, newSnap)
+      }
+    }
+  }
+
+  play = (oldSnap, newSnap) => {
+    const {animation,insertAnimation,removeAnimation, onEndAnimation, onStartAnimation, effect, skipChromeFix, timing, skipParentMorph} = this.props
+    newSnap.children.forEach(newItemSnap => {
+      const oldItemSnap = oldSnap.children.get(newItemSnap.domNode)
+      if (!oldItemSnap) return
+      const rectAnimation = getClientRectAnimation(oldItemSnap, newItemSnap)
+      morph(newItemSnap.domNode,formatAnimation(rectAnimation,timing))
+    })
+    if (newSnap.children.size > oldSnap.children.size) {
+      const newItems = Array.from(newSnap.children.values()).filter(item => !oldSnap.children.has(item.domNode))
+      newItems.forEach((newItem) => {
+        morph(newItem.domNode, formatAnimation(insertAnimation || animation, timing, !insertAnimation))
+      })
+    } else if (newSnap.children.size < oldSnap.children.size) {
+      const oldItems = Array.from(oldSnap.children.values()).filter(item => !newSnap.children.has(item.domNode))
+
+      oldItems.forEach((oldItem) => {
+        const reinserted = this.reinsertSnap(oldItem,oldSnap.scrollTop - newSnap.scrollTop, oldItems)
+        if (!reinserted) { return }
+        new Promise(res => {
+          morph(oldItem.domNode, formatAnimation(removeAnimation || animation, timing), res)
+          setTimeout(res,1500)
+        }).then(() => {
+          oldItem.domNode.remove()
+        })
+      })
+
+    }
+    const rectAnimation = getClientRectAnimation(oldSnap.parent, newSnap.parent,{skipTransform:true,smallJumpFix: this.props.smallJumpFix})
+    if (newSnap.parent?.domNode && !skipParentMorph) {
+      const endEffect = callIfFunction(effect, newSnap.parent.domNode, {newSnap, oldSnap})
+      callIfFunction(onStartAnimation)
+      morph(newSnap.parent.domNode,formatAnimation(rectAnimation, timing),endEffect || onEndAnimation)
+    }
+  }
+
+  reinsertSnap = (item,scrollDelta, allChildren) => {
+    if (item.nextSibling) {
+
+      if (!item.nextSibling.parentNode) {
+        const next = allChildren.find(possible => item.nextSibling === possible.domNode)
+        if (next) {
+          return this.reinsertSnap({...item,nextSibling:next.nextSibling},scrollDelta,allChildren)
+        }
+        return false;
+      }
+      item.nextSibling.parentNode?.insertBefore(item.domNode, item.nextSibling)
+    } else {
+      item.parentNode.appendChild(item.domNode)
+    }
+    const {width,height} = item.domNode.getBoundingClientRect()
+    item.domNode.style.left = item.domNode.offsetLeft + 'px'
+    item.domNode.style.top = item.domNode.offsetTop - scrollDelta + 'px'
+    if (!this.props.anchoredDownList) {
+      item.domNode.style.marginTop = 0
+    }
+    item.domNode.style.marginLeft = 0
+    item.domNode.style.width = width + 'px'
+    item.domNode.style.height = height + 'px'
+    item.domNode.style.position = 'absolute'
+    callIfFunction(this.props.onReinsert,item.domNode,item)
+    return true
+  }
+
+  getSnapshotBeforeUpdate(oldProps) {
+    if (this.props.play || this.props.on !== oldProps.on || (this.props.children.length !== oldProps.children.length)) {
+      return this.calculatePositionForAnimation()
+    }
+    return null
+  }
+
+  getParents = () => {
+    const node = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this)
+    const {parentNode, offsetParent: possibleOffsetParent} = node
+    const offsetParent = possibleOffsetParent || (window.getComputedStyle(parentNode).position !== 'static' ? parentNode : parentNode.offsetParent)
+    if (!offsetParent) return {};
+    const parentRect = offsetParent.getBoundingClientRect()
+    return {
+      offsetParent,
+      parentNode,
+      parentRect
+    }
+  }
+
+  calculatePositionForAnimation = (lockedParentRect) => {
+    const {parentRect, parentNode, offsetParent} = this.getParents()
+    if (!offsetParent) return null
+    const effectiveParentRect = lockedParentRect || parentRect
+    const children = new Map();
+    [].slice.call(parentNode.children).map((node) => {
+      const position = toPosition(node, effectiveParentRect, {withMargins:true, numberOfSiblings: this.props.numberOfElements || 1})
+      if (position) { children.set(node, position) }
+    })
+    return {
+      children,
+      parent: toPosition(offsetParent,undefined, {withMargins:true}),
+      parentRect: effectiveParentRect,
+      scrollTop:offsetParent.scrollTop
+    }
+  }
+
+  render() {
+    const {children, as, play, on, onStartAnimation, onEndAnimation, ...rest} = this.props
+    const result = React.Children.count(children) ? children : <div style={{display: 'none'}}/>
+    if (as) {
+      const RenderAs = as
+      return <RenderAs {...rest}>{result}</RenderAs>
+    }
+    return result
+  }
+
+}