rox-react-components 0.0.44 → 0.0.46

package/dist/es/Button/Button.js

@@ -1 +1,46 @@
-import{__rest as t,__assign as e}from"tslib";import{css as o}from"aphrodite/no-important";import r,{useRef as i,useMemo as n,useCallback as l,useEffect as a}from"react";import c from"./styles.js";var s=["relative","absolute","fixed"],d=function(d){var u=d.children,f=d.style,p=void 0===f?{}:f,v=d.block,m=void 0!==v&&v,h=d.className,g=void 0===h?"":h,b=d.radius,y=void 0===b?4:b,C=d.bg,k=void 0===C?"rgba(0,0,0,.7)":C,x=d.color,w=void 0===x?"#ffffff":x,N=d.onClick,E=d.wavesColor,R=void 0===E?"rgba(255,255,255,.3)":E,j=t(d,["children","style","block","className","radius","bg","color","onClick","wavesColor"]),B=i([]),H=i(null),L=n((function(){return e(e({},p),{overflow:"hidden",borderRadius:y+"px",background:k,color:w})}),[p,y,k,w]),M=l((function(t){null==N||N(t);var e,r=t.currentTarget;B.current.length?e=B.current.shift():(e=document.createElement("div")).classList.add(o(c.ripple));var i=r.getBoundingClientRect();e.style.width=e.style.height=Math.max(i.width,i.height)+"px",e.style.backgroundColor=R,r.appendChild(e);var n=t.pageY-i.top-e.offsetHeight/2+"px",l=t.pageX-i.left-e.offsetWidth/2+"px";e.style.top=n,e.style.left=l,e.onanimationend=function(){r.removeChild(e),B.current.push(e)}}),[N,R]);return a((function(){if(H.current){var t=getComputedStyle(H.current);s.includes(t.position)||(H.current.style.position="relative")}}),[]),r.createElement("button",e({},j,{className:"".concat(g," ").concat(o(c.button)," ").concat(m?o(c.block):""),style:L,ref:H,onClick:M}),u)};export{d as default};
+import { __rest, __assign } from 'tslib';
+import { css } from 'aphrodite/no-important';
+import React, { useRef, useMemo, useCallback, useEffect } from 'react';
+import styles from './styles.js';
+
+var positions = ['relative', 'absolute', 'fixed'];
+var Button = function (props) {
+    var children = props.children, _a = props.style, style = _a === void 0 ? {} : _a, _b = props.block, block = _b === void 0 ? false : _b, _c = props.className, className = _c === void 0 ? '' : _c, _d = props.radius, radius = _d === void 0 ? 4 : _d, _e = props.bg, bg = _e === void 0 ? 'rgba(0,0,0,.7)' : _e, _f = props.color, color = _f === void 0 ? '#ffffff' : _f, onClick = props.onClick, _g = props.wavesColor, wavesColor = _g === void 0 ? 'rgba(255,255,255,.3)' : _g, rest = __rest(props, ["children", "style", "block", "className", "radius", "bg", "color", "onClick", "wavesColor"]);
+    var pools = useRef([]);
+    var btn_ref = useRef(null);
+    var btnStyle = useMemo(function () { return (__assign(__assign({}, style), { overflow: 'hidden', borderRadius: radius + 'px', background: bg, color: color })); }, [style, radius, bg, color]);
+    var handleButtonClick = useCallback(function (event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        var target = event.currentTarget;
+        var node;
+        if (pools.current.length) {
+            node = pools.current.shift();
+        }
+        else {
+            node = document.createElement('div');
+            node.classList.add(css(styles.ripple));
+        }
+        var rect = target.getBoundingClientRect();
+        node.style.width = node.style.height = Math.max(rect.width, rect.height) + 'px';
+        node.style.backgroundColor = wavesColor;
+        target.appendChild(node);
+        var y = event.pageY - rect.top - node.offsetHeight / 2 + 'px';
+        var x = event.pageX - rect.left - node.offsetWidth / 2 + 'px';
+        node.style.top = y;
+        node.style.left = x;
+        node.onanimationend = function () {
+            target.removeChild(node);
+            pools.current.push(node);
+        };
+    }, [onClick, wavesColor]);
+    useEffect(function () {
+        if (btn_ref.current) {
+            var style_1 = getComputedStyle(btn_ref.current);
+            if (!positions.includes(style_1.position))
+                btn_ref.current.style.position = 'relative';
+        }
+    }, []);
+    return (React.createElement("button", __assign({}, rest, { className: "".concat(className, " ").concat(css(styles.button), " ").concat(block ? css(styles.block) : ''), style: btnStyle, ref: btn_ref, onClick: handleButtonClick }), children));
+};
+
+export { Button as default };

package/dist/es/Button/index.js

@@ -1 +1,5 @@
-import t from"./Button.js";export{t as default};
+import Button from './Button.js';
+
+
+
+export { Button as default };

package/dist/es/Button/styles.js

@@ -1 +1,40 @@
-import{StyleSheet as o}from"aphrodite/no-important";var n=o.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"}});export{n as default};
+import { StyleSheet } from 'aphrodite/no-important';
+
+var rippleKey = {
+    to: {
+        opacity: 0,
+        transform: 'scale(2)',
+        '-webkit-transform': 'scale(2)',
+    },
+};
+var styles = 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',
+    },
+});
+
+export { styles as default };

package/dist/es/Card/Card.js

@@ -1 +1,22 @@
-import{__assign as t}from"tslib";import{css as n}from"aphrodite/no-important";import a,{useMemo as o}from"react";import r from"./styles.js";var i={expand:!1,duration:200},e=function(e){var c=t(t({},i),e),s=c.duration,m=c.expand,d=c.children,l=o((function(){return{transitionDuration:"".concat(s,"ms"),msTransitionDuration:"".concat(s,"ms"),MozTransitionDuration:"".concat(s,"ms"),WebkitTransitionDuration:"".concat(s,"ms")}}),[s]);return a.createElement("div",{style:l,className:"".concat(n(r.collapse)," ").concat(m?n(r.expand):"")},a.createElement("div",{className:n(r.hide0)},d))};export{e as default};
+import { __assign } from 'tslib';
+import { css } from 'aphrodite/no-important';
+import React, { useMemo } from 'react';
+import styles from './styles.js';
+
+var initCardProps = {
+    expand: false,
+    duration: 200,
+};
+var Card = function (props) {
+    var _a = __assign(__assign({}, initCardProps), props), duration = _a.duration, expand = _a.expand, children = _a.children;
+    var transitionDuration = 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(css(styles.collapse), " ").concat(expand ? css(styles.expand) : '') },
+        React.createElement("div", { className: css(styles.hide0) }, children)));
+};
+
+export { Card as default };

package/dist/es/Card/index.js

@@ -1 +1,5 @@
-import r from"./Card.js";export{r as default};
+import Card from './Card.js';
+
+
+
+export { Card as default };

package/dist/es/Card/styles.js

@@ -1 +1,18 @@
-import{StyleSheet as e}from"aphrodite/no-important";var o=e.create({collapse:{display:"grid",gridTemplateRows:"0fr",overflow:"hidden",outline:"none"},expand:{gridTemplateRows:"1fr"},hide0:{minHeight:0}});export{o as default};
+import { StyleSheet } from 'aphrodite/no-important';
+
+var styles = StyleSheet.create({
+    collapse: {
+        display: 'grid',
+        gridTemplateRows: '0fr',
+        overflow: 'hidden',
+        outline: 'none'
+    },
+    expand: {
+        gridTemplateRows: '1fr',
+    },
+    hide0: {
+        minHeight: 0,
+    },
+});
+
+export { styles as default };

package/dist/es/Container/Container.js

@@ -1 +1,20 @@
-import{__assign as t}from"tslib";import{css as r}from"aphrodite/no-important";import e,{useMemo as o}from"react";import l from"./styles.js";var a={ratio:1},i=function(i){var m=t(t({},a),i),n=m.ratio,f=m.children,s=o((function(){return null==n||n<=0?"100%":100/n+"%"}),[n]);return e.createElement("div",{className:r(l.relative,l.w_full,l.h_0,l.border_box),style:{paddingBottom:s}},e.createElement("div",{className:r(l.absolute,l.top_0,l.left_0,l.w_full,l.h_full)},f))};export{i as default};
+import { __assign } from 'tslib';
+import { css } from 'aphrodite/no-important';
+import React, { useMemo } from 'react';
+import styles from './styles.js';
+
+var initContainerProps = {
+    ratio: 1,
+};
+var Container = function (_props) {
+    var _a = __assign(__assign({}, initContainerProps), _props), ratio = _a.ratio, children = _a.children;
+    var pb = useMemo(function () {
+        if (ratio === undefined || ratio === null || ratio <= 0)
+            return '100%';
+        return 100 / ratio + '%';
+    }, [ratio]);
+    return (React.createElement("div", { className: css(styles.relative, styles.w_full, styles.h_0, styles.border_box), style: { paddingBottom: pb } },
+        React.createElement("div", { className: css(styles.absolute, styles.top_0, styles.left_0, styles.w_full, styles.h_full) }, children)));
+};
+
+export { Container as default };

package/dist/es/Container/index.js

@@ -1 +1,5 @@
-import o from"./Container.js";export{o as default};
+import Container from './Container.js';
+
+
+
+export { Container as default };

package/dist/es/Container/styles.js

@@ -1 +1,30 @@
-import{StyleSheet as t}from"aphrodite/no-important";var o=t.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"}});export{o as default};
+import { StyleSheet } from 'aphrodite/no-important';
+
+var styles = 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',
+    },
+});
+
+export { styles as default };

package/dist/es/Loading/Inner.js

@@ -1 +1,13 @@
-import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import r from"react";import a from"./styles.js";import{initLoadingStyle as i}from"./type.js";var m=[{delay:"0s"},{delay:"-1.1s"},{delay:"-1.0s"},{delay:"-0.9s"},{delay:"-0.8s"}],o=function(o){var s=e(e({},i),o.style);return r.createElement("div",{className:t(a.inner_box),style:{"--width":s.width,"--height":s.height,"--bg":s.bg,"--margin":s.margin}},m.map((function(e,i){return r.createElement("div",{key:i,style:{"--delay":e.delay},className:t(a.inner_box_item)})})))};export{o as default};
+import { __assign } from 'tslib';
+import { css } from 'aphrodite/no-important';
+import React from 'react';
+import styles from './styles.js';
+import { initLoadingStyle } from './type.js';
+
+var arr = [{ delay: '0s' }, { delay: '-1.1s' }, { delay: '-1.0s' }, { delay: '-0.9s' }, { delay: '-0.8s' }];
+var Inner = function (props) {
+    var style = __assign(__assign({}, initLoadingStyle), props.style);
+    return (React.createElement("div", { className: css(styles.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: css(styles.inner_box_item) })); })));
+};
+
+export { Inner as default };

package/dist/es/Loading/Loading.js

@@ -1 +1,67 @@
-import{__extends as e,__assign as t}from"tslib";import{css as o}from"aphrodite/no-important";import l,{Component as n}from"react";import{createRoot as r}from"react-dom/client";import i from"./Inner.js";import d from"./dom.js";import a from"./styles.js";var u=function(n){function u(){var e=null!==n&&n.apply(this,arguments)||this;return e.state={},e}return e(u,n),u.show=function(e){u.el||(u.el=document.createElement("div"),d.addClass(u.el,o(a.fixed)),d.addClass(document.body,o(a.page_hide)),document.body.appendChild(u.el),r(u.el).render(l.createElement(u,t({},e,{children:null,visible:!0}))))},u.hide=function(){try{if(d.removeClass(document.body,o(a.page_hide)),!u.el)return;document.body.removeChild(u.el),u.el=null}catch(e){d.removeClass(document.body,o(a.page_hide)),u.el=null}},u.prototype.render=function(){var e=this.props,t=e.visible,n=e.bg,r=e.customLoading,d=e.loadingStyle,u=e.children;return l.createElement("div",{className:o(a.relative,a.w_full,a.h_full,a.border_box)},u,t?l.createElement("div",{className:o(a.absolute,a.top_0,a.left_0,a.w_full,a.h_full,a.z_99,a.center),style:{backgroundColor:n}},r||l.createElement(i,{style:d})):null)},u.getDerivedStateFromProps=function(e,t){return null},u.prototype.getSnapshotBeforeUpdate=function(e,t){return null},u.prototype.componentDidUpdate=function(e,t,o){},u.prototype.componentWillUnmount=function(){u.hide()},u.defaultProps={visible:!0,bg:"rgba(0,0,0,.7)",customLoading:null,loadingStyle:{}},u.el=null,u}(n);export{u as default};
+import { __extends, __assign } from 'tslib';
+import { css } from 'aphrodite/no-important';
+import React, { Component } from 'react';
+import { createRoot } from 'react-dom/client';
+import Inner from './Inner.js';
+import dom from './dom.js';
+import styles from './styles.js';
+
+var Loading = /** @class */ (function (_super) {
+    __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.addClass(Loading.el, css(styles.fixed));
+        dom.addClass(document.body, css(styles.page_hide));
+        document.body.appendChild(Loading.el);
+        createRoot(Loading.el).render(React.createElement(Loading, __assign({}, options, { children: null, visible: true })));
+    };
+    Loading.hide = function () {
+        try {
+            dom.removeClass(document.body, css(styles.page_hide));
+            if (!Loading.el)
+                return;
+            document.body.removeChild(Loading.el);
+            Loading.el = null;
+        }
+        catch (e) {
+            dom.removeClass(document.body, css(styles.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: css(styles.relative, styles.w_full, styles.h_full, styles.border_box) },
+            children,
+            visible ? (React.createElement("div", { className: css(styles.absolute, styles.top_0, styles.left_0, styles.w_full, styles.h_full, styles.z_99, styles.center), style: { backgroundColor: bg } }, customLoading || React.createElement(Inner, { 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;
+}(Component));
+
+export { Loading as default };

package/dist/es/Loading/dom.js

@@ -1 +1,11 @@
-var s={addClass:function(s,a){s.classList.contains(a)||s.classList.add(a)},removeClass:function(s,a){s.classList.remove(a)}};export{s as default};
+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 };
+
+export { dom as default };

package/dist/es/Loading/index.js

@@ -1 +1,5 @@
-import o from"./Loading.js";export{o as default};
+import Loading from './Loading.js';
+
+
+
+export { Loading as default };

package/dist/es/Loading/styles.js

@@ -1 +1,80 @@
-import{StyleSheet as e}from"aphrodite/no-important";var t=e.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"}});export{t as default};
+import { StyleSheet } from '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 = 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',
+    },
+});
+
+export { styles as default };

package/dist/es/Loading/type.js

@@ -1 +1,3 @@
-var p={width:"6px",height:"50px",bg:"#fff",margin:"0 3px"};export{p as initLoadingStyle};
+var initLoadingStyle = { width: '6px', height: '50px', bg: '#fff', margin: '0 3px' };
+
+export { initLoadingStyle };

package/dist/es/Popup/Popup.js

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

package/dist/es/Popup/index.js

@@ -1 +1,5 @@
-import o from"./Popup.js";export{o as default};
+import Popup from './Popup.js';
+
+
+
+export { Popup as default };