fix import
This commit is contained in:
@@ -1,10 +1,9 @@
|
|||||||
import React from 'react';
|
import React from "react";
|
||||||
import { StyleSheet, ScrollView, TouchableOpacity, View } from 'react-native';
|
import { StyleSheet, ScrollView, TouchableOpacity, View } from "react-native";
|
||||||
import { SearchFilters } from '@/types/feed';
|
import { SearchFilters as SearchFiltersData } from "@/types/feed";
|
||||||
import { ThemedText } from './themed-text';
|
import { ThemedView } from "./themed-view";
|
||||||
import { ThemedView } from './themed-view';
|
import { Colors, Spacing } from "@/constants/theme";
|
||||||
import { Colors, Spacing } from '@/constants/theme';
|
import { useColorScheme } from "react-native";
|
||||||
import { useColorScheme } from 'react-native';
|
|
||||||
|
|
||||||
interface FilterChipProps {
|
interface FilterChipProps {
|
||||||
label: string;
|
label: string;
|
||||||
@@ -15,7 +14,7 @@ interface FilterChipProps {
|
|||||||
|
|
||||||
function FilterChip({ label, value, onRemove, icon }: FilterChipProps) {
|
function FilterChip({ label, value, onRemove, icon }: FilterChipProps) {
|
||||||
const scheme = useColorScheme();
|
const scheme = useColorScheme();
|
||||||
const colors = Colors[scheme === 'unspecified' ? 'light' : scheme];
|
const colors = Colors[scheme === "unspecified" ? "light" : scheme];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
@@ -24,35 +23,40 @@ function FilterChip({ label, value, onRemove, icon }: FilterChipProps) {
|
|||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
{icon && <ThemedText style={styles.chipIcon}>{icon}</ThemedText>}
|
{icon && <ThemedText style={styles.chipIcon}>{icon}</ThemedText>}
|
||||||
<ThemedText style={styles.chipText}>
|
<ThemedText style={styles.chipText}>{label}:</ThemedText>
|
||||||
{label}:
|
<ThemedText style={styles.chipValue}>{value}</ThemedText>
|
||||||
</ThemedText>
|
|
||||||
<ThemedText style={styles.chipValue}>
|
|
||||||
{value}
|
|
||||||
</ThemedText>
|
|
||||||
<ThemedText style={styles.chipClose}>✕</ThemedText>
|
<ThemedText style={styles.chipClose}>✕</ThemedText>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SearchFiltersProps {
|
interface SearchFiltersProps {
|
||||||
filters: SearchFilters;
|
filters: SearchFiltersData;
|
||||||
onFilterChange: (filters: Partial<SearchFilters>) => void;
|
onFilterChange: (filters: Partial<SearchFilters>) => void;
|
||||||
onClearAll: () => void;
|
onClearAll: () => void;
|
||||||
availableFeeds?: Array<{ id: string; title: string }>;
|
availableFeeds?: Array<{ id: string; title: string }>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SearchFilters({ filters, onFilterChange, onClearAll, availableFeeds }: SearchFiltersProps) {
|
export function SearchFilters({
|
||||||
|
filters,
|
||||||
|
onFilterChange,
|
||||||
|
onClearAll,
|
||||||
|
availableFeeds,
|
||||||
|
}: SearchFiltersProps) {
|
||||||
const scheme = useColorScheme();
|
const scheme = useColorScheme();
|
||||||
const colors = Colors[scheme === 'unspecified' ? 'light' : scheme];
|
const colors = Colors[scheme === "unspecified" ? "light" : scheme];
|
||||||
|
|
||||||
const getFeedTitle = (feedId: string) => {
|
const getFeedTitle = (feedId: string) => {
|
||||||
const feed = availableFeeds?.find(f => f.id === feedId);
|
const feed = availableFeeds?.find((f) => f.id === feedId);
|
||||||
return feed?.title || feedId;
|
return feed?.title || feedId;
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatDate = (date: Date) => {
|
const formatDate = (date: Date) => {
|
||||||
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
return date.toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderFilterChips = () => {
|
const renderFilterChips = () => {
|
||||||
@@ -60,23 +64,28 @@ export function SearchFilters({ filters, onFilterChange, onClearAll, availableFe
|
|||||||
|
|
||||||
// Date range filter
|
// Date range filter
|
||||||
if (filters.dateFrom || filters.dateTo) {
|
if (filters.dateFrom || filters.dateTo) {
|
||||||
const fromLabel = filters.dateFrom ? formatDate(filters.dateFrom) : 'Any date';
|
const fromLabel = filters.dateFrom
|
||||||
const toLabel = filters.dateTo ? formatDate(filters.dateTo) : 'Now';
|
? formatDate(filters.dateFrom)
|
||||||
|
: "Any date";
|
||||||
|
const toLabel = filters.dateTo ? formatDate(filters.dateTo) : "Now";
|
||||||
chips.push(
|
chips.push(
|
||||||
<FilterChip
|
<FilterChip
|
||||||
key="date"
|
key="date"
|
||||||
label="Date"
|
label="Date"
|
||||||
value={`${fromLabel} – ${toLabel}`}
|
value={`${fromLabel} – ${toLabel}`}
|
||||||
icon="📅"
|
icon="📅"
|
||||||
onRemove={() => onFilterChange({ dateFrom: undefined, dateTo: undefined })}
|
onRemove={() =>
|
||||||
/>
|
onFilterChange({ dateFrom: undefined, dateTo: undefined })
|
||||||
|
}
|
||||||
|
/>,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Feed filters
|
// Feed filters
|
||||||
if (filters.feedIds && filters.feedIds.length > 0) {
|
if (filters.feedIds && filters.feedIds.length > 0) {
|
||||||
const feedCount = filters.feedIds.length;
|
const feedCount = filters.feedIds.length;
|
||||||
const feedTitle = feedCount === 1
|
const feedTitle =
|
||||||
|
feedCount === 1
|
||||||
? getFeedTitle(filters.feedIds[0])
|
? getFeedTitle(filters.feedIds[0])
|
||||||
: `${feedCount} feeds`;
|
: `${feedCount} feeds`;
|
||||||
chips.push(
|
chips.push(
|
||||||
@@ -86,16 +95,15 @@ export function SearchFilters({ filters, onFilterChange, onClearAll, availableFe
|
|||||||
value={feedTitle}
|
value={feedTitle}
|
||||||
icon="📰"
|
icon="📰"
|
||||||
onRemove={() => onFilterChange({ feedIds: undefined })}
|
onRemove={() => onFilterChange({ feedIds: undefined })}
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Author filters
|
// Author filters
|
||||||
if (filters.authors && filters.authors.length > 0) {
|
if (filters.authors && filters.authors.length > 0) {
|
||||||
const authorCount = filters.authors.length;
|
const authorCount = filters.authors.length;
|
||||||
const authorLabel = authorCount === 1
|
const authorLabel =
|
||||||
? filters.authors[0]
|
authorCount === 1 ? filters.authors[0] : `${authorCount} authors`;
|
||||||
: `${authorCount} authors`;
|
|
||||||
chips.push(
|
chips.push(
|
||||||
<FilterChip
|
<FilterChip
|
||||||
key="authors"
|
key="authors"
|
||||||
@@ -103,21 +111,21 @@ export function SearchFilters({ filters, onFilterChange, onClearAll, availableFe
|
|||||||
value={authorLabel}
|
value={authorLabel}
|
||||||
icon="✍️"
|
icon="✍️"
|
||||||
onRemove={() => onFilterChange({ authors: undefined })}
|
onRemove={() => onFilterChange({ authors: undefined })}
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Content type filter
|
// Content type filter
|
||||||
if (filters.contentType) {
|
if (filters.contentType) {
|
||||||
const contentTypeLabels: Record<string, string> = {
|
const contentTypeLabels: Record<string, string> = {
|
||||||
article: 'Articles',
|
article: "Articles",
|
||||||
audio: 'Audio',
|
audio: "Audio",
|
||||||
video: 'Video',
|
video: "Video",
|
||||||
};
|
};
|
||||||
const contentTypeIcons: Record<string, string> = {
|
const contentTypeIcons: Record<string, string> = {
|
||||||
article: '📄',
|
article: "📄",
|
||||||
audio: '🎵',
|
audio: "🎵",
|
||||||
video: '🎬',
|
video: "🎬",
|
||||||
};
|
};
|
||||||
chips.push(
|
chips.push(
|
||||||
<FilterChip
|
<FilterChip
|
||||||
@@ -126,7 +134,7 @@ export function SearchFilters({ filters, onFilterChange, onClearAll, availableFe
|
|||||||
value={contentTypeLabels[filters.contentType]}
|
value={contentTypeLabels[filters.contentType]}
|
||||||
icon={contentTypeIcons[filters.contentType]}
|
icon={contentTypeIcons[filters.contentType]}
|
||||||
onRemove={() => onFilterChange({ contentType: undefined })}
|
onRemove={() => onFilterChange({ contentType: undefined })}
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -168,8 +176,8 @@ export function SearchFilters({ filters, onFilterChange, onClearAll, availableFe
|
|||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
flexDirection: 'row',
|
flexDirection: "row",
|
||||||
alignItems: 'center',
|
alignItems: "center",
|
||||||
paddingHorizontal: Spacing.three,
|
paddingHorizontal: Spacing.three,
|
||||||
paddingVertical: Spacing.two,
|
paddingVertical: Spacing.two,
|
||||||
gap: Spacing.two,
|
gap: Spacing.two,
|
||||||
@@ -179,12 +187,12 @@ const styles = StyleSheet.create({
|
|||||||
gap: Spacing.two,
|
gap: Spacing.two,
|
||||||
},
|
},
|
||||||
chip: {
|
chip: {
|
||||||
flexDirection: 'row',
|
flexDirection: "row",
|
||||||
alignItems: 'center',
|
alignItems: "center",
|
||||||
paddingHorizontal: Spacing.three,
|
paddingHorizontal: Spacing.three,
|
||||||
paddingVertical: Spacing.one,
|
paddingVertical: Spacing.one,
|
||||||
borderRadius: Spacing.two,
|
borderRadius: Spacing.two,
|
||||||
backgroundColor: '#e5e5ea',
|
backgroundColor: "#e5e5ea",
|
||||||
gap: Spacing.one,
|
gap: Spacing.one,
|
||||||
},
|
},
|
||||||
chipIcon: {
|
chipIcon: {
|
||||||
@@ -192,16 +200,16 @@ const styles = StyleSheet.create({
|
|||||||
},
|
},
|
||||||
chipText: {
|
chipText: {
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
color: '#8e8e93',
|
color: "#8e8e93",
|
||||||
fontWeight: '600',
|
fontWeight: "600",
|
||||||
},
|
},
|
||||||
chipValue: {
|
chipValue: {
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
color: '#000000',
|
color: "#000000",
|
||||||
},
|
},
|
||||||
chipClose: {
|
chipClose: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
color: '#8e8e93',
|
color: "#8e8e93",
|
||||||
marginLeft: Spacing.one,
|
marginLeft: Spacing.one,
|
||||||
},
|
},
|
||||||
clearAllButton: {
|
clearAllButton: {
|
||||||
@@ -210,7 +218,7 @@ const styles = StyleSheet.create({
|
|||||||
},
|
},
|
||||||
clearAllText: {
|
clearAllText: {
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
color: '#007AFF',
|
color: "#007AFF",
|
||||||
fontWeight: '500',
|
fontWeight: "500",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user