Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 3x 4x 4x 4x 4x 1x 4x 1x 1x 1x 4x 3x 31x 4x 4x | import { Stack } from "@mui/material";
import { GiveInput } from "@shared/GiveInputs/GiveInput";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { useCallback, useState } from "react";
import { CaretDownIcon, CaretUpIcon, XIcon } from "@phosphor-icons/react";
import { styled } from "@theme/v2/Provider";
import GiveText from "@shared/Text/GiveText";
import { debounce } from "lodash";
import { useConversationContext } from "../ConversationProvider";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
export const ConversationSearch = () => {
const { isMobileView } = useCustomThemeV2();
const [value, setValue] = useState("");
const {
setSearchState,
matchingMessagesCount,
currentMatchIndex,
navigateToNextMatch,
navigateToPreviousMatch,
} = useConversationContext();
const debouncedSetSearch = useCallback(
debounce((value: string) => {
setSearchState((prev) => ({
...prev,
searchValue: value,
}));
}, 300),
[setSearchState],
);
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const newValue = event.target.value;
setValue(newValue);
debouncedSetSearch(newValue);
};
return (
<StyledInput
value={value}
onChange={onChange}
placeholder="Search"
autoFocus
name="search"
isMobileView={isMobileView}
rightContent={
value ? (
<Stack direction="row" gap="12px" alignItems="center">
<GiveText variant="bodyS">
{matchingMessagesCount ? currentMatchIndex + 1 : 0}/
{matchingMessagesCount}
</GiveText>
<Stack direction="row" gap="4px">
<GiveIconButton
Icon={CaretDownIcon}
size="extraSmall"
variant="ghost"
onClick={navigateToNextMatch}
disabled={
matchingMessagesCount === 0 ||
currentMatchIndex + 1 >= (matchingMessagesCount || 0)
}
data-testid="give-conversation-search-next-button"
/>
<GiveIconButton
Icon={CaretUpIcon}
size="extraSmall"
variant="ghost"
onClick={navigateToPreviousMatch}
disabled={
matchingMessagesCount === 0 || currentMatchIndex === 0
}
data-testid="give-conversation-search-previous-button"
/>
</Stack>
<GiveIconButton
Icon={XIcon}
size="extraSmall"
onClick={() => {
setSearchState({
searchValue: "",
isOpened: false,
});
}}
sx={{
borderRadius: "38px",
}}
/>
</Stack>
) : undefined
}
/>
);
};
const StyledInput = styled(GiveInput, {
shouldForwardProp: (prop) => prop !== "isMobileView",
})<{ isMobileView?: boolean }>(({ theme, isMobileView }) => {
const borderStyles = {
border: "none",
borderRadius: "0px",
borderBottom: `1px solid ${theme.palette.border?.primary}`,
backgroundImage: "none",
};
return {
"& .MuiInputBase-root": {
maxHeight: "52px !important",
height: "52px",
padding: isMobileView ? "0px 20px !important" : "0px 12px !important",
...borderStyles,
"&.Mui-focused, &:hover": borderStyles,
},
};
});
|