cupcakearmy/formhero
1
0
Fork 0
mirror of https://github.com/cupcakearmy/formhero.git synced 2025-09-06 14:20:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
cupcakearmy
2019-10-19 08:36:50 +02:00
parent d7a3d73512
commit 544dada3c4
4 changed files with 129 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
test/index.html
View File

@@ -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>
</html>
<body>
<div id="root"></div>
<script src="./test.tsx"></script>
</body>
</html>

81
test/test.tsx
View File

@@ -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
// if (module.hot) module.hot.accept()
// @ts-ignore
// if (module.hot) module.hot.accept()