@vimeo/iris/_deprecated/SlideUpDown/SlideUpDown.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_HOCs_withIris = require('../../utils/HOCs/withIris.js');
require('styled-components');

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

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

var SlideUpDown = utils_HOCs_withIris.withIris(SlideUpDownComponent);
function SlideUpDownComponent(_a) {
    var _b = _a.automatic, automatic = _b === void 0 ? false : _b; _a.forwardRef; var children = _a.children, showing = _a.showing, props = tslib_es6.__rest(_a, ["automatic", "forwardRef", "children", "showing"]);
    var ref = React.useRef(null);
    var _c = tslib_es6.__read(React.useState(0), 2), maxHeight = _c[0], setMaxHeight = _c[1];
    React.useLayoutEffect(function () {
        if (showing)
            setMaxHeight(ref.current.scrollHeight);
    }, [children, showing]);
    React.useLayoutEffect(function () {
        if (!automatic)
            setMaxHeight(0);
    }, [automatic]);
    return (React__default["default"].createElement("div", tslib_es6.__assign({ ref: ref, style: {
            overflowY: 'hidden',
            transition: 'all 200ms ease-in-out',
            maxHeight: showing ? maxHeight : 0,
        } }, props), children));
}

exports.SlideUpDown = SlideUpDown;