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 | 156x 381x 381x 381x 381x 381x 394x 3x 3x | import { CaretDown } from "@assets/icons";
import { WithFetching } from "@containers/WithFetching";
import * as React from "react";
import { Controller, useFormContext } from "react-hook-form";
import Select, { SelectProps } from "./Select";
import { Text } from "@common/Text";
import { Stack } from "@mui/material";
const RHFSelect: React.FC<
SelectProps & {
name: string;
isFetchindData?: boolean;
isError?: boolean;
errorsMessage?: string;
focusViewColor?: string;
handleAfterSelect?: () => void;
isRebranded?: boolean;
}
> = ({
name,
helperText,
withSearchBar,
isFetchindData = false,
isError = false,
errorsMessage,
handleAfterSelect,
...props
}) => {
const { control } = useFormContext();
const [isOpen, setIsOpen] = React.useState<boolean>(false);
const { label, ...restOfProps } = props;
const newProps = props.isRebranded ? restOfProps : props;
return (
<Controller
name={name}
control={control}
render={({ field: { ref, ...rest }, fieldState: { error } }) => {
return (
<Stack gap={1}>
{props.isRebranded && <Text>{props.label}</Text>}
<WithFetching
errorsMessage={errorsMessage}
isFetching={isFetchindData}
isError={isError}
>
<Select
shouldDisplayIcon
inputRef={ref}
{...rest}
onChange={(e) => {
rest?.onChange(e);
handleAfterSelect?.();
}}
error={!!error}
helperText={helperText || error?.message}
withSearchBar={withSearchBar}
isOpen={setIsOpen}
DropIcon={<CaretDown rotate={isOpen ? 180 : 0} />}
{...newProps}
/>
</WithFetching>
</Stack>
);
}}
/>
);
};
export default RHFSelect;
|