All files / components/Form/FormDatepicker FormDatepicker.tsx

100% Statements 3/3
87.5% Branches 7/8
100% Functions 2/2
100% Lines 3/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60                                          29x               224x     396x                                                      
import { Field, FieldProps } from 'formik'
import { Label } from '../Label/Label'
 
export type FormDatepickerProps = {
	/** Gives the datepicker a unique name. */
	name: string
	/** Inform users what the corresponding input fields mean. */
	labelText?: string
	/** When set Required * will be seen. */
	inputRequired?: boolean
	/** When true add margin to datepicker like other inputs. */
	hasMargin?: boolean
	/** Autocomplete attribute for the input field. */
	autoComplete?: string
	/** Custom datacy for testing. */
	datacy?: string
}
 
/**
 * Datepicker, can only be used with Formik.
 */
export const FormDatepicker: React.FC<FormDatepickerProps> = ({
	name,
	labelText,
	inputRequired,
	hasMargin = false,
	datacy,
	autoComplete = 'on',
}) => {
	return (
		<Field name={name}>
			{(fieldProps: FieldProps<string | number>) => (
				<div datacy={`${name}-datepicker-div`} className={`relative ${hasMargin ? 'mb-2 md:mb-4' : ''}`}>
					{/* Label */}
					{labelText && (
						<Label
							datacy={`${name}-datepicker-labelText`}
							name={name}
							labelText={labelText}
							isLegend
							inputRequired={inputRequired}
						/>
					)}
 
					{/* Input */}
					<div className="relative my-1 flex w-full items-center justify-between rounded-lg border border-gray-100 bg-gray-100 px-4 py-2 text-gray-800 focus-within:outline-1 focus-within:ring-2 focus-within:ring-black focus-within:ring-offset-2 sm:mb-0">
						<input
							datacy={datacy ?? `datepicker-${name}-input`}
							type="date"
							autoComplete={autoComplete}
							{...fieldProps.field}
							className="h-6 w-full bg-transparent !outline-none"
						/>
					</div>
				</div>
			)}
		</Field>
	)
}