search bar
This commit is contained in:
@@ -34,19 +34,7 @@ const FILTER_OPTIONS: { key: keyof SearchFilters; label: string; icon: IconName
|
|||||||
{ key: 'ocrText', label: 'Texte OCR', icon: 'document-scanner' },
|
{ key: 'ocrText', label: 'Texte OCR', icon: 'document-scanner' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const SORT_OPTIONS: { key: SortKey; label: string; icon: IconName }[] = [
|
export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersChange, sort, bottomPadding = 0 }: SearchBarProps) {
|
||||||
{ key: 'date', label: 'Date', icon: 'schedule' },
|
|
||||||
{ key: 'name', label: 'Nom', icon: 'sort-by-alpha' },
|
|
||||||
{ key: 'size', label: 'Taille', icon: 'data-usage' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const SORT_LABELS: Record<SortKey, string> = {
|
|
||||||
date: 'Date',
|
|
||||||
name: 'Nom',
|
|
||||||
size: 'Taille',
|
|
||||||
};
|
|
||||||
|
|
||||||
export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersChange, sort, onSortChange, bottomPadding = 0 }: SearchBarProps) {
|
|
||||||
const animatedHeight = useRef(new Animated.Value(0)).current;
|
const animatedHeight = useRef(new Animated.Value(0)).current;
|
||||||
const [panelOpen, setPanelOpen] = React.useState(false);
|
const [panelOpen, setPanelOpen] = React.useState(false);
|
||||||
|
|
||||||
@@ -61,21 +49,13 @@ export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersCha
|
|||||||
|
|
||||||
const panelMaxHeight = animatedHeight.interpolate({
|
const panelMaxHeight = animatedHeight.interpolate({
|
||||||
inputRange: [0, 1],
|
inputRange: [0, 1],
|
||||||
outputRange: [0, 260],
|
outputRange: [0, 150],
|
||||||
});
|
});
|
||||||
|
|
||||||
const toggleFilter = (key: keyof SearchFilters) => {
|
const toggleFilter = (key: keyof SearchFilters) => {
|
||||||
onFiltersChange({ ...filters, [key]: !filters[key] });
|
onFiltersChange({ ...filters, [key]: !filters[key] });
|
||||||
};
|
};
|
||||||
|
|
||||||
const selectSort = (key: SortKey) => {
|
|
||||||
if (sort.key === key) {
|
|
||||||
onSortChange({ key, direction: sort.direction === 'asc' ? 'desc' : 'asc' });
|
|
||||||
} else {
|
|
||||||
onSortChange({ key, direction: 'desc' });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const hasActiveFilter = filters.name || filters.ocrText || sort.key !== 'date';
|
const hasActiveFilter = filters.name || filters.ocrText || sort.key !== 'date';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -129,33 +109,6 @@ export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersCha
|
|||||||
</Text>
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
<Text style={styles.sectionLabel}>Trier par</Text>
|
|
||||||
{SORT_OPTIONS.map((opt) => {
|
|
||||||
const active = sort.key === opt.key;
|
|
||||||
return (
|
|
||||||
<TouchableOpacity
|
|
||||||
key={opt.key}
|
|
||||||
style={[styles.filterChip, active && styles.filterChipActive]}
|
|
||||||
onPress={() => selectSort(opt.key)}
|
|
||||||
>
|
|
||||||
<MaterialIcons
|
|
||||||
name={active && sort.direction === 'desc' ? 'arrow-downward' : active && sort.direction === 'asc' ? 'arrow-upward' : opt.icon}
|
|
||||||
size={16}
|
|
||||||
color={active ? '#fff' : '#1976D2'}
|
|
||||||
/>
|
|
||||||
<Text style={[styles.filterChipText, active && styles.filterChipTextActive]}>
|
|
||||||
{opt.label}
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
{sort.key !== 'date' && (
|
|
||||||
<Text style={styles.sortHint}>
|
|
||||||
Tri : {SORT_LABELS[sort.key]} ({sort.direction === 'asc' ? 'A → Z' : 'Z → A'})
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
@@ -245,9 +198,4 @@ const styles = StyleSheet.create({
|
|||||||
filterChipTextActive: {
|
filterChipTextActive: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
sortHint: {
|
|
||||||
width: '100%',
|
|
||||||
fontSize: 12,
|
|
||||||
color: '#999',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user