initial commit

2025-09-06 06:10:40 +00:00 · 2019-09-26 21:13:27 +02:00
parent 00c6efd73a
commit 0c19233b4d
7 changed files with 239 additions and 0 deletions
--- a/test/index.html
+++ b/test/index.html
@@ -0,0 +1,27 @@
+<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
+		}
+
+		input,
+		select {
+			display: block;
+		}
+	</style>
+</head>
+
+<body>
+	<div id="root"></div>
+	<script src="./test.tsx"></script>
+</body>
+
+</html>
--- a/test/test.tsx
+++ b/test/test.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+import { useForm, HTMLInputExtractor } from '../'
+
+
+const TextError: React.FC<{ error?: string }> = ({ error }) => !error
+	? null
+	: <div className="has-text-danger">{error}</div>
+
+const Index: React.FC = () => {
+
+	const { auto, form, update, errors } = useForm({
+		username: '',
+		password: '',
+		type: 'formhero',
+		awesome: true,
+	}, {
+		username: /^test/,
+		password: {
+			validator: /^.{3,}$/,
+			message: 'To short',
+		},
+		awesome: (value) => !!value
+	}, { extractor: HTMLInputExtractor })
+
+	const _submit = (e: React.MouseEvent) => {
+		e.preventDefault()
+		console.log(form, errors)
+	}
+
+	return (
+		<div>
+			<form>
+				<div>Username</div>
+				<input {...auto('username')} />
+				<TextError error={errors.username} />
+				<br />
+
+				<div>Password</div>
+				<input {...auto('password')} />
+				<TextError error={errors.password} />
+				<br />
+
+				<div>Which one to choose?</div>
+				<select {...auto('type')}>
+					<option value="redux-form">Redux-Form</option>
+					<option value="react-hook-forms">React-Hook-Forms</option>
+					<option value="formik">Formik</option>
+					<option value="formhero">FormHero</option>
+				</select>
+				<br />
+
+				<div>Is it awesome?</div>
+				<input type="checkbox" name="vehicle" {...auto('awesome', { setter: 'checked', extractor: (e) => e.target.checked })} />
+				<TextError error={errors.awesome} />
+				<br />
+
+				<button onClick={_submit}>Test</button>
+			</form>
+		</div>
+	)
+}
+
+ReactDOM.render(<Index />, document.getElementById('root'))
+
+// @ts-ignore
+// if (module.hot) module.hot.accept()