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 | 2x 2x 18x 18x 18x 18x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 18x 18x 2x 2x 18x 18x 2x 18x 18x | import { validIpAddress } from "@components/DeveloperApi/utils";
import { Stack } from "@mui/material";
import { ArrowElbowDownLeftIcon } from "@phosphor-icons/react";
import GiveInputWithTags from "@shared/InputTags/GiveInputWithTags";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
import { URL_REGEX } from "@validation/regex";
import { Controller, useFormContext } from "react-hook-form";
const MAX_ORIGINS = 30;
const AllowedOriginsInput = () => {
const { setValue, watch, setError, control, trigger } = useFormContext();
const origins = watch("allowedOrigins");
const isMaxOriginsReached = origins.length >= MAX_ORIGINS;
const handleAddOrigin = (
e:
| React.KeyboardEvent<HTMLDivElement>
| React.KeyboardEvent<HTMLInputElement>,
) => {
Iif ((e.key === "Enter" || e.code === "Space") && !watch("origin")) return;
Iif (isMaxOriginsReached) return;
Eif ([" ", "Enter"].includes(e.key)) {
e.preventDefault();
const value = watch("origin");
const isValidIpAdress = validIpAddress(value);
Iif (origins?.includes(value)) {
setError("allowedOrigins", {
message: "Already existing origin, Please provide a different one",
});
return;
}
Eif (!(URL_REGEX.test(value) || isValidIpAdress)) {
setError("allowedOrigins", {
message: "Please provide a valid Website or IP Address",
});
return;
}
const updatedOrigins = [...origins, value];
setValue("allowedOrigins", updatedOrigins);
setValue("origin", "", { shouldValidate: true });
trigger("allowedOrigins");
}
};
const handleRemoveOrigin = (index: number) => {
const updatedOrigins = origins?.filter(
(o: string, ind: number) => index !== ind,
);
setValue("allowedOrigins", updatedOrigins);
};
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
Iif (isMaxOriginsReached) return;
setValue("origin", e.target.value);
};
return (
<Stack spacing={1}>
<Controller
name="allowedOrigins"
control={control}
render={({ field, fieldState: { error } }) => {
return (
<GiveInputWithTags
value={field.value}
error={error}
chipProps={{
variant: "light",
size: "large",
color: "blue",
sx: { padding: "4px 8px" },
}}
inputProps={{
label: "Allowed Origins (Optional)",
placeholder: isMaxOriginsReached ? "" : "Add origin",
disabled: isMaxOriginsReached,
}}
onKeydown={handleAddOrigin}
handleInputChange={handleInputChange}
handleDelete={handleRemoveOrigin}
inputValue={watch("origin")}
/>
);
}}
/>
<HelperText isMaxOriginsReached={isMaxOriginsReached} />
</Stack>
);
};
export const HelperText = ({
isMaxOriginsReached,
}: {
isMaxOriginsReached: boolean;
}) => {
const { palette } = useAppTheme();
return (
<Stack direction="row" spacing={0.5}>
<GiveText variant="bodyXS" color="secondary">
{isMaxOriginsReached
? `Maximum limit of ${MAX_ORIGINS} origins reached`
: "Press Enter to add"}
</GiveText>
{!isMaxOriginsReached && (
<ArrowElbowDownLeftIcon color={palette.icon?.["icon-primary"]} />
)}
</Stack>
);
};
export default AllowedOriginsInput;
|