71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { View, ViewStyle } from "react-native";
|
|
import styles from "./DashedSeparatorStyle";
|
|
import { NaviLinearGradient } from "../../../App/common/hooks/useGradient";
|
|
import { Orientation } from "../../../App/common/constants/StringConstant";
|
|
|
|
export const HorizontalDashedSeparator = ({ style }: { style: ViewStyle }) => {
|
|
return <View style={[styles.horizontalDashedDivider, style]} />;
|
|
};
|
|
|
|
export const VerticalDashedSeparator = ({ style }: { style: ViewStyle }) => {
|
|
return <View style={[styles.verticalDashedDivider, style]} />;
|
|
};
|
|
|
|
export const GradientHorizontalDashedSeparator = ({
|
|
height,
|
|
colorsArray,
|
|
}: {
|
|
height: number;
|
|
colorsArray: string[];
|
|
}) => {
|
|
return (
|
|
<View style={{ height: height }}>
|
|
<NaviLinearGradient
|
|
gradientColors={colorsArray}
|
|
orientation={Orientation.HORIZONTAL}
|
|
style={styles.gradientContainer}
|
|
>
|
|
<View style={styles.gradientDashedDivider} />
|
|
</NaviLinearGradient>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export const CustomHorizontalDashedSeparator = ({
|
|
height,
|
|
width,
|
|
space,
|
|
backgroundColor,
|
|
colorsArray,
|
|
dashesCount,
|
|
}: {
|
|
height?: number;
|
|
width?: number;
|
|
space?: number;
|
|
backgroundColor?: string;
|
|
colorsArray?: string[];
|
|
dashesCount?: number;
|
|
}) => {
|
|
return (
|
|
<View style={{ height: height }}>
|
|
<NaviLinearGradient
|
|
gradientColors={colorsArray}
|
|
orientation={Orientation.HORIZONTAL}
|
|
style={styles.customGradientContainer}
|
|
>
|
|
{[...Array(dashesCount ? dashesCount : 1000).keys()].map((_, index) => (
|
|
<View
|
|
key={`dash_${index}`}
|
|
style={{
|
|
width: space ? space : styles.customGradient.width,
|
|
height: height? height : styles.customGradient.height,
|
|
marginLeft: width? width : styles.customGradient.marginLeft,
|
|
backgroundColor: backgroundColor? backgroundColor : styles.customGradient.backgroundColor,
|
|
}}
|
|
/>
|
|
))}
|
|
</NaviLinearGradient>
|
|
</View>
|
|
);
|
|
};
|