-
Notifications
You must be signed in to change notification settings - Fork 1
/
dom.js
68 lines (63 loc) · 1.79 KB
/
dom.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { memoize, get } from 'lodash'
import { compose, branch, withHandlers } from 'recompose'
import { hasProp, syncedProp } from './tools'
function onChangeFromPath(path) {
switch (path) {
case 'target.value':
return ({ onChange, name }) => event =>
onChange(event.target.value, name, event)
case 'target.checked':
return ({ onChange, name }) => event =>
onChange(event.target.checked, name, event)
case undefined:
case null:
return ({ value, onChange, name }) => event =>
onChange(value, name, event)
default:
return ({ onChange, name }) => event =>
onChange(get(event, path), name, event)
}
}
export const fromEvent = memoize(path => {
/*
Creates an `onChange` handler that takes the value from `get(event, path)`.
If `path` is `nil`, the value is taken from the `value` prop instead.
*/
return branch(
hasProp('onChange'),
withHandlers({ onChange: onChangeFromPath(path) }),
)
})
export const syncedFocus = branch(
/*
Exposes the synced `focus` state of an element through the `onFocus()` and `onBlur()` callbacks.
*/
hasProp('node'),
compose(
withHandlers({
onPullFocus: ({ node }) => focus => {
node[focus ? 'focus' : 'blur']()
return focus
},
}),
syncedProp('focus'),
withHandlers({
onFocus: ({ onChangeFocus }) => () => onChangeFocus(true),
onBlur: ({ onChangeFocus }) => () => onChangeFocus(false),
}),
),
)
export function onKeysDown(keys) {
/*
Triggers the specified `keys` handlers on key down. Each handler is called with the current `props`.
*/
return withHandlers({
onKeyDown: props => event => {
const handler = keys[event.key]
if (handler == null) {
return
}
handler(props)
},
})
}