rn-inkpad
Version:
<img src="https://res.cloudinary.com/fercloudinary/image/upload/v1715452841/packages/inkpad-banner_acl0xl.png" />
68 lines (67 loc) • 3.64 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActionSheet = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const hooks_1 = require("../../hooks");
const actionSheetStyles_1 = require("../../theme/actionSheetStyles");
const Icon_1 = require("../icon/Icon");
const ActionButton_1 = require("./ActionButton");
const ActionSheet = ({ actions, cancelText, setVisible, showCancelButton, showIconOnIos, showCloseButton, description, theme: userTheme, title, visible, }) => {
const { backgroundColor, buttonColor, closeBackgroundColor, closeIconColor, getBorder, separatorColor, textColor, theme, } = (0, hooks_1.useActionSheet)(actions?.length ?? 0, userTheme);
return (<react_native_1.Modal visible={visible} transparent>
<react_native_1.View style={actionSheetStyles_1.actionSheetStyles.container}>
<react_native_1.View style={[
theme === 'cupertino'
? actionSheetStyles_1.actionSheetStyles.controlsCupertino
: actionSheetStyles_1.actionSheetStyles.controlsMaterial,
{ backgroundColor },
]}>
{showCloseButton && (<react_native_1.Pressable style={{
...actionSheetStyles_1.actionSheetStyles.closeButton,
backgroundColor: closeBackgroundColor,
}} onPress={() => setVisible(false)}>
<Icon_1.Icon name="close" color={closeIconColor} size={18}/>
</react_native_1.Pressable>)}
{title && (<react_native_1.Text style={[
{
...actionSheetStyles_1.actionSheetStyles.title,
color: textColor,
marginBottom: !!description ? 0 : 10,
},
theme === 'cupertino'
? actionSheetStyles_1.actionSheetStyles.textCenter
: actionSheetStyles_1.actionSheetStyles.textLeft,
]}>
{title}
</react_native_1.Text>)}
{description && (<react_native_1.Text style={[
{ ...actionSheetStyles_1.actionSheetStyles.subTitle, color: textColor },
theme === 'cupertino'
? actionSheetStyles_1.actionSheetStyles.textCenter
: actionSheetStyles_1.actionSheetStyles.textLeft,
]}>
{description}
</react_native_1.Text>)}
<react_native_1.SafeAreaView>
{actions &&
actions.map((action, idx) => (<ActionButton_1.ActionButton action={action} backgroundColor={buttonColor} radius={getBorder(idx)} showIconOnIos={showIconOnIos} textColor={textColor} theme={theme} style={idx !== 0
? {
borderTopWidth: theme === 'cupertino' ? 1 : 0,
borderTopColor: separatorColor,
}
: undefined} key={idx}/>))}
{(!actions || showCancelButton) && (<ActionButton_1.ActionButton action={{
icon: 'close',
text: cancelText ?? 'Cancel',
onPress: () => setVisible(false),
}} backgroundColor={buttonColor} marginTop={theme === 'cupertino' ? 10 : 0} radius="all" showIconOnIos={showIconOnIos} textColor={textColor} theme={theme}/>)}
</react_native_1.SafeAreaView>
</react_native_1.View>
</react_native_1.View>
</react_native_1.Modal>);
};
exports.ActionSheet = ActionSheet;