rox-react-components 0.0.37 → 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/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/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.37",
+    "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",