rox-react-components 0.0.20 → 0.0.22

package/README.md

@@ -1,11 +1,11 @@
 # Components
 
-## Swiper [Demo](https://stackblitz.com/edit/stackblitz-starters-fkphwj?file=src%2FApp.tsx)
+#### Swiper (suppoert <strong>PC</strong> & <strong>Mobile</strong> Platform)
+
+## Swiper [Swiper](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

@@ -25,6 +25,9 @@ interface MenuProps<T> extends IconProps {
     subStyle?: CSSProperties;
     itemStyle?: CSSProperties;
     activeItemStyle?: CSSProperties;
+    itemClassName?: string;
+    activeItemClassName?: string;
+    itemClassNameWithNoChildren?: string;
 }
 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 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};
+import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import n,{createContext as i,useMemo as r,useState as a,useCallback as l,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:{},itemClassName:"",activeItemClassName:"",itemClassNameWithNoChildren:""},s=i({active:"",item:null,childrenField:"",changeData:function(){return null}});function f(e){var i=e.iconSize,r=e.iconStrokeWidth,a=e.iconColor,l=e.down;return n.createElement("div",{style:{"--size":i,"--strokeWidth":r,"--color":a},className:"".concat(t(u.arrow_right)," ").concat(l?t(u.arrow_down):"")})}function v(i){var d=a(!1),h=d[0],p=d[1],g=i.item,C=i.index,y=i.renderItem,N=i.activeIcon,E=i.icon,x=i.subStyle,S=i.itemStyle,b=i.activeItemStyle,w=i.itemClassName,I=i.activeItemClassName,_=i.itemClassNameWithNoChildren,k=o(s),F=k.active,W=k.childrenField,z=k.changeData,D=Array.isArray(g[W])&&g[W].length?g[W]:null,j=r((function(){return D?S:F===C?e(e({},S),b):S}),[S,b,D,F,C]),A=r((function(){return D?w:F===C?w+" "+_+" "+I:w+" "+_}),[w,I,D,F,C,_]),P=l((function(e){e.stopPropagation(),D||F===C||z({active:C,item:g}),p((function(e){return!e}))}),[D,z,g,C]);return c((function(){if(void 0!==F){var e=F.split("-"),t=C.split("-");F.startsWith(C)&&e.length>t.length&&C.length<F.length&&p(!0)}}),[F,C]),n.createElement("div",{className:t(u.w_full,u.border_box),onClick:P},n.createElement("div",{className:t(u.item),style:j},n.createElement("div",{className:"".concat(t(u.flex_1)," ").concat(A)},y(g)),n.createElement(n.Fragment,null,D?h?N||n.createElement(f,e({},i,{down:!0})):E||n.createElement(f,e({},i)):null)),D?D.map((function(r,a){return n.createElement("div",{key:a,className:t(u.w_full,u.border_box),style:x},n.createElement(m,{expand:h},n.createElement(v,e({},i,{index:C+"-"+a,item:r}))))})):null)}function h(t){var i=r((function(){return e(e({},d),t)}),[t]),o=a({active:"",item:null}),m=o[0],u=o[1],f=l((function(t){return u((function(n){return e(e({},n),t)}))}),[]);return c((function(){var e;null===(e=i.onChange)||void 0===e||e.call(i,m)}),[m.active]),n.createElement(s.Provider,{value:{active:m.active,item:m.item,childrenField:i.childrenField,changeData:f}},i.data.map((function(t,r){return n.createElement(v,e({key:r},i,{index:r.toString(),item:t}))})))}export{h as default};

package/dist/index.d.ts

@@ -92,6 +92,9 @@ interface MenuProps<T> extends IconProps {
     subStyle?: CSSProperties;
     itemStyle?: CSSProperties;
     activeItemStyle?: CSSProperties;
+    itemClassName?: string;
+    activeItemClassName?: string;
+    itemClassNameWithNoChildren?: string;
 }
 declare function Menu<T extends unknown>(_props: MenuProps<T>): React.JSX.Element;
 

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

@@ -25,6 +25,9 @@ interface MenuProps<T> extends IconProps {
     subStyle?: CSSProperties;
     itemStyle?: CSSProperties;
     activeItemStyle?: CSSProperties;
+    itemClassName?: string;
+    activeItemClassName?: string;
+    itemClassNameWithNoChildren?: string;
 }
 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"),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}))})))};
+"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:{},itemClassName:"",activeItemClassName:"",itemClassNameWithNoChildren:""},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,v=r.renderItem,_=r.activeIcon,h=r.icon,g=r.subStyle,C=r.itemStyle,p=r.activeItemStyle,y=r.itemClassName,x=r.activeItemClassName,E=r.itemClassNameWithNoChildren,N=n.useContext(l),S=N.active,b=N.childrenField,k=N.changeData,w=Array.isArray(m[b])&&m[b].length?m[b]:null,I=n.useMemo((function(){return w?C:S===f?e.__assign(e.__assign({},C),p):C}),[C,p,w,S,f]),F=n.useMemo((function(){return w?y:S===f?y+" "+E+" "+x:y+" "+E}),[y,x,w,S,f,E]),W=n.useCallback((function(e){e.stopPropagation(),w||S===f||k({active:f,item:m}),d((function(e){return!e}))}),[w,k,m,f]);return n.useEffect((function(){if(void 0!==S){var e=S.split("-"),t=f.split("-");S.startsWith(f)&&e.length>t.length&&f.length<S.length&&d(!0)}}),[S,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:I},n.createElement("div",{className:"".concat(t.css(i.default.flex_1)," ").concat(F)},v(m)),n.createElement(n.Fragment,null,w?o?_||n.createElement(c,e.__assign({},r,{down:!0})):h||n.createElement(c,e.__assign({},r)):null)),w?w.map((function(l,c){return n.createElement("div",{key:c,className:t.css(i.default.w_full,i.default.border_box),style:g},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/package.json

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