rox-react-components 0.0.32 → 0.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,7 +3,6 @@ export { default as utils } from './utils';
3
3
  export { default as Card } from './Card';
4
4
  export { default as Container } from './Container';
5
5
  export { default as Loading } from './Loading';
6
- export { default as Menu } from './Menu';
7
6
  export { default as Popup } from './Popup';
8
7
  export { default as ScrollView } from './ScrollView';
9
8
  export { default as Swiper } from './Swiper';
package/dist/es/index.js CHANGED
@@ -1 +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 Menu}from"./Menu/Menu.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";
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";
package/dist/index.d.ts CHANGED
@@ -69,39 +69,6 @@ declare class Loading extends Component<LoadingProps, LoadingState> {
69
69
  componentWillUnmount(): void;
70
70
  }
71
71
 
72
- declare module 'react' {
73
- interface CSSProperties {
74
- '--size'?: string;
75
- '--strokeWidth'?: string;
76
- '--color'?: string;
77
- }
78
- }
79
- interface IconProps {
80
- iconSize?: string;
81
- iconStrokeWidth?: string;
82
- iconColor?: string;
83
- }
84
- interface ExposeDataType<T> {
85
- item: (T & {
86
- __index__: string;
87
- }) | null;
88
- active: string;
89
- }
90
- interface MenuProps<T> extends IconProps {
91
- data: T[];
92
- renderItem: (item: T, index: string) => ReactNode;
93
- onChange?: (data: ExposeDataType<T>['item']) => void;
94
- active?: string;
95
- childrenField?: string;
96
- icon?: ReactNode;
97
- activeIcon?: ReactNode;
98
- itemClassName?: string;
99
- itemLabelClassName?: string;
100
- activeItemClassName?: string;
101
- activeItemLabelClassName?: string;
102
- }
103
- declare function Menu<T extends unknown>(_props: MenuProps<T>): React.JSX.Element;
104
-
105
72
  declare module 'react' {
106
73
  interface CSSProperties {
107
74
  '--bg'?: string;
@@ -139,4 +106,4 @@ declare module 'react' {
139
106
  }
140
107
  declare const _default: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
141
108
 
142
- export { Card, Container, Loading, Menu, PopupContainer as Popup, type PopupPosition, type PopupType, ScrollView, _default as Swiper, type SwiperExposeMethods, type SwiperProps, _default$1 as utils };
109
+ export { Card, Container, Loading, PopupContainer as Popup, type PopupPosition, type PopupType, ScrollView, _default as Swiper, type SwiperExposeMethods, type SwiperProps, _default$1 as utils };
@@ -3,7 +3,6 @@ export { default as utils } from './utils';
3
3
  export { default as Card } from './Card';
4
4
  export { default as Container } from './Container';
5
5
  export { default as Loading } from './Loading';
6
- export { default as Menu } from './Menu';
7
6
  export { default as Popup } from './Popup';
8
7
  export { default as ScrollView } from './ScrollView';
9
8
  export { default as Swiper } from './Swiper';
package/dist/lib/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("./utils.js"),r=require("./Card/Card.js"),u=require("./Container/Container.js"),i=require("./Loading/Loading.js"),t=require("./Menu/Menu.js"),o=require("./Popup/Popup.js"),s=require("./ScrollView/ScrollView.js"),a=require("./Swiper/Swiper.js");exports.utils=e.default,exports.Card=r.default,exports.Container=u.default,exports.Loading=i.default,exports.Menu=t.default,exports.Popup=o.default,exports.ScrollView=s.default,exports.Swiper=a.default;
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rox-react-components",
3
- "version": "0.0.32",
3
+ "version": "0.0.33",
4
4
  "main": "dist/lib/index.js",
5
5
  "module": "dist/es/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -15,7 +15,6 @@
15
15
  "carousel",
16
16
  "mobile carousel",
17
17
  "ps carousel",
18
- "menu",
19
18
  "loading",
20
19
  "container with ratio",
21
20
  "react swiper carousel pc mobile touch mouse",
@@ -1,34 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- declare module 'react' {
3
- interface CSSProperties {
4
- '--size'?: string;
5
- '--strokeWidth'?: string;
6
- '--color'?: string;
7
- }
8
- }
9
- interface IconProps {
10
- iconSize?: string;
11
- iconStrokeWidth?: string;
12
- iconColor?: string;
13
- }
14
- interface ExposeDataType<T> {
15
- item: (T & {
16
- __index__: string;
17
- }) | null;
18
- active: string;
19
- }
20
- interface MenuProps<T> extends IconProps {
21
- data: T[];
22
- renderItem: (item: T, index: string) => ReactNode;
23
- onChange?: (data: ExposeDataType<T>['item']) => void;
24
- active?: string;
25
- childrenField?: string;
26
- icon?: ReactNode;
27
- activeIcon?: ReactNode;
28
- itemClassName?: string;
29
- itemLabelClassName?: string;
30
- activeItemClassName?: string;
31
- activeItemLabelClassName?: string;
32
- }
33
- declare function Menu<T extends unknown>(_props: MenuProps<T>): React.JSX.Element;
34
- export default Menu;
@@ -1 +0,0 @@
1
- import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import n,{createContext as a,useMemo as i,useState as r,useCallback as c,useEffect as o,useContext as l}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",itemClassName:"",itemLabelClassName:"",activeItemClassName:"",activeItemLabelClassName:""},s=a({active:"",changeData:function(){return null}});function f(e){var a=e.iconSize,i=e.iconStrokeWidth,r=e.iconColor,c=e.down;return n.createElement("div",{style:{"--size":a,"--strokeWidth":i,"--color":r},className:"".concat(t(u.arrow_right)," ").concat(c?t(u.arrow_down):"")})}function v(a){var d=r(!1),h=d[0],_=d[1],p=a.item,C=a.index,x=a.childrenField,E=a.renderItem,N=a.activeIcon,g=a.icon,b=a.itemClassName,w=a.itemLabelClassName,I=a.activeItemClassName,k=a.activeItemLabelClassName,y=a.active,F=l(s),S=F.changeData;F.active;var L=C.split("-").length,z=Array.isArray(p[x])&&p[x].length?p[x]:null,D=i((function(){return p&&!z&&y===p.__index__}),[p,y,z]),W=c((function(e){e.stopPropagation(),z||S({item:p}),_((function(e){return!e}))}),[z,S,p]);return o((function(){D&&S({item:p})}),[D,p]),o((function(){(null==y?void 0:y.includes(C))&&_(!0)}),[y,C]),n.createElement("div",{className:t(u.w_full,u.border_box),onClick:W},n.createElement("div",{className:"".concat(t(u.item)," item-").concat(L," ").concat(b," ").concat(D?I:"")},n.createElement("div",{className:"".concat(t(u.flex_1)," ").concat(w," ").concat(D?k:"")},E(p,C)),n.createElement(n.Fragment,null,z?h?N||n.createElement(f,e({},a,{down:!0})):g||n.createElement(f,e({},a)):null)),z?z.map((function(i,r){return n.createElement("div",{key:r,className:"".concat(t(u.w_full,u.border_box)," sub-item-").concat(L)},n.createElement(m,{expand:h},n.createElement(v,e({},a,{index:C+"-"+r,item:i}))))})):null)}function h(t){var a=i((function(){return function e(n,a){n.forEach((function(n,i){n.__index__=void 0!==a?a+"-"+i:i.toString(),n[t.childrenField]&&e(n[t.childrenField],n.__index__)}))}(t.data),t.data}),[t.data,t.childrenField]),l=i((function(){return e(e(e({},d),t),{data:a})}),[t,a]),m=r({active:"",item:null}),u=m[0],f=m[1],h=c((function(t){return f((function(n){return e(e({},n),t)}))}),[]);return o((function(){var e;u.item&&(null===(e=l.onChange)||void 0===e||e.call(l,u.item))}),[u.active]),n.createElement(s.Provider,{value:{active:u.active,changeData:h}},l.data.map((function(t,a){return n.createElement(v,e({key:a},l,{index:a.toString(),item:t}))})))}export{h as default};
@@ -1,2 +0,0 @@
1
- import RoxMenu from './Menu';
2
- export default RoxMenu;
@@ -1 +0,0 @@
1
- import e from"./Menu.js";export{e as default};
@@ -1,9 +0,0 @@
1
- declare const styles: {
2
- w_full: object;
3
- border_box: object;
4
- item: object;
5
- flex_1: object;
6
- arrow_right: object;
7
- arrow_down: object;
8
- };
9
- export default styles;
@@ -1 +0,0 @@
1
- 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};
@@ -1,34 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- declare module 'react' {
3
- interface CSSProperties {
4
- '--size'?: string;
5
- '--strokeWidth'?: string;
6
- '--color'?: string;
7
- }
8
- }
9
- interface IconProps {
10
- iconSize?: string;
11
- iconStrokeWidth?: string;
12
- iconColor?: string;
13
- }
14
- interface ExposeDataType<T> {
15
- item: (T & {
16
- __index__: string;
17
- }) | null;
18
- active: string;
19
- }
20
- interface MenuProps<T> extends IconProps {
21
- data: T[];
22
- renderItem: (item: T, index: string) => ReactNode;
23
- onChange?: (data: ExposeDataType<T>['item']) => void;
24
- active?: string;
25
- childrenField?: string;
26
- icon?: ReactNode;
27
- activeIcon?: ReactNode;
28
- itemClassName?: string;
29
- itemLabelClassName?: string;
30
- activeItemClassName?: string;
31
- activeItemLabelClassName?: string;
32
- }
33
- declare function Menu<T extends unknown>(_props: MenuProps<T>): React.JSX.Element;
34
- export default Menu;
@@ -1 +0,0 @@
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"),c={data:[],renderItem:function(){return null},onChange:function(){return null},active:"",childrenField:"children",iconSize:"10px",iconColor:"#333",iconStrokeWidth:"2px",itemClassName:"",itemLabelClassName:"",activeItemClassName:"",activeItemLabelClassName:""},r=n.createContext({active:"",changeData:function(){return null}});function l(e){var a=e.iconSize,c=e.iconStrokeWidth,r=e.iconColor,l=e.down;return n.createElement("div",{style:{"--size":a,"--strokeWidth":c,"--color":r},className:"".concat(t.css(i.default.arrow_right)," ").concat(l?t.css(i.default.arrow_down):"")})}function s(c){var o=n.useState(!1),u=o[0],d=o[1],m=c.item,f=c.index,_=c.childrenField,v=c.renderItem,g=c.activeIcon,h=c.icon,C=c.itemClassName,x=c.itemLabelClassName,E=c.activeItemClassName,b=c.activeItemLabelClassName,p=c.active,N=n.useContext(r),k=N.changeData;N.active;var S=f.split("-").length,w=Array.isArray(m[_])&&m[_].length?m[_]:null,y=n.useMemo((function(){return m&&!w&&p===m.__index__}),[m,p,w]),I=n.useCallback((function(e){e.stopPropagation(),w||k({item:m}),d((function(e){return!e}))}),[w,k,m]);return n.useEffect((function(){y&&k({item:m})}),[y,m]),n.useEffect((function(){(null==p?void 0:p.includes(f))&&d(!0)}),[p,f]),n.createElement("div",{className:t.css(i.default.w_full,i.default.border_box),onClick:I},n.createElement("div",{className:"".concat(t.css(i.default.item)," item-").concat(S," ").concat(C," ").concat(y?E:"")},n.createElement("div",{className:"".concat(t.css(i.default.flex_1)," ").concat(x," ").concat(y?b:"")},v(m,f)),n.createElement(n.Fragment,null,w?u?g||n.createElement(l,e.__assign({},c,{down:!0})):h||n.createElement(l,e.__assign({},c)):null)),w?w.map((function(r,l){return n.createElement("div",{key:l,className:"".concat(t.css(i.default.w_full,i.default.border_box)," sub-item-").concat(S)},n.createElement(a.default,{expand:u},n.createElement(s,e.__assign({},c,{index:f+"-"+l,item:r}))))})):null)}exports.default=function(t){var a=n.useMemo((function(){return function e(n,a){n.forEach((function(n,i){n.__index__=void 0!==a?a+"-"+i:i.toString(),n[t.childrenField]&&e(n[t.childrenField],n.__index__)}))}(t.data),t.data}),[t.data,t.childrenField]),i=n.useMemo((function(){return e.__assign(e.__assign(e.__assign({},c),t),{data:a})}),[t,a]),l=n.useState({active:"",item:null}),o=l[0],u=l[1],d=n.useCallback((function(t){return u((function(n){return e.__assign(e.__assign({},n),t)}))}),[]);return n.useEffect((function(){var e;o.item&&(null===(e=i.onChange)||void 0===e||e.call(i,o.item))}),[o.active]),n.createElement(r.Provider,{value:{active:o.active,changeData:d}},i.data.map((function(t,a){return n.createElement(s,e.__assign({key:a},i,{index:a.toString(),item:t}))})))};
@@ -1,2 +0,0 @@
1
- import RoxMenu from './Menu';
2
- export default RoxMenu;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Menu.js");exports.default=e.default;
@@ -1,9 +0,0 @@
1
- declare const styles: {
2
- w_full: object;
3
- border_box: object;
4
- item: object;
5
- flex_1: object;
6
- arrow_right: object;
7
- arrow_down: object;
8
- };
9
- export default styles;
@@ -1 +0,0 @@
1
- "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;