Import React, { createContext, useState } from 'react' import { validations

} from 'utils/validations'

export const FormCtx = createContext({
fields: {},
errors: {},
editFields: () => {
},
})
const Form = ({ children, ...props }) => {
const [fields, setFields] = useState({})
const [errors, setErrors] = useState({
...props.customError,
})
const [isSubmit, setSubmit] = useState(false)
const removeField = (id) => {
delete fields[id]
delete errors[id]
}
const addField = ({ field, value }) => {
if (field && field.id) {
setFields(prevState => ({
...prevState,
[field.id]: { value, ...field },
}))
return
}
throw new Error(`please add field "id" for ${field}`)
}
const editFields = (event, { id, value }) => {
if (event) {
event.persist()
}
const field = fields[id]
let val = event ? event.currentTarget.value : value
setFields((prevState) => {
return {
...prevState,
[field.id]: {
...field,
value: val,
},
}
})
return val
}
const validateField = (id, additionValidation) => {
let error = ''
let { value: fieldValue, validate, displayName, customrules = {} } = fields[id]
if (additionValidation) {
validate += '|' + additionValidation
}
const rules = validate ? validate.split('|') : ''
if (rules.length) {
for (const rule in rules) {
if (rules.hasOwnProperty(rule)) {
let ruleName = rules[rule]
let length = ''
if (rules[rule].includes('minLength') || rules[rule].includes('maxLength')) {
length = ruleName.substr(9)
ruleName = ruleName.substr(0, 9)
}
const validation = validations[ruleName] || {
rule: customrules[ruleName].rule,
formatted: customrules.formatted,
}
const isRuleSatisfied = ruleName !== 'required' && !fieldValue
? true
: validation.rule(length).test(fieldValue.toString())
if (!isRuleSatisfied) {
error = validation.formatted.apply(null, [displayName || id, length])
}
if (error !== '') {
break
}
}
}
setErrors(prevState => ({
...prevState,
[id]: error,
}))
}
}
console.log(fields)
return <form action='' className={props.classNames}>
<FormCtx.Provider value={{
fields, errors, setErrors, addField,
editFields, validateField, isSubmit, setSubmit, removeField
}}>
{children}
</FormCtx.Provider>
</form>
}
export default Form

выложи эту простыню в песочницу, в телеге такое читать невозможно