prizmux 1.4.1 → 1.4.3
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.
- package/README.md +17 -13
- package/dist/components/Header/Header.d.ts +4 -0
- package/dist/components/Header/Header.d.ts.map +1 -0
- package/dist/components/Header/Header.js +95 -0
- package/dist/components/Header/Header.js.map +1 -0
- package/dist/components/Header/Header.types.d.ts +17 -0
- package/dist/components/Header/Header.types.d.ts.map +1 -0
- package/dist/components/Header/Header.types.js +3 -0
- package/dist/components/Header/Header.types.js.map +1 -0
- package/dist/components/Header/index.d.ts +3 -0
- package/dist/components/Header/index.d.ts.map +1 -0
- package/dist/components/Header/index.js +6 -0
- package/dist/components/Header/index.js.map +1 -0
- package/dist/components/Sidebar/Sidebar.d.ts +5 -0
- package/dist/components/Sidebar/Sidebar.d.ts.map +1 -0
- package/dist/components/Sidebar/Sidebar.js +224 -0
- package/dist/components/Sidebar/Sidebar.js.map +1 -0
- package/dist/components/Sidebar/Sidebar.types.d.ts +42 -0
- package/dist/components/Sidebar/Sidebar.types.d.ts.map +1 -0
- package/dist/components/Sidebar/Sidebar.types.js +3 -0
- package/dist/components/Sidebar/Sidebar.types.js.map +1 -0
- package/dist/components/Sidebar/index.d.ts +3 -0
- package/dist/components/Sidebar/index.d.ts.map +1 -0
- package/dist/components/Sidebar/index.js +6 -0
- package/dist/components/Sidebar/index.js.map +1 -0
- package/dist/components/index.d.ts +6 -4
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +6 -4
- package/dist/components/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="./logo.png" alt="Prizmux Logo" width="160" />
|
|
3
|
+
</p>
|
|
4
|
+
# Prizmux
|
|
2
5
|
|
|
3
6
|
A developer-first React Native component system.
|
|
4
7
|
|
|
@@ -20,18 +23,19 @@ npm install prizmux
|
|
|
20
23
|
|
|
21
24
|
## Components
|
|
22
25
|
|
|
23
|
-
| Component
|
|
24
|
-
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
31
|
-
| `
|
|
32
|
-
| `
|
|
33
|
-
| `
|
|
34
|
-
| `
|
|
26
|
+
| Component | Description |
|
|
27
|
+
| -------------- | ------------------------------------------------------------------------------------- |
|
|
28
|
+
| `Alert` | Customizable modal alert — bring your own buttons |
|
|
29
|
+
| `BottomSheet` | Swipeable sheet with drag handle and backdrop dismiss |
|
|
30
|
+
| `Button` | Variants, sizes, loading state, icon support, full accessibility |
|
|
31
|
+
| `Card` | Composable container, put anything inside |
|
|
32
|
+
| `EmptyState` | Placeholder UI for empty lists and zero-data screens |
|
|
33
|
+
| `FAB` | Floating action button with icon, label, or both |
|
|
34
|
+
| `Header` | Navigation header with or without a back button, avatar, and action icons with badges |
|
|
35
|
+
| `ImagePreview` | Full screen image viewer with gallery support |
|
|
36
|
+
| `PhoneInput` | International phone input with searchable country picker and auto-detection |
|
|
37
|
+
| `Sidebar` | Collapsible navigation panel with customizable items, icons, and active states |
|
|
38
|
+
| `Toast` | Auto, manual, and swipe-to-dismiss notifications |
|
|
35
39
|
|
|
36
40
|
---
|
|
37
41
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAEjD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkExC,CAAA"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Header = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_native_1 = require("react-native");
|
|
6
|
+
const Header = ({ title, avatar, titlePosition = 'center', showBack = false, onBackPress, backIcon, actions = [], }) => {
|
|
7
|
+
const titleStyle = titlePosition === 'left'
|
|
8
|
+
? styles.titleLeft
|
|
9
|
+
: titlePosition === 'right'
|
|
10
|
+
? styles.titleRight
|
|
11
|
+
: styles.titleCenter;
|
|
12
|
+
const visibleActions = actions.slice(0, 4);
|
|
13
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [showBack ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onBackPress, style: styles.backButton, android_ripple: { color: 'rgba(0, 0, 0, 0.1)' }, children: backIcon ?? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.backIcon, children: "\u2039" }) })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.leftSpacer })), avatar && (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.avatarContainer, children: avatar }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, titleStyle], numberOfLines: 1, children: title }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.actionsContainer, children: visibleActions.map((action, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: action.onPress, style: styles.actionButton, android_ripple: { color: 'rgba(0, 0, 0, 0.1)' }, children: [action.icon, action.badge !== undefined && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.badge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.badgeText, numberOfLines: 1, children: typeof action.badge === 'number' && action.badge > 99
|
|
14
|
+
? '99+'
|
|
15
|
+
: action.badge }) }))] }, index))) })] }));
|
|
16
|
+
};
|
|
17
|
+
exports.Header = Header;
|
|
18
|
+
const styles = react_native_1.StyleSheet.create({
|
|
19
|
+
header: {
|
|
20
|
+
flexDirection: 'row',
|
|
21
|
+
alignItems: 'center',
|
|
22
|
+
paddingHorizontal: 8,
|
|
23
|
+
paddingVertical: 12,
|
|
24
|
+
backgroundColor: '#FFFFFF',
|
|
25
|
+
borderBottomWidth: 1,
|
|
26
|
+
borderBottomColor: '#E5E7EB',
|
|
27
|
+
},
|
|
28
|
+
leftSpacer: {
|
|
29
|
+
width: 40,
|
|
30
|
+
height: 40,
|
|
31
|
+
},
|
|
32
|
+
backButton: {
|
|
33
|
+
width: 40,
|
|
34
|
+
height: 40,
|
|
35
|
+
borderRadius: 20,
|
|
36
|
+
backgroundColor: '#F3F4F6',
|
|
37
|
+
justifyContent: 'center',
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
},
|
|
40
|
+
backIcon: {
|
|
41
|
+
fontSize: 28,
|
|
42
|
+
color: '#111827',
|
|
43
|
+
lineHeight: 32,
|
|
44
|
+
fontWeight: '300',
|
|
45
|
+
},
|
|
46
|
+
avatarContainer: {
|
|
47
|
+
marginLeft: 6,
|
|
48
|
+
width: 40,
|
|
49
|
+
height: 40,
|
|
50
|
+
borderRadius: 20,
|
|
51
|
+
overflow: 'hidden',
|
|
52
|
+
justifyContent: 'center',
|
|
53
|
+
alignItems: 'center',
|
|
54
|
+
},
|
|
55
|
+
title: {
|
|
56
|
+
flex: 1,
|
|
57
|
+
fontSize: 18,
|
|
58
|
+
fontWeight: 'bold',
|
|
59
|
+
color: '#111827',
|
|
60
|
+
marginHorizontal: 8,
|
|
61
|
+
},
|
|
62
|
+
titleLeft: { textAlign: 'left' },
|
|
63
|
+
titleCenter: { textAlign: 'center' },
|
|
64
|
+
titleRight: { textAlign: 'right' },
|
|
65
|
+
actionsContainer: {
|
|
66
|
+
flexDirection: 'row',
|
|
67
|
+
alignItems: 'center',
|
|
68
|
+
gap: 4,
|
|
69
|
+
},
|
|
70
|
+
actionButton: {
|
|
71
|
+
width: 40,
|
|
72
|
+
height: 40,
|
|
73
|
+
borderRadius: 20,
|
|
74
|
+
justifyContent: 'center',
|
|
75
|
+
alignItems: 'center',
|
|
76
|
+
},
|
|
77
|
+
badge: {
|
|
78
|
+
position: 'absolute',
|
|
79
|
+
top: 4,
|
|
80
|
+
right: 4,
|
|
81
|
+
minWidth: 16,
|
|
82
|
+
height: 16,
|
|
83
|
+
borderRadius: 8,
|
|
84
|
+
backgroundColor: '#EF4444',
|
|
85
|
+
justifyContent: 'center',
|
|
86
|
+
alignItems: 'center',
|
|
87
|
+
paddingHorizontal: 3,
|
|
88
|
+
},
|
|
89
|
+
badgeText: {
|
|
90
|
+
fontSize: 10,
|
|
91
|
+
fontWeight: '700',
|
|
92
|
+
color: '#FFFFFF',
|
|
93
|
+
},
|
|
94
|
+
});
|
|
95
|
+
//# sourceMappingURL=Header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface HeaderAction {
|
|
3
|
+
icon: ReactNode;
|
|
4
|
+
onPress: () => void;
|
|
5
|
+
badge?: number | string;
|
|
6
|
+
}
|
|
7
|
+
export interface HeaderProps {
|
|
8
|
+
title: string;
|
|
9
|
+
avatar?: ReactNode;
|
|
10
|
+
titlePosition?: 'left' | 'center' | 'right';
|
|
11
|
+
/** Back button control */
|
|
12
|
+
showBack?: boolean;
|
|
13
|
+
onBackPress?: () => void;
|
|
14
|
+
backIcon?: ReactNode;
|
|
15
|
+
actions?: HeaderAction[];
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=Header.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Header.types.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IAE3C,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;CACzB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Header.types.js","sourceRoot":"","sources":["../../../src/components/Header/Header.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Header = void 0;
|
|
4
|
+
var Header_1 = require("./Header");
|
|
5
|
+
Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return Header_1.Header; } });
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Header/index.ts"],"names":[],"mappings":";;;AAAA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAW9D,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAoEjE,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0N1C,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Sidebar = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const react_native_1 = require("react-native");
|
|
7
|
+
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
|
|
8
|
+
// Get the initial off-screen value based on slide direction
|
|
9
|
+
const getInitialTranslate = (side, width, height) => {
|
|
10
|
+
switch (side) {
|
|
11
|
+
case 'left': return { x: -width, y: 0 };
|
|
12
|
+
case 'right': return { x: width, y: 0 };
|
|
13
|
+
case 'top': return { x: 0, y: -height };
|
|
14
|
+
case 'bottom': return { x: 0, y: height };
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
// Position style for the drawer
|
|
18
|
+
const getDrawerPosition = (side, width, height, offsetTop, offsetSide) => {
|
|
19
|
+
switch (side) {
|
|
20
|
+
case 'left':
|
|
21
|
+
return {
|
|
22
|
+
left: offsetSide,
|
|
23
|
+
top: offsetTop,
|
|
24
|
+
bottom: 0,
|
|
25
|
+
width,
|
|
26
|
+
height: undefined,
|
|
27
|
+
};
|
|
28
|
+
case 'right':
|
|
29
|
+
return {
|
|
30
|
+
right: offsetSide,
|
|
31
|
+
top: offsetTop,
|
|
32
|
+
bottom: 0,
|
|
33
|
+
width,
|
|
34
|
+
height: undefined,
|
|
35
|
+
};
|
|
36
|
+
case 'top':
|
|
37
|
+
return {
|
|
38
|
+
top: 0,
|
|
39
|
+
left: 0,
|
|
40
|
+
right: 0,
|
|
41
|
+
height,
|
|
42
|
+
width: undefined,
|
|
43
|
+
};
|
|
44
|
+
case 'bottom':
|
|
45
|
+
return {
|
|
46
|
+
bottom: 0,
|
|
47
|
+
left: 0,
|
|
48
|
+
right: 0,
|
|
49
|
+
height,
|
|
50
|
+
width: undefined,
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
// Which corners to round based on slide direction
|
|
55
|
+
const getBorderRadius = (side, radius) => {
|
|
56
|
+
switch (side) {
|
|
57
|
+
case 'left': return { borderTopRightRadius: radius, borderBottomRightRadius: radius };
|
|
58
|
+
case 'right': return { borderTopLeftRadius: radius, borderBottomLeftRadius: radius };
|
|
59
|
+
case 'top': return { borderBottomLeftRadius: radius, borderBottomRightRadius: radius };
|
|
60
|
+
case 'bottom': return { borderTopLeftRadius: radius, borderTopRightRadius: radius };
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
const Sidebar = ({ visible, onClose, items, side = 'right', width = SCREEN_WIDTH * 0.56, height = SCREEN_HEIGHT * 0.5, offsetTop = 0, offsetSide = 0, showOverlay = true, overlayColor = 'rgba(0,0,0,0.3)', dismissOnOverlayPress = true, backgroundColor = '#FFFFFF', borderRadius = 0, header, showHeader = true, headerStyle, showIconBackground = false, iconBackgroundColor = 'rgba(0,0,0,0.06)', iconBorderRadius = 8, activeItemColor = '#F3F4F6', itemTextColor = '#111827', badgeBorderRadius = 12, shadow = true, style, itemStyle, itemTextStyle, badgeStyle, badgeTextStyle, }) => {
|
|
64
|
+
const isHorizontal = side === 'left' || side === 'right';
|
|
65
|
+
const initial = getInitialTranslate(side, width, height);
|
|
66
|
+
const translateX = (0, react_1.useRef)(new react_native_1.Animated.Value(initial.x)).current;
|
|
67
|
+
const translateY = (0, react_1.useRef)(new react_native_1.Animated.Value(initial.y)).current;
|
|
68
|
+
const opacityAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
|
|
69
|
+
const animateIn = (0, react_1.useCallback)(() => {
|
|
70
|
+
translateX.setValue(initial.x);
|
|
71
|
+
translateY.setValue(initial.y);
|
|
72
|
+
opacityAnim.setValue(0);
|
|
73
|
+
react_native_1.Animated.parallel([
|
|
74
|
+
react_native_1.Animated.timing(opacityAnim, {
|
|
75
|
+
toValue: 1,
|
|
76
|
+
duration: 220,
|
|
77
|
+
useNativeDriver: true,
|
|
78
|
+
}),
|
|
79
|
+
react_native_1.Animated.spring(translateX, {
|
|
80
|
+
toValue: 0,
|
|
81
|
+
bounciness: 0,
|
|
82
|
+
speed: 20,
|
|
83
|
+
useNativeDriver: true,
|
|
84
|
+
}),
|
|
85
|
+
react_native_1.Animated.spring(translateY, {
|
|
86
|
+
toValue: 0,
|
|
87
|
+
bounciness: 0,
|
|
88
|
+
speed: 20,
|
|
89
|
+
useNativeDriver: true,
|
|
90
|
+
}),
|
|
91
|
+
]).start();
|
|
92
|
+
}, [translateX, translateY, opacityAnim, initial]);
|
|
93
|
+
const animateOut = (0, react_1.useCallback)((onDone) => {
|
|
94
|
+
react_native_1.Animated.parallel([
|
|
95
|
+
react_native_1.Animated.timing(opacityAnim, {
|
|
96
|
+
toValue: 0,
|
|
97
|
+
duration: 200,
|
|
98
|
+
useNativeDriver: true,
|
|
99
|
+
}),
|
|
100
|
+
react_native_1.Animated.timing(translateX, {
|
|
101
|
+
toValue: initial.x,
|
|
102
|
+
duration: 200,
|
|
103
|
+
useNativeDriver: true,
|
|
104
|
+
}),
|
|
105
|
+
react_native_1.Animated.timing(translateY, {
|
|
106
|
+
toValue: initial.y,
|
|
107
|
+
duration: 200,
|
|
108
|
+
useNativeDriver: true,
|
|
109
|
+
}),
|
|
110
|
+
]).start(() => onDone?.());
|
|
111
|
+
}, [translateX, translateY, opacityAnim, initial]);
|
|
112
|
+
(0, react_1.useEffect)(() => {
|
|
113
|
+
if (visible) {
|
|
114
|
+
animateIn();
|
|
115
|
+
}
|
|
116
|
+
}, [visible]);
|
|
117
|
+
const handleClose = (0, react_1.useCallback)(() => {
|
|
118
|
+
animateOut(onClose);
|
|
119
|
+
}, [animateOut, onClose]);
|
|
120
|
+
if (!visible)
|
|
121
|
+
return null;
|
|
122
|
+
const positionStyle = getDrawerPosition(side, width, height, offsetTop, offsetSide);
|
|
123
|
+
const radiusStyle = getBorderRadius(side, borderRadius);
|
|
124
|
+
const shadowStyle = shadow ? {
|
|
125
|
+
shadowColor: '#000',
|
|
126
|
+
shadowOffset: { width: side === 'right' ? -2 : 2, height: 4 },
|
|
127
|
+
shadowOpacity: 0.15,
|
|
128
|
+
shadowRadius: 8,
|
|
129
|
+
elevation: 10,
|
|
130
|
+
} : {};
|
|
131
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.Modal, { visible: visible, transparent: true, animationType: "none", statusBarTranslucent: true, onRequestClose: handleClose, children: [showOverlay ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: dismissOnOverlayPress ? handleClose : undefined, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
|
|
132
|
+
styles.backdrop,
|
|
133
|
+
{ backgroundColor: overlayColor, opacity: opacityAnim },
|
|
134
|
+
] }) })) : (
|
|
135
|
+
// Invisible touch area just to capture taps outside when no overlay
|
|
136
|
+
dismissOnOverlayPress && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: handleClose, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.backdrop }) }))), (0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [
|
|
137
|
+
styles.drawer,
|
|
138
|
+
positionStyle,
|
|
139
|
+
radiusStyle,
|
|
140
|
+
shadowStyle,
|
|
141
|
+
{ backgroundColor, transform: [{ translateX }, { translateY }] },
|
|
142
|
+
style,
|
|
143
|
+
], children: [header && showHeader && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.header, headerStyle], children: header })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.menuContainer, children: items.map((item) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: ({ pressed }) => [
|
|
144
|
+
styles.menuItem,
|
|
145
|
+
pressed && { backgroundColor: activeItemColor },
|
|
146
|
+
itemStyle,
|
|
147
|
+
], onPress: () => {
|
|
148
|
+
handleClose();
|
|
149
|
+
setTimeout(() => item.onPress(), 220);
|
|
150
|
+
}, android_ripple: { color: 'rgba(0,0,0,0.05)', borderless: false }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.menuItemContent, children: [item.icon && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
|
|
151
|
+
styles.iconContainer,
|
|
152
|
+
showIconBackground && {
|
|
153
|
+
backgroundColor: iconBackgroundColor,
|
|
154
|
+
borderRadius: iconBorderRadius,
|
|
155
|
+
width: 36,
|
|
156
|
+
height: 36,
|
|
157
|
+
},
|
|
158
|
+
], children: item.icon })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
|
|
159
|
+
styles.menuItemText,
|
|
160
|
+
{ color: itemTextColor },
|
|
161
|
+
itemTextStyle,
|
|
162
|
+
], children: item.title }), item.badge !== undefined && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
|
|
163
|
+
styles.badge,
|
|
164
|
+
{ borderRadius: badgeBorderRadius },
|
|
165
|
+
item.badgeColor ? { backgroundColor: item.badgeColor } : null,
|
|
166
|
+
badgeStyle,
|
|
167
|
+
], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.badgeText, badgeTextStyle], children: typeof item.badge === 'number' && item.badge > 99
|
|
168
|
+
? '99+'
|
|
169
|
+
: item.badge }) }))] }) }, item.id))) })] })] }));
|
|
170
|
+
};
|
|
171
|
+
exports.Sidebar = Sidebar;
|
|
172
|
+
exports.default = exports.Sidebar;
|
|
173
|
+
const styles = react_native_1.StyleSheet.create({
|
|
174
|
+
backdrop: {
|
|
175
|
+
...react_native_1.StyleSheet.absoluteFillObject,
|
|
176
|
+
},
|
|
177
|
+
drawer: {
|
|
178
|
+
position: 'absolute',
|
|
179
|
+
overflow: 'hidden',
|
|
180
|
+
zIndex: 10,
|
|
181
|
+
},
|
|
182
|
+
header: {
|
|
183
|
+
borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
|
|
184
|
+
borderBottomColor: '#E5E7EB',
|
|
185
|
+
},
|
|
186
|
+
menuContainer: {
|
|
187
|
+
paddingVertical: 8,
|
|
188
|
+
},
|
|
189
|
+
menuItem: {
|
|
190
|
+
paddingHorizontal: 16,
|
|
191
|
+
paddingVertical: 14,
|
|
192
|
+
marginHorizontal: 8,
|
|
193
|
+
marginVertical: 2,
|
|
194
|
+
borderRadius: 8,
|
|
195
|
+
},
|
|
196
|
+
menuItemContent: {
|
|
197
|
+
flexDirection: 'row',
|
|
198
|
+
alignItems: 'center',
|
|
199
|
+
gap: 12,
|
|
200
|
+
},
|
|
201
|
+
iconContainer: {
|
|
202
|
+
alignItems: 'center',
|
|
203
|
+
justifyContent: 'center',
|
|
204
|
+
},
|
|
205
|
+
menuItemText: {
|
|
206
|
+
flex: 1,
|
|
207
|
+
fontSize: 15,
|
|
208
|
+
fontWeight: '500',
|
|
209
|
+
},
|
|
210
|
+
badge: {
|
|
211
|
+
minWidth: 20,
|
|
212
|
+
height: 20,
|
|
213
|
+
backgroundColor: '#6B7280',
|
|
214
|
+
justifyContent: 'center',
|
|
215
|
+
alignItems: 'center',
|
|
216
|
+
paddingHorizontal: 6,
|
|
217
|
+
},
|
|
218
|
+
badgeText: {
|
|
219
|
+
color: '#FFFFFF',
|
|
220
|
+
fontSize: 11,
|
|
221
|
+
fontWeight: '700',
|
|
222
|
+
},
|
|
223
|
+
});
|
|
224
|
+
//# sourceMappingURL=Sidebar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { TextStyle, ViewStyle } from 'react-native';
|
|
3
|
+
export type SidebarSide = 'left' | 'right' | 'top' | 'bottom';
|
|
4
|
+
export interface SidebarMenuItem {
|
|
5
|
+
id: string;
|
|
6
|
+
title: string;
|
|
7
|
+
icon?: ReactNode;
|
|
8
|
+
onPress: () => void;
|
|
9
|
+
badge?: number | string;
|
|
10
|
+
badgeColor?: string;
|
|
11
|
+
}
|
|
12
|
+
export interface SidebarProps {
|
|
13
|
+
visible: boolean;
|
|
14
|
+
onClose: () => void;
|
|
15
|
+
items: SidebarMenuItem[];
|
|
16
|
+
side?: SidebarSide;
|
|
17
|
+
width?: number;
|
|
18
|
+
height?: number;
|
|
19
|
+
offsetTop?: number;
|
|
20
|
+
offsetSide?: number;
|
|
21
|
+
showOverlay?: boolean;
|
|
22
|
+
overlayColor?: string;
|
|
23
|
+
dismissOnOverlayPress?: boolean;
|
|
24
|
+
backgroundColor?: string;
|
|
25
|
+
borderRadius?: number;
|
|
26
|
+
header?: ReactNode;
|
|
27
|
+
showHeader?: boolean;
|
|
28
|
+
headerStyle?: ViewStyle;
|
|
29
|
+
showIconBackground?: boolean;
|
|
30
|
+
iconBackgroundColor?: string;
|
|
31
|
+
iconBorderRadius?: number;
|
|
32
|
+
activeItemColor?: string;
|
|
33
|
+
itemTextColor?: string;
|
|
34
|
+
badgeBorderRadius?: number;
|
|
35
|
+
shadow?: boolean;
|
|
36
|
+
style?: ViewStyle;
|
|
37
|
+
itemStyle?: ViewStyle;
|
|
38
|
+
itemTextStyle?: TextStyle;
|
|
39
|
+
badgeStyle?: ViewStyle;
|
|
40
|
+
badgeTextStyle?: TextStyle;
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=Sidebar.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sidebar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,KAAK,EAAE,eAAe,EAAE,CAAC;IAGzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAGnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAGhC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IAGxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAG1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,MAAM,CAAC,EAAE,OAAO,CAAC;IAGjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sidebar.types.js","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Sidebar = void 0;
|
|
4
|
+
var Sidebar_1 = require("./Sidebar");
|
|
5
|
+
Object.defineProperty(exports, "Sidebar", { enumerable: true, get: function () { return Sidebar_1.Sidebar; } });
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sidebar/index.ts"],"names":[],"mappings":";;;AAAA,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
export * from './Alert';
|
|
2
|
+
export * from './BottomSheet';
|
|
1
3
|
export * from './Button';
|
|
2
4
|
export * from './Card';
|
|
3
|
-
export * from './BottomSheet';
|
|
4
|
-
export * from './ImagePreview';
|
|
5
|
-
export * from './HeaderWithBack';
|
|
6
5
|
export * from './EmptyState';
|
|
6
|
+
export * from './Fab';
|
|
7
|
+
export * from './Header';
|
|
8
|
+
export * from './ImagePreview';
|
|
7
9
|
export * from './PhoneInput';
|
|
10
|
+
export * from './Sidebar';
|
|
8
11
|
export * from './Toast';
|
|
9
|
-
export * from './Fab';
|
|
10
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -14,13 +14,15 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./Alert"), exports);
|
|
18
|
+
__exportStar(require("./BottomSheet"), exports);
|
|
17
19
|
__exportStar(require("./Button"), exports);
|
|
18
20
|
__exportStar(require("./Card"), exports);
|
|
19
|
-
__exportStar(require("./BottomSheet"), exports);
|
|
20
|
-
__exportStar(require("./ImagePreview"), exports);
|
|
21
|
-
__exportStar(require("./HeaderWithBack"), exports);
|
|
22
21
|
__exportStar(require("./EmptyState"), exports);
|
|
22
|
+
__exportStar(require("./Fab"), exports);
|
|
23
|
+
__exportStar(require("./Header"), exports);
|
|
24
|
+
__exportStar(require("./ImagePreview"), exports);
|
|
23
25
|
__exportStar(require("./PhoneInput"), exports);
|
|
26
|
+
__exportStar(require("./Sidebar"), exports);
|
|
24
27
|
__exportStar(require("./Toast"), exports);
|
|
25
|
-
__exportStar(require("./Fab"), exports);
|
|
26
28
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,yCAAuB;AACvB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,gDAA8B;AAC9B,2CAAyB;AACzB,yCAAuB;AACvB,+CAA6B;AAC7B,wCAAsB;AACtB,2CAAyB;AACzB,iDAA+B;AAC/B,+CAA6B;AAC7B,4CAA0B;AAC1B,0CAAwB"}
|