smart-react-components/SlideTransition-b2e129ec.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var DOMHelper = require('./DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var Transition = require('./Transition-48c5648c.js');

/// <reference path="../modules/global.d.tsx" />
let id = 0;
const getID = () => id++;
if (typeof global !== "undefined")
    global.srcSlideTransitionCleanID = () => id = 0;
const GlobalStyle = styled.createGlobalStyle(({ id, type, duration }) => `
    .src-slide-${id} {
        &.src-slide-enter,
        &.src-slide-leave-active {
            overflow: hidden !important;
            box-sizing: border-box !important;
        }

        &.src-slide-enter:not(.src-slide-enter-active),
        &.src-slide-leave-active {
            height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        &.src-slide-enter-active,
        &.src-slide-leave-active {
            transition: ${duration}ms 0s ${type};
            transition-property: height, padding, margin;
        }
    }   
`);
const SlideTransition = ({ children, status, display, type = "ease-in-out", duration = 150, beforeShow, beforeHide, afterShow, afterHide }) => {
    const [id] = React__default.useState(() => getID());
    const show = (el) => new Promise(resolve => {
        let className = el.className || "";
        let style = el.getAttribute("style") || "";
        el.classList.add(`src-slide-${id}`);
        el.style.opacity = "0";
        let height = el.offsetHeight;
        DOMHelper.DOMHelper.requestAnimationFrame.call(window, () => {
            el.classList.add("src-slide-enter");
            DOMHelper.DOMHelper.requestAnimationFrame.call(window, () => {
                el.style.opacity = "1";
                el.style.height = `${height}px`;
                el.classList.add("src-slide-enter-active");
                DOMHelper.DOMHelper.addEventListenerOnce(el, DOMHelper.DOMHelper.TRANSITION_END, () => {
                    el.className = className;
                    el.setAttribute("style", style);
                    resolve();
                });
            });
        });
    });
    const hide = (el) => new Promise(resolve => {
        let className = el.className || "";
        let style = el.getAttribute("style") || "";
        el.classList.add(`src-slide-${id}`);
        DOMHelper.DOMHelper.requestAnimationFrame.call(window, () => {
            el.style.height = `${el.offsetHeight}px`;
            DOMHelper.DOMHelper.requestAnimationFrame.call(window, () => {
                el.classList.add("src-slide-leave-active");
                DOMHelper.DOMHelper.addEventListenerOnce(el, DOMHelper.DOMHelper.TRANSITION_END, () => {
                    el.className = className;
                    el.setAttribute("style", style);
                    resolve();
                });
            });
        });
    });
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(GlobalStyle, { id: id, type: type, duration: duration }),
        React__default.createElement(Transition.Transition, { status: status, display: display, beforeShow: beforeShow, beforeHide: beforeHide, show: show, hide: hide, afterShow: afterShow, afterHide: afterHide }, children)));
};

exports.SlideTransition = SlideTransition;