112 lines
2.7 KiB
JavaScript
112 lines
2.7 KiB
JavaScript
import React from "react";
|
|
|
|
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);
|
|
|
|
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}*/}
|
|
{title}
|
|
</label>
|
|
)}
|
|
{/*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,
|
|
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]}
|
|
|
|
>
|
|
{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>
|
|
);
|
|
}
|
|
|
|
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 "
|
|
/>
|
|
{title != null ? (
|
|
<label
|
|
{...label}
|
|
htmlFor={id ?? name ?? title}
|
|
css={[tw`block font-bold px-2`, label?.css]}
|
|
>
|
|
{title}
|
|
</label>
|
|
) : null}
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|