251 lines
8.1 KiB
TypeScript
251 lines
8.1 KiB
TypeScript
// Metro module 4618 (f4619).
|
|
import { PureComponent, createRef, memo } from "react";
|
|
import { ScrollView, View, StyleSheet } from "react-native";
|
|
import { createLegacyClassComponentStyles } from "../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../_bundle/Module712";
|
|
import { ButtonColors } from "../../design/void/native";
|
|
import { ThemeContext } from "../../_bundle/Module3901";
|
|
import { getParser } from "../../modules/markup/CustomMarkup.native";
|
|
import { Timeout } from "../../_bundle/Timeout";
|
|
import { setAccessibilityFocus } from "../../modules/a11y/native/setAccessibilityFocus.android";
|
|
import { Text } from "../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../intl/index.native";
|
|
import { Button } from "../../design/components/Button/native/Button.native";
|
|
import { PressableOpacity } from "../../design/void/Pressables/native/Pressables";
|
|
import ThemedGradient from "../../modules/client_themes/native/ThemedGradient";
|
|
import useWindowDimensions_native from "../../modules/screen/useWindowDimensions.native";
|
|
import { useIsScreenLandscape } from "../../modules/screen/useIsScreenLandscape.native";
|
|
const styles = createLegacyClassComponentStyles({
|
|
alert: {
|
|
borderRadius: Module712.radii.sm,
|
|
padding: 16,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
|
|
},
|
|
titleText: {
|
|
marginBottom: 16,
|
|
color: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY
|
|
},
|
|
divider: {
|
|
height: StyleSheet.hairlineWidth,
|
|
backgroundColor: Module712.colors.BORDER_SUBTLE
|
|
},
|
|
body: {
|
|
marginTop: 16,
|
|
color: Module712.colors.TEXT_STRONG
|
|
},
|
|
buttons: {
|
|
marginTop: 24
|
|
},
|
|
cancelButton: {
|
|
marginTop: 8
|
|
},
|
|
secondaryConfirm: {
|
|
marginTop: 16,
|
|
alignSelf: "center"
|
|
},
|
|
gradient: {
|
|
borderRadius: Module712.radii.sm
|
|
}
|
|
});
|
|
class Alert extends PureComponent {
|
|
static contextType = ThemeContext;
|
|
static defaultProps = {
|
|
confirmColor: ButtonColors.BRAND,
|
|
autoCloseOnConfirm: true
|
|
};
|
|
titleRef = createRef();
|
|
state = {
|
|
confirming: false
|
|
};
|
|
renderContent = getParser();
|
|
timeout = new Timeout();
|
|
focusTimeout = new Timeout();
|
|
handleConfirm = () => {
|
|
if (!this.state.confirming) {
|
|
const props = this.props;
|
|
const { onClose, onConfirm, autoCloseOnConfirm } = props;
|
|
this.setState({
|
|
confirming: true
|
|
});
|
|
this.timeout.start(500, () => {
|
|
this.setState({
|
|
confirming: false
|
|
});
|
|
});
|
|
if (autoCloseOnConfirm && onClose != null) {
|
|
onClose();
|
|
}
|
|
if (onConfirm != null) {
|
|
onConfirm();
|
|
}
|
|
}
|
|
};
|
|
handleCancel = () => {
|
|
const props = this.props;
|
|
const { onClose, onCancel } = props;
|
|
if (onCancel != null) {
|
|
onCancel();
|
|
}
|
|
if (onClose != null) {
|
|
onClose();
|
|
}
|
|
};
|
|
handleSecondaryConfirm = () => {
|
|
const props = this.props;
|
|
const { onClose, onConfirmSecondary } = props;
|
|
if (onClose != null) {
|
|
onClose();
|
|
}
|
|
if (onConfirmSecondary != null) {
|
|
onConfirmSecondary();
|
|
}
|
|
};
|
|
componentDidMount() {
|
|
if (this.titleRef.current != null) {
|
|
setImmediate(() => {
|
|
this.focusTimeout.start(300, () => {
|
|
setAccessibilityFocus({
|
|
ref: this.titleRef
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|
|
componentWillUnmount() {
|
|
this.timeout.stop();
|
|
this.focusTimeout.stop();
|
|
}
|
|
componentDidUpdate() {
|
|
const confirming = this.props.confirming;
|
|
if (confirming != null) {
|
|
this.timeout.stop();
|
|
this.setState({
|
|
confirming
|
|
});
|
|
}
|
|
}
|
|
renderHeader() {
|
|
const r10 = styles(this.context);
|
|
const title = this.props.title;
|
|
const r2 = title == null;
|
|
let r15 = null;
|
|
if (!r2) {
|
|
r15 = null;
|
|
if (title !== "") {
|
|
let r11 = title;
|
|
if (typeof r11 === "string") {
|
|
r11 = this.renderContent(title);
|
|
}
|
|
r15 = <View>
|
|
<Text ref={this.titleRef} accessible accessibilityRole="header" variant="heading-md/extrabold" color="text-default" style={r10.titleText}>{r11}</Text>
|
|
<View style={r10.divider} />
|
|
</View>;
|
|
}
|
|
}
|
|
return r15;
|
|
}
|
|
renderBody() {
|
|
const r11 = styles(this.context);
|
|
const props = this.props;
|
|
const { body, children } = props;
|
|
let r7 = null;
|
|
if (body != null) {
|
|
let r26 = body;
|
|
if (typeof r26 === "string") {
|
|
r26 = this.renderContent(body);
|
|
}
|
|
r7 = <ScrollView style={{
|
|
maxHeight: this.props.contentHeight
|
|
}}>
|
|
<Text variant="text-md/normal" style={r11.body}>{r26}</Text>
|
|
</ScrollView>;
|
|
}
|
|
return <>
|
|
{r7}
|
|
{children}
|
|
</>;
|
|
}
|
|
renderButtons() {
|
|
const r10 = styles(this.context);
|
|
const props = this.props;
|
|
const { cancelText, confirmText = intl.string(t.BddRzS), confirmColor, secondaryConfirmText, noDefaultButtons, renderConfirmIcon, renderConfirmRightIcon, renderConfirmButton } = props;
|
|
let isConfirmButtonDisabled = props.isConfirmButtonDisabled;
|
|
const confirming = this.state.confirming;
|
|
let r34 = null;
|
|
if (!noDefaultButtons) {
|
|
const r9 = cancelText != null ? <View style={r10.cancelButton}>
|
|
<Button variant="secondary" onPress={this.handleCancel} text={cancelText} />
|
|
</View> : void 0;
|
|
const r46 = secondaryConfirmText != null ? <PressableOpacity accessibilityRole="button" style={r10.secondaryConfirm} onPress={this.handleSecondaryConfirm}>
|
|
<Text variant="text-sm/semibold" color="text-link">{secondaryConfirmText}</Text>
|
|
</PressableOpacity> : void 0;
|
|
let r66 = renderConfirmButton == null ? void 0 : renderConfirmButton();
|
|
if (r66 == null) {
|
|
const variant = ButtonColors.GREEN !== confirmColor ? ButtonColors.RED !== confirmColor ? ButtonColors.GREY !== confirmColor ? ButtonColors.LIGHTGREY !== confirmColor ? ButtonColors.TRANSPARENT !== confirmColor ? ButtonColors.WHITE === confirmColor ? "primary-overlay" : "primary" : "secondary" : "secondary" : "secondary" : "destructive" : "active";
|
|
if (isConfirmButtonDisabled == null) {
|
|
isConfirmButtonDisabled = false;
|
|
}
|
|
let icon = renderConfirmIcon == null ? void 0 : renderConfirmIcon();
|
|
if (icon == null) {
|
|
icon = renderConfirmRightIcon == null ? void 0 : renderConfirmRightIcon();
|
|
}
|
|
if (icon == null) {
|
|
icon = void 0;
|
|
}
|
|
r66 = <Button variant={variant} onPress={this.handleConfirm} text={confirmText} loading={confirming} disabled={isConfirmButtonDisabled} icon={icon} iconPosition={renderConfirmIcon != null ? "start" : renderConfirmRightIcon != null ? "end" : void 0} />;
|
|
}
|
|
r34 = <View style={r10.buttons}>
|
|
{r66}
|
|
{r9}
|
|
{r46}
|
|
</View>;
|
|
}
|
|
return r34;
|
|
}
|
|
renderFooter() {
|
|
const footer = this.props.footer;
|
|
return footer != null ? <View>{footer}</View> : null;
|
|
}
|
|
render() {
|
|
const r11 = styles(this.context);
|
|
const props = this.props;
|
|
const { style, width, isLandscape } = props;
|
|
const r38 = <>
|
|
<ThemedGradient absolute componentStyles={r11.gradient} />
|
|
<View onAccessibilityEscape={props.onClose} style={[r11.alert, style, {
|
|
width
|
|
}]}>
|
|
{this.renderHeader()}
|
|
{this.renderBody()}
|
|
{this.renderButtons()}
|
|
{this.renderFooter()}
|
|
</View>
|
|
</>;
|
|
return isLandscape ? <ScrollView style={{
|
|
maxHeight: width
|
|
}}>{r38}</ScrollView> : r38;
|
|
}
|
|
}
|
|
const r93 = memo(function(a0) {
|
|
const windowDimensions_native = useWindowDimensions_native();
|
|
const isScreenLandscape = useIsScreenLandscape();
|
|
return <Alert width={Math.min(0.9 * Math.min(windowDimensions_native.width, windowDimensions_native.height), 400)} contentHeight={0.7 * windowDimensions_native.height} isLandscape={isScreenLandscape} {...a0} />;
|
|
});
|
|
r93.Colors = ButtonColors;
|
|
export default r93;
|
|
export function getAlertButtonVariant(a0) {
|
|
if (ButtonColors.GREEN === a0) {
|
|
return "active";
|
|
}
|
|
if (ButtonColors.RED === a0) {
|
|
return "destructive";
|
|
}
|
|
if (ButtonColors.GREY !== a0 && ButtonColors.LIGHTGREY !== a0 && ButtonColors.TRANSPARENT !== a0) {
|
|
if (ButtonColors.WHITE === a0) {
|
|
return "primary-overlay";
|
|
}
|
|
return "primary";
|
|
}
|
|
return "secondary";
|
|
}
|