rox-react-components 0.0.15 → 0.0.16

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

@@ -15,14 +15,14 @@ interface MenuProps<T> extends IconProps {
     data: T[];
     renderItem: (item: T) => ReactNode;
     onChange?: (item: T, index: string) => void;
-    subItemStyle?: CSSProperties;
+    labelStyle?: CSSProperties;
+    subBoxStyle?: CSSProperties;
     activeStyle?: CSSProperties;
     active?: string;
     isMultipleExpand?: boolean;
     icon?: ReactNode;
     activeIcon?: ReactNode;
+    childrenField?: string;
 }
-declare const Menu: <T extends {
-    children?: unknown[] | undefined;
-}>(_props: MenuProps<T>) => React.JSX.Element;
+declare const 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 r,{createContext as n,useState as i,useEffect as a,useContext as c,useCallback as o}from"react";import l from"../Card/Card.js";import d from"./styles.js";var u={data:[],renderItem:function(){return null},onChange:function(){return null},subItemStyle:{paddingLeft:"25px"},activeStyle:{color:"skyblue"},active:"",isMultipleExpand:!1,iconSize:"10px",iconStrokeWidth:"2px",iconColor:"#333"};function s(n){var i=e(e({},u),n),a=i.iconSize,c=i.iconStrokeWidth,o=i.iconColor,l=i.down;return r.createElement("div",{style:{"--size":a,"--strokeWidth":c,"--color":o},className:"".concat(t(d.arrow_right)," ").concat(l?t(d.arrow_down):"")})}var m=n({active:"0",changeActive:function(){return null}}),v=function(n){var h=e(e({},u),n),f=h.renderItem,p=h.item,y=h.subItemStyle,g=h.activeStyle,E=h.index,x=h.isMultipleExpand,A=h.icon,b=h.activeIcon,S=i(!1),C=S[0],k=S[1],w=c(m),I=w.active,W=w.changeActive,_=o((function(e){e.stopPropagation(),W(E),h.onChange(p,E),p.children&&Array.isArray(p.children)&&k((function(e){return!e}))}),[W,E,p]);return a((function(){if(void 0!==I){var e=I.split("-"),t=E.split("-");I.startsWith(E)&&e.length>t.length&&E.length<I.length?k(!0):I.startsWith(E)&&E.startsWith(I)||x||k(!1)}}),[I,E]),r.createElement("div",{className:t(d.w_full,d.border_box),onClick:_},r.createElement("div",{className:t(d.item),style:I===E?g:{}},f(p)," ",Array.isArray(p.children)&&p.children.length?C?b||r.createElement(s,e({},h,{down:!0})):A||r.createElement(s,e({},h)):null),Array.isArray(p.children)?p.children.map((function(n,i){return r.createElement("div",{key:i,className:t(d.w_full,d.border_box),style:e(e({},u.subItemStyle),y)},r.createElement(l,{expand:C},r.createElement(v,e({},h,{index:E+"-"+i,item:n}))))})):null)},h=function(t){var n=e(e({},u),t),c=i(n.active),o=c[0],l=c[1];return a((function(){if(n.data.length&&void 0!==n.active){var e=n.active.split("-").map((function(e){return Number(e)})),t=n.data,r={};e.forEach((function(e){Array.isArray(t)&&(r=t[e]||{},t=r.children)})),n.onChange(r,n.active)}l(n.active)}),[n.active,n.data]),r.createElement(m.Provider,{value:{active:o,changeActive:l}},n.data.map((function(t,i){return r.createElement(v,e({key:i,index:i.toString()},n,{item:t}))})))};export{h as default};
+import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import r,{createContext as n,useState as i,useEffect as a,useContext as l,useCallback as o}from"react";import c from"../Card/Card.js";import d from"./styles.js";var s={data:[],renderItem:function(){return null},onChange:function(){return null},labelStyle:{width:"100%"},subBoxStyle:{paddingLeft:"25px"},activeStyle:{color:"skyblue"},active:"",isMultipleExpand:!1,iconSize:"10px",iconStrokeWidth:"2px",iconColor:"#333",childrenField:"children"};function u(n){var i=e(e({},s),n),a=i.iconSize,l=i.iconStrokeWidth,o=i.iconColor,c=i.down;return r.createElement("div",{style:{"--size":a,"--strokeWidth":l,"--color":o},className:"".concat(t(d.arrow_right)," ").concat(c?t(d.arrow_down):"")})}var m=n({active:"0",changeActive:function(){return null}}),v=function(n){var f=e(e({},s),n),h=f.renderItem,p=f.item,y=f.subBoxStyle,g=f.activeStyle,x=f.index,b=f.isMultipleExpand,E=f.icon,S=f.activeIcon,A=f.labelStyle,w=f.childrenField,C=i(!1),k=C[0],_=C[1],N=l(m),W=N.active,F=N.changeActive,z=o((function(e){e.stopPropagation(),F(x),f.onChange(p,x),p[w]&&Array.isArray(p[w])&&_((function(e){return!e}))}),[F,x,p,w]);return a((function(){if(void 0!==W){var e=W.split("-"),t=x.split("-");W.startsWith(x)&&e.length>t.length&&x.length<W.length?_(!0):W.startsWith(x)&&x.startsWith(W)||b||_(!1)}}),[W,x]),r.createElement("div",{className:t(d.w_full,d.border_box),onClick:z},r.createElement("div",{className:t(d.item),style:W===x?e(e(e({},s.labelStyle),A),g):e(e({},s.labelStyle),A)},r.createElement("div",{className:t(d.flex_1)},h(p))," ",Array.isArray(p[w])&&p[w].length?k?S||r.createElement(u,e({},f,{down:!0})):E||r.createElement(u,e({},f)):null),Array.isArray(p[w])?p[w].map((function(n,i){return r.createElement("div",{key:i,className:t(d.w_full,d.border_box),style:e(e({},s.subBoxStyle),y)},r.createElement(c,{expand:k},r.createElement(v,e({},f,{index:x+"-"+i,item:n}))))})):null)},f=function(t){var n=e(e({},s),t),l=i(n.active),o=l[0],c=l[1];return a((function(){if(n.data.length&&void 0!==n.active){var e=n.active.split("-").map((function(e){return Number(e)})),t=n.data,r={};e.forEach((function(e){if(Array.isArray(t)){r=t[e]||{};var i=n.childrenField;t=r[i]}})),n.onChange(r,n.active)}c(n.active)}),[n.active,n.data,n.childrenField]),r.createElement(m.Provider,{value:{active:o,changeActive:c}},n.data.map((function(t,i){return r.createElement(v,e({key:i,index:i.toString()},n,{item:t}))})))};export{f as default};

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

@@ -2,6 +2,7 @@ declare const styles: {
     w_full: object;
     item: object;
     border_box: 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"},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%"},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};

package/dist/index.d.ts

@@ -82,16 +82,16 @@ interface MenuProps<T> extends IconProps {
     data: T[];
     renderItem: (item: T) => ReactNode;
     onChange?: (item: T, index: string) => void;
-    subItemStyle?: CSSProperties;
+    labelStyle?: CSSProperties;
+    subBoxStyle?: CSSProperties;
     activeStyle?: CSSProperties;
     active?: string;
     isMultipleExpand?: boolean;
     icon?: ReactNode;
     activeIcon?: ReactNode;
+    childrenField?: string;
 }
-declare const Menu: <T extends {
-    children?: unknown[] | undefined;
-}>(_props: MenuProps<T>) => React.JSX.Element;
+declare const Menu: <T extends unknown>(_props: MenuProps<T>) => React.JSX.Element;
 
 interface OnScrollParameters {
     x?: number;

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

@@ -15,14 +15,14 @@ interface MenuProps<T> extends IconProps {
     data: T[];
     renderItem: (item: T) => ReactNode;
     onChange?: (item: T, index: string) => void;
-    subItemStyle?: CSSProperties;
+    labelStyle?: CSSProperties;
+    subBoxStyle?: CSSProperties;
     activeStyle?: CSSProperties;
     active?: string;
     isMultipleExpand?: boolean;
     icon?: ReactNode;
     activeIcon?: ReactNode;
+    childrenField?: string;
 }
-declare const Menu: <T extends {
-    children?: unknown[] | undefined;
-}>(_props: MenuProps<T>) => React.JSX.Element;
+declare const 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"),r=require("./styles.js"),i={data:[],renderItem:function(){return null},onChange:function(){return null},subItemStyle:{paddingLeft:"25px"},activeStyle:{color:"skyblue"},active:"",isMultipleExpand:!1,iconSize:"10px",iconStrokeWidth:"2px",iconColor:"#333"};function s(a){var s=e.__assign(e.__assign({},i),a),c=s.iconSize,l=s.iconStrokeWidth,o=s.iconColor,u=s.down;return n.createElement("div",{style:{"--size":c,"--strokeWidth":l,"--color":o},className:"".concat(t.css(r.default.arrow_right)," ").concat(u?t.css(r.default.arrow_down):"")})}var c=n.createContext({active:"0",changeActive:function(){return null}}),l=function(o){var u=e.__assign(e.__assign({},i),o),d=u.renderItem,f=u.item,v=u.subItemStyle,_=u.activeStyle,g=u.index,h=u.isMultipleExpand,m=u.icon,p=u.activeIcon,y=n.useState(!1),x=y[0],E=y[1],b=n.useContext(c),S=b.active,A=b.changeActive,C=n.useCallback((function(e){e.stopPropagation(),A(g),u.onChange(f,g),f.children&&Array.isArray(f.children)&&E((function(e){return!e}))}),[A,g,f]);return n.useEffect((function(){if(void 0!==S){var e=S.split("-"),t=g.split("-");S.startsWith(g)&&e.length>t.length&&g.length<S.length?E(!0):S.startsWith(g)&&g.startsWith(S)||h||E(!1)}}),[S,g]),n.createElement("div",{className:t.css(r.default.w_full,r.default.border_box),onClick:C},n.createElement("div",{className:t.css(r.default.item),style:S===g?_:{}},d(f)," ",Array.isArray(f.children)&&f.children.length?x?p||n.createElement(s,e.__assign({},u,{down:!0})):m||n.createElement(s,e.__assign({},u)):null),Array.isArray(f.children)?f.children.map((function(s,c){return n.createElement("div",{key:c,className:t.css(r.default.w_full,r.default.border_box),style:e.__assign(e.__assign({},i.subItemStyle),v)},n.createElement(a.default,{expand:x},n.createElement(l,e.__assign({},u,{index:g+"-"+c,item:s}))))})):null)};exports.default=function(t){var a=e.__assign(e.__assign({},i),t),r=n.useState(a.active),s=r[0],o=r[1];return n.useEffect((function(){if(a.data.length&&void 0!==a.active){var e=a.active.split("-").map((function(e){return Number(e)})),t=a.data,n={};e.forEach((function(e){Array.isArray(t)&&(n=t[e]||{},t=n.children)})),a.onChange(n,a.active)}o(a.active)}),[a.active,a.data]),n.createElement(c.Provider,{value:{active:s,changeActive:o}},a.data.map((function(t,r){return n.createElement(l,e.__assign({key:r,index:r.toString()},a,{item:t}))})))};
+"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"),i=require("./styles.js"),r={data:[],renderItem:function(){return null},onChange:function(){return null},labelStyle:{width:"100%"},subBoxStyle:{paddingLeft:"25px"},activeStyle:{color:"skyblue"},active:"",isMultipleExpand:!1,iconSize:"10px",iconStrokeWidth:"2px",iconColor:"#333",childrenField:"children"};function s(n){var s=e.__assign(e.__assign({},r),n),l=s.iconSize,c=s.iconStrokeWidth,o=s.iconColor,u=s.down;return a.createElement("div",{style:{"--size":l,"--strokeWidth":c,"--color":o},className:"".concat(t.css(i.default.arrow_right)," ").concat(u?t.css(i.default.arrow_down):"")})}var l=a.createContext({active:"0",changeActive:function(){return null}}),c=function(o){var u=e.__assign(e.__assign({},r),o),d=u.renderItem,_=u.item,f=u.subBoxStyle,v=u.activeStyle,g=u.index,h=u.isMultipleExpand,m=u.icon,y=u.activeIcon,p=u.labelStyle,x=u.childrenField,b=a.useState(!1),E=b[0],S=b[1],A=a.useContext(l),C=A.active,k=A.changeActive,w=a.useCallback((function(e){e.stopPropagation(),k(g),u.onChange(_,g),_[x]&&Array.isArray(_[x])&&S((function(e){return!e}))}),[k,g,_,x]);return a.useEffect((function(){if(void 0!==C){var e=C.split("-"),t=g.split("-");C.startsWith(g)&&e.length>t.length&&g.length<C.length?S(!0):C.startsWith(g)&&g.startsWith(C)||h||S(!1)}}),[C,g]),a.createElement("div",{className:t.css(i.default.w_full,i.default.border_box),onClick:w},a.createElement("div",{className:t.css(i.default.item),style:C===g?e.__assign(e.__assign(e.__assign({},r.labelStyle),p),v):e.__assign(e.__assign({},r.labelStyle),p)},a.createElement("div",{className:t.css(i.default.flex_1)},d(_))," ",Array.isArray(_[x])&&_[x].length?E?y||a.createElement(s,e.__assign({},u,{down:!0})):m||a.createElement(s,e.__assign({},u)):null),Array.isArray(_[x])?_[x].map((function(s,l){return a.createElement("div",{key:l,className:t.css(i.default.w_full,i.default.border_box),style:e.__assign(e.__assign({},r.subBoxStyle),f)},a.createElement(n.default,{expand:E},a.createElement(c,e.__assign({},u,{index:g+"-"+l,item:s}))))})):null)};exports.default=function(t){var n=e.__assign(e.__assign({},r),t),i=a.useState(n.active),s=i[0],o=i[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 i=n.childrenField;t=a[i]}})),n.onChange(a,n.active)}o(n.active)}),[n.active,n.data,n.childrenField]),a.createElement(l.Provider,{value:{active:s,changeActive:o}},n.data.map((function(t,i){return a.createElement(c,e.__assign({key:i,index:i.toString()},n,{item:t}))})))};

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

@@ -2,6 +2,7 @@ declare const styles: {
     w_full: object;
     item: object;
     border_box: 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 r=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"},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=r;
+"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;

package/package.json

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