Nejcraft/nej-react-components
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

input formiker

Browse Source
This commit is contained in:
DESKTOP-5V12CA1\Regi 2023-07-24 18:19:43 +02:00
parent 4d4767beb3
commit 751e2c2042
1 changed files with 83 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
Parts/Input.js
View File

@ -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>
)
);
}