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 | 2x | import * as React from "react";
// @mui
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
// form
import { useFormContext, Controller } from "react-hook-form";
// components
import { RHFInput, Input } from "@common/Input";
import { RHFSelect } from "@common/Select";
import { DatePicker } from "@common/DatePickers";
export const ConditionallyRender: React.FC<{
value: string;
}> = ({ value }) => {
const { control } = useFormContext();
if (value === "is on or before" || value === "is on or after") {
return (
<Stack paddingTop="8px" width="100%">
<Controller
name="date"
control={control}
render={({ field: { ref, ...rest }, fieldState: { error } }) => (
<DatePicker
{...rest}
useGMT={false}
renderInput={(params) => (
<Input
inputRef={ref}
{...params}
fullWidth
error={!!error}
helperText={error?.message}
/>
)}
/>
)}
/>
</Stack>
);
} else if (value === "is between") {
return (
<Stack mt={1} alignItems="center">
<Controller
name="startDate"
control={control}
render={({ field: { ref, ...rest }, fieldState: { error } }) => (
<DatePicker
{...rest}
useGMT={false}
inputFormat="MM/dd/yyyy"
renderInput={(params) => (
<Input
inputRef={ref}
{...params}
fullWidth
error={!!error}
helperText={error?.message}
/>
)}
/>
)}
/>
<Box
height={2}
width={130}
border="none"
component="hr"
bgcolor={`#E1E1DE`}
/>
<Controller
name="endDate"
control={control}
render={({ field: { ref, ...rest }, fieldState: { error } }) => (
<DatePicker
{...rest}
useGMT={false}
inputFormat="MM/dd/yyyy"
renderInput={(params) => (
<Input
inputRef={ref}
{...params}
fullWidth
error={!!error}
helperText={error?.message}
/>
)}
/>
)}
/>
</Stack>
);
} else {
return (
<Stack mt={1} gap={1.5} direction="row" alignItems="stretch">
<RHFInput name="count" placeholder="7" type="number" fullWidth />
<RHFSelect
fullWidth
name="dayMonthYear"
options={[
{ value: "days", label: "days" },
{ value: "months", label: "months" },
]}
/>
</Stack>
);
}
};
|