126 lines
3.4 KiB
JavaScript
126 lines
3.4 KiB
JavaScript
import React from "react";
|
|
|
|
import tw, { styled } from "twin.macro";
|
|
//import { useField as useFormikField, useFormikContext } from "formik";
|
|
const useFormikField = null;
|
|
const useFormikContext = ()=>{};
|
|
|
|
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, children, className, ...props }) {
|
|
/*name, id*/
|
|
props.id = props.id ?? props.name ?? title;
|
|
|
|
const [field, meta, helpers] = useField(props);
|
|
|
|
return (
|
|
<div css={[title && tw`my-1`, tw`relative`]} className={className}>
|
|
{title && (
|
|
<label
|
|
{...label}
|
|
css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]}
|
|
>
|
|
{/*htmlFor={id ?? name ?? title}*/}
|
|
{title}
|
|
</label>
|
|
)}
|
|
{/*name={name || title} id={id || name || title}*/}
|
|
<input
|
|
{...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 TextArea({
|
|
label,
|
|
title,
|
|
children,
|
|
...props
|
|
}) {
|
|
|
|
const [field, meta, helpers] = useField(props);
|
|
|
|
return (
|
|
<div css={[title && tw`my-1`]} >
|
|
{title && (
|
|
<label
|
|
{...label}
|
|
css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]}
|
|
|
|
>
|
|
{title}
|
|
</label>
|
|
)}
|
|
<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>
|
|
);
|
|
}
|
|
/**
|
|
* Renders a checkbox input with optional label and error message.
|
|
*
|
|
* @param {Object} props - The properties for the CheckBox component.
|
|
* @param {string} props.label - The label for the checkbox.
|
|
* @param {string} props.title - The title for the checkbox.
|
|
* @param {string} props.className - The class name for the container div.
|
|
* @param {ReactNode} props.children - The children components.
|
|
* @param {Object} props... - Additional properties for the checkbox input.
|
|
* @return {ReactElement} The rendered CheckBox component.
|
|
*/
|
|
export function CheckBox({
|
|
label,
|
|
title,
|
|
|
|
children,
|
|
...props
|
|
}) {
|
|
|
|
const [field, meta, helpers] = useField(props);
|
|
|
|
return (
|
|
<div tw="my-1 flex text-secondary">
|
|
<input
|
|
checked={field.value}
|
|
{...props}
|
|
{...field}
|
|
type="checkbox"
|
|
tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer "
|
|
/>
|
|
{title != null ? (
|
|
<label
|
|
{...label}
|
|
css={[tw`block font-bold px-2`, label?.css]}
|
|
>
|
|
{title}
|
|
</label>
|
|
) : null}
|
|
{children}
|
|
{meta?.touched && meta.error ? (
|
|
<div tw="text-[#c23c3c]">{meta.error}</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|