formhero/lib/index.ts

import React, { useState, useEffect } from 'react'



export type useFormExtractor = (from: any) => any

export type useFormOptions = {
	extractor?: useFormExtractor,
	getter?: string,
	setter?: string,
}

export type useFormValidatorFunction = ((s: any) => boolean | Promise<boolean>)
export type useFormValidatorMethod = useFormValidatorFunction | RegExp

export type useFormValidatorObject = {
	validator: useFormValidatorMethod,
	message?: string,
}

export type useFormValidator = useFormValidatorMethod | useFormValidatorObject

export type useFormValidatorParameter = useFormValidator | useFormValidator[]

export const HTMLInputExtractor: useFormExtractor = (e: React.FormEvent<HTMLInputElement>) => e.currentTarget.value
export const HTMLCheckboxExtractor: useFormExtractor = (e: React.FormEvent<HTMLInputElement>) => e.currentTarget.checked

function isFormValidatorObject(validator: useFormValidatorMethod | useFormValidatorObject): validator is useFormValidatorObject {
	return validator.constructor.name === 'Object'
}

const defaultErrorMessage = (key: any) => `Error in ${key}`

export const useForm = <T, U extends { [key in keyof T]: useFormValidatorParameter }, E extends { [key in keyof U]?: string }>(init: T, validators: Partial<U> = {}, options: useFormOptions = {}) => {
	const [form, setForm] = useState<T>(init)

	const [errors, setErrors] = useState<Partial<E>>({})
	const [isValid, setIsValid] = useState(true);

	useEffect(() => {
		setIsValid(!Object.values(errors).reduce((acc, cur) => acc || cur !== undefined, false))
	}, [errors])

	const _set = (key: keyof T, value: any) => {
		setForm({
			...form,
			[key]: value,
		})
	}

	const _validateAll = async (value: any, object: useFormValidator): Promise<boolean> => {
		const validator = isFormValidatorObject(object) ? object.validator : object

		if (validator.constructor.name === 'Function')
			return (validator as useFormValidatorFunction)(value)
		else if (validator.constructor.name === 'AsyncFunction')
			return await (validator as useFormValidatorFunction)(value)
		else if (validator.constructor.name === 'RegExp')
			return (validator as RegExp).test(value)
		else return false
	}

	const _validate = (key: keyof T, value: any) => {
		const validator: useFormValidatorParameter | undefined = validators[key]
		if (!validator) return

		if (Array.isArray(validator)) {
			Promise.all(validator.map(v => _validateAll(value, v)))
				.then(result => {
					const index = result.indexOf(false)
					setErrors({
						...errors,
						[key]: index === -1
							? undefined
							: isFormValidatorObject(validator[index]) && (validator[index] as useFormValidatorObject).message
								? (validator[index] as useFormValidatorObject).message
								: defaultErrorMessage(key)
					})
				})
		} else {
			_validateAll(value, validator)
				.then(valid => {
					setErrors({
						...errors,
						[key]: valid
							? undefined
							: isFormValidatorObject(validator) && validator.message
								? validator.message
								: defaultErrorMessage(key)
					})
				})
		}
	}

	const update = (key: keyof T, extractor = options.extractor) => (value: any) => {
		const extracted = extractor ? extractor(value) : HTMLInputExtractor(value)
		_set(key, extracted)
		_validate(key, extracted)
	}

	const auto = (key: keyof T, opts: useFormOptions = {}) => ({
		[opts.getter || options.getter || 'onChange']: update(key, opts.extractor),
		[opts.setter || options.setter || 'value']: form[key] as any,
	})

	return { form, update, auto, errors, isValid }
}