@ramses-superapp/ramses-ui
Version:
UI kit for Ramses Built Apps
77 lines (73 loc) • 1.95 kB
JavaScript
;
import React from 'react';
import { View } from 'react-native';
import { useTheme } from "../hooks/ThemeProvider.js";
import RsText from "./RsText.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const RsDivider = ({
direction = 'column',
thickness = 1,
color,
margin = 8,
content,
textProps = {},
style,
lineStyle
}) => {
const theme = useTheme();
const isHorizontal = direction === 'column';
const lineColor = color || theme.Borders.input;
// Line style for left/top and right/bottom
const baseLineStyle = isHorizontal ? {
flex: 1,
height: thickness,
backgroundColor: lineColor,
marginHorizontal: 0,
marginVertical: margin
} : {
flex: 1,
width: thickness,
backgroundColor: lineColor,
marginVertical: 0,
marginHorizontal: margin
};
// Container flex direction
const containerStyle = {
flexDirection: isHorizontal ? 'row' : 'column',
alignItems: 'center',
...style
};
// Render center content
let centerContent = null;
if (typeof content === 'string' || typeof content === 'number') {
centerContent = /*#__PURE__*/_jsx(RsText, {
text: content,
fontSize: 12,
fontWeight: "Regular",
color: theme.Text.text,
style: {
marginHorizontal: isHorizontal ? 8 : 0,
marginVertical: isHorizontal ? 0 : 8
},
...textProps
});
} else if (content) {
centerContent = /*#__PURE__*/_jsx(View, {
style: {
marginHorizontal: isHorizontal ? 8 : 0,
marginVertical: isHorizontal ? 0 : 8
},
children: content
});
}
return /*#__PURE__*/_jsxs(View, {
style: containerStyle,
children: [/*#__PURE__*/_jsx(View, {
style: [baseLineStyle, lineStyle]
}), centerContent, /*#__PURE__*/_jsx(View, {
style: [baseLineStyle, lineStyle]
})]
});
};
export default RsDivider;
//# sourceMappingURL=RsDivider.js.map