mirror of
https://github.com/cupcakearmy/formhero.git
synced 2024-12-22 08:06:24 +00:00
prettier
This commit is contained in:
cupcakearmy
parent
d7a3d73512
commit
544dada3c4
5
.prettierrc
Normal file
5
.prettierrc
Normal file
@ -0,0 +1,5 @@
|
||||
semi: false
|
||||
singleQuote: true
|
||||
trailingComma: es5
|
||||
tabWidth: 2
|
||||
printWidth: 200
|
||||
132
lib/index.ts
132
lib/index.ts
@ -1,21 +1,19 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
|
||||
|
||||
export type useFormExtractor = (from: any) => any
|
||||
|
||||
export type useFormOptions = {
|
||||
extractor?: useFormExtractor,
|
||||
getter?: string,
|
||||
setter?: string,
|
||||
extractor?: useFormExtractor
|
||||
getter?: string
|
||||
setter?: string
|
||||
}
|
||||
|
||||
export type useFormValidatorFunction = ((s: any) => boolean | Promise<boolean>)
|
||||
export type useFormValidatorFunction = (s: any) => boolean | Promise<boolean>
|
||||
export type useFormValidatorMethod = useFormValidatorFunction | RegExp
|
||||
|
||||
export type useFormValidatorObject = {
|
||||
validator: useFormValidatorMethod,
|
||||
message?: string,
|
||||
validator: useFormValidatorMethod
|
||||
message?: string
|
||||
}
|
||||
|
||||
export type useFormValidator = useFormValidatorMethod | useFormValidatorObject
|
||||
@ -26,82 +24,74 @@ export const HTMLInputExtractor: useFormExtractor = (e: React.FormEvent<HTMLInpu
|
||||
export const HTMLCheckboxExtractor: useFormExtractor = (e: React.FormEvent<HTMLInputElement>) => e.currentTarget.checked
|
||||
|
||||
function isFormValidatorObject(validator: useFormValidatorMethod | useFormValidatorObject): validator is useFormValidatorObject {
|
||||
return validator.constructor.name === 'Object'
|
||||
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 [form, setForm] = useState<T>(init)
|
||||
|
||||
const [errors, setErrors] = useState<Partial<E>>({})
|
||||
const [isValid, setIsValid] = useState(true);
|
||||
const [errors, setErrors] = useState<Partial<E>>({})
|
||||
const [isValid, setIsValid] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
setIsValid(!Object.values(errors).reduce((acc, cur) => acc || cur !== undefined, false))
|
||||
}, [errors])
|
||||
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 _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
|
||||
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
|
||||
}
|
||||
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
|
||||
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)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
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 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,
|
||||
})
|
||||
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 }
|
||||
return { form, update, auto, errors, isValid }
|
||||
}
|
||||
@ -1,22 +1,19 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Form Hero</title>
|
||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
|
||||
<style>
|
||||
body {
|
||||
padding: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Form Hero</title>
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
|
||||
<style>
|
||||
body {
|
||||
padding: 1em
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./test.tsx"></script>
|
||||
</body>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./test.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -3,32 +3,33 @@ import ReactDOM from 'react-dom'
|
||||
|
||||
import { useForm } from '../'
|
||||
|
||||
|
||||
const TextError: React.FC<{ error?: string }> = ({ error }) => !error
|
||||
? null
|
||||
: <div className="has-text-danger">{error}</div>
|
||||
const TextError: React.FC<{ error?: string }> = ({ error }) => (!error ? null : <div className="has-text-danger">{error}</div>)
|
||||
|
||||
const Index: React.FC = () => {
|
||||
|
||||
const { auto, form, errors, isValid } = useForm({
|
||||
username: '',
|
||||
password: '',
|
||||
type: 'formhero',
|
||||
awesome: true,
|
||||
}, {
|
||||
username: [
|
||||
/^test/,
|
||||
{
|
||||
validator: async () => { return true },
|
||||
message: 'Digits please',
|
||||
}
|
||||
],
|
||||
password: {
|
||||
validator: /^.{3,}$/,
|
||||
message: 'To short',
|
||||
const { auto, form, errors, isValid } = useForm(
|
||||
{
|
||||
username: '',
|
||||
password: '',
|
||||
type: 'formhero',
|
||||
awesome: true,
|
||||
},
|
||||
awesome: (value) => !!value
|
||||
})
|
||||
{
|
||||
username: [
|
||||
/^test/,
|
||||
{
|
||||
validator: async () => {
|
||||
return true
|
||||
},
|
||||
message: 'Digits please',
|
||||
},
|
||||
],
|
||||
password: {
|
||||
validator: /^.{3,}$/,
|
||||
message: 'To short',
|
||||
},
|
||||
awesome: value => !!value,
|
||||
}
|
||||
)
|
||||
|
||||
const _submit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
@ -41,12 +42,14 @@ const Index: React.FC = () => {
|
||||
<div>Username</div>
|
||||
<input className="input" {...auto('username')} />
|
||||
<TextError error={errors.username} />
|
||||
<br /><br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div>Password</div>
|
||||
<input className="input" {...auto('password')} />
|
||||
<TextError error={errors.password} />
|
||||
<br /><br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div>Which one to choose?</div>
|
||||
<div className="select">
|
||||
@ -57,21 +60,27 @@ const Index: React.FC = () => {
|
||||
<option value="formhero">FormHero</option>
|
||||
</select>
|
||||
</div>
|
||||
<br /><br />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<label className="checkbox">
|
||||
<input type="checkbox" {...auto('awesome', {
|
||||
setter: 'checked',
|
||||
getter: 'onChange',
|
||||
extractor: (e) => e.target.checked
|
||||
})} />
|
||||
<input
|
||||
type="checkbox"
|
||||
{...auto('awesome', {
|
||||
setter: 'checked',
|
||||
getter: 'onChange',
|
||||
extractor: e => e.target.checked,
|
||||
})}
|
||||
/>
|
||||
Is it awesome?
|
||||
</label>
|
||||
<TextError error={errors.awesome} />
|
||||
<br /><br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<button className="button" type="submit">Go 🚀</button>
|
||||
<button className="button" type="submit">
|
||||
Go 🚀
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
@ -79,5 +88,5 @@ const Index: React.FC = () => {
|
||||
|
||||
ReactDOM.render(<Index />, document.getElementById('root'))
|
||||
|
||||
// @ts-ignore
|
||||
// @ts-ignore
|
||||
// if (module.hot) module.hot.accept()
|
||||
Loading…
Reference in New Issue
Block a user