121 lines
5.5 KiB
TypeScript
121 lines
5.5 KiB
TypeScript
// Metro module 9606 (f9607).
|
|
import { useRef, useState, useEffect, useCallback, memo } from "react";
|
|
import { View } from "react-native";
|
|
import { GIFPickerResultTypes } from "../../../Constants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { GIF_PICKER_GUTTER_SPACING } from "./GIFPickerUtils";
|
|
import { InputHeights } from "../../../design/components/Input/native/InputTypes.native";
|
|
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
|
|
import { withTiming } from "../../../design/animation/reanimated/timing/timing";
|
|
import { timingFast } from "../../../design/animation/reanimated/timing/timingPresets";
|
|
import { IconButton } from "../../../design/components/Button/native/IconButton.native";
|
|
import Module8295 from "../../../_bundle/Module8295";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { SearchField } from "../../../design/components/TextField/native/SearchField.native";
|
|
import { getSearchPlaceholder } from "../GifPickerUtils";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
import { ChevronLargeLeftIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronLargeLeftIcon";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
let useStyles, __initData, __initData2;
|
|
const FavoritesSearch = function FavoritesSearch(props) {
|
|
const { columnWidth, onQueryChange } = props;
|
|
const styles = useStyles();
|
|
const ref = useRef(null);
|
|
const [state, setState] = useState(false);
|
|
const sharedValue = useSharedValue(0);
|
|
useEffect(() => {
|
|
sharedValue.set(withTiming(state ? 1 : 0, timingFast));
|
|
if (state) {
|
|
const current = ref.current;
|
|
if (current != null) {
|
|
current.focus();
|
|
}
|
|
}
|
|
}, [state, sharedValue]);
|
|
const S = () => ({
|
|
opacity: 1 - sharedValue.get()
|
|
});
|
|
S.__closure = {
|
|
progress: sharedValue
|
|
};
|
|
S.__workletHash = 11452628946352;
|
|
S.__initData = __initData;
|
|
const animatedStyle = useAnimatedStyle(S);
|
|
const v = () => ({
|
|
width: sharedValue.get() * columnWidth,
|
|
opacity: sharedValue.get()
|
|
});
|
|
v.__closure = {
|
|
progress: sharedValue,
|
|
columnWidth
|
|
};
|
|
v.__workletHash = 12592656871997;
|
|
v.__initData = __initData2;
|
|
const animatedStyle2 = useAnimatedStyle(v);
|
|
const callback = useCallback(() => setState(true), []);
|
|
const callback2 = useCallback(() => {
|
|
const current = ref.current;
|
|
if ((current == null ? void 0 : current.getText()) === "") {
|
|
setState(false);
|
|
}
|
|
}, []);
|
|
return <>
|
|
{[<ReanimatedRexport.View style={animatedStyle} pointerEvents={state ? "none" : "auto"} accessibilityElementsHidden={state} importantForAccessibility={state ? "no-hide-descendants" : "auto"}>
|
|
<IconButton variant="icon-only" size="md" icon={Module8295} accessibilityLabel={intl.string(t["+Kakw+"])} onPress={callback} />
|
|
</ReanimatedRexport.View>, <ReanimatedRexport.View style={[styles.favoritesSearch, animatedStyle2]} pointerEvents={state ? "auto" : "none"} accessibilityElementsHidden={!state} importantForAccessibility={state ? "auto" : "no-hide-descendants"}>
|
|
<SearchField ref={ref} size="md" onChange={onQueryChange} onClear={() => onQueryChange == null ? void 0 : onQueryChange("")} onBlur={callback2} placeholder={intl.string(t["+Kakw+"])} />
|
|
</ReanimatedRexport.View>]}
|
|
</>;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
paddingVertical: Module712.space.PX_8
|
|
},
|
|
headerContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
gap: GIF_PICKER_GUTTER_SPACING
|
|
},
|
|
header: {
|
|
borderWidth: 1,
|
|
borderColor: "transparent",
|
|
paddingHorizontal: Module712.space.PX_8,
|
|
height: InputHeights.MD,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
favoritesSearch: {
|
|
position: "absolute",
|
|
top: 0,
|
|
end: 0,
|
|
overflow: "hidden"
|
|
}
|
|
});
|
|
__initData = {
|
|
code: "function GIFPickerHeaderTsx1(){const{progress}=this.__closure;return{opacity:1-progress.get()};}"
|
|
};
|
|
__initData2 = {
|
|
code: "function GIFPickerHeaderTsx2(){const{progress,columnWidth}=this.__closure;return{width:progress.get()*columnWidth,opacity:progress.get()};}"
|
|
};
|
|
const r61 = memo(function GIFPickerHeader(props) {
|
|
const { categoryType, columnWidth: columnWidth2, onQueryClear, onQueryChange: onQueryChange2, onFavoritesQueryChange, searchInputRef } = props;
|
|
const styles = useStyles();
|
|
const searchPlaceholder = getSearchPlaceholder();
|
|
return <View style={styles.container}>
|
|
{categoryType === GIFPickerResultTypes.SEARCH ? <SearchField size="md" onChange={onQueryChange2} placeholder={searchPlaceholder} onClear={onQueryClear} ref={searchInputRef} isRound /> : <View style={styles.headerContainer}>
|
|
<PressableOpacity style={styles.header} accessibilityRole="button" onPress={onQueryClear} accessibilityLabel={intl.formatToPlainString(t.UTypEu, {
|
|
destination: intl.string(t.ffgJrs)
|
|
})}>
|
|
<ChevronLargeLeftIcon color={Module712.colors.INTERACTIVE_TEXT_ACTIVE} size="sm" />
|
|
<Text variant="text-sm/semibold" color="text-default" maxFontSizeMultiplier={2}>
|
|
{categoryType === GIFPickerResultTypes.TRENDING_GIFS ? intl.string(t.TsWCdW) : categoryType === GIFPickerResultTypes.FAVORITES ? intl.string(t.k8fFjp) : intl.string(t["5h0QOP"])}
|
|
</Text>
|
|
</PressableOpacity>
|
|
{categoryType === GIFPickerResultTypes.FAVORITES && <FavoritesSearch columnWidth={columnWidth2} onQueryChange={onFavoritesQueryChange} />}
|
|
</View>}
|
|
</View>;
|
|
});
|
|
export default r61;
|