rox-react-components 0.0.34 → 0.0.36

package/README.md

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

package/dist/es/Button/Button.d.ts

@@ -0,0 +1,10 @@
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+interface ButtonProps extends HTMLAttributes<HTMLButtonElement>, PropsWithChildren {
+    wavesColor?: string;
+    radius?: number;
+    bg?: string;
+    color?: string;
+    block?: boolean;
+}
+declare const Button: FC<ButtonProps>;
+export default Button;

package/dist/es/Button/Button.js

@@ -0,0 +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};

package/dist/es/Button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from './Button';
+export default Button;

package/dist/es/Button/index.js

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

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

@@ -0,0 +1,6 @@
+declare const styles: {
+    button: object;
+    block: object;
+    ripple: object;
+};
+export default styles;

package/dist/es/Button/styles.js

@@ -0,0 +1 @@
+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};

package/dist/es/ScrollView/ScrollView.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties, PropsWithChildren } from 'react';
-import { ExposedScrollViewMethods } from './type';
+import { ScrollViewExposeMethods } from './type';
 interface OnScrollParameters {
     x?: number;
     y?: number;
@@ -15,5 +15,5 @@ interface ScrollViewProps extends PropsWithChildren {
     onReachLeft?: (done: Function) => void;
     onReachRight?: (done: Function) => void;
 }
-declare const _default: (props: ScrollViewProps & React.RefAttributes<ExposedScrollViewMethods>) => React.ReactNode;
+declare const _default: (props: ScrollViewProps & React.RefAttributes<ScrollViewExposeMethods>) => React.ReactNode;
 export default _default;

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

@@ -3,6 +3,6 @@ export interface ToParams {
     y?: number;
     animation?: boolean;
 }
-export interface ExposedScrollViewMethods {
+export interface ScrollViewExposeMethods {
     to: (data?: ToParams) => void;
 }

package/dist/es/index.d.ts

@@ -1,5 +1,6 @@
 export * from './types';
 export { default as utils } from './utils';
+export { default as Button } from './Button';
 export { default as Card } from './Card';
 export { default as Container } from './Container';
 export { default as Loading } from './Loading';

package/dist/es/index.js

@@ -1 +1 @@
-export{default as utils}from"./utils.js";export{default as Card}from"./Card/Card.js";export{default as Container}from"./Container/Container.js";export{default as Loading}from"./Loading/Loading.js";export{default as Popup}from"./Popup/Popup.js";export{default as ScrollView}from"./ScrollView/ScrollView.js";export{default as Swiper}from"./Swiper/Swiper.js";
+export{default as utils}from"./utils.js";export{default as Button}from"./Button/Button.js";export{default as Card}from"./Card/Card.js";export{default as Container}from"./Container/Container.js";export{default as Loading}from"./Loading/Loading.js";export{default as Popup}from"./Popup/Popup.js";export{default as ScrollView}from"./ScrollView/ScrollView.js";export{default as Swiper}from"./Swiper/Swiper.js";

package/dist/es/types.d.ts

@@ -1,2 +1,3 @@
 export * from './Popup/type';
+export * from './ScrollView/type';
 export * from './Swiper/type';

package/dist/index.d.ts

@@ -1,8 +1,17 @@
-import React, { PropsWithChildren, ReactNode, CSSProperties, FC, Component } from 'react';
+import React, { PropsWithChildren, ReactNode, CSSProperties, FC, HTMLAttributes, Component } from 'react';
 
 type PopupPosition = 'left' | 'top' | 'right' | 'bottom' | 'center';
 type PopupType = 'slide' | 'fade' | 'scale';
 
+interface ToParams {
+    x?: number;
+    y?: number;
+    animation?: boolean;
+}
+interface ScrollViewExposeMethods {
+    to: (data?: ToParams) => void;
+}
+
 interface SwiperProps<T> extends PropsWithChildren {
     data: T[];
     renderItem: (item: T) => ReactNode;
@@ -31,6 +40,15 @@ declare const _default$2: {
     parseUrl: typeof parseUrl;
 };
 
+interface ButtonProps extends HTMLAttributes<HTMLButtonElement>, PropsWithChildren {
+    wavesColor?: string;
+    radius?: number;
+    bg?: string;
+    color?: string;
+    block?: boolean;
+}
+declare const Button: FC<ButtonProps>;
+
 interface CardProps extends PropsWithChildren {
     expand?: boolean;
     duration?: number;
@@ -84,15 +102,6 @@ interface PopupProps extends PropsWithChildren {
 }
 declare function PopupContainer(_props: PopupProps): React.ReactPortal | null;
 
-interface ToParams {
-    x?: number;
-    y?: number;
-    animation?: boolean;
-}
-interface ExposedScrollViewMethods {
-    to: (data?: ToParams) => void;
-}
-
 interface OnScrollParameters {
     x?: number;
     y?: number;
@@ -108,11 +117,11 @@ interface ScrollViewProps extends PropsWithChildren {
     onReachLeft?: (done: Function) => void;
     onReachRight?: (done: Function) => void;
 }
-declare const _default$1: (props: ScrollViewProps & React.RefAttributes<ExposedScrollViewMethods>) => React.ReactNode;
+declare const _default$1: (props: ScrollViewProps & React.RefAttributes<ScrollViewExposeMethods>) => React.ReactNode;
 
 declare module 'react' {
     function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
 }
 declare const _default: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
 
-export { Card, Container, Loading, PopupContainer as Popup, type PopupPosition, type PopupType, _default$1 as ScrollView, _default as Swiper, type SwiperExposeMethods, type SwiperProps, _default$2 as utils };
+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 };

package/dist/lib/Button/Button.d.ts

@@ -0,0 +1,10 @@
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+interface ButtonProps extends HTMLAttributes<HTMLButtonElement>, PropsWithChildren {
+    wavesColor?: string;
+    radius?: number;
+    bg?: string;
+    color?: string;
+    block?: boolean;
+}
+declare const Button: FC<ButtonProps>;
+export default Button;

package/dist/lib/Button/Button.js

@@ -0,0 +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)};

package/dist/lib/Button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from './Button';
+export default Button;

package/dist/lib/Button/index.js

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

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

@@ -0,0 +1,6 @@
+declare const styles: {
+    button: object;
+    block: object;
+    ripple: object;
+};
+export default styles;

package/dist/lib/Button/styles.js

@@ -0,0 +1 @@
+"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;

package/dist/lib/ScrollView/ScrollView.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties, PropsWithChildren } from 'react';
-import { ExposedScrollViewMethods } from './type';
+import { ScrollViewExposeMethods } from './type';
 interface OnScrollParameters {
     x?: number;
     y?: number;
@@ -15,5 +15,5 @@ interface ScrollViewProps extends PropsWithChildren {
     onReachLeft?: (done: Function) => void;
     onReachRight?: (done: Function) => void;
 }
-declare const _default: (props: ScrollViewProps & React.RefAttributes<ExposedScrollViewMethods>) => React.ReactNode;
+declare const _default: (props: ScrollViewProps & React.RefAttributes<ScrollViewExposeMethods>) => React.ReactNode;
 export default _default;

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

@@ -3,6 +3,6 @@ export interface ToParams {
     y?: number;
     animation?: boolean;
 }
-export interface ExposedScrollViewMethods {
+export interface ScrollViewExposeMethods {
     to: (data?: ToParams) => void;
 }

package/dist/lib/index.d.ts

@@ -1,5 +1,6 @@
 export * from './types';
 export { default as utils } from './utils';
+export { default as Button } from './Button';
 export { default as Card } from './Card';
 export { default as Container } from './Container';
 export { default as Loading } from './Loading';

package/dist/lib/index.js

@@ -1 +1 @@
-"use strict";var e=require("./utils.js"),r=require("./Card/Card.js"),i=require("./Container/Container.js"),t=require("./Loading/Loading.js"),u=require("./Popup/Popup.js"),o=require("./ScrollView/ScrollView.js"),s=require("./Swiper/Swiper.js");exports.utils=e.default,exports.Card=r.default,exports.Container=i.default,exports.Loading=t.default,exports.Popup=u.default,exports.ScrollView=o.default,exports.Swiper=s.default;
+"use strict";var e=require("./utils.js"),r=require("./Button/Button.js"),t=require("./Card/Card.js"),u=require("./Container/Container.js"),i=require("./Loading/Loading.js"),o=require("./Popup/Popup.js"),s=require("./ScrollView/ScrollView.js"),a=require("./Swiper/Swiper.js");exports.utils=e.default,exports.Button=r.default,exports.Card=t.default,exports.Container=u.default,exports.Loading=i.default,exports.Popup=o.default,exports.ScrollView=s.default,exports.Swiper=a.default;

package/dist/lib/types.d.ts

@@ -1,2 +1,3 @@
 export * from './Popup/type';
+export * from './ScrollView/type';
 export * from './Swiper/type';

package/package.json

@@ -1,62 +1,62 @@
 {
-	"name": "rox-react-components",
-	"version": "0.0.34",
-	"main": "dist/lib/index.js",
-	"module": "dist/es/index.js",
-	"types": "dist/index.d.ts",
-	"description": "A React UI Component Library with swiper that support pc and mobile events, and with loading",
-	"keywords": [
-		"react",
-		"slideMenu",
-		"card",
-		"swiper",
-		"mobile swiper",
-		"pc swiper",
-		"carousel",
-		"mobile carousel",
-		"ps carousel",
-		"loading",
-		"container with ratio",
-		"react swiper carousel pc mobile touch mouse",
-		"touch events swiper",
-		"touch events carousel",
-		"scrollview reachTop reachBottom reachLeft reachRight"
-	],
-	"files": [
-		"dist",
-		"README.md",
-		"pakcage.json"
-	],
-	"engines": {
-		"node": ">=14"
-	},
-	"author": "YangSu.Zhou",
-	"scripts": {
-		"dev": "cross-env NODE_ENV=development rollup -c -w",
-		"build": "cross-env NODE_ENV=production rollup -c"
-	},
-	"license": "MIT",
-	"devDependencies": {
-		"@rollup/plugin-commonjs": "^25.0.7",
-		"@rollup/plugin-node-resolve": "^15.2.3",
-		"@rollup/plugin-strip": "^3.0.4",
-		"@rollup/plugin-terser": "^0.4.4",
-		"@rollup/plugin-typescript": "^11.1.5",
-		"@types/node": "^20.8.10",
-		"@types/react": "^18.2.35",
-		"@types/react-dom": "^18.2.14",
-		"cross-env": "^7.0.3",
-		"rollup": "^4.3.0",
-		"rollup-plugin-delete": "^2.0.0",
-		"rollup-plugin-dts": "^6.1.0",
-		"rollup-plugin-node-externals": "^6.1.2"
-	},
-	"peerDependencies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"dependencies": {
-		"aphrodite": "^2.4.0",
-		"tslib": "^2.6.2"
-	}
+    "name": "rox-react-components",
+    "version": "0.0.36",
+    "main": "dist/lib/index.js",
+    "module": "dist/es/index.js",
+    "types": "dist/index.d.ts",
+    "description": "A React UI Component Library with swiper that support pc and mobile events, and with loading",
+    "keywords": [
+        "react",
+        "slideMenu",
+        "card",
+        "swiper",
+        "mobile swiper",
+        "pc swiper",
+        "carousel",
+        "mobile carousel",
+        "ps carousel",
+        "loading",
+        "container with ratio",
+        "react swiper carousel pc mobile touch mouse",
+        "touch events swiper",
+        "touch events carousel",
+        "scrollview reachTop reachBottom reachLeft reachRight"
+    ],
+    "files": [
+        "dist",
+        "README.md",
+        "pakcage.json"
+    ],
+    "engines": {
+        "node": ">=14"
+    },
+    "author": "YangSu.Zhou",
+    "scripts": {
+        "dev": "cross-env NODE_ENV=development rollup -c -w",
+        "build": "cross-env NODE_ENV=production rollup -c"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^25.0.7",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-strip": "^3.0.4",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^11.1.5",
+        "@types/node": "^20.8.10",
+        "@types/react": "^18.2.35",
+        "@types/react-dom": "^18.2.14",
+        "cross-env": "^7.0.3",
+        "rollup": "^4.3.0",
+        "rollup-plugin-delete": "^2.0.0",
+        "rollup-plugin-dts": "^6.1.0",
+        "rollup-plugin-node-externals": "^6.1.2"
+    },
+    "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "dependencies": {
+        "aphrodite": "^2.4.0",
+        "tslib": "^2.6.2"
+    }
 }