64 lines
1.5 KiB
React
64 lines
1.5 KiB
React
// Metro module 1826 (f1827).
|
|
import { useMemo } from "react";
|
|
import { Animated, View, StyleSheet } from "react-native";
|
|
import { useKeyboardState } from "./useResizeMode";
|
|
const r31 = {
|
|
width: 13,
|
|
height: 2,
|
|
borderRadius: 1
|
|
};
|
|
const arrowUpContainer = {
|
|
marginHorizontal: 5,
|
|
width: 30,
|
|
height: 30,
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
};
|
|
const styles = StyleSheet.create({
|
|
arrowUpContainer,
|
|
arrowDownContainer: {
|
|
...arrowUpContainer,
|
|
transform: [{
|
|
rotate: "180deg"
|
|
}]
|
|
},
|
|
arrow: {
|
|
width: 20,
|
|
height: 20,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between"
|
|
},
|
|
arrowLeftLine: {
|
|
...r31,
|
|
transform: [{
|
|
rotate: "-45deg"
|
|
}],
|
|
left: -0.5
|
|
},
|
|
arrowRightLine: {
|
|
...r31,
|
|
transform: [{
|
|
rotate: "45deg"
|
|
}],
|
|
left: -5.5
|
|
}
|
|
});
|
|
export default ({ type, disabled, theme }) => {
|
|
let memo;
|
|
memo = void 0;
|
|
const keyboardState = useKeyboardState((a0) => a0.appearance);
|
|
memo = useMemo(() => {
|
|
const r4 = theme[keyboardState];
|
|
return {
|
|
backgroundColor: disabled ? r4.disabled : r4.primary
|
|
};
|
|
}, [disabled, theme, keyboardState]);
|
|
return <View style={type === "next" ? styles.arrowDownContainer : styles.arrowUpContainer}>
|
|
<View style={styles.arrow}>
|
|
<Animated.View style={useMemo(() => [styles.arrowLeftLine, memo], [memo])} />
|
|
<Animated.View style={useMemo(() => [styles.arrowRightLine, memo], [memo])} />
|
|
</View>
|
|
</View>;
|
|
};
|