@danderson00/react-forms 0.0.48 → 0.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +203 -203
- package/TODO.md +2 -2
- package/dist/ErrorMessage.js +2 -4
- package/dist/ErrorMessage.js.map +1 -1
- package/dist/Form.js +5 -6
- package/dist/Form.js.map +1 -1
- package/dist/Group.js +4 -5
- package/dist/Group.js.map +1 -1
- package/dist/index.js +15 -27
- package/dist/index.js.map +1 -1
- package/dist/injectCss.js.map +1 -1
- package/dist/input.js +16 -11
- package/dist/input.js.map +1 -1
- package/dist/inputTypes.js +4 -5
- package/dist/inputTypes.js.map +1 -1
- package/dist/styles.js.map +1 -1
- package/dist/submit.js +7 -8
- package/dist/submit.js.map +1 -1
- package/dist/throttle.js +1 -2
- package/dist/throttle.js.map +1 -1
- package/dist/useForm.js +1 -2
- package/dist/useForm.js.map +1 -1
- package/dist/useFormValues.js +1 -2
- package/dist/useFormValues.js.map +1 -1
- package/dist/usePrevious.js.map +1 -1
- package/dist/useUpdate.js.map +1 -1
- package/package.json +59 -59
- package/src/ErrorMessage.js +11 -11
- package/src/Form.js +123 -123
- package/src/Group.js +14 -14
- package/src/index.js +40 -40
- package/src/injectCss.js +15 -15
- package/src/input.js +186 -174
- package/src/inputTypes.js +63 -63
- package/src/styles.js +20 -20
- package/src/submit.js +29 -29
- package/src/throttle.js +10 -10
- package/src/useForm.js +10 -10
- package/src/useFormValues.js +4 -4
- package/src/usePrevious.js +8 -8
- package/src/useUpdate.js +11 -11
package/src/submit.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
|
|
3
|
-
export default render => function Submit(props) {
|
|
4
|
-
if(!props.onSubmit) throw new Error('Button components must be contained within a Form component')
|
|
5
|
-
|
|
6
|
-
const {
|
|
7
|
-
onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
|
|
8
|
-
valid, validate, disableInvalid, values, ...propsToPass
|
|
9
|
-
} = props
|
|
10
|
-
|
|
11
|
-
// TODO: set executing when form is triggered by enter key
|
|
12
|
-
const [executing, setExecuting] = useState(false)
|
|
13
|
-
|
|
14
|
-
const onClick = e => {
|
|
15
|
-
const result = onSubmit(e, { validate, additionalValues: values })
|
|
16
|
-
if(result && result.finally && typeof result.finally === 'function') {
|
|
17
|
-
setExecuting(true)
|
|
18
|
-
result.finally(() => setExecuting(false))
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
const finalProps = {
|
|
23
|
-
...propsToPass,
|
|
24
|
-
onClick,
|
|
25
|
-
disabled: props.disabled || executing || (disableInvalid && !valid)
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
return render(finalProps)
|
|
29
|
-
}
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
|
|
3
|
+
export default render => function Submit(props) {
|
|
4
|
+
if(!props.onSubmit) throw new Error('Button components must be contained within a Form component')
|
|
5
|
+
|
|
6
|
+
const {
|
|
7
|
+
onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
|
|
8
|
+
valid, validate, disableInvalid, values, ...propsToPass
|
|
9
|
+
} = props
|
|
10
|
+
|
|
11
|
+
// TODO: set executing when form is triggered by enter key
|
|
12
|
+
const [executing, setExecuting] = useState(false)
|
|
13
|
+
|
|
14
|
+
const onClick = e => {
|
|
15
|
+
const result = onSubmit(e, { validate, additionalValues: values })
|
|
16
|
+
if(result && result.finally && typeof result.finally === 'function') {
|
|
17
|
+
setExecuting(true)
|
|
18
|
+
result.finally(() => setExecuting(false))
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const finalProps = {
|
|
23
|
+
...propsToPass,
|
|
24
|
+
onClick,
|
|
25
|
+
disabled: props.disabled || executing || (disableInvalid && !valid)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return render(finalProps)
|
|
29
|
+
}
|
package/src/throttle.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export default (target, delay = 200) => {
|
|
2
|
-
let timeout
|
|
3
|
-
|
|
4
|
-
return (...args) => {
|
|
5
|
-
clearTimeout(timeout)
|
|
6
|
-
timeout = setTimeout(
|
|
7
|
-
() => target(...args),
|
|
8
|
-
delay
|
|
9
|
-
)
|
|
10
|
-
}
|
|
1
|
+
export default (target, delay = 200) => {
|
|
2
|
+
let timeout
|
|
3
|
+
|
|
4
|
+
return (...args) => {
|
|
5
|
+
clearTimeout(timeout)
|
|
6
|
+
timeout = setTimeout(
|
|
7
|
+
() => target(...args),
|
|
8
|
+
delay
|
|
9
|
+
)
|
|
10
|
+
}
|
|
11
11
|
}
|
package/src/useForm.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { useContext } from 'react'
|
|
2
|
-
|
|
3
|
-
export default context => function useForm() {
|
|
4
|
-
const { onSubmit, getFieldValues, setFieldValue } = useContext(context)
|
|
5
|
-
|
|
6
|
-
return {
|
|
7
|
-
submit: options => onSubmit(undefined, options),
|
|
8
|
-
values: () => getFieldValues(),
|
|
9
|
-
setFieldValue
|
|
10
|
-
}
|
|
1
|
+
import { useContext } from 'react'
|
|
2
|
+
|
|
3
|
+
export default context => function useForm() {
|
|
4
|
+
const { onSubmit, getFieldValues, setFieldValue } = useContext(context)
|
|
5
|
+
|
|
6
|
+
return {
|
|
7
|
+
submit: options => onSubmit(undefined, options),
|
|
8
|
+
values: () => getFieldValues(),
|
|
9
|
+
setFieldValue
|
|
10
|
+
}
|
|
11
11
|
}
|
package/src/useFormValues.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useContext } from 'react'
|
|
2
|
-
|
|
3
|
-
export default context => function useFormValues() {
|
|
4
|
-
return useContext(context).getFieldValues()
|
|
1
|
+
import { useContext } from 'react'
|
|
2
|
+
|
|
3
|
+
export default context => function useFormValues() {
|
|
4
|
+
return useContext(context).getFieldValues()
|
|
5
5
|
}
|
package/src/usePrevious.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { useRef, useEffect } from 'react'
|
|
2
|
-
|
|
3
|
-
export default function usePrevious(value) {
|
|
4
|
-
const ref = useRef()
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
ref.current = value
|
|
7
|
-
})
|
|
8
|
-
return ref.current
|
|
1
|
+
import { useRef, useEffect } from 'react'
|
|
2
|
+
|
|
3
|
+
export default function usePrevious(value) {
|
|
4
|
+
const ref = useRef()
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
ref.current = value
|
|
7
|
+
})
|
|
8
|
+
return ref.current
|
|
9
9
|
}
|
package/src/useUpdate.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { useRef, useEffect } from 'react'
|
|
2
|
-
|
|
3
|
-
export default function useUpdate(hook, inputs) {
|
|
4
|
-
const didMountRef = useRef(false)
|
|
5
|
-
|
|
6
|
-
useEffect(() => {
|
|
7
|
-
if (didMountRef.current)
|
|
8
|
-
hook()
|
|
9
|
-
else
|
|
10
|
-
didMountRef.current = true
|
|
11
|
-
}, inputs)
|
|
1
|
+
import { useRef, useEffect } from 'react'
|
|
2
|
+
|
|
3
|
+
export default function useUpdate(hook, inputs) {
|
|
4
|
+
const didMountRef = useRef(false)
|
|
5
|
+
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
if (didMountRef.current)
|
|
8
|
+
hook()
|
|
9
|
+
else
|
|
10
|
+
didMountRef.current = true
|
|
11
|
+
}, inputs)
|
|
12
12
|
}
|