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 119 120 | 7x 90x 90x 90x 90x 90x 90x 10746x 90x 18x 10746x 90x 36x 13824x 90x 90x 48357x 48357x 81x 7x | import { CaretDown } from "@assets/icons";
import { RHFInput } from "@common/Input";
import Selector from "@common/TableFilters/Selector";
import { Text, TruncateText } from "@common/Text";
import { InputAdornment } from "@mui/material";
import { palette } from "@palette";
import { getFullTimeZonesMomentAll } from "@utils/timezones";
import { useMemo, useState } from "react";
import { useFormContext } from "react-hook-form";
type TTimeZoneSelector = {
width?: number;
fullWidth?: boolean;
};
const TimeZoneSelector = ({ width, fullWidth = false }: TTimeZoneSelector) => {
const timezones = useMemo(() => getFullTimeZonesMomentAll(), []);
const { setValue, watch } = useFormContext();
const value = watch("timezone");
const [searchValue, setSearchValue] = useState<string>("");
const [isOpen, setIsOpen] = useState<boolean>(false);
const timeZoneOptions = useMemo(
() =>
timezones.map((item, key) => ({
label: `GMT${item.gmt} ${item.timezone}`,
id: key,
value: item.timezone.toLowerCase(),
})),
[],
);
const filteredOptions = useMemo(
() =>
timeZoneOptions.filter((item) =>
item?.label?.toLowerCase().includes(searchValue.toLowerCase()),
),
[searchValue],
);
const usedValue = useMemo(
() =>
timeZoneOptions.find(
(timezone) => timezone.value.toLowerCase() === value.toLowerCase(),
),
[timeZoneOptions, value],
);
const onChange = (value: any) => {
setValue("timezone", value.value, {
shouldDirty: true,
});
};
return (
<Selector
options={filteredOptions}
value={value}
searchedWord={searchValue}
handleChange={(val) => onChange(val)}
handleSearch={setSearchValue}
width={width}
isOpen={setIsOpen}
multiSelect
closeOnClick
showApplyAction={false}
fullWidth={fullWidth}
renderCustomElement={(option) => {
const {
item: { label },
} = option;
return (
<TruncateText flex={1} height="40px" lineClamp={1} padding="4px 10px">
{label}
</TruncateText>
);
}}
renderCustomParent={({ onClick }) => (
<RHFInput
value={usedValue?.label}
onClick={onClick}
placeholder="Select a timezone"
name="timezone"
label="Timezone"
fullWidth
InputProps={{
readOnly: true,
endAdornment: (
<InputAdornment sx={{ cursor: "pointer" }} position="end">
<CaretDown rotate={isOpen ? 180 : 0} />
</InputAdornment>
),
}}
/>
)}
searchBarProps={{
placeholder: "Search",
customDeleteIcon: <CustomDeleteIcon />,
}}
/>
);
};
export default TimeZoneSelector;
const CustomDeleteIcon = () => {
return (
<Text
sx={{
color: palette.accent[3],
marginRight: "15px",
fontFamily: "Give Whyte",
fontSize: "14px",
fontWeight: 350,
lineHeight: "16.8px",
}}
>
Clear
</Text>
);
};
|