Update fields to have a custom component
This commit is contained in:
parent
e8755ac598
commit
baf35be8e8
8 changed files with 87 additions and 10 deletions
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import { Field as FormikField, FieldProps } from 'formik';
|
||||
import classNames from 'classnames';
|
||||
import Input from '@/components/elements/Input';
|
||||
|
||||
interface OwnProps {
|
||||
name: string;
|
||||
|
@ -20,13 +21,12 @@ const Field = ({ id, name, light = false, label, description, validate, classNam
|
|||
{label &&
|
||||
<label htmlFor={id} className={light ? undefined : 'input-dark-label'}>{label}</label>
|
||||
}
|
||||
<input
|
||||
<Input
|
||||
id={id}
|
||||
{...field}
|
||||
{...props}
|
||||
className={classNames((className || (light ? 'input' : 'input-dark')), {
|
||||
error: touched[field.name] && errors[field.name],
|
||||
})}
|
||||
isLight={light}
|
||||
hasError={!!(touched[field.name] && errors[field.name])}
|
||||
/>
|
||||
{touched[field.name] && errors[field.name] ?
|
||||
<p className={'input-help error'}>
|
||||
|
|
46
resources/scripts/components/elements/Input.tsx
Normal file
46
resources/scripts/components/elements/Input.tsx
Normal file
|
@ -0,0 +1,46 @@
|
|||
import React from 'react';
|
||||
import styled, { css } from 'styled-components/macro';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
export interface Props {
|
||||
isLight?: boolean;
|
||||
hasError?: boolean;
|
||||
}
|
||||
|
||||
const light = css<Props>`
|
||||
${tw`bg-white border-neutral-200 text-neutral-800`};
|
||||
&:focus { ${tw`border-primary-400`} }
|
||||
|
||||
&:disabled {
|
||||
${tw`bg-neutral-100 border-neutral-200`};
|
||||
}
|
||||
`;
|
||||
|
||||
const Input = styled.input<Props>`
|
||||
// Reset to normal styling.
|
||||
${tw`appearance-none w-full min-w-0`};
|
||||
${tw`p-3 border rounded text-sm transition-all duration-150`};
|
||||
${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
|
||||
|
||||
${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
|
||||
& + .input-help {
|
||||
${tw`mt-1 text-xs`};
|
||||
${props => props.hasError ? tw`text-red-400` : tw`text-neutral-400`};
|
||||
}
|
||||
|
||||
&:required, &:invalid {
|
||||
${tw`shadow-none`};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
${tw`shadow-md border-neutral-400`};
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
${tw`opacity-75`};
|
||||
}
|
||||
|
||||
${props => props.isLight && light};
|
||||
`;
|
||||
|
||||
export default Input;
|
Reference in a new issue