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

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var utils_DOM_geometry = require('../DOM/geometry.js');
var utils_DOM_animate = require('../DOM/animate.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function useFlip(children) {
    var flipped = children.map(function (item, key) { return (React__default["default"].createElement(FlipItem, { key: key }, item)); });
    var _a = tslib_es6.__read(React.useState(flipped), 2), items = _a[0], setItems = _a[1];
    var newItems = items.map(function (item, key) {
        return React.cloneElement(item, tslib_es6.__assign(tslib_es6.__assign({}, item.props), { force: key }));
    });
    return [newItems, setItems];
}
function FlipItem(_a) {
    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
    var _b = tslib_es6.__read(React.useState(null), 2), last = _b[0], setLast = _b[1];
    var ref = React.useRef(null);
    React.useLayoutEffect(function () {
        var now = utils_DOM_geometry.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',
            };
            utils_DOM_animate.animate(ref, from, to);
            setLast(now);
        }
    }, [last, setLast]);
    return React.cloneElement(children, tslib_es6.__assign({ ref: ref }, props));
}

exports.useFlip = useFlip;