smart-react-components/CSSTransition-5a3ab124.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.srcCSSTransitionCleanID = () => id = 0;
const style = {
    "src-overlay-fixed-box-up": (transition, _duration, _type, theme) => `
        @media(max-width:${theme.grid.breakpoint.medium - 1}px) {
            will-change: opacity;

            &.src-overlay-fixed-box-up-show {
                opacity: 0;
            }

            &.src-overlay-fixed-box-up-show-active {
                transition: opacity ${transition};
                opacity: 1;
            }

            &.src-overlay-fixed-box-up-hide {
                opacity: 1;
            }

            &.src-overlay-fixed-box-up-hide-active {
                transition: opacity ${transition};
                opacity: 0;
            }
        }

        @media(min-width:${theme.grid.breakpoint.medium}px) {
            > * {
                will-change: opacity, transform;
            }
            
            &.src-overlay-fixed-box-up-show > * {
                opacity: 0;
                transform: translateY(60px);
            }
    
            &.src-overlay-fixed-box-up-show-active > * {
                transition: ${transition};
                transition-property: opacity, transform;
                opacity: 1;
                transform: translateY(0);
            }
    
            &.src-overlay-fixed-box-up-hide > * {
                opacity: 1;
                transform: translateY(0);
            }
    
            &.src-overlay-fixed-box-up-hide-active > * {
                transition: ${transition};
                transition-property: opacity, transform;
                opacity: 0;
                transform: translateY(60px);
            }
        }
    `,
    "src-overlay-modal-down": (transition, _duration, _type, theme) => `
        will-change: opacity;

        > * {
            will-change: transform;
        }

        &.src-overlay-modal-down-show  {
            opacity: 0;

            > * {
                transform: translateY(-${theme.overlay.space});
            }
        }
        
        &.src-overlay-modal-down-show-active {
            transition: opacity ${transition};
            opacity: 1;

            > * {
                transition: transform ${transition};
                transform: translateY(0);
            }
        }

        &.src-overlay-modal-down-hide {
            opacity: 1;

            > * {
                transform: translateY(0px);
            }
        }

        &.src-overlay-modal-down-hide-active {
            transition: opacity ${transition};
            opacity: 0;

            > * {
                transition: transform ${transition};
                transform: translateY(-${theme.overlay.space});
            }
        }
    `,
    "src-fade": transition => `
        will-change: opacity;

        &.src-fade-show {
            opacity: 0;
        }

        &.src-fade-show-active {
            transition: opacity ${transition};
            opacity: 1;
        }

        &.src-fade-hide {
            opacity: 1;
        }

        &.src-fade-hide-active {
            transition: opacity ${transition};
            opacity: 0;
        }
    `,
    "src-dp-fade-in": transition => `
        will-change: opacity, transform;

        &.src-dp-fade-in-show {
            opacity: 0;
            transform: scale(.85);
        }

        &.src-dp-fade-in-show-active {
            transition: ${transition};
            transition-property: opacity, transform;
            opacity: 1;
            transform: scale(1);
        }

        &.src-dp-fade-in-hide {
            opacity: 1;
            transform: scale(1);
        }

        &.src-dp-fade-in-hide-active {
            transition: opacity ${transition};
            transition-property: opacity, transform;
            opacity: 0;
            transform: scale(.85);
        }
    `,
    "src-dp-fade-out": transition => `
        will-change: opacity, transform;

        &.src-dp-fade-out-show {
            opacity: 0;
            transform: scale(1.15);
        }

        &.src-dp-fade-out-show-active {
            transition: ${transition};
            transition-property: opacity, transform;
            opacity: 1;
            transform: scale(1);
        }

        &.src-dp-fade-out-hide {
            opacity: 1;
            transform: scale(1);
        }

        &.src-dp-fade-out-hide-active {
            transition: opacity ${transition};
            transition-property: opacity, transform;
            opacity: 0;
            transform: scale(1.15);
        }
    `,
    "src-button-loading": transition => `
        &.src-button-loading-show {
            opacity: 0;
            transform: scale(.5);

            & ~ *:not(.src-wave-ripple) {
                visibility: visible !important;
            }
        }

        &.src-button-loading-show-active {
            transition: ${transition};
            transition-property: opacity, transform;
            opacity: 1;
            transform: scale(1);

            & ~ *:not(.src-wave-ripple) {
                transition: transform ${transition};
                transform: translateX(100%);
            }
        }

        &.src-button-loading-hide {
            opacity: 1;
            transform: scale(1);

            & ~ *:not(.src-wave-ripple) {
                transform: translateX(100%);
            }
        }

        &.src-button-loading-hide-active {
            transition: ${transition};
            transition-property: opacity, transform;
            opacity: 0;
            transform: scale(.5);

            & ~ *:not(.src-wave-ripple) {
                transition: transform ${transition};
                transform: translateX(0%);
            }
        }
    `
};
const GlobalStyle = styled.createGlobalStyle(({ theme, id, className, type, duration }) => `
    .src-transition-${id} {
        ${style[className] ? style[className](`${duration}ms 0ms ${type}`, duration, type, theme.src) : ""}
    }
`);
const CSSTransition = ({ children, status, display, className, type = "ease-in-out", duration = 200, showAnimation = true, hideAnimation = true, beforeShow, beforeHide, afterShow, afterHide }) => {
    const [id] = React__default.useState(() => getID());
    const show = (el) => new Promise(resolve => {
        if (!showAnimation)
            return resolve();
        DOMHelper.DOMHelper.requestAnimationFrame.call(window, () => {
            el.classList.add(`src-transition-${id}`, `${className}-show`);
            let ignored = el.offsetWidth;
            el.classList.add(`${className}-show-active`);
            setTimeout(() => {
                el.classList.remove(`${className}-show-active`, `${className}-show`, `src-transition-${id}`);
                resolve();
            }, duration);
        });
    });
    const hide = (el) => new Promise(resolve => {
        if (!hideAnimation)
            return resolve();
        DOMHelper.DOMHelper.requestAnimationFrame.call(window, () => {
            el.classList.add(`src-transition-${id}`, `${className}-hide`);
            let ignored = el.offsetWidth;
            el.classList.add(`${className}-hide-active`);
            setTimeout(() => {
                el.classList.remove(`${className}-hide`, `${className}-hide-active`, `src-transition-${id}`);
                resolve();
            }, duration);
        });
    });
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(GlobalStyle, { id: id, className: className, 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.CSSTransition = CSSTransition;