64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import React, { ComponentProps, useMemo } from 'react';
|
|
import { Chip, useTheme } from 'react-native-paper';
|
|
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
|
|
import { StyleSheet } from 'react-native';
|
|
import { getContrastColor } from '../utilities';
|
|
import { Tag } from '../database';
|
|
|
|
const tagChipStyles = StyleSheet.create({
|
|
chip: {
|
|
borderWidth: 1,
|
|
},
|
|
});
|
|
|
|
const TagChip = ({
|
|
tag,
|
|
active = true,
|
|
elevated = false,
|
|
onPress,
|
|
...props
|
|
}: {
|
|
tag: Tag;
|
|
active?: boolean;
|
|
elevated?: boolean;
|
|
onPress?: () => void;
|
|
} & Omit<ComponentProps<typeof Chip>, 'children'>) => {
|
|
const theme = useTheme();
|
|
|
|
const chipTheme = useMemo(() => {
|
|
return {
|
|
...theme,
|
|
colors: {
|
|
...theme.colors,
|
|
secondaryContainer: tag.color,
|
|
outline: tag.color,
|
|
},
|
|
};
|
|
}, [tag.color, theme]);
|
|
|
|
const contrastColor = getContrastColor(tag.color);
|
|
|
|
return (
|
|
<Chip
|
|
{...props}
|
|
icon={() => {
|
|
return (
|
|
<FontAwesome5 name="tag" color={active ? contrastColor : tag.color} />
|
|
);
|
|
}}
|
|
compact
|
|
elevated={elevated}
|
|
theme={chipTheme}
|
|
mode={active ? 'flat' : 'outlined'}
|
|
style={[tagChipStyles.chip, props.style]}
|
|
textStyle={{
|
|
color: active ? contrastColor : theme.colors.onBackground,
|
|
}}
|
|
onPress={onPress}>
|
|
{'#' + tag.name}
|
|
</Chip>
|
|
);
|
|
};
|
|
|
|
export default TagChip;
|