rn-inkpad
Version:
<img src="https://res.cloudinary.com/fercloudinary/image/upload/v1715452841/packages/inkpad-banner_acl0xl.png" />
78 lines (76 loc) • 3.98 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertContainer = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const components_1 = require("./components");
const useAlertContainer_1 = require("./hooks/useAlertContainer");
const useTheme_1 = require("./hooks/useTheme");
function AlertContainer({ theme, appearance, personalTheme, animationType, }) {
const { prompt, isAlert, inputRef, setTextInput, handlePress } = (0, useAlertContainer_1.useAlertContainer)();
const { styles, textButtonColor, cancelWeight, ios } = (0, useTheme_1.useTheme)({
appearance,
buttons: prompt?.buttons?.length,
personalTheme,
theme,
icon: !!prompt?.icon,
});
if (!prompt)
return;
const { placeholderColor, backgroundColor } = personalTheme ?? {};
const { title, icon, iconColor, buttons, cancelColorText, cancelText, confirmColorText, confirmText, description, label, placeholder, } = prompt;
return (<react_native_1.Modal style={{ zIndex: 9999 }} visible={!!prompt} transparent animationType={animationType}>
<react_native_1.View style={{
...styles.modalContainer,
backgroundColor: !!backgroundColor
? backgroundColor
: 'rgba(0,0,0,0.4)',
}}>
<react_native_1.View style={{
...styles.modalView,
marginBottom: isAlert ? 0 : '50%',
}}>
<react_native_1.View style={{
flexDirection: 'row',
marginHorizontal: 15,
}}>
{!!icon && <components_1.Icon icon={icon} iconColor={iconColor} ios={ios}/>}
<react_native_1.View style={{ flex: 1 }}>
<react_native_1.Text style={{ ...styles.title }}>{title}</react_native_1.Text>
{description && (<react_native_1.Text style={{ ...styles.description }}>{description}</react_native_1.Text>)}
</react_native_1.View>
</react_native_1.View>
{!ios && !!label && <react_native_1.Text style={{ ...styles.label }}>{label}</react_native_1.Text>}
{!isAlert && (<react_native_1.TextInput placeholder={placeholder ?? prompt.title} onChangeText={setTextInput} placeholderTextColor={!!placeholderColor
? placeholderColor
: appearance === 'dark'
? '#666'
: '#C3C3C3'} ref={inputRef} style={{ ...styles.textInput }}/>)}
<react_native_1.View style={{ ...styles.buttonsContainer }}>
{!!buttons ? (buttons.map((button, index) => (<components_1.Button button={button} isFirst={index === 0} key={index} theme={theme} appearance={appearance} buttons={buttons.length} onPress={() => handlePress(true, button.onPress)}/>))) : (<>
{(!isAlert || prompt.showCancelButton) && (<components_1.Button button={{
text: cancelText ?? 'Cancel',
onPress: () => handlePress(true),
textStyle: {
color: cancelColorText ?? textButtonColor,
fontWeight: cancelWeight,
},
}} theme={theme} appearance={appearance} isFirst/>)}
<components_1.Button button={{
text: confirmText ? confirmText : isAlert ? 'Ok' : 'Done',
onPress: () => handlePress(),
textStyle: {
color: confirmColorText ?? textButtonColor,
fontWeight: isAlert ? '500' : '700',
},
}} theme={theme} appearance={appearance}/>
</>)}
</react_native_1.View>
</react_native_1.View>
</react_native_1.View>
</react_native_1.Modal>);
}
exports.AlertContainer = AlertContainer;