rox-react-components 0.0.36 → 0.0.38

package/README.md

@@ -10,4 +10,4 @@
 
 ## Button [Button Demo](https://stackblitz.com/edit/stackblitz-starters-mze3as?file=src%2FApp.tsx)
 
-## Popup -> Designing
+## Popup -> [Popup Demo](https://stackblitz.com/edit/stackblitz-starters-zko4zq?file=src%2FApp.tsx)

package/dist/es/Button/Button.js

@@ -1 +1 @@
-import{__rest as t,__assign as o}from"tslib";import{css as e}from"aphrodite/no-important";import r,{useRef as i,useMemo as l,useCallback as n,useEffect as c}from"react";import a from"./styles.js";var d=["relative","absolute","fixed"],s=function(s){var u=s.children,f=s.style,p=void 0===f?{}:f,m=s.block,v=void 0!==m&&m,h=s.className,b=void 0===h?"":h,g=s.radius,y=void 0===g?4:g,C=s.bg,k=void 0===C?"rgba(0,0,0,.7)":C,x=s.color,w=void 0===x?"#ffffff":x,N=s.onClick,T=s.wavesColor,E=void 0===T?"rgba(255,255,255,.3)":T,R=t(s,["children","style","block","className","radius","bg","color","onClick","wavesColor"]),j=i([]),B=i(null),H=l((function(){return o(o({},p),{overflow:"hidden",borderRadius:y+"px",background:k,color:w})}),[p,y,k,w]),L=n((function(t){null==N||N(t);var o,r=t.currentTarget;j.current.length?o=j.current.shift():(o=document.createElement("div")).classList.add(e(a.ripple));var i=r.getBoundingClientRect();o.style.width=o.style.height=Math.max(i.width,i.height)+"px",o.style.backgroundColor=E,r.appendChild(o);var l=t.pageY-i.top-o.offsetHeight/2-document.body.scrollTop+"px",n=t.pageX-i.left-o.offsetWidth/2-document.body.scrollTop+"px";o.style.top=l,o.style.left=n,o.onanimationend=function(){r.removeChild(o),j.current.push(o)}}),[N,E]);return c((function(){if(B.current){var t=getComputedStyle(B.current);d.includes(t.position)||(B.current.style.position="relative")}}),[]),r.createElement("button",o({},R,{className:"".concat(b," ").concat(e(a.button)," ").concat(v?e(a.block):""),style:H,ref:B,onClick:L}),u)};export{s as default};
+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};

package/dist/es/Popup/Popup.d.ts

@@ -1,8 +1,10 @@
-import React, { PropsWithChildren } from 'react';
-import { PopupPosition, PopupType } from './type';
+import React, { CSSProperties, PropsWithChildren } from 'react';
+import { AnimationTimingFunction, PopupPosition, PopupType } from './type';
 declare module 'react' {
     interface CSSProperties {
         '--bg'?: string;
+        '--duration'?: string;
+        '--curve'?: AnimationTimingFunction;
     }
 }
 interface PopupProps extends PropsWithChildren {
@@ -12,6 +14,11 @@ interface PopupProps extends PropsWithChildren {
     bg?: string;
     maskClosable?: boolean;
     popupType?: PopupType;
+    onClose?: Function;
+    contentClassName?: string;
+    contentStyle?: CSSProperties;
+    scale?: number[];
+    curve?: AnimationTimingFunction;
 }
-declare function PopupContainer(_props: PopupProps): React.ReactPortal | null;
+declare function PopupContainer(_props: PopupProps): React.ReactPortal;
 export default PopupContainer;

package/dist/es/Popup/Popup.js

@@ -1 +1 @@
-import{__assign as r}from"tslib";import{css as t}from"aphrodite/no-important";import e,{useRef as o,useEffect as n,useState as i}from"react";import{createPortal as a}from"react-dom";import m from"./styles.js";var u={visible:!1,position:"bottom",duration:300,bg:"rgba(0,0,0,.3)",maskClosable:!0,popupType:"slide"};function c(r){var o=r.bg;r.visible,r.duration;var n=i(!1);return n[0],n[1],e.createElement("div",{style:{"--bg":o},className:t(m.container)})}function l(t){var i=r(r({},u),t),m=o(document.createElement("div"));return n((function(){var r=m.current;return document.body.appendChild(r),function(){document.body.removeChild(r)}}),[]),m.current?a(e.createElement(c,r({},i)),m.current):null}export{l as default};
+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};

package/dist/es/Popup/styles.d.ts

@@ -1,4 +1,20 @@
 declare const styles: {
     container: object;
+    mask: object;
+    animation_properties: object;
+    fade_in: object;
+    fade_out: object;
+    slide_in_top: object;
+    slide_out_top: object;
+    slide_in_right: object;
+    slide_out_right: object;
+    slide_in_bottom: object;
+    slide_out_bottom: object;
+    slide_in_left: object;
+    slide_out_left: object;
 };
 export default styles;
+export declare const animateStyles: (scale: number[]) => {
+    scale_in: object;
+    scale_out: object;
+};

package/dist/es/Popup/styles.js

@@ -1 +1 @@
-import{StyleSheet as o}from"aphrodite/no-important";var t=o.create({container:{position:"fixed",width:"100%",height:"100%",top:0,left:0,zIndex:99,backgroundColor:"var(--bg)"}});export{t as default};
+import{__assign as t}from"tslib";import{StyleSheet as a}from"aphrodite/no-important";function n(t){return{from:{opacity:t?0:1},to:{opacity:t?1:0}}}function i(t,a){var n="0",i="0";return t?(n=a?"-100%":"100%",i="0"):(n="0",i=a?"-100%":"100%"),{from:{transform:"translate3d(0, ".concat(n,", 0)")},to:{transform:"translate3d(0, ".concat(i,", 0)")}}}function o(t,a){var n="0",i="0";return t?(n=a?"-100%":"100%",i="0"):(n="0",i=a?"-100%":"100%"),{from:{transform:"translate3d(".concat(n,", 0, 0)")},to:{transform:"translate3d(".concat(i,", 0, 0)")}}}var e=a.create({container:{position:"absolute",display:"flex",width:"100%",height:"100%",top:0,left:0,zIndex:99},mask:{position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:-10,backgroundColor:"var(--bg)"},animation_properties:{animationFillMode:"forwards",animationTimingFunction:"var(--curve)",animationDuration:"var(--duration)"},fade_in:{animationName:[n(!0)]},fade_out:{animationName:[n(!1)]},slide_in_top:{animationName:[i(!0,!0)]},slide_out_top:{animationName:[i(!1,!0)]},slide_in_right:{animationName:[o(!0,!1)]},slide_out_right:{animationName:[o(!1,!1)]},slide_in_bottom:{animationName:[i(!0,!1)]},slide_out_bottom:{animationName:[i(!1,!1)]},slide_in_left:{animationName:[o(!0,!0)]},slide_out_left:{animationName:[o(!1,!0)]}}),r=function(n){var i=1===n[n.length-1]?n.slice(0,-1):n,o={},e={};if(i.length){var r=100/i.length;o=t(t({},m({step:"0%",value:i[0]})),m({step:"100%",value:1})),e=t(t({},m({step:"0%",value:1})),m({step:"100%",value:i[0]})),i.forEach((function(t,a){a>0&&(Object.assign(o,m({step:"".concat(r*a,"%"),value:t})),Object.assign(e,m({step:"".concat(r*(n.length-a),"%"),value:t})))}))}return a.create({scale_in:{animationName:[o]},scale_out:{animationName:[e]}})};function m(t){var a;return(a={})[t.step]={transform:"scale3d(".concat(t.value,", ").concat(t.value,", 1)")},a}export{r as animateStyles,e as default};

package/dist/es/Popup/type.d.ts

@@ -1,2 +1,4 @@
+import { CSSProperties } from 'react';
 export type PopupPosition = 'left' | 'top' | 'right' | 'bottom' | 'center';
 export type PopupType = 'slide' | 'fade' | 'scale';
+export type AnimationTimingFunction = CSSProperties['animationTimingFunction'];

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-import React, { PropsWithChildren, ReactNode, CSSProperties, FC, HTMLAttributes, Component } from 'react';
+import React, { CSSProperties, PropsWithChildren, ReactNode, FC, HTMLAttributes, Component } from 'react';
 
 type PopupPosition = 'left' | 'top' | 'right' | 'bottom' | 'center';
 type PopupType = 'slide' | 'fade' | 'scale';
+type AnimationTimingFunction = CSSProperties['animationTimingFunction'];
 
 interface ToParams {
     x?: number;
@@ -90,6 +91,8 @@ declare class Loading extends Component<LoadingProps, LoadingState> {
 declare module 'react' {
     interface CSSProperties {
         '--bg'?: string;
+        '--duration'?: string;
+        '--curve'?: AnimationTimingFunction;
     }
 }
 interface PopupProps extends PropsWithChildren {
@@ -99,8 +102,13 @@ interface PopupProps extends PropsWithChildren {
     bg?: string;
     maskClosable?: boolean;
     popupType?: PopupType;
+    onClose?: Function;
+    contentClassName?: string;
+    contentStyle?: CSSProperties;
+    scale?: number[];
+    curve?: AnimationTimingFunction;
 }
-declare function PopupContainer(_props: PopupProps): React.ReactPortal | null;
+declare function PopupContainer(_props: PopupProps): React.ReactPortal;
 
 interface OnScrollParameters {
     x?: number;
@@ -124,4 +132,4 @@ declare module 'react' {
 }
 declare const _default: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
 
-export { Button, Card, Container, Loading, PopupContainer as Popup, type PopupPosition, type PopupType, _default$1 as ScrollView, type ScrollViewExposeMethods, _default as Swiper, type SwiperExposeMethods, type SwiperProps, type ToParams, _default$2 as utils };
+export { type AnimationTimingFunction, Button, Card, Container, Loading, PopupContainer as Popup, type PopupPosition, type PopupType, _default$1 as ScrollView, type ScrollViewExposeMethods, _default as Swiper, type SwiperExposeMethods, type SwiperProps, type ToParams, _default$2 as utils };

package/dist/lib/Button/Button.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),o=require("react"),r=require("./styles.js"),l=["relative","absolute","fixed"];exports.default=function(s){var i=s.children,n=s.style,a=void 0===n?{}:n,c=s.block,u=void 0!==c&&c,d=s.className,f=void 0===d?"":d,p=s.radius,v=void 0===p?4:p,g=s.bg,b=void 0===g?"rgba(0,0,0,.7)":g,h=s.color,m=void 0===h?"#ffffff":h,y=s.onClick,C=s.wavesColor,_=void 0===C?"rgba(255,255,255,.3)":C,k=e.__rest(s,["children","style","block","className","radius","bg","color","onClick","wavesColor"]),x=o.useRef([]),w=o.useRef(null),q=o.useMemo((function(){return e.__assign(e.__assign({},a),{overflow:"hidden",borderRadius:v+"px",background:b,color:m})}),[a,v,b,m]),R=o.useCallback((function(e){null==y||y(e);var o,l=e.currentTarget;x.current.length?o=x.current.shift():(o=document.createElement("div")).classList.add(t.css(r.default.ripple));var s=l.getBoundingClientRect();o.style.width=o.style.height=Math.max(s.width,s.height)+"px",o.style.backgroundColor=_,l.appendChild(o);var i=e.pageY-s.top-o.offsetHeight/2-document.body.scrollTop+"px",n=e.pageX-s.left-o.offsetWidth/2-document.body.scrollTop+"px";o.style.top=i,o.style.left=n,o.onanimationend=function(){l.removeChild(o),x.current.push(o)}}),[y,_]);return o.useEffect((function(){if(w.current){var e=getComputedStyle(w.current);l.includes(e.position)||(w.current.style.position="relative")}}),[]),o.createElement("button",e.__assign({},k,{className:"".concat(f," ").concat(t.css(r.default.button)," ").concat(u?t.css(r.default.block):""),style:q,ref:w,onClick:R}),i)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),r=require("react"),o=require("./styles.js"),i=["relative","absolute","fixed"];exports.default=function(s){var l=s.children,n=s.style,a=void 0===n?{}:n,c=s.block,u=void 0!==c&&c,d=s.className,f=void 0===d?"":d,p=s.radius,v=void 0===p?4:p,g=s.bg,h=void 0===g?"rgba(0,0,0,.7)":g,b=s.color,m=void 0===b?"#ffffff":b,y=s.onClick,C=s.wavesColor,_=void 0===C?"rgba(255,255,255,.3)":C,k=e.__rest(s,["children","style","block","className","radius","bg","color","onClick","wavesColor"]),x=r.useRef([]),w=r.useRef(null),q=r.useMemo((function(){return e.__assign(e.__assign({},a),{overflow:"hidden",borderRadius:v+"px",background:h,color:m})}),[a,v,h,m]),R=r.useCallback((function(e){null==y||y(e);var r,i=e.currentTarget;x.current.length?r=x.current.shift():(r=document.createElement("div")).classList.add(t.css(o.default.ripple));var s=i.getBoundingClientRect();r.style.width=r.style.height=Math.max(s.width,s.height)+"px",r.style.backgroundColor=_,i.appendChild(r);var l=e.pageY-s.top-r.offsetHeight/2+"px",n=e.pageX-s.left-r.offsetWidth/2+"px";r.style.top=l,r.style.left=n,r.onanimationend=function(){i.removeChild(r),x.current.push(r)}}),[y,_]);return r.useEffect((function(){if(w.current){var e=getComputedStyle(w.current);i.includes(e.position)||(w.current.style.position="relative")}}),[]),r.createElement("button",e.__assign({},k,{className:"".concat(f," ").concat(t.css(o.default.button)," ").concat(u?t.css(o.default.block):""),style:q,ref:w,onClick:R}),l)};

package/dist/lib/Popup/Popup.d.ts

@@ -1,8 +1,10 @@
-import React, { PropsWithChildren } from 'react';
-import { PopupPosition, PopupType } from './type';
+import React, { CSSProperties, PropsWithChildren } from 'react';
+import { AnimationTimingFunction, PopupPosition, PopupType } from './type';
 declare module 'react' {
     interface CSSProperties {
         '--bg'?: string;
+        '--duration'?: string;
+        '--curve'?: AnimationTimingFunction;
     }
 }
 interface PopupProps extends PropsWithChildren {
@@ -12,6 +14,11 @@ interface PopupProps extends PropsWithChildren {
     bg?: string;
     maskClosable?: boolean;
     popupType?: PopupType;
+    onClose?: Function;
+    contentClassName?: string;
+    contentStyle?: CSSProperties;
+    scale?: number[];
+    curve?: AnimationTimingFunction;
 }
-declare function PopupContainer(_props: PopupProps): React.ReactPortal | null;
+declare function PopupContainer(_props: PopupProps): React.ReactPortal;
 export default PopupContainer;

package/dist/lib/Popup/Popup.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),r=require("aphrodite/no-important"),t=require("react"),n=require("react-dom"),i=require("./styles.js"),a={visible:!1,position:"bottom",duration:300,bg:"rgba(0,0,0,.3)",maskClosable:!0,popupType:"slide"};function u(e){var n=e.bg;e.visible,e.duration;var a=t.useState(!1);return a[0],a[1],t.createElement("div",{style:{"--bg":n},className:r.css(i.default.container)})}exports.default=function(r){var i=e.__assign(e.__assign({},a),r),s=t.useRef(document.createElement("div"));return t.useEffect((function(){var e=s.current;return document.body.appendChild(e),function(){document.body.removeChild(e)}}),[]),s.current?n.createPortal(t.createElement(u,e.__assign({},i)),s.current):null};
+"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)};

package/dist/lib/Popup/styles.d.ts

@@ -1,4 +1,20 @@
 declare const styles: {
     container: object;
+    mask: object;
+    animation_properties: object;
+    fade_in: object;
+    fade_out: object;
+    slide_in_top: object;
+    slide_out_top: object;
+    slide_in_right: object;
+    slide_out_right: object;
+    slide_in_bottom: object;
+    slide_out_bottom: object;
+    slide_in_left: object;
+    slide_out_left: object;
 };
 export default styles;
+export declare const animateStyles: (scale: number[]) => {
+    scale_in: object;
+    scale_out: object;
+};

package/dist/lib/Popup/styles.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({container:{position:"fixed",width:"100%",height:"100%",top:0,left:0,zIndex:99,backgroundColor:"var(--bg)"}});exports.default=e;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),a=require("aphrodite/no-important");function e(t){return{from:{opacity:t?0:1},to:{opacity:t?1:0}}}function n(t,a){var e="0",n="0";return t?(e=a?"-100%":"100%",n="0"):(e="0",n=a?"-100%":"100%"),{from:{transform:"translate3d(0, ".concat(e,", 0)")},to:{transform:"translate3d(0, ".concat(n,", 0)")}}}function i(t,a){var e="0",n="0";return t?(e=a?"-100%":"100%",n="0"):(e="0",n=a?"-100%":"100%"),{from:{transform:"translate3d(".concat(e,", 0, 0)")},to:{transform:"translate3d(".concat(n,", 0, 0)")}}}var o=a.StyleSheet.create({container:{position:"absolute",display:"flex",width:"100%",height:"100%",top:0,left:0,zIndex:99},mask:{position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:-10,backgroundColor:"var(--bg)"},animation_properties:{animationFillMode:"forwards",animationTimingFunction:"var(--curve)",animationDuration:"var(--duration)"},fade_in:{animationName:[e(!0)]},fade_out:{animationName:[e(!1)]},slide_in_top:{animationName:[n(!0,!0)]},slide_out_top:{animationName:[n(!1,!0)]},slide_in_right:{animationName:[i(!0,!1)]},slide_out_right:{animationName:[i(!1,!1)]},slide_in_bottom:{animationName:[n(!0,!1)]},slide_out_bottom:{animationName:[n(!1,!1)]},slide_in_left:{animationName:[i(!0,!0)]},slide_out_left:{animationName:[i(!1,!0)]}});function r(t){var a;return(a={})[t.step]={transform:"scale3d(".concat(t.value,", ").concat(t.value,", 1)")},a}exports.animateStyles=function(e){var n=1===e[e.length-1]?e.slice(0,-1):e,i={},o={};if(n.length){var s=100/n.length;i=t.__assign(t.__assign({},r({step:"0%",value:n[0]})),r({step:"100%",value:1})),o=t.__assign(t.__assign({},r({step:"0%",value:1})),r({step:"100%",value:n[0]})),n.forEach((function(t,a){a>0&&(Object.assign(i,r({step:"".concat(s*a,"%"),value:t})),Object.assign(o,r({step:"".concat(s*(e.length-a),"%"),value:t})))}))}return a.StyleSheet.create({scale_in:{animationName:[i]},scale_out:{animationName:[o]}})},exports.default=o;

package/dist/lib/Popup/type.d.ts

@@ -1,2 +1,4 @@
+import { CSSProperties } from 'react';
 export type PopupPosition = 'left' | 'top' | 'right' | 'bottom' | 'center';
 export type PopupType = 'slide' | 'fade' | 'scale';
+export type AnimationTimingFunction = CSSProperties['animationTimingFunction'];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rox-react-components",
-    "version": "0.0.36",
+    "version": "0.0.38",
     "main": "dist/lib/index.js",
     "module": "dist/es/index.js",
     "types": "dist/index.d.ts",
@@ -20,7 +20,8 @@
         "react swiper carousel pc mobile touch mouse",
         "touch events swiper",
         "touch events carousel",
-        "scrollview reachTop reachBottom reachLeft reachRight"
+        "scrollview reachTop reachBottom reachLeft reachRight",
+        "popup、modal"
     ],
     "files": [
         "dist",