react-dayo/dist/module/components/box/box.js

A Queue component for notification etc

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { useRef, useEffect } from 'react';
import originalStyled from 'styled-components';
var styled = originalStyled;
var component = {};
var init = function (refs) {
    if (refs.container.current !== null && refs.middleArea.current !== null) {
        refs.container.current.style.height = refs.middleArea.current.clientHeight + "px";
    }
};
/* eslint-disable react/prop-types */
export var Box = function (props) {
    var containerRef = useRef(null);
    var middleAreaRef = useRef(null);
    useEffect(function () {
        if (props.isEnter) {
            init({ container: containerRef, middleArea: middleAreaRef });
        }
    });
    return (React.createElement(component.container, { ref: containerRef, theme: props.theme, "aria-live": "assertive", "data-to": props.to, "data-is-enter": props.isEnter, "data-is-entering": props.isEntering, "data-is-entered": props.isEntered, "data-is-delete": props.isExit, "data-is-deleting": props.isExiting, "data-is-deleted": props.isExited, onTransitionEnd: props.onTransitionEnd, "data-testid": "dayo--box" },
        React.createElement("div", { ref: middleAreaRef }, props.BlockComponent === undefined ? null : (React.createElement(props.BlockComponent, __assign({ close: props.close }, props.additionalProps || {}), props.children)))));
};
/* eslint-enable react/prop-types */
Box.displayName = 'Dayo(Box)';
export default Box;
component.container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  transition: 0.5s\n    ", ";\n  opacity: 1;\n\n  &[data-is-enter='true'] {\n    will-change: transform;\n    transition: none;\n    opacity: 0;\n  }\n\n  &[data-is-enter='true'] {\n    color: orange;\n  }\n\n  &[data-is-enter='true'][data-to='top'] {\n    transform: translate3d(0, 0.5em, 0);\n  }\n\n  &[data-is-enter='true'][data-to='bottom'] {\n    transform: translate3d(0, -0.5em, 0);\n  }\n\n  &[data-is-entering='true'] {\n    transition-property: transform, opacity;\n    will-change: transform, opacity;\n    opacity: 1;\n  }\n\n  /* &[data-is-entered='true'] {\n    transform: translate3d(0, 0, 0);\n  } */\n\n  /* &[data-is-delete='true'] {\n  } */\n\n  &[data-is-deleting='true'] {\n    transition-property: transform margin, padding, opacity, height;\n    /* transition-duration: 0.3s; */\n    transition-duration: 0.3s;\n    will-change: transform, margin, padding, opacity, height;\n    overflow: hidden;\n    backface-visibility: hidden;\n    &[data-to='top'] {\n      transform: translate3d(0, -0.5em, 0);\n    }\n    &[data-to='bottom'] {\n      transform: translate3d(0, 0.5em, 0);\n    }\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    height: 0 !important;\n  }\n\n  &[data-is-deleted='true'] {\n    transition-duration: none;\n    transition-duration: 0;\n    &[data-to='top'] {\n      transform: translate3d(0, -0.5em, 0) scale(0.7);\n    }\n    &[data-to='bottom'] {\n      transform: translate3d(0, 0.5em, 0) scale(0.7);\n    }\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    height: 0 !important;\n  }\n\n  > div {\n    text-align: center;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  transition: 0.5s\n    ",
    ";\n  opacity: 1;\n\n  &[data-is-enter='true'] {\n    will-change: transform;\n    transition: none;\n    opacity: 0;\n  }\n\n  &[data-is-enter='true'] {\n    color: orange;\n  }\n\n  &[data-is-enter='true'][data-to='top'] {\n    transform: translate3d(0, 0.5em, 0);\n  }\n\n  &[data-is-enter='true'][data-to='bottom'] {\n    transform: translate3d(0, -0.5em, 0);\n  }\n\n  &[data-is-entering='true'] {\n    transition-property: transform, opacity;\n    will-change: transform, opacity;\n    opacity: 1;\n  }\n\n  /* &[data-is-entered='true'] {\n    transform: translate3d(0, 0, 0);\n  } */\n\n  /* &[data-is-delete='true'] {\n  } */\n\n  &[data-is-deleting='true'] {\n    transition-property: transform margin, padding, opacity, height;\n    /* transition-duration: 0.3s; */\n    transition-duration: 0.3s;\n    will-change: transform, margin, padding, opacity, height;\n    overflow: hidden;\n    backface-visibility: hidden;\n    &[data-to='top'] {\n      transform: translate3d(0, -0.5em, 0);\n    }\n    &[data-to='bottom'] {\n      transform: translate3d(0, 0.5em, 0);\n    }\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    height: 0 !important;\n  }\n\n  &[data-is-deleted='true'] {\n    transition-duration: none;\n    transition-duration: 0;\n    &[data-to='top'] {\n      transform: translate3d(0, -0.5em, 0) scale(0.7);\n    }\n    &[data-to='bottom'] {\n      transform: translate3d(0, 0.5em, 0) scale(0.7);\n    }\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    height: 0 !important;\n  }\n\n  > div {\n    text-align: center;\n  }\n"])), function (props) {
    return props.theme.transitionTimingFunction;
});
var templateObject_1;
//# sourceMappingURL=box.js.map