clubzella-comic-test-v1
Version:
A clubzella widget component library for React Native.
182 lines (174 loc) • 8 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_native_1 = require("react-native");
var react_1 = __importStar(require("react"));
var Ionicons_1 = __importDefault(require("@expo/vector-icons/Ionicons"));
var AntDesign_1 = __importDefault(require("@expo/vector-icons/AntDesign"));
var SimpleLineIcons_1 = __importDefault(require("@expo/vector-icons/SimpleLineIcons"));
var _a = react_native_1.Dimensions.get("screen"), height = _a.height, width = _a.width;
var InPantheonPanel = function (_a) {
var _b = _a.visible, visible = _b === void 0 ? false : _b, setOpenInPantheonPanel = _a.setOpenInPantheonPanel, title = _a.title, apiKey = _a.apiKey, pantheon = _a.pantheon;
var _c = (0, react_1.useState)(true), expand = _c[0], setExpand = _c[1];
var _d = (0, react_1.useState)(false), isLoading = _d[0], setIsLoading = _d[1];
return (<react_native_1.View style={[
{
zIndex: 1100,
borderRadius: 15,
justifyContent: "center",
// alignItems: "center",
position: "absolute",
bottom: 20,
right: 15,
width: width - 30,
// height: 140,
backgroundColor: "#fff",
height: expand ? height / 1.36 : 140,
elevation: 4,
},
]}>
<react_native_1.Animated.View>
<react_native_1.View style={{
minHeight: 35,
width: "100%",
backgroundColor: "#393535",
borderTopStartRadius: 15,
borderTopEndRadius: 15,
padding: 11,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
gap: 10,
}}>
<react_native_1.Text style={{
color: "#F5F5F5",
fontSize: 25,
lineHeight: 25,
fontFamily: "MamaKilo",
textTransform: "uppercase",
}}>
{title}
</react_native_1.Text>
<react_native_1.TouchableOpacity activeOpacity={0.6} onPress={function () { return setExpand(!expand); }}>
<Ionicons_1.default name="expand" size={24} color="#fff"/>
</react_native_1.TouchableOpacity>
<react_native_1.View style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
gap: 10,
}}>
<react_native_1.TouchableOpacity activeOpacity={0.6} onPress={function () { return setOpenInPantheonPanel(!visible); }}>
<AntDesign_1.default name="close" size={24} color="#FF4D52"/>
</react_native_1.TouchableOpacity>
</react_native_1.View>
</react_native_1.View>
</react_native_1.Animated.View>
<react_native_1.View style={{ height: "100%", width: "100%" }}>
<react_native_1.ImageBackground source={require("../../assets/images/widget/pantheon/pantheon-bg.jpg")} style={{
width: "100%",
height: "99%",
position: "absolute",
borderEndEndRadius: 100,
}}/>
<react_native_1.TouchableOpacity style={{
padding: 10,
paddingBottom: 12,
flexDirection: "row",
gap: 10,
alignItems: "center",
}} onPress={function () { return setOpenInPantheonPanel(!visible); }}>
<SimpleLineIcons_1.default name="arrow-left" size={18} color="#fff"/>
<react_native_1.Text style={{ color: "#fff" }}>Back to menu</react_native_1.Text>
</react_native_1.TouchableOpacity>
{/* <Image source={comics} style={{ width: "100%", height: 550 }} /> */}
{isLoading ? (<react_native_1.View style={{
height: expand ? 500 : "auto",
justifyContent: "center",
}}>
<react_native_1.ActivityIndicator size={"large"}/>
</react_native_1.View>) : (<>
<react_native_1.ScrollView>
<react_native_1.View style={{ gap: 30, padding: 12, marginBottom: 20 }}>
<react_native_1.View style={{
width: "100%",
justifyContent: "center",
alignItems: "center",
}}>
<react_native_1.Image source={pantheon.cover_image} style={{ height: 250, width: "60%", objectFit: "contain" }}/>
</react_native_1.View>
<react_native_1.View style={{ gap: 10 }}>
<react_native_1.Text style={styles.label}>
<react_native_1.Text style={styles.bold}>Power:</react_native_1.Text> {pantheon === null || pantheon === void 0 ? void 0 : pantheon.power}
</react_native_1.Text>
<react_native_1.Text style={styles.label}>
<react_native_1.Text style={styles.bold}>Last seen:</react_native_1.Text>{" "}
{pantheon === null || pantheon === void 0 ? void 0 : pantheon.lastSeen}
</react_native_1.Text>
<react_native_1.Text style={styles.label}>
<react_native_1.Text style={styles.bold}>Category:</react_native_1.Text>
{" "}
{pantheon === null || pantheon === void 0 ? void 0 : pantheon.category}
</react_native_1.Text>
<react_native_1.Text style={styles.label}>
<react_native_1.Text style={styles.bold}>Personality:</react_native_1.Text>
{pantheon === null || pantheon === void 0 ? void 0 : pantheon.personality}
</react_native_1.Text>
<react_native_1.Text style={styles.label}>
<react_native_1.Text style={styles.bold}>Backstory:</react_native_1.Text>{" "}
{pantheon === null || pantheon === void 0 ? void 0 : pantheon.backstory}
</react_native_1.Text>
</react_native_1.View>
</react_native_1.View>
</react_native_1.ScrollView>
</>)}
</react_native_1.View>
</react_native_1.View>);
};
var styles = react_native_1.StyleSheet.create({
label: {
color: "#CECCCC",
fontSize: 14,
lineHeight: 22,
},
bold: {
fontWeight: "bold",
color: "#fff",
},
});
exports.default = InPantheonPanel;