@kietpt2003/react-native-core-ui
Version:
React Native Core UI components by KietPT
64 lines (63 loc) • 2.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { View, Pressable, StyleSheet, } from 'react-native';
import colors from '../themes/colors';
import fontSize from '../themes/fontSize';
import Text from '../Texts/Text';
const DEFAULT_SEPARATOR = '›';
const Breadcrumb = ({ items, separator = DEFAULT_SEPARATOR, }) => {
const renderItem = (i, isLast) => {
if (typeof i.item === 'string') {
return (_jsx(Text, { style: [
styles.itemText,
isLast && styles.lastItem,
i.onPress && styles.link,
], children: i.item }));
}
return i.item;
};
const renderSeparator = () => {
if (typeof separator === 'string') {
return _jsx(Text, { style: styles.separator, children: separator });
}
return separator;
};
return (_jsx(View, { style: styles.container, children: items.map((item, index) => {
const isLast = index === items.length - 1;
const content = renderItem(item, isLast);
return (_jsxs(View, { style: styles.itemWrapper, children: [_jsx(Pressable, { disabled: ((item === null || item === void 0 ? void 0 : item.disabled) !== undefined) ? item === null || item === void 0 ? void 0 : item.disabled : isLast, onPress: item === null || item === void 0 ? void 0 : item.onPress, style: ({ pressed }) => [
pressed && styles.pressed,
], children: content }), !isLast && renderSeparator()] }, index));
}) }));
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
},
itemWrapper: {
flexDirection: 'row',
alignItems: 'center',
},
pressed: {
opacity: 0.6,
},
itemText: {
fontSize: fontSize._14,
color: colors.black,
},
link: {
fontWeight: '500',
},
lastItem: {
color: colors.primary,
fontWeight: '500',
},
separator: {
marginHorizontal: 8,
color: colors.gray,
fontSize: fontSize._14,
},
});
Breadcrumb.displayName = 'Breadcrumb';
export default Breadcrumb;