chore(mobile): usun gorny pasek zakladek, zastapiony dolnym
This commit is contained in:
goon-foss
parent
b847b300bf
commit
dce738b8ab
1 changed files with 0 additions and 137 deletions
|
|
@ -1,137 +0,0 @@
|
||||||
/**
|
|
||||||
* Górny pasek zakładek: aktywną wskazuje przesuwane podkreślenie, wzorzec z X/YouTube/
|
|
||||||
* Reddit i większości Androida.
|
|
||||||
*
|
|
||||||
* Zastąpił „ciekłą kroplę" (SVG morph, 2026-08-14). Kropla była trzema błędami naraz
|
|
||||||
* (zgłoszenie 2026-08-18): rysunek miał 44 px i wystawał ponad pasek, więc nagłówek
|
|
||||||
* spuchł i rozjechało się wyrównanie wiersza; morfowanie kształtu nie wyglądało ładniej
|
|
||||||
* ani jak wzór; a cała technika (przeliczanie ścieżki SVG w JS, ~12 re-renderów na
|
|
||||||
* przejście) była droga za nic. Tu wskaźnik to jeden mały <View> PRZESUWANY, nie
|
|
||||||
* morfowany.
|
|
||||||
*
|
|
||||||
* Zasady zerżnięte z liderów rynku, bo tam są sprawdzone:
|
|
||||||
* - STAŁA WYSOKOŚĆ: pasek jest wysoki jak wiersz tekstu, nie rozpycha nagłówka. To
|
|
||||||
* wprost naprawia wyrównanie, którego zabrakło przy kropli.
|
|
||||||
* - PRZESUWANIE, nie morfowanie: podkreślenie jedzie w poziomie (translateX, natywny
|
|
||||||
* sterownik), szerokość dopasowana do tekstu aktywnej zakładki.
|
|
||||||
* - SZYBKO I DYSKRETNIE: 220 ms ease-out. Ruch jest tłem, nie gwiazdą.
|
|
||||||
* - Robi to KOLOR: aktywna = accentText + kreska, reszta = wyszarzona.
|
|
||||||
*
|
|
||||||
* Pozycje mierzymy `onLayout` (szerokości etykiet różnią się: „JAV" vs „Scenes"), więc
|
|
||||||
* kreska huguje tekst, a nie całą komórkę. Do pierwszego pomiaru kreski nie rysujemy
|
|
||||||
* (zero mignięcia z lewej).
|
|
||||||
*/
|
|
||||||
import React from 'react';
|
|
||||||
import { Animated, Easing, LayoutChangeEvent, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
||||||
|
|
||||||
import { fonts, theme } from '../theme';
|
|
||||||
|
|
||||||
interface Props<T extends string> {
|
|
||||||
tabs: readonly T[];
|
|
||||||
current: T;
|
|
||||||
onSelect: (tab: T) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TopTabsBar<T extends string>({ tabs, current, onSelect }: Props<T>) {
|
|
||||||
const activeIndex = Math.max(0, tabs.indexOf(current));
|
|
||||||
|
|
||||||
// Pozycja komórki (x, szerokość) i szerokość samej etykiety, per zakładka. Kreska
|
|
||||||
// huguje etykietę: left = x komórki + wyśrodkowanie, width = szerokość etykiety.
|
|
||||||
const [tabLayout, setTabLayout] = React.useState<Record<number, { x: number; w: number }>>({});
|
|
||||||
const [labelW, setLabelW] = React.useState<Record<number, number>>({});
|
|
||||||
const ready = tabs.every((_, i) => tabLayout[i] && labelW[i] != null);
|
|
||||||
|
|
||||||
// Jeden driver = float indeks aktywnej. Bez native drivera, bo animujemy też `width`
|
|
||||||
// (layout prop), a to i tak jeden 2 px pasek, nie 12 ścieżek SVG jak w kropli.
|
|
||||||
const anim = React.useRef(new Animated.Value(activeIndex)).current;
|
|
||||||
React.useEffect(() => {
|
|
||||||
Animated.timing(anim, {
|
|
||||||
toValue: activeIndex,
|
|
||||||
duration: 220,
|
|
||||||
easing: Easing.out(Easing.cubic),
|
|
||||||
useNativeDriver: false,
|
|
||||||
}).start();
|
|
||||||
}, [activeIndex, anim]);
|
|
||||||
|
|
||||||
const onTabLayout = (i: number) => (e: LayoutChangeEvent) => {
|
|
||||||
const { x, width } = e.nativeEvent.layout;
|
|
||||||
setTabLayout((p) => (p[i] && p[i].x === x && p[i].w === width ? p : { ...p, [i]: { x, w: width } }));
|
|
||||||
};
|
|
||||||
const onLabelLayout = (i: number) => (e: LayoutChangeEvent) => {
|
|
||||||
const w = e.nativeEvent.layout.width;
|
|
||||||
setLabelW((p) => (p[i] === w ? p : { ...p, [i]: w }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const idxRange = tabs.map((_, i) => i);
|
|
||||||
// interpolate wymaga >=2 punktów wejścia; przy 1 zakładce kreska stoi statycznie.
|
|
||||||
const canInterp = ready && idxRange.length >= 2;
|
|
||||||
// Liczone TYLKO gdy zmierzone: przed pomiarem tabLayout[i] jest undefined i mapowanie
|
|
||||||
// by się wywaliło (crash 2026-08-18 „Cannot read property 'x' of undefined").
|
|
||||||
const leftOut = ready ? tabs.map((_, i) => tabLayout[i].x + (tabLayout[i].w - labelW[i]) / 2) : [];
|
|
||||||
const widthOut = ready ? tabs.map((_, i) => labelW[i]) : [];
|
|
||||||
const translateX = canInterp
|
|
||||||
? anim.interpolate({ inputRange: idxRange, outputRange: leftOut })
|
|
||||||
: ready
|
|
||||||
? leftOut[0]
|
|
||||||
: 0;
|
|
||||||
const underlineW = canInterp
|
|
||||||
? anim.interpolate({ inputRange: idxRange, outputRange: widthOut })
|
|
||||||
: ready
|
|
||||||
? widthOut[0]
|
|
||||||
: 0;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.wrap}>
|
|
||||||
<View style={styles.row}>
|
|
||||||
{tabs.map((t, i) => {
|
|
||||||
const active = i === activeIndex;
|
|
||||||
return (
|
|
||||||
<Pressable
|
|
||||||
key={t}
|
|
||||||
style={styles.tab}
|
|
||||||
hitSlop={8}
|
|
||||||
accessibilityRole="tab"
|
|
||||||
accessibilityState={{ selected: active }}
|
|
||||||
onLayout={onTabLayout(i)}
|
|
||||||
onPress={() => (active ? null : onSelect(t))}
|
|
||||||
>
|
|
||||||
<Text
|
|
||||||
numberOfLines={1}
|
|
||||||
onLayout={onLabelLayout(i)}
|
|
||||||
style={[styles.label, active ? styles.labelActive : null]}
|
|
||||||
>
|
|
||||||
{t}
|
|
||||||
</Text>
|
|
||||||
</Pressable>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</View>
|
|
||||||
{ready ? (
|
|
||||||
<Animated.View
|
|
||||||
style={[styles.underline, { width: underlineW, transform: [{ translateX }] }]}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
wrap: { justifyContent: 'center' },
|
|
||||||
row: { flexDirection: 'row', alignItems: 'center' },
|
|
||||||
tab: { flex: 1, alignItems: 'center', paddingVertical: 4 },
|
|
||||||
label: {
|
|
||||||
color: theme.muted,
|
|
||||||
fontSize: 13,
|
|
||||||
fontFamily: fonts.medium,
|
|
||||||
letterSpacing: 0.3,
|
|
||||||
},
|
|
||||||
labelActive: { color: theme.accentText, fontFamily: fonts.display },
|
|
||||||
underline: {
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
height: 2,
|
|
||||||
borderRadius: 1,
|
|
||||||
backgroundColor: theme.accentText,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Loading…
Add table
Reference in a new issue