115 lines
4.4 KiB
TypeScript
115 lines
4.4 KiB
TypeScript
// Metro module 9459 (f9460).
|
|
import _slicedToArray from "../../_bundle/_slicedToArray";
|
|
import { useState, useCallback, useRef, useEffect, useMemo } from "react";
|
|
import { TouchableWithoutFeedback, View, FlatList } from "react-native";
|
|
import { NOOP } from "../../Constants";
|
|
import { createStyles } from "../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../_bundle/Module712";
|
|
import { Gesture, GestureDetector } from "../../_bundle/Module5273";
|
|
import { intl, t } from "../../intl/index.native";
|
|
let useStyles;
|
|
let env6238 = {};
|
|
const Tab = function Tab(props) {
|
|
let setState;
|
|
const { children, index, isSelected, tabStyle, tabStyleActive, tabStyleSelected, onSelect } = props;
|
|
setState = void 0;
|
|
const styles = useStyles();
|
|
let state;
|
|
[state, setState] = useState(() => false);
|
|
return <TouchableWithoutFeedback accessibilityRole="tab" onPressIn={useCallback(() => setState(true), [setState])} onPressOut={useCallback(() => setState(false), [setState])} onPress={useCallback(() => onSelect(index), [onSelect, index])}>
|
|
<View style={[styles.tab, tabStyle, isSelected ? styles.tabSelected : null, state ? styles.tabActive : null, isSelected ? tabStyleSelected : null, state ? tabStyleActive : null]}>{children}</View>
|
|
</TouchableWithoutFeedback>;
|
|
};
|
|
useStyles = createStyles({
|
|
innerContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "stretch"
|
|
},
|
|
tab: {
|
|
flexGrow: 1,
|
|
flexBasis: "auto",
|
|
flexShrink: 0,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginBottom: 1,
|
|
marginHorizontal: 1,
|
|
padding: 10,
|
|
borderBottomWidth: 2,
|
|
borderBottomColor: "transparent"
|
|
},
|
|
tabActive: {
|
|
backgroundColor: "rgba(0,0,0,0.1)"
|
|
},
|
|
tabSelected: {
|
|
borderBottomColor: Module712.unsafe_rawColors.BRAND_600
|
|
},
|
|
container: {
|
|
flex: 0
|
|
}
|
|
});
|
|
export default function TabBar(props) {
|
|
let env17234 = {
|
|
$parent: env6238
|
|
};
|
|
const { initialNumTabsToRender, tabs, tabIndexSelected: tabIndexSelected2 } = props;
|
|
env17234[0] = tabIndexSelected2;
|
|
const tabStyle = props.tabStyle;
|
|
env17234[1] = tabStyle;
|
|
const tabStyleActive = props.tabStyleActive;
|
|
env17234[2] = tabStyleActive;
|
|
const tabStyleSelected = props.tabStyleSelected;
|
|
env17234[3] = tabStyleSelected;
|
|
const onSelect2 = props.onSelect;
|
|
env17234[4] = onSelect2;
|
|
const { containerStyle, hideHorizontalScrollbar = false, scrollToSelectedIndex = false } = props;
|
|
let tabIndexSelected, state;
|
|
env17234[5] = scrollToSelectedIndex;
|
|
env17234[6] = void 0;
|
|
env17234[7] = void 0;
|
|
env17234[8] = void 0;
|
|
const styles = useStyles();
|
|
const ref = useRef(null);
|
|
env17234[6] = ref;
|
|
env17234[7] = useRef(tabIndexSelected2);
|
|
useEffect(() => {
|
|
env17234[7].current = env17234[0];
|
|
}, [tabIndexSelected2]);
|
|
const callback = useCallback((a0) => {
|
|
(0, env17234[4])(a0);
|
|
const current = env17234[6].current;
|
|
if (current != null) {
|
|
current.scrollToIndex({
|
|
index: a0
|
|
});
|
|
}
|
|
}, [ref, onSelect2]);
|
|
env17234[8] = callback;
|
|
tabIndexSelected = tabIndexSelected2;
|
|
state = void 0;
|
|
state = _slicedToArray(useState(() => tabIndexSelected), 1)[0];
|
|
useEffect(() => {
|
|
let c30088_0 = setTimeout(() => {
|
|
if (env17234[7].current === state) {
|
|
const current = env17234[6].current;
|
|
if (current != null) {
|
|
current.scrollToIndex({
|
|
index: state,
|
|
viewPosition: 1
|
|
});
|
|
}
|
|
}
|
|
}, 500);
|
|
return () => {
|
|
clearTimeout(c30088_0);
|
|
};
|
|
}, [state]);
|
|
const callback2 = useCallback((a0, a1) => `tab-${a1}`, []);
|
|
const callback3 = useCallback(({ item, index: index2 }) => <Tab index={index2} isSelected={index2 === env17234[0]} tabStyle={env17234[1]} tabStyleActive={env17234[2]} tabStyleSelected={env17234[3]} onSelect={env17234[5] ? env17234[8] : env17234[4]}>{item}</Tab>, [tabIndexSelected, tabStyle, tabStyleActive, tabStyleSelected, scrollToSelectedIndex, onSelect2, callback]);
|
|
const memo = useMemo(() => Gesture.Native().disallowInterruption(true), []);
|
|
return <View style={styles.container} accessibilityRole="tablist" accessibilityLabel={intl.string(t.t1qXlK)}>
|
|
<GestureDetector gesture={memo}>
|
|
<FlatList ref={ref} contentContainerStyle={[containerStyle, styles.innerContainer]} horizontal data={tabs} renderItem={callback3} keyExtractor={callback2} initialNumToRender={initialNumTabsToRender} onScrollToIndexFailed={NOOP} showsHorizontalScrollIndicator={!hideHorizontalScrollbar} />
|
|
</GestureDetector>
|
|
</View>;
|
|
};
|