krzaku281

import { parseOnlyLetterAndSpace, parseLength } from '../services/inputParser';
import { checkAtLeastLength, checkEmailPattern, checkIsfilled, checkIsTrue } from '../services/inputValidator';

const registrationModel = [{
    name: 'name',
    label: 'Name',
    type: 'text',
    parseFun: parseOnlyLetterAndSpace,
    validators: [{
        id: 'name-length',

krzaku281

export const parseOnlyLetterAndSpace = expression => expression.replace(/[^A-Za-z ]/g, '');

export const parseLength = (expression, length) => expression.substring(0, length);

krzaku281

export const checkAtLeastLength = (expression, length) => expression && expression.trim().length >= length;

export const checkIsfilled = expression => expression && expression.length > 0;

export const checkIsTrue = expression => expression;

export const checkEmailPattern = mail => {
    const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return regex.test(mail);
}

krzaku281

import * as React from 'react';
import ValidationAlert from '../ValidationAlert';

function TextInput({ name, label, type, value, alert, setInputs }) {
    return (
        <div>
            <label htmlFor={name} className="uk-form-label uk-text-large">{label}</label>
            <input id={name} name={name} type={type} value={value || ""} onChange={setInputs} className={"uk-input" + (alert ? ' uk-form-danger' : '')} />
            <ValidationAlert content={alert} />
        </div>

krzaku281

import React from 'react';
import ValidationAlert from '../ValidationAlert';

function SelectInput({ name, label, type, value, alert, options, setInputs }) {
    return (
        <div>
            <label htmlFor={name} className="uk-form-label uk-text-large">{label}</label>
            <select id={name} name={name} type={type} value={value} onChange={setInputs} className={"uk-select" + (alert ? ' uk-form-danger' : '')}>
                {options && options.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
            </select>

krzaku281

import React from 'react';
import ValidationAlert from '../ValidationAlert';

function RadioInput({ name, label, type, value, alert, options, setInputs }) {
    return (
        <div>
            <div className="uk-form-label uk-text-large">{label}</div>
            {options && options.map(option =>
                <div key={option.value}>
                    <input id={option.name} name={name} type={type} value={option.value} checked={value === option.value} onChange={setInputs} className="uk-radio" />

krzaku281

import React from 'react';
import ValidationAlert from '../ValidationAlert';

function TextareaInput({ name, label, type, value, alert, setInputs }) {
    return (
        <div>
            <label htmlFor={name} className="uk-form-label uk-text-large">{label}</label>
            <textarea id={name} name={name} value={value || ""} type={type} onChange={setInputs} className={"uk-textarea" + (alert ? ' uk-form-danger' : '')}></textarea>
            <ValidationAlert content={alert} />
        </div>

krzaku281

import React from 'react';
import ValidationAlert from '../ValidationAlert';

const CheckboxInput = ({ name, label, type, value, alert, setInputs }) => {
    return (
        <div>
            <input id={name} name={name} type={type} value={value} checked={value || false} onChange={setInputs} className={"uk-checkbox"} />
            <label htmlFor={name} className="uk-form-label uk-margin-small-left">{label}</label>
            <ValidationAlert content={alert} />
        </div>

krzaku281

import React from 'react';

const ValidationAlert = ({ content }) => {
    return <div className="uk-text-danger uk-text-small" style={{ "height": "21px" }}>{content}</div>
}

export default ValidationAlert;

krzaku281

import { useState } from 'react';

const useForm = (initModel, submitCallback) => {
  const [inputs, setInputs] = useState(initModel);

  const handleChange = e => {
    e.persist();
    inputs.forEach(i => {
      if (i.name === e.target.name) {
        i.value = i.type === 'checkbox' ? e.target.checked : e.target.value;