rn-inkpad
Version:
<img src="https://res.cloudinary.com/fercloudinary/image/upload/v1715452841/packages/inkpad-banner_acl0xl.png" />
44 lines (43 loc) • 2.45 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DrawerNavigation = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const __1 = require("..");
const hooks_1 = require("../../hooks");
const theme_1 = require("../../theme");
const DrawerGroup_1 = require("./DrawerGroup");
const DrawerItem_1 = require("./DrawerItem");
const DrawerNavigation = ({ backgroundColor = '#464EE5', closeIcon = 'close', collapseIcon, expandIcon, fontSize = 18, icon = 'menu', iconColor, iconSize = 35, iconTop = 50, image, imageStyles, itemIconSize = 19, items, textColor, widthPercent = 65, }) => {
const { height, translateX, width, handlePress, visible } = (0, hooks_1.useDrawerNavigation)(widthPercent);
return (<react_native_1.Animated.View style={{ ...theme_1.drawerStyles.container, height, transform: [{ translateX }] }}>
<react_native_1.SafeAreaView style={{ backgroundColor }}>
<react_native_1.ScrollView style={{
...theme_1.drawerStyles.drawer,
width: width * (widthPercent / 100),
}}>
{image && (<react_native_1.Image source={image} style={[theme_1.drawerStyles.logo, imageStyles]}/>)}
{items?.map((item, idx) => {
if (!!item.items) {
return (<DrawerGroup_1.DrawerGroup collapseIcon={collapseIcon} expandIcon={expandIcon} fontSize={fontSize} handleDrawer={handlePress} iconSize={itemIconSize} item={item} key={idx} textColor={textColor}/>);
}
else {
item = item;
return (<DrawerItem_1.DrawerItem fontSize={fontSize} icon={item.icon} iconSize={itemIconSize} handleDrawer={handlePress} key={idx} onPress={item.onPress} text={item.text} textColor={textColor}/>);
}
})}
</react_native_1.ScrollView>
<react_native_1.Pressable onPress={handlePress} style={{
...theme_1.drawerStyles.button,
top: iconTop,
left: width * (widthPercent / 100) + 15,
}}>
<__1.Icon name={visible ? closeIcon : icon} color={iconColor} size={iconSize}/>
</react_native_1.Pressable>
</react_native_1.SafeAreaView>
</react_native_1.Animated.View>);
};
exports.DrawerNavigation = DrawerNavigation;