Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 1x 10x 10x 7x 1x 1x 1x 1x 10x 10x 1x 1x 1x 2x 1x 10x 10x 2x 2x 10x 10x 10x 10x 10x 10x 9x 1x 10x 1x | import React, { useEffect, useState } from 'react';
import { Pressable, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
import { InfoBoxNativeProps } from './InfoBox.native.types';
import { cn } from '@sb/libs';
export const InfoBox: React.FC<InfoBoxNativeProps> = ({
id,
title,
variant,
description,
icon,
isClosable,
autoClose,
onClose,
direction = 'horizontal',
isClose = false,
classNames,
titleClassName,
titleContainerClassName,
}) => {
const [close, setIsClose] = useState<boolean>(isClose);
useEffect(() => {
if (!isClosable && autoClose) {
const timeout = setTimeout(() => {
setIsClose(true);
onClose?.();
}, autoClose);
return () => clearTimeout(timeout);
}
}, [autoClose, isClosable, onClose]);
const getVariantClass = () => {
switch (variant) {
case 'info':
return 'text-tertiary';
case 'warning':
return 'text-status-warning';
case 'success':
return 'text-status-success';
case 'error':
return 'text-status-error';
case 'primary':
return 'text-tertiary';
case 'secondary':
return 'text-primary';
}
};
const variantClasses = getVariantClass();
const handleOnClosePress = () => {
setIsClose(true);
onClose?.();
};
const infoBoxStyle: StyleProp<ViewStyle> = {
height: 'auto',
width: '100%',
padding: 12,
flexDirection: direction === 'horizontal' ? 'row' : 'column',
display: close ? 'none' : 'flex',
};
const titleStyle: StyleProp<TextStyle> = {
marginLeft: icon ? 8 : undefined,
};
const renderTitle = () => {
return (
<View style={styles.titleWrapper}>
<View style={styles.iconWrapper} className={titleContainerClassName}>
{icon}
<Text
style={titleStyle}
className={cn('font-Bold', variant && variantClasses, titleClassName)}
>
{title}
</Text>
</View>
{isClosable && (
<Pressable onPress={handleOnClosePress} style={styles.closeButton}>
<Text>x</Text>
</Pressable>
)}
</View>
);
};
const renderDescription = () => {
if (typeof description === 'string') {
return <Text className="mt-3 text-[14px] font-normal">{description}</Text>;
}
Eif (React.isValidElement(description)) return description;
return null;
};
return (
<View id={id} testID={id} style={infoBoxStyle} className={cn('bg-white', classNames)}>
{title && renderTitle()}
{renderDescription()}
</View>
);
};
const styles = StyleSheet.create({
titleWrapper: {
marginBottom: 2,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
iconWrapper: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
closeButton: {
backgroundColor: 'transparent',
alignItems: 'flex-start',
padding: 0,
marginBottom: 4,
},
});
|