rox-react-components 0.0.45 → 0.0.46

package/dist/lib/Button/styles.js

@@ -1 +1,44 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("aphrodite/no-important").StyleSheet.create({button:{border:"1px solid transparent",boxSizing:"border-box",padding:"8px 20px",cursor:"pointer",outline:"none",":focus":{outline:"none"},":focus-within":{outline:"none"}},block:{display:"block",width:"100%"},ripple:{position:"absolute",borderRadius:"100%",pointerEvents:"none",transform:"scale(0)",opacity:1,animationName:[{to:{opacity:0,transform:"scale(2)","-webkit-transform":"scale(2)"}}],animationDuration:"0.4s",animationTimingFunction:"ease-out"}});exports.default=o;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var noImportant = require('aphrodite/no-important');
+
+var rippleKey = {
+    to: {
+        opacity: 0,
+        transform: 'scale(2)',
+        '-webkit-transform': 'scale(2)',
+    },
+};
+var styles = noImportant.StyleSheet.create({
+    button: {
+        border: '1px solid transparent',
+        boxSizing: 'border-box',
+        padding: '8px 20px',
+        cursor: 'pointer',
+        outline: 'none',
+        ':focus': {
+            outline: 'none',
+        },
+        ':focus-within': {
+            outline: 'none',
+        },
+    },
+    block: {
+        display: 'block',
+        width: '100%',
+    },
+    ripple: {
+        position: 'absolute',
+        borderRadius: '100%',
+        pointerEvents: 'none',
+        transform: 'scale(0)',
+        opacity: 1,
+        animationName: [rippleKey],
+        animationDuration: '0.4s',
+        animationTimingFunction: 'ease-out',
+    },
+});
+
+exports.default = styles;

package/dist/lib/Card/Card.js

@@ -1 +1,26 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),a=require("react"),n=require("./styles.js"),r={expand:!1,duration:200};exports.default=function(s){var i=e.__assign(e.__assign({},r),s),o=i.duration,c=i.expand,u=i.children,d=a.useMemo((function(){return{transitionDuration:"".concat(o,"ms"),msTransitionDuration:"".concat(o,"ms"),MozTransitionDuration:"".concat(o,"ms"),WebkitTransitionDuration:"".concat(o,"ms")}}),[o]);return a.createElement("div",{style:d,className:"".concat(t.css(n.default.collapse)," ").concat(c?t.css(n.default.expand):"")},a.createElement("div",{className:t.css(n.default.hide0)},u))};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var noImportant = require('aphrodite/no-important');
+var React = require('react');
+var styles = require('./styles.js');
+
+var initCardProps = {
+    expand: false,
+    duration: 200,
+};
+var Card = function (props) {
+    var _a = tslib.__assign(tslib.__assign({}, initCardProps), props), duration = _a.duration, expand = _a.expand, children = _a.children;
+    var transitionDuration = React.useMemo(function () { return ({
+        transitionDuration: "".concat(duration, "ms"),
+        msTransitionDuration: "".concat(duration, "ms"),
+        MozTransitionDuration: "".concat(duration, "ms"),
+        WebkitTransitionDuration: "".concat(duration, "ms"),
+    }); }, [duration]);
+    return (React.createElement("div", { style: transitionDuration, className: "".concat(noImportant.css(styles.default.collapse), " ").concat(expand ? noImportant.css(styles.default.expand) : '') },
+        React.createElement("div", { className: noImportant.css(styles.default.hide0) }, children)));
+};
+
+exports.default = Card;

package/dist/lib/Card/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Card.js");exports.default=e.default;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Card = require('./Card.js');
+
+
+
+exports.default = Card.default;

package/dist/lib/Card/styles.js

@@ -1 +1,22 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({collapse:{display:"grid",gridTemplateRows:"0fr",overflow:"hidden",outline:"none"},expand:{gridTemplateRows:"1fr"},hide0:{minHeight:0}});exports.default=e;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var noImportant = require('aphrodite/no-important');
+
+var styles = noImportant.StyleSheet.create({
+    collapse: {
+        display: 'grid',
+        gridTemplateRows: '0fr',
+        overflow: 'hidden',
+        outline: 'none'
+    },
+    expand: {
+        gridTemplateRows: '1fr',
+    },
+    hide0: {
+        minHeight: 0,
+    },
+});
+
+exports.default = styles;

package/dist/lib/Container/Container.js

@@ -1 +1,24 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),l=require("react"),r=require("./styles.js"),a={ratio:1};exports.default=function(u){var s=e.__assign(e.__assign({},a),u),i=s.ratio,d=s.children,o=l.useMemo((function(){return null==i||i<=0?"100%":100/i+"%"}),[i]);return l.createElement("div",{className:t.css(r.default.relative,r.default.w_full,r.default.h_0,r.default.border_box),style:{paddingBottom:o}},l.createElement("div",{className:t.css(r.default.absolute,r.default.top_0,r.default.left_0,r.default.w_full,r.default.h_full)},d))};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var noImportant = require('aphrodite/no-important');
+var React = require('react');
+var styles = require('./styles.js');
+
+var initContainerProps = {
+    ratio: 1,
+};
+var Container = function (_props) {
+    var _a = tslib.__assign(tslib.__assign({}, initContainerProps), _props), ratio = _a.ratio, children = _a.children;
+    var pb = React.useMemo(function () {
+        if (ratio === undefined || ratio === null || ratio <= 0)
+            return '100%';
+        return 100 / ratio + '%';
+    }, [ratio]);
+    return (React.createElement("div", { className: noImportant.css(styles.default.relative, styles.default.w_full, styles.default.h_0, styles.default.border_box), style: { paddingBottom: pb } },
+        React.createElement("div", { className: noImportant.css(styles.default.absolute, styles.default.top_0, styles.default.left_0, styles.default.w_full, styles.default.h_full) }, children)));
+};
+
+exports.default = Container;

package/dist/lib/Container/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Container.js");exports.default=e.default;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Container = require('./Container.js');
+
+
+
+exports.default = Container.default;

package/dist/lib/Container/styles.js

@@ -1 +1,34 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({relative:{position:"relative"},absolute:{position:"absolute"},top_0:{top:"0px"},left_0:{left:"0px"},w_full:{width:"100%"},h_full:{height:"100%"},h_0:{height:"0px"},border_box:{boxSizing:"border-box"}});exports.default=e;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var noImportant = require('aphrodite/no-important');
+
+var styles = noImportant.StyleSheet.create({
+    relative: {
+        position: 'relative',
+    },
+    absolute: {
+        position: 'absolute',
+    },
+    top_0: {
+        top: '0px',
+    },
+    left_0: {
+        left: '0px',
+    },
+    w_full: {
+        width: '100%',
+    },
+    h_full: {
+        height: '100%',
+    },
+    h_0: {
+        height: '0px',
+    },
+    border_box: {
+        boxSizing: 'border-box',
+    },
+});
+
+exports.default = styles;

package/dist/lib/Loading/Inner.js

@@ -1 +1,17 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),r=require("react"),s=require("./styles.js"),a=require("./type.js"),i=[{delay:"0s"},{delay:"-1.1s"},{delay:"-1.0s"},{delay:"-0.9s"},{delay:"-0.8s"}];exports.default=function(l){var n=e.__assign(e.__assign({},a.initLoadingStyle),l.style);return r.createElement("div",{className:t.css(s.default.inner_box),style:{"--width":n.width,"--height":n.height,"--bg":n.bg,"--margin":n.margin}},i.map((function(e,a){return r.createElement("div",{key:a,style:{"--delay":e.delay},className:t.css(s.default.inner_box_item)})})))};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var noImportant = require('aphrodite/no-important');
+var React = require('react');
+var styles = require('./styles.js');
+var type = require('./type.js');
+
+var arr = [{ delay: '0s' }, { delay: '-1.1s' }, { delay: '-1.0s' }, { delay: '-0.9s' }, { delay: '-0.8s' }];
+var Inner = function (props) {
+    var style = tslib.__assign(tslib.__assign({}, type.initLoadingStyle), props.style);
+    return (React.createElement("div", { className: noImportant.css(styles.default.inner_box), style: { '--width': style.width, '--height': style.height, '--bg': style.bg, '--margin': style.margin } }, arr.map(function (item, i) { return (React.createElement("div", { key: i, style: { '--delay': item.delay }, className: noImportant.css(styles.default.inner_box_item) })); })));
+};
+
+exports.default = Inner;

package/dist/lib/Loading/Loading.js

@@ -1 +1,71 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),l=require("react"),n=require("react-dom/client"),r=require("./Inner.js"),u=require("./dom.js"),d=require("./styles.js"),o=function(o){function a(){var e=null!==o&&o.apply(this,arguments)||this;return e.state={},e}return e.__extends(a,o),a.show=function(r){a.el||(a.el=document.createElement("div"),u.default.addClass(a.el,t.css(d.default.fixed)),u.default.addClass(document.body,t.css(d.default.page_hide)),document.body.appendChild(a.el),n.createRoot(a.el).render(l.createElement(a,e.__assign({},r,{children:null,visible:!0}))))},a.hide=function(){try{if(u.default.removeClass(document.body,t.css(d.default.page_hide)),!a.el)return;document.body.removeChild(a.el),a.el=null}catch(e){u.default.removeClass(document.body,t.css(d.default.page_hide)),a.el=null}},a.prototype.render=function(){var e=this.props,n=e.visible,u=e.bg,o=e.customLoading,a=e.loadingStyle,s=e.children;return l.createElement("div",{className:t.css(d.default.relative,d.default.w_full,d.default.h_full,d.default.border_box)},s,n?l.createElement("div",{className:t.css(d.default.absolute,d.default.top_0,d.default.left_0,d.default.w_full,d.default.h_full,d.default.z_99,d.default.center),style:{backgroundColor:u}},o||l.createElement(r.default,{style:a})):null)},a.getDerivedStateFromProps=function(e,t){return null},a.prototype.getSnapshotBeforeUpdate=function(e,t){return null},a.prototype.componentDidUpdate=function(e,t,l){},a.prototype.componentWillUnmount=function(){a.hide()},a.defaultProps={visible:!0,bg:"rgba(0,0,0,.7)",customLoading:null,loadingStyle:{}},a.el=null,a}(l.Component);exports.default=o;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var noImportant = require('aphrodite/no-important');
+var React = require('react');
+var client = require('react-dom/client');
+var Inner = require('./Inner.js');
+var dom = require('./dom.js');
+var styles = require('./styles.js');
+
+var Loading = /** @class */ (function (_super) {
+    tslib.__extends(Loading, _super);
+    function Loading() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {};
+        return _this;
+    }
+    Loading.show = function (options) {
+        if (Loading.el)
+            return;
+        Loading.el = document.createElement('div');
+        dom.default.addClass(Loading.el, noImportant.css(styles.default.fixed));
+        dom.default.addClass(document.body, noImportant.css(styles.default.page_hide));
+        document.body.appendChild(Loading.el);
+        client.createRoot(Loading.el).render(React.createElement(Loading, tslib.__assign({}, options, { children: null, visible: true })));
+    };
+    Loading.hide = function () {
+        try {
+            dom.default.removeClass(document.body, noImportant.css(styles.default.page_hide));
+            if (!Loading.el)
+                return;
+            document.body.removeChild(Loading.el);
+            Loading.el = null;
+        }
+        catch (e) {
+            dom.default.removeClass(document.body, noImportant.css(styles.default.page_hide));
+            Loading.el = null;
+        }
+    };
+    Loading.prototype.render = function () {
+        var _a = this.props, visible = _a.visible, bg = _a.bg, customLoading = _a.customLoading, loadingStyle = _a.loadingStyle, children = _a.children;
+        return (React.createElement("div", { className: noImportant.css(styles.default.relative, styles.default.w_full, styles.default.h_full, styles.default.border_box) },
+            children,
+            visible ? (React.createElement("div", { className: noImportant.css(styles.default.absolute, styles.default.top_0, styles.default.left_0, styles.default.w_full, styles.default.h_full, styles.default.z_99, styles.default.center), style: { backgroundColor: bg } }, customLoading || React.createElement(Inner.default, { style: loadingStyle }))) : null));
+    };
+    Loading.getDerivedStateFromProps = function (props, state) {
+        // console.log('getDerivedStateFromProps', props, state)
+        return null;
+    };
+    Loading.prototype.getSnapshotBeforeUpdate = function (prevProps, prevState) {
+        // console.log('getSnapshotBeforeUpdate', prevProps, prevState)
+        return null;
+    };
+    Loading.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) { };
+    Loading.prototype.componentWillUnmount = function () {
+        // console.log('componentWillUnmount')
+        Loading.hide();
+    };
+    Loading.defaultProps = {
+        visible: true,
+        bg: 'rgba(0,0,0,.7)',
+        customLoading: null,
+        loadingStyle: {},
+    };
+    Loading.el = null;
+    return Loading;
+}(React.Component));
+
+exports.default = Loading;

package/dist/lib/Loading/dom.js

@@ -1 +1,15 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s={addClass:function(s,e){s.classList.contains(e)||s.classList.add(e)},removeClass:function(s,e){s.classList.remove(e)}};exports.default=s;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function addClass(el, cls) {
+    if (el.classList.contains(cls))
+        return;
+    el.classList.add(cls);
+}
+function removeClass(el, cls) {
+    el.classList.remove(cls);
+}
+var dom = { addClass: addClass, removeClass: removeClass };
+
+exports.default = dom;

package/dist/lib/Loading/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Loading.js");exports.default=e.default;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Loading = require('./Loading.js');
+
+
+
+exports.default = Loading.default;

package/dist/lib/Loading/styles.js

@@ -1 +1,84 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({relative:{position:"relative"},center:{display:"flex",alignItems:"center",justifyContent:"center"},absolute:{position:"absolute"},top_0:{top:"0px"},left_0:{left:"0px"},w_full:{width:"100%"},h_full:{height:"100%"},border_box:{boxSizing:"border-box"},z_99:{zIndex:99},inner_box:{display:"flex",width:"100%",height:"100%",textAlign:"center",fontSize:"10px",alignItems:"center",justifyContent:"center"},inner_box_item:{height:"var(--height)",width:"var(--width)",margin:"var(--margin)",backgroundColor:"var(--bg)",animationName:[{"0%, 40%, 100%":{transform:"scaleY(0.4)","-webkit-transform":"scaleY(0.4)"},"20%":{transform:"scaleY(1.0)","-webkit-transform":"scaleY(1.0)"}}],animationDelay:"var(--delay)",animationDuration:"1.2s",animationIterationCount:"infinite"},fixed:{position:"fixed",display:"flex",alignItems:"center",justifyContent:"center",top:"0",left:"0",width:"100%",height:"100%",zIndex:99},page_hide:{width:"100%",height:"100%",overflow:"hidden"}});exports.default=e;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var noImportant = require('aphrodite/no-important');
+
+var keys = {
+    '0%, 40%, 100%': {
+        transform: 'scaleY(0.4)',
+        '-webkit-transform': 'scaleY(0.4)',
+    },
+    '20%': {
+        transform: 'scaleY(1.0)',
+        '-webkit-transform': 'scaleY(1.0)',
+    },
+};
+var styles = noImportant.StyleSheet.create({
+    relative: {
+        position: 'relative',
+    },
+    center: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    absolute: {
+        position: 'absolute',
+    },
+    top_0: {
+        top: '0px',
+    },
+    left_0: {
+        left: '0px',
+    },
+    w_full: {
+        width: '100%',
+    },
+    h_full: {
+        height: '100%',
+    },
+    border_box: {
+        boxSizing: 'border-box',
+    },
+    z_99: {
+        zIndex: 99,
+    },
+    inner_box: {
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+        fontSize: '10px',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    inner_box_item: {
+        height: 'var(--height)',
+        width: 'var(--width)',
+        margin: 'var(--margin)',
+        backgroundColor: 'var(--bg)',
+        animationName: [keys],
+        animationDelay: 'var(--delay)',
+        animationDuration: '1.2s',
+        animationIterationCount: 'infinite',
+    },
+    fixed: {
+        position: 'fixed',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        zIndex: 99,
+    },
+    page_hide: {
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+    },
+});
+
+exports.default = styles;

package/dist/lib/Loading/type.js

@@ -1 +1,5 @@
-"use strict";exports.initLoadingStyle={width:"6px",height:"50px",bg:"#fff",margin:"0 3px"};
+'use strict';
+
+var initLoadingStyle = { width: '6px', height: '50px', bg: '#fff', margin: '0 3px' };
+
+exports.initLoadingStyle = initLoadingStyle;

package/dist/lib/Popup/Popup.js

@@ -1 +1,116 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react"),n=require("react-dom"),a=require("aphrodite/no-important"),i=require("./styles.js"),r={visible:!1,position:"bottom",duration:200,bg:"rgba(0,0,0,.35)",maskClosable:!0,popupType:"fade",onClose:function(){return null},contentClassName:"",contentStyle:{},scale:[.2],curve:"linear"};function s(n){var r=n.bg,s=n.visible,u=n.duration,l=n.inject,o=n.dispose,c=n.maskClosable,f=n.onClose,d=n.children,m=n.position,_=n.contentStyle,p=n.contentClassName,b=n.popupType,y=n.scale,g=n.curve,C=t.useState(s),v=C[0],h=C[1],j=t.useState(!1),E=j[0],k=j[1];t.useEffect((function(){h(s),s&&(o(),l(),k(!0))}),[s]),t.useEffect((function(){return function(){k(!1),o()}}),[]);var x=t.useCallback((function(){c&&h(!1)}),[c]),q=t.useCallback((function(){v||(k(!1),f(),o())}),[v,f]),I=t.useMemo((function(){return"bottom"===m?{justifyContent:"center",alignItems:"flex-end"}:"top"===m?{justifyContent:"center",alignItems:"flex-start"}:"left"===m?{justifyContent:"flex-start",alignItems:"center"}:"right"===m?{justifyContent:"flex-end",alignItems:"center"}:"center"===m?{justifyContent:"center",alignItems:"center"}:{}}),[m]),N=t.useMemo((function(){if("slide"===b){if("top"===m)return v?i.default.slide_in_top:i.default.slide_out_top;if("bottom"===m)return v?i.default.slide_in_bottom:i.default.slide_out_bottom;if("left"===m)return v?i.default.slide_in_left:i.default.slide_out_left;if("right"===m)return v?i.default.slide_in_right:i.default.slide_out_right}else if("scale"===b&&Array.isArray(y)&&y.length>=1){var e=i.animateStyles(y);return v?e.scale_in:e.scale_out}return v?i.default.fade_in:i.default.fade_out}),[b,m,v,y]);return E?t.createElement("div",{style:e.__assign({"--bg":r,"--duration":u+"ms","--curve":g},I),className:a.css(i.default.container)},t.createElement("div",{onClick:x,onAnimationEnd:q,className:a.css(i.default.mask,i.default.animation_properties,v?i.default.fade_in:i.default.fade_out)}),t.createElement("div",{style:_,className:"".concat(p," ").concat(a.css(i.default.animation_properties,N))},d)):null}exports.default=function(a){var i=e.__assign(e.__assign({},r),a),u=t.useRef(document.createElement("div")),l=t.useCallback((function(){document.body.appendChild(u.current)}),[]),o=t.useCallback((function(){try{document.body.removeChild(u.current)}catch(e){}}),[]);return t.useEffect((function(){return function(){return o()}}),[]),n.createPortal(t.createElement(s,e.__assign({},i,{inject:l,dispose:o})),u.current)};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var reactDom = require('react-dom');
+var noImportant = require('aphrodite/no-important');
+var styles = require('./styles.js');
+
+var initPopupProps = {
+    visible: false,
+    position: 'bottom',
+    duration: 200,
+    bg: 'rgba(0,0,0,.35)',
+    maskClosable: true,
+    popupType: 'fade',
+    onClose: function () { return null; },
+    contentClassName: '',
+    contentStyle: {},
+    scale: [0.2],
+    curve: 'linear'
+};
+function _Popup(props) {
+    var bg = props.bg, visible = props.visible, duration = props.duration, inject = props.inject, dispose = props.dispose, maskClosable = props.maskClosable, onClose = props.onClose, children = props.children, position = props.position, contentStyle = props.contentStyle, contentClassName = props.contentClassName, popupType = props.popupType, scale = props.scale, curve = props.curve;
+    var _a = React.useState(visible), tweenAnimation = _a[0], setTweenAnimation = _a[1];
+    var _b = React.useState(false), show = _b[0], setShow = _b[1];
+    React.useEffect(function () {
+        setTweenAnimation(visible);
+        if (visible) {
+            dispose();
+            inject();
+            setShow(true);
+        }
+    }, [visible]);
+    React.useEffect(function () {
+        return function () {
+            setShow(false);
+            dispose();
+        };
+    }, []);
+    var handleMaskClick = React.useCallback(function () {
+        if (!maskClosable)
+            return;
+        setTweenAnimation(false);
+    }, [maskClosable]);
+    var handleAnimationEnd = React.useCallback(function () {
+        if (!tweenAnimation) {
+            setShow(false);
+            onClose();
+            dispose();
+        }
+    }, [tweenAnimation, onClose]);
+    var containerStyle = React.useMemo(function () {
+        if (position === 'bottom') {
+            return { justifyContent: 'center', alignItems: 'flex-end' };
+        }
+        if (position === 'top') {
+            return { justifyContent: 'center', alignItems: 'flex-start' };
+        }
+        if (position === 'left') {
+            return { justifyContent: 'flex-start', alignItems: 'center' };
+        }
+        if (position === 'right') {
+            return { justifyContent: 'flex-end', alignItems: 'center' };
+        }
+        if (position === 'center') {
+            return { justifyContent: 'center', alignItems: 'center' };
+        }
+        return {};
+    }, [position]);
+    var contentAnimationName = React.useMemo(function () {
+        if (popupType === 'slide') {
+            if (position === 'top')
+                return tweenAnimation ? styles.default.slide_in_top : styles.default.slide_out_top;
+            if (position === 'bottom')
+                return tweenAnimation ? styles.default.slide_in_bottom : styles.default.slide_out_bottom;
+            if (position === 'left')
+                return tweenAnimation ? styles.default.slide_in_left : styles.default.slide_out_left;
+            if (position === 'right')
+                return tweenAnimation ? styles.default.slide_in_right : styles.default.slide_out_right;
+        }
+        else if (popupType === 'scale') {
+            if (Array.isArray(scale) && scale.length >= 1) {
+                var styles_1 = styles.animateStyles(scale);
+                return tweenAnimation ? styles_1.scale_in : styles_1.scale_out;
+            }
+        }
+        return tweenAnimation ? styles.default.fade_in : styles.default.fade_out;
+    }, [popupType, position, tweenAnimation, scale]);
+    if (!show)
+        return null;
+    return (React.createElement("div", { style: tslib.__assign({ '--bg': bg, '--duration': duration + 'ms', '--curve': curve }, containerStyle), className: noImportant.css(styles.default.container) },
+        React.createElement("div", { onClick: handleMaskClick, onAnimationEnd: handleAnimationEnd, className: noImportant.css(styles.default.mask, styles.default.animation_properties, tweenAnimation ? styles.default.fade_in : styles.default.fade_out) }),
+        React.createElement("div", { style: contentStyle, className: "".concat(contentClassName, " ").concat(noImportant.css(styles.default.animation_properties, contentAnimationName)) }, children)));
+}
+function Popup(_props) {
+    var props = tslib.__assign(tslib.__assign({}, initPopupProps), _props);
+    var container = React.useRef(document.createElement('div'));
+    var injectBody = React.useCallback(function () {
+        document.body.appendChild(container.current);
+    }, []);
+    var dispose = React.useCallback(function () {
+        try {
+            document.body.removeChild(container.current);
+        }
+        catch (e) {
+        }
+    }, []);
+    React.useEffect(function () {
+        return function () { return dispose(); };
+    }, []);
+    return reactDom.createPortal(React.createElement(_Popup, tslib.__assign({}, props, { inject: injectBody, dispose: dispose })), container.current);
+}
+
+exports.default = Popup;

package/dist/lib/Popup/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Popup.js");exports.default=e.default;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Popup = require('./Popup.js');
+
+
+
+exports.default = Popup.default;