69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
// Metro module 15782 (f15783).
|
|
import { useState, useRef, useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useToken } from "../../../design/tokens/native/useToken";
|
|
import { Icon } from "../../../design/void/native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
let useStyles, ToastContent;
|
|
const ToastIcon = function ToastIcon(props) {
|
|
const { icon, IconComponent } = props;
|
|
let iconColor = props.iconColor;
|
|
const recolorLegacyIcon = props.recolorLegacyIcon;
|
|
if (iconColor == null) {
|
|
iconColor = "mobile-text-heading-primary";
|
|
}
|
|
const token = useToken(iconColor);
|
|
const props2 = recolorLegacyIcon ? {
|
|
color: token
|
|
} : {
|
|
disableColor: true
|
|
};
|
|
return IconComponent != null ? <IconComponent size="sm" color={token} /> : typeof icon === "function" ? <>
|
|
{icon()}
|
|
</> : icon != null ? <Icon resizeMode="contain" source={icon} {...props2} /> : null;
|
|
};
|
|
ToastContent = function ToastContent(props) {
|
|
const { content, onTextLayout } = props;
|
|
const styles = useStyles();
|
|
return typeof content === "function" ? <View style={styles.contentContainer}>
|
|
{content()}
|
|
</View> : <Text onTextLayout={onTextLayout} style={styles.contentContainer} lineClamp={3} variant="text-sm/semibold" color="mobile-text-heading-primary">{content}</Text>;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
borderRadius: Module712.radii.xxl,
|
|
padding: Module712.space.PX_8,
|
|
paddingRight: Module712.space.PX_12,
|
|
backgroundColor: Module712.colors.MOBILE_TOAST_BACKGROUND_DEFAULT,
|
|
borderColor: Module712.colors.BORDER_SUBTLE,
|
|
borderWidth: 1,
|
|
...Module712.shadows.SHADOW_HIGH
|
|
},
|
|
multilineContainer: {
|
|
paddingLeft: Module712.space.PX_12
|
|
},
|
|
contentContainer: {
|
|
marginLeft: 8,
|
|
flexShrink: 1
|
|
}
|
|
});
|
|
export default function Toast(props) {
|
|
const { icon, iconColor, IconComponent, content, containerStyle, recolorLegacyIcon } = props;
|
|
const styles = useStyles();
|
|
const [state, setState] = useState(false);
|
|
const ref = useRef(false);
|
|
return <View style={[styles.container, state ? styles.multilineContainer : null, containerStyle]} accessibilityElementsHidden>
|
|
<ToastIcon icon={icon} iconColor={iconColor} IconComponent={IconComponent} recolorLegacyIcon={recolorLegacyIcon} />
|
|
<ToastContent content={content} onTextLayout={useCallback((a0) => {
|
|
if (!ref.current) {
|
|
ref.current = true;
|
|
setState(a0.nativeEvent.lines.length > 1);
|
|
}
|
|
}, [])} />
|
|
</View>;
|
|
};
|