From 751e2c2042cd50523b0e67e0bb9b1acdbd6437cf Mon Sep 17 00:00:00 2001
From: "DESKTOP-5V12CA1\\Regi" <regina.dolhofova@nejcraft.cz>
Date: Mon, 24 Jul 2023 18:19:43 +0200
Subject: [PATCH] input formiker

---
 Parts/Input.js | 102 ++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 83 insertions(+), 19 deletions(-)

diff --git a/Parts/Input.js b/Parts/Input.js
index 3c706f8..3724889 100644
--- a/Parts/Input.js
+++ b/Parts/Input.js
@@ -1,47 +1,111 @@
-import React from "react"
+import React from "react";
 
-import tw, { styled } from "twin.macro"
-import "styled-components/macro"
+import tw, { styled } from "twin.macro";
+import "styled-components/macro";
+import { useField as useFormikField, useFormikContext } from "formik";
+
+export function useField(props){
+  let getField = useFormikField;
+  const context = useFormikContext();
+  if(!context){
+    getField = (props)=>{
+      return [props, null, null];
+    }
+  }
+  return getField(props);
+}
+
+export default function Input({ label, title, className, children, ...props }) {
+  /*name, id*/
+
+  const [field, meta, helpers] = useField(props);
 
-export default function Input({ label, title, className, name, id, children, ...props }) {
   return (
     <div css={[title && tw`my-1`]} className={className}>
       {title && (
-        <label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
+        <label
+          {...label}
+          css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]}
+        >
+          {/*htmlFor={id ?? name ?? title}*/}
           {title}
         </label>
       )}
-      <input {...props} name={name || title} id={id || name || title} tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 " />
+      {/*name={name || title} id={id || name || title}*/}
+      <input
+        {...field}
+        {...props}
+        tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "
+      />
       {children}
+      {meta?.touched && meta.error ? (
+        <div tw="text-[#c23c3c]">{meta.error}</div>
+      ) : null}
     </div>
-  )
+  );
 }
-export function TextArea({ label, title, className, name, id, children, ...props }) {
+export function TextArea({
+  label,
+  title,
+  className,
+  children,
+  ...props
+}) {
+
+  const [field, meta, helpers] = useField(props);
+
   return (
     <div css={[title && tw`my-1`]} className={className}>
       {title && (
-        <label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
+        <label
+          {...label}
+          css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]}
+          
+        >
           {title}
         </label>
       )}
-      <textarea {...props} name={name ?? title} id={id ?? name ?? title} tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 " />
+      <textarea
+        {...props}
+        {...field}
+        tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "
+      />
       {children}
+      {meta?.touched && meta.error ? (
+        <div tw="text-[#c23c3c]">{meta.error}</div>
+      ) : null}
     </div>
-  )
+  );
 }
 
-export function CheckBox({ label, title, className, name, id, children, ...props }) {
+export function CheckBox({
+  label,
+  title,
+  className,
+  name,
+  id,
+  children,
+  ...props
+}) {
   return (
     <div tw="my-1 flex text-secondary" className={className}>
-      <input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer " />
+      <input
+        {...props}
+        type="checkbox"
+        name={name ?? title}
+        id={id ?? name ?? title}
+        tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer "
+      />
       {title != null ? (
-        <label {...label} htmlFor={id ?? name ?? title} css={[tw`block font-bold px-2`, label?.css]}>
+        <label
+          {...label}
+          htmlFor={id ?? name ?? title}
+          css={[tw`block font-bold px-2`, label?.css]}
+        >
           {title}
         </label>
-      ) : null
-      }
+      ) : null}
       {children}
-    </div >
-  )
+    </div>
+  );
 }
-