278 lines
9.5 KiB
TypeScript
278 lines
9.5 KiB
TypeScript
// Metro module 9905 (f9906).
|
|
import { useRef, useState, useEffect, useCallback, useMemo } from "react";
|
|
import { Keyboard, View } from "react-native";
|
|
import { NOOP } from "../../../Constants";
|
|
import { UserRowModes } from "../../main_tabs_v2/native/shared_components/user_list/UserRowConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useShareSearchResults } from "../useShareSearchResults";
|
|
import { runAfterInteractions } from "../../../utils/native/RunAfterInteractionsUtils";
|
|
import { destinationKey } from "../formatResults";
|
|
import { AutocompleterResultTypes } from "../../autocompleter/index";
|
|
import { getRelationshipType } from "../../main_tabs_v2/UserSearchUtils";
|
|
import { assertNever } from "../../../utils/GlobalUtils";
|
|
import useScaledRowHeight from "../../main_tabs_v2/native/shared_components/user_list/useScaledRowHeight";
|
|
import { useScaledTextLineHeight } from "../../screen/native/useScaledTextLineHeight.android";
|
|
import roundToNearestPixel from "../../voice_panel/native/utils/roundToNearestPixel";
|
|
import { UsersFastList } from "../../main_tabs_v2/native/shared_components/user_list/UsersFastList";
|
|
import NoResults from "../../main_tabs_v2/native/shared_components/user_list/NoResults";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import ThemedGradient from "../../client_themes/native/ThemedGradient";
|
|
import { SearchField } from "../../../design/components/TextField/native/SearchField.native";
|
|
const useStyles = createStyles({
|
|
searchBarContainer: {
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
paddingBottom: Module712.space.PX_8,
|
|
backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
|
|
},
|
|
noResults: {
|
|
flex: 1,
|
|
backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
|
|
}
|
|
});
|
|
export default function SearchableDestinationList(props) {
|
|
let r163, r164;
|
|
let callback, memo, memo2, callback2, callback3, callback4, callback5, ref4, c17548_23, scaledTextLineHeight;
|
|
let initialSelectedDestinations = props.initialSelectedDestinations;
|
|
const { disabledDestinations, originDestination, channelFilter, getRowIsUnavailable, onSelectedDestinationChange, onSearchTextChange, rowMode = UserRowModes.NONE } = props;
|
|
const NONE = rowMode;
|
|
const { insetStart = Module712.space.PX_8, insetEnd = Module712.space.PX_12 } = props;
|
|
let autoFocusSearch = props.autoFocusSearch;
|
|
if (autoFocusSearch === void 0) {
|
|
autoFocusSearch = false;
|
|
}
|
|
const { hideSearchOnDefaultNoResults = false, defaultNoResultsFound, disableGradient, disableStickySections, disableSelection, disableLongPress } = props;
|
|
callback = void 0;
|
|
memo = void 0;
|
|
memo2 = void 0;
|
|
callback2 = void 0;
|
|
callback3 = void 0;
|
|
callback4 = void 0;
|
|
callback5 = void 0;
|
|
ref4 = void 0;
|
|
c17548_23 = void 0;
|
|
scaledTextLineHeight = void 0;
|
|
const styles = useStyles();
|
|
const ref = useRef(null);
|
|
if (initialSelectedDestinations == null) {
|
|
initialSelectedDestinations = [];
|
|
}
|
|
const [state, setState] = useState(initialSelectedDestinations);
|
|
const shareSearchResults = useShareSearchResults({
|
|
selectedDestinations: state,
|
|
originDestination,
|
|
channelFilter,
|
|
includeMissingDMs: true
|
|
});
|
|
const { results, updateSearchText } = shareSearchResults;
|
|
const ref2 = useRef("");
|
|
const [state2, setState2] = useState(false);
|
|
const ref3 = useRef(null);
|
|
useEffect(() => () => {
|
|
const current = ref3.current;
|
|
if (current != null) {
|
|
current.cancel();
|
|
}
|
|
}, []);
|
|
callback = useCallback(function(a0, r4 = false) {
|
|
if (a0 !== ref2.current) {
|
|
ref2.current = a0;
|
|
if (r4) {
|
|
const current = ref.current;
|
|
if (current != null) {
|
|
current.setText(a0);
|
|
}
|
|
}
|
|
updateSearchText(a0);
|
|
if (onSearchTextChange != null) {
|
|
onSearchTextChange(a0);
|
|
}
|
|
setState2(a0.trim().length > 0);
|
|
ref3.current = runAfterInteractions(() => {
|
|
const current = ref4.current;
|
|
if (current != null) {
|
|
current.scrollToTop(false);
|
|
}
|
|
});
|
|
}
|
|
}, [onSearchTextChange, updateSearchText]);
|
|
useEffect(() => {
|
|
onSelectedDestinationChange(state);
|
|
setTimeout(() => {
|
|
Keyboard.dismiss();
|
|
}, 0);
|
|
setTimeout(() => {
|
|
callback("", true);
|
|
}, 50);
|
|
}, [state, onSelectedDestinationChange, callback]);
|
|
const memo3 = useMemo(() => [results.length], [results.length]);
|
|
const callback6 = useCallback(() => ({
|
|
type: "section",
|
|
props: {
|
|
hideTitle: true
|
|
}
|
|
}), []);
|
|
memo = useMemo(() => {
|
|
let r8 = disabledDestinations == null ? void 0 : disabledDestinations.map(destinationKey);
|
|
if (r8 == null) {
|
|
r8 = [];
|
|
}
|
|
return r8;
|
|
}, [disabledDestinations]);
|
|
memo2 = useMemo(() => {
|
|
let r8 = state == null ? void 0 : state.map(destinationKey);
|
|
if (r8 == null) {
|
|
r8 = [];
|
|
}
|
|
return r8;
|
|
}, [state]);
|
|
callback2 = useCallback((c26560_0) => {
|
|
setState((prevState) => {
|
|
let r9;
|
|
const r5 = prevState.findIndex((item) => item.id === c26560_0.id);
|
|
if (r5 === -1) {
|
|
if (disableSelection) {
|
|
return prevState;
|
|
}
|
|
r9 = [c26560_0, ...prevState];
|
|
} else {
|
|
r9 = [...prevState];
|
|
r9.splice(r5, 1);
|
|
}
|
|
return r9;
|
|
});
|
|
}, [disableSelection]);
|
|
callback3 = useCallback((a0) => callback2({
|
|
type: "user",
|
|
id: a0.id
|
|
}), [callback2]);
|
|
callback4 = useCallback((a0) => callback2({
|
|
type: "channel",
|
|
id: a0.id
|
|
}), [callback2]);
|
|
callback5 = useCallback((a0, a1) => {
|
|
const r7 = results[a1];
|
|
const { type, record } = r7;
|
|
const r0 = results.length - 1;
|
|
if (type !== AutocompleterResultTypes.HEADER) {
|
|
const r16 = type === AutocompleterResultTypes.USER ? destinationKey({
|
|
type: "user",
|
|
id: record.id
|
|
}) : destinationKey({
|
|
type: "channel",
|
|
id: record.id
|
|
});
|
|
const r37 = getRowIsUnavailable == null ? void 0 : getRowIsUnavailable(record);
|
|
const selected = memo2.includes(r16);
|
|
const r43 = memo.includes(r16);
|
|
let disabled = disableSelection;
|
|
if (disableSelection) {
|
|
disabled = !selected;
|
|
}
|
|
if (!disabled) {
|
|
disabled = r43;
|
|
}
|
|
if (!disabled) {
|
|
disabled = r37 != null;
|
|
}
|
|
const mode = r37 != null ? UserRowModes.NONE : NONE;
|
|
const subLabel = r37 != null ? r37.label : void 0;
|
|
const r50 = r37 != null;
|
|
let subLabelLineClamp = void 0;
|
|
if (r50) {
|
|
let lineClamp = r37.lineClamp;
|
|
if (lineClamp == null) {
|
|
lineClamp = 1;
|
|
}
|
|
subLabelLineClamp = lineClamp;
|
|
}
|
|
const r45 = {
|
|
disabled,
|
|
selected,
|
|
mode,
|
|
subLabel,
|
|
subLabelLineClamp,
|
|
start: a1 === 0,
|
|
end: a1 === r0
|
|
};
|
|
if (AutocompleterResultTypes.USER === type) {
|
|
return {
|
|
type: "user",
|
|
props: {
|
|
...r45,
|
|
user: record,
|
|
type: getRelationshipType(record.id),
|
|
onPress: callback3,
|
|
...disableLongPress ? {
|
|
onLongPress: NOOP
|
|
} : void 0
|
|
}
|
|
};
|
|
}
|
|
if (AutocompleterResultTypes.GROUP_DM === type) {
|
|
return {
|
|
type: "gdm",
|
|
props: {
|
|
...r45,
|
|
channel: record,
|
|
onPress: callback4,
|
|
...disableLongPress ? {
|
|
onLongPress: NOOP
|
|
} : void 0
|
|
}
|
|
};
|
|
}
|
|
if (AutocompleterResultTypes.TEXT_CHANNEL !== type && AutocompleterResultTypes.VOICE_CHANNEL !== type) {
|
|
return assertNever(type);
|
|
}
|
|
return {
|
|
type: "channel",
|
|
props: {
|
|
...r45,
|
|
channel: record,
|
|
onPress: callback4,
|
|
...disableLongPress ? {
|
|
onLongPress: NOOP
|
|
} : void 0
|
|
}
|
|
};
|
|
}
|
|
}, [results, getRowIsUnavailable, memo2, memo, disableSelection, disableLongPress, NONE, callback3, callback4]);
|
|
ref4 = useRef(null);
|
|
const scaledRowHeight = useScaledRowHeight();
|
|
c17548_23 = scaledRowHeight;
|
|
scaledTextLineHeight = useScaledTextLineHeight("text-xs/medium");
|
|
const callback7 = useCallback((a0, a1) => {
|
|
const r9 = callback5(a0, a1);
|
|
const r8 = r9?.type !== "user" && r9?.type !== "gdm" ? r9?.type === "channel" ? r9.props.subLabelLineClamp : void 0 : r9.props.subLabelLineClamp;
|
|
return r8 != null && r8 > 1 ? roundToNearestPixel(c17548_23 + (r8 - 1) * scaledTextLineHeight) : c17548_23;
|
|
}, [callback5, scaledRowHeight, scaledTextLineHeight]);
|
|
const r128 = memo3.some((item) => item > 0);
|
|
const r148 = r128 ? <UsersFastList ref={ref4} sections={memo3} getItemProps={callback5} getSectionProps={callback6} getItemSize={getRowIsUnavailable != null ? callback7 : void 0} insetStart={insetStart} insetEnd={insetEnd} disableStickySections={disableStickySections} /> : <View {...!state2 && defaultNoResultsFound != null ? {
|
|
style: [styles.noResults],
|
|
children: defaultNoResultsFound
|
|
} : {
|
|
style: styles.noResults,
|
|
children: <NoResults title={intl.string(t.V6nAfF)} />
|
|
}} />;
|
|
const r159 = disableGradient ? !disableGradient : <ThemedGradient absolute />;
|
|
L29: {
|
|
r163 = [r159, , ,];
|
|
if (hideSearchOnDefaultNoResults && !r128) {
|
|
r164 = null;
|
|
if (!state2) {
|
|
break L29;
|
|
}
|
|
}
|
|
if (autoFocusSearch) {
|
|
autoFocusSearch = r128;
|
|
}
|
|
r164 = <View style={styles.searchBarContainer}>
|
|
<SearchField ref={ref} size="md" onChange={callback} autoFocus={autoFocusSearch} accessibilityLabel={intl.string(t.CaEER6)} />
|
|
</View>;
|
|
}
|
|
r163[1] = r164;
|
|
r163[2] = r148;
|
|
return <>{r163}</>;
|
|
};
|