@vimeo/iris/utils/hooks/useFlip.esm.js

Vimeo Design System

import { _ as __read, c as __assign, b as __rest } from '../../tslib.es6-7f0e734f.js';
import React__default, { useState, cloneElement, useRef, useLayoutEffect } from 'react';
import { geometry } from '../DOM/geometry.esm.js';
import { animate } from '../DOM/animate.esm.js';

function useFlip(children) {
    var flipped = children.map(function (item, key) { return (React__default.createElement(FlipItem, { key: key }, item)); });
    var _a = __read(useState(flipped), 2), items = _a[0], setItems = _a[1];
    var newItems = items.map(function (item, key) {
        return cloneElement(item, __assign(__assign({}, item.props), { force: key }));
    });
    return [newItems, setItems];
}
function FlipItem(_a) {
    var children = _a.children, props = __rest(_a, ["children"]);
    var _b = __read(useState(null), 2), last = _b[0], setLast = _b[1];
    var ref = useRef(null);
    useLayoutEffect(function () {
        var now = geometry(ref.current);
        if ((now === null || now === void 0 ? void 0 : now.left) !== (last === null || last === void 0 ? void 0 : last.left) && (now === null || now === void 0 ? void 0 : now.top) !== (last === null || last === void 0 ? void 0 : last.top)) {
            var deltaX = (last === null || last === void 0 ? void 0 : last.left) - (now === null || now === void 0 ? void 0 : now.left);
            var deltaY = (last === null || last === void 0 ? void 0 : last.top) - (now === null || now === void 0 ? void 0 : now.top);
            var from = {
                transform: "translate(".concat(deltaX, "px, ").concat(deltaY, "px)"),
                transition: 'transform 0s',
            };
            var to = {
                transform: '',
                transition: 'transform 500ms',
            };
            animate(ref, from, to);
            setLast(now);
        }
    }, [last, setLast]);
    return cloneElement(children, __assign({ ref: ref }, props));
}

export { useFlip };