rox-react-components 0.0.18 → 0.0.19

package/README.md

@@ -6,6 +6,12 @@
 
 # Components
 
-## Swiper、Loading、 Card、Container、Menu、ScrollView
+# Swiper [Demo](https://stackblitz.com/edit/stackblitz-starters-fkphwj?file=src%2FApp.tsx)
+
+# Loading & Container [Loading & Container](https://stackblitz.com/edit/stackblitz-starters-qs4mnf?file=src%2FApp.tsx)
+
+# ScrollView [ScrollView](https://stackblitz.com/edit/stackblitz-starters-rtdcia?file=src%2FApp.tsx)
+
+# Card [Card](https://stackblitz.com/edit/stackblitz-starters-hjyeni?file=src%2FApp.tsx)
 
 ## Swiper (suppoert <strong>PC</strong> & <strong>Mobile</strong> Platform)

package/dist/es/Menu/Menu.d.ts

@@ -14,20 +14,17 @@ interface IconProps {
 interface MenuProps<T> extends IconProps {
     data: T[];
     renderItem: (item: T) => ReactNode;
-    onChange?: (item: T, index: string) => void;
-    labelStyle?: CSSProperties;
-    labelClassName?: string;
-    subBoxStyle?: CSSProperties;
-    subBoxClassName?: string;
-    activeStyle?: CSSProperties;
-    activeClassName?: string;
+    onChange?: (data: {
+        active: string;
+        item: T | null;
+    }) => void;
     active?: string;
-    isMultipleExpand?: boolean;
+    childrenField?: string;
     icon?: ReactNode;
     activeIcon?: ReactNode;
-    childrenField?: string;
-    lastLabelItemStyle?: CSSProperties;
-    lastLabelItemClassName?: string;
+    subStyle?: CSSProperties;
+    itemStyle?: CSSProperties;
+    activeItemStyle?: CSSProperties;
 }
-declare const Menu: <T extends unknown>(_props: MenuProps<T>) => React.JSX.Element;
+declare function Menu<T extends unknown>(_props: MenuProps<T>): React.JSX.Element;
 export default Menu;

package/dist/es/Menu/Menu.js

@@ -1 +1 @@
-import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import a,{createContext as r,useState as n,useEffect as l,useContext as i,useCallback as c}from"react";import o from"../Card/Card.js";import s from"./styles.js";var m={data:[],renderItem:function(){return null},onChange:function(){return null},labelStyle:{width:"100%"},labelClassName:"",subBoxStyle:{paddingLeft:"25px"},subBoxClassName:"",activeStyle:{color:"skyblue"},activeClassName:"",active:"",isMultipleExpand:!1,iconSize:"10px",iconStrokeWidth:"2px",iconColor:"#333",childrenField:"children",lastLabelItemStyle:{},lastLabelItemClassName:""};function d(r){var n=e(e({},m),r),l=n.iconSize,i=n.iconStrokeWidth,c=n.iconColor,o=n.down;return a.createElement("div",{style:{"--size":l,"--strokeWidth":i,"--color":c},className:"".concat(t(s.arrow_right)," ").concat(o?t(s.arrow_down):"")})}var u=r({active:"0",changeActive:function(){return null}}),v=function(r){var y=e(e({},m),r),f=y.renderItem,h=y.item,p=y.subBoxStyle,b=y.activeStyle,x=y.index,g=y.isMultipleExpand,C=y.icon,S=y.activeIcon,A=y.labelStyle,E=y.childrenField,N=y.labelClassName,w=y.subBoxClassName,k=y.activeClassName,I=y.lastLabelItemClassName,_=y.lastLabelItemStyle,W=n(!1),B=W[0],L=W[1],F=i(u),z=F.active,j=F.changeActive,M=c((function(e){e.stopPropagation(),j(x),y.onChange(h,x),h[E]&&Array.isArray(h[E])&&L((function(e){return!e}))}),[j,x,h,E]);return l((function(){if(void 0!==z){var e=z.split("-"),t=x.split("-");z.startsWith(x)&&e.length>t.length&&x.length<z.length?L(!0):z.startsWith(x)&&x.startsWith(z)||g||L(!1)}}),[z,x]),a.createElement("div",{className:t(s.w_full,s.border_box),onClick:M},a.createElement("div",{className:"".concat(t(s.item)," ").concat(Array.isArray(h[E])?"":I," ").concat(N," ").concat(z===x?k:""),style:e(z===x?e(e(e({},m.labelStyle),A),b):e(e({},m.labelStyle),A),Array.isArray(h[E])?{}:_)},a.createElement("div",{className:t(s.flex_1)},f(h))," ",Array.isArray(h[E])&&h[E].length?B?S||a.createElement(d,e({},y,{down:!0})):C||a.createElement(d,e({},y)):null),Array.isArray(h[E])?h[E].map((function(r,n){return a.createElement("div",{key:n,className:"".concat(t(s.w_full,s.border_box)," ").concat(w),style:e(e({},m.subBoxStyle),p)},a.createElement(o,{expand:B},a.createElement(v,e({},y,{index:x+"-"+n,item:r}))))})):null)},y=function(t){var r=e(e({},m),t),i=n(r.active),c=i[0],o=i[1];return l((function(){if(r.data.length&&void 0!==r.active){var e=r.active.split("-").map((function(e){return Number(e)})),t=r.data,a={};e.forEach((function(e){if(Array.isArray(t)){a=t[e]||{};var n=r.childrenField;t=a[n]}})),r.onChange(a,r.active)}o(r.active)}),[r.active,r.data,r.childrenField]),a.createElement(u.Provider,{value:{active:c,changeActive:o}},r.data.map((function(t,n){return a.createElement(v,e({key:n,index:n.toString()},r,{item:t}))})))};export{y as default};
+import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import n,{createContext as r,useMemo as i,useState as l,useCallback as a,useEffect as c,useContext as o}from"react";import m from"../Card/Card.js";import u from"./styles.js";var d={data:[],renderItem:function(){return null},onChange:function(){return null},active:"",childrenField:"children",iconSize:"10px",iconColor:"#333",iconStrokeWidth:"2px",subStyle:{paddingLeft:"25px"},itemStyle:{},activeItemStyle:{}},s=r({active:"",item:null,childrenField:"",changeData:function(){return null}});function f(e){var r=e.iconSize,i=e.iconStrokeWidth,l=e.iconColor,a=e.down;return n.createElement("div",{style:{"--size":r,"--strokeWidth":i,"--color":l},className:"".concat(t(u.arrow_right)," ").concat(a?t(u.arrow_down):"")})}function v(r){var d=l(!1),h=d[0],p=d[1],g=r.item,y=r.index,E=r.renderItem,x=r.activeIcon,S=r.icon,b=r.subStyle,w=r.itemStyle,C=r.activeItemStyle,_=o(s),k=_.active,F=_.childrenField,I=_.changeData,N=Array.isArray(g[F])&&g[F].length?g[F]:null,W=i((function(){return N?w:k===y?e(e({},w),C):w}),[w,C,N,k,y]),z=a((function(e){e.stopPropagation(),N||k===y||I({active:y,item:g}),p((function(e){return!e}))}),[N,I,g,y]);return c((function(){if(void 0!==k){var e=k.split("-"),t=y.split("-");k.startsWith(y)&&e.length>t.length&&y.length<k.length&&p(!0)}}),[k,y]),n.createElement("div",{className:t(u.w_full,u.border_box),onClick:z},n.createElement("div",{className:t(u.item),style:W},n.createElement("div",{className:t(u.flex_1)},E(g)),n.createElement(n.Fragment,null,N?h?x||n.createElement(f,e({},r,{down:!0})):S||n.createElement(f,e({},r)):null)),N?N.map((function(i,l){return n.createElement("div",{key:l,className:t(u.w_full,u.border_box),style:b},n.createElement(m,{expand:h},n.createElement(v,e({},r,{index:y+"-"+l,item:i}))))})):null)}function h(t){var r=i((function(){return e(e({},d),t)}),[t]),o=l({active:"",item:null}),m=o[0],u=o[1],f=a((function(t){return u((function(n){return e(e({},n),t)}))}),[]);return c((function(){var e;null===(e=r.onChange)||void 0===e||e.call(r,m)}),[m.active]),n.createElement(s.Provider,{value:{active:m.active,item:m.item,childrenField:r.childrenField,changeData:f}},r.data.map((function(t,i){return n.createElement(v,e({key:i},r,{index:i.toString(),item:t}))})))}export{h as default};

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

@@ -1,2 +1,2 @@
-import Menu from './Menu';
-export default Menu;
+import RoxMenu from './Menu';
+export default RoxMenu;

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

@@ -1,7 +1,7 @@
 declare const styles: {
     w_full: object;
-    item: object;
     border_box: object;
+    item: object;
     flex_1: object;
     arrow_right: object;
     arrow_down: object;

package/dist/es/Menu/styles.js

@@ -1 +1 @@
-import{StyleSheet as r}from"aphrodite/no-important";var o=r.create({w_full:{width:"100%"},item:{display:"flex",width:"100%",paddingRight:"10px",alignItems:"center",justifyContent:"space-between",boxSizing:"border-box"},border_box:{boxSizing:"border-box"},flex_1:{flex:1},arrow_right:{position:"relative",width:"var(--size)",height:"var(--size)",borderTop:"var(--strokeWidth) solid var(--color)",borderRight:"var(--strokeWidth) solid var(--color)",transform:"rotate(45deg)",transformOrigin:"center",transition:"all 100ms linear"},arrow_down:{transform:"rotate(135deg)"}});export{o as default};
+import{StyleSheet as r}from"aphrodite/no-important";var o=r.create({w_full:{width:"100%"},border_box:{boxSizing:"border-box"},item:{display:"flex",width:"100%",paddingRight:"10px",alignItems:"center",justifyContent:"space-between",boxSizing:"border-box"},flex_1:{flex:1},arrow_right:{position:"relative",width:"var(--size)",height:"var(--size)",borderTop:"var(--strokeWidth) solid var(--color)",borderRight:"var(--strokeWidth) solid var(--color)",transform:"rotate(45deg)",transformOrigin:"center",transition:"all 100ms linear"},arrow_down:{transform:"rotate(135deg)"}});export{o as default};

package/dist/index.d.ts

@@ -81,22 +81,19 @@ interface IconProps {
 interface MenuProps<T> extends IconProps {
     data: T[];
     renderItem: (item: T) => ReactNode;
-    onChange?: (item: T, index: string) => void;
-    labelStyle?: CSSProperties;
-    labelClassName?: string;
-    subBoxStyle?: CSSProperties;
-    subBoxClassName?: string;
-    activeStyle?: CSSProperties;
-    activeClassName?: string;
+    onChange?: (data: {
+        active: string;
+        item: T | null;
+    }) => void;
     active?: string;
-    isMultipleExpand?: boolean;
+    childrenField?: string;
     icon?: ReactNode;
     activeIcon?: ReactNode;
-    childrenField?: string;
-    lastLabelItemStyle?: CSSProperties;
-    lastLabelItemClassName?: string;
+    subStyle?: CSSProperties;
+    itemStyle?: CSSProperties;
+    activeItemStyle?: CSSProperties;
 }
-declare const Menu: <T extends unknown>(_props: MenuProps<T>) => React.JSX.Element;
+declare function Menu<T extends unknown>(_props: MenuProps<T>): React.JSX.Element;
 
 interface OnScrollParameters {
     x?: number;

package/dist/lib/Menu/Menu.d.ts

@@ -14,20 +14,17 @@ interface IconProps {
 interface MenuProps<T> extends IconProps {
     data: T[];
     renderItem: (item: T) => ReactNode;
-    onChange?: (item: T, index: string) => void;
-    labelStyle?: CSSProperties;
-    labelClassName?: string;
-    subBoxStyle?: CSSProperties;
-    subBoxClassName?: string;
-    activeStyle?: CSSProperties;
-    activeClassName?: string;
+    onChange?: (data: {
+        active: string;
+        item: T | null;
+    }) => void;
     active?: string;
-    isMultipleExpand?: boolean;
+    childrenField?: string;
     icon?: ReactNode;
     activeIcon?: ReactNode;
-    childrenField?: string;
-    lastLabelItemStyle?: CSSProperties;
-    lastLabelItemClassName?: string;
+    subStyle?: CSSProperties;
+    itemStyle?: CSSProperties;
+    activeItemStyle?: CSSProperties;
 }
-declare const Menu: <T extends unknown>(_props: MenuProps<T>) => React.JSX.Element;
+declare function Menu<T extends unknown>(_props: MenuProps<T>): React.JSX.Element;
 export default Menu;

package/dist/lib/Menu/Menu.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),a=require("react"),n=require("../Card/Card.js"),s=require("./styles.js"),i={data:[],renderItem:function(){return null},onChange:function(){return null},labelStyle:{width:"100%"},labelClassName:"",subBoxStyle:{paddingLeft:"25px"},subBoxClassName:"",activeStyle:{color:"skyblue"},activeClassName:"",active:"",isMultipleExpand:!1,iconSize:"10px",iconStrokeWidth:"2px",iconColor:"#333",childrenField:"children",lastLabelItemStyle:{},lastLabelItemClassName:""};function r(n){var r=e.__assign(e.__assign({},i),n),l=r.iconSize,c=r.iconStrokeWidth,o=r.iconColor,u=r.down;return a.createElement("div",{style:{"--size":l,"--strokeWidth":c,"--color":o},className:"".concat(t.css(s.default.arrow_right)," ").concat(u?t.css(s.default.arrow_down):"")})}var l=a.createContext({active:"0",changeActive:function(){return null}}),c=function(o){var u=e.__assign(e.__assign({},i),o),d=u.renderItem,_=u.item,m=u.subBoxStyle,f=u.activeStyle,v=u.index,g=u.isMultipleExpand,y=u.icon,h=u.activeIcon,b=u.labelStyle,p=u.childrenField,x=u.labelClassName,C=u.subBoxClassName,S=u.activeClassName,A=u.lastLabelItemClassName,E=u.lastLabelItemStyle,N=a.useState(!1),k=N[0],w=N[1],I=a.useContext(l),W=I.active,q=I.changeActive,B=a.useCallback((function(e){e.stopPropagation(),q(v),u.onChange(_,v),_[p]&&Array.isArray(_[p])&&w((function(e){return!e}))}),[q,v,_,p]);return a.useEffect((function(){if(void 0!==W){var e=W.split("-"),t=v.split("-");W.startsWith(v)&&e.length>t.length&&v.length<W.length?w(!0):W.startsWith(v)&&v.startsWith(W)||g||w(!1)}}),[W,v]),a.createElement("div",{className:t.css(s.default.w_full,s.default.border_box),onClick:B},a.createElement("div",{className:"".concat(t.css(s.default.item)," ").concat(Array.isArray(_[p])?"":A," ").concat(x," ").concat(W===v?S:""),style:W===v?e.__assign(e.__assign(e.__assign(e.__assign({},i.labelStyle),b),f),Array.isArray(_[p])?{}:E):e.__assign(e.__assign(e.__assign({},i.labelStyle),b),Array.isArray(_[p])?{}:E)},a.createElement("div",{className:t.css(s.default.flex_1)},d(_))," ",Array.isArray(_[p])&&_[p].length?k?h||a.createElement(r,e.__assign({},u,{down:!0})):y||a.createElement(r,e.__assign({},u)):null),Array.isArray(_[p])?_[p].map((function(r,l){return a.createElement("div",{key:l,className:"".concat(t.css(s.default.w_full,s.default.border_box)," ").concat(C),style:e.__assign(e.__assign({},i.subBoxStyle),m)},a.createElement(n.default,{expand:k},a.createElement(c,e.__assign({},u,{index:v+"-"+l,item:r}))))})):null)};exports.default=function(t){var n=e.__assign(e.__assign({},i),t),s=a.useState(n.active),r=s[0],o=s[1];return a.useEffect((function(){if(n.data.length&&void 0!==n.active){var e=n.active.split("-").map((function(e){return Number(e)})),t=n.data,a={};e.forEach((function(e){if(Array.isArray(t)){a=t[e]||{};var s=n.childrenField;t=a[s]}})),n.onChange(a,n.active)}o(n.active)}),[n.active,n.data,n.childrenField]),a.createElement(l.Provider,{value:{active:r,changeActive:o}},n.data.map((function(t,s){return a.createElement(c,e.__assign({key:s,index:s.toString()},n,{item:t}))})))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),n=require("react"),a=require("../Card/Card.js"),i=require("./styles.js"),r={data:[],renderItem:function(){return null},onChange:function(){return null},active:"",childrenField:"children",iconSize:"10px",iconColor:"#333",iconStrokeWidth:"2px",subStyle:{paddingLeft:"25px"},itemStyle:{},activeItemStyle:{}},l=n.createContext({active:"",item:null,childrenField:"",changeData:function(){return null}});function c(e){var a=e.iconSize,r=e.iconStrokeWidth,l=e.iconColor,c=e.down;return n.createElement("div",{style:{"--size":a,"--strokeWidth":r,"--color":l},className:"".concat(t.css(i.default.arrow_right)," ").concat(c?t.css(i.default.arrow_down):"")})}function s(r){var u=n.useState(!1),o=u[0],d=u[1],m=r.item,f=r.index,_=r.renderItem,v=r.activeIcon,g=r.icon,h=r.subStyle,p=r.itemStyle,y=r.activeItemStyle,x=n.useContext(l),E=x.active,S=x.childrenField,C=x.changeData,b=Array.isArray(m[S])&&m[S].length?m[S]:null,k=n.useMemo((function(){return b?p:E===f?e.__assign(e.__assign({},p),y):p}),[p,y,b,E,f]),w=n.useCallback((function(e){e.stopPropagation(),b||E===f||C({active:f,item:m}),d((function(e){return!e}))}),[b,C,m,f]);return n.useEffect((function(){if(void 0!==E){var e=E.split("-"),t=f.split("-");E.startsWith(f)&&e.length>t.length&&f.length<E.length&&d(!0)}}),[E,f]),n.createElement("div",{className:t.css(i.default.w_full,i.default.border_box),onClick:w},n.createElement("div",{className:t.css(i.default.item),style:k},n.createElement("div",{className:t.css(i.default.flex_1)},_(m)),n.createElement(n.Fragment,null,b?o?v||n.createElement(c,e.__assign({},r,{down:!0})):g||n.createElement(c,e.__assign({},r)):null)),b?b.map((function(l,c){return n.createElement("div",{key:c,className:t.css(i.default.w_full,i.default.border_box),style:h},n.createElement(a.default,{expand:o},n.createElement(s,e.__assign({},r,{index:f+"-"+c,item:l}))))})):null)}exports.default=function(t){var a=n.useMemo((function(){return e.__assign(e.__assign({},r),t)}),[t]),i=n.useState({active:"",item:null}),c=i[0],u=i[1],o=n.useCallback((function(t){return u((function(n){return e.__assign(e.__assign({},n),t)}))}),[]);return n.useEffect((function(){var e;null===(e=a.onChange)||void 0===e||e.call(a,c)}),[c.active]),n.createElement(l.Provider,{value:{active:c.active,item:c.item,childrenField:a.childrenField,changeData:o}},a.data.map((function(t,i){return n.createElement(s,e.__assign({key:i},a,{index:i.toString(),item:t}))})))};

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

@@ -1,2 +1,2 @@
-import Menu from './Menu';
-export default Menu;
+import RoxMenu from './Menu';
+export default RoxMenu;

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

@@ -1,7 +1,7 @@
 declare const styles: {
     w_full: object;
-    item: object;
     border_box: object;
+    item: object;
     flex_1: object;
     arrow_right: object;
     arrow_down: object;

package/dist/lib/Menu/styles.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({w_full:{width:"100%"},item:{display:"flex",width:"100%",paddingRight:"10px",alignItems:"center",justifyContent:"space-between",boxSizing:"border-box"},border_box:{boxSizing:"border-box"},flex_1:{flex:1},arrow_right:{position:"relative",width:"var(--size)",height:"var(--size)",borderTop:"var(--strokeWidth) solid var(--color)",borderRight:"var(--strokeWidth) solid var(--color)",transform:"rotate(45deg)",transformOrigin:"center",transition:"all 100ms linear"},arrow_down:{transform:"rotate(135deg)"}});exports.default=e;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({w_full:{width:"100%"},border_box:{boxSizing:"border-box"},item:{display:"flex",width:"100%",paddingRight:"10px",alignItems:"center",justifyContent:"space-between",boxSizing:"border-box"},flex_1:{flex:1},arrow_right:{position:"relative",width:"var(--size)",height:"var(--size)",borderTop:"var(--strokeWidth) solid var(--color)",borderRight:"var(--strokeWidth) solid var(--color)",transform:"rotate(45deg)",transformOrigin:"center",transition:"all 100ms linear"},arrow_down:{transform:"rotate(135deg)"}});exports.default=e;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rox-react-components",
-	"version": "0.0.18",
+	"version": "0.0.19",
 	"main": "dist/lib/index.js",
 	"module": "dist/es/index.js",
 	"types": "dist/index.d.ts",