rox-react-components 0.0.35 → 0.0.37

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 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/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/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/index.d.ts

@@ -1,4 +1,4 @@
-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';
@@ -40,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;
@@ -115,4 +124,4 @@ declare module 'react' {
 }
 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, type ScrollViewExposeMethods, _default as Swiper, type SwiperExposeMethods, type SwiperProps, type ToParams, _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"),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/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/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/package.json

@@ -1,62 +1,62 @@
 {
-	"name": "rox-react-components",
-	"version": "0.0.35",
-	"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.37",
+    "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"
+    }
 }