wkc/lcm-potty-chart
Archived
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Added emoji to the date form.

Browse Source
This commit is contained in:
Lucid Kobold
2021-12-05 21:12:10 -06:00
parent 4710ebcf86
commit bd7f3f7da6
2 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/calender/DatePicker.tsx
View File

@@ -26,6 +26,7 @@ import {
} from "formik";
import { format } from "date-fns";
import { CalenderContext } from "../../contexts/CalenderContext";
import FormValidateEmoji from "./FormValidateEmoji";
interface UpdateCalendarProps {
year: number;
@@ -129,7 +130,7 @@ const DatePicker = (): JSX.Element => {
const initRef = useRef();
return (
<Popover placement="bottom" initialFocusRef={initRef}>
<Popover w="100%" h="auto" placement="bottom" initialFocusRef={initRef}>
<PopoverTrigger>
<Button border="none" variant="outline">
<Heading w="100%" h="auto">
@@ -179,6 +180,10 @@ const DatePicker = (): JSX.Element => {
spacing={6}
py={4}
>
<Heading as="h4" size="sm" fontWeight="semibold">
Required fields indicated with{" "}
<FormValidateEmoji type="Required" />
</Heading>
<Field name="date" validate={validateDate}>
{({ field, form }: FieldProps) => (
<FormControl
@@ -196,10 +201,10 @@ const DatePicker = (): JSX.Element => {
<HStack
alignContent="center"
alignItems="center"
pl={6}
pl={4}
w="100%"
h="auto"
spacing={0}
spacing={2}
>
<FormLabel fontWeight="semibold" htmlFor="date">
{"Date:"}
@@ -214,15 +219,24 @@ const DatePicker = (): JSX.Element => {
textAlign="center"
{...(!form.errors.date && form.touched.date
? {
borderColor: "brand.valid",
boxShadow: "0 0 0 1px #00c17c",
_hover: {
borderColor: "brand.valid",
boxShadow: "0 0 0 1px #00c17c",
_hover: {
borderColor: "brand.valid",
boxShadow: "0 0 0 1px #00c17c",
},
}
},
}
: "")}
/>
{!form.touched.date && (
<FormValidateEmoji type="Required" />
)}
{form.errors.name && form.touched.date && (
<FormValidateEmoji type="Error" />
)}
{!form.errors.name && form.touched.date && (
<FormValidateEmoji type="Valid" />
)}
</HStack>
<FormErrorMessage>
{form.errors.date}