react-use-models/index.js at master · thihathit/react-use-models · GitHub

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { useState } from "react"

import get from "lodash.get"
import set from "lodash.set"

const has = (o, k) => o[k] !== undefined

export const useModels = ({ defaultState = {} }) => {
    const [models, setModels] = useState(() => Object.assign({}, defaultState))

    const getModel = (name) => get(models, name)

    const updateModel = (name, value) => {
        setModels((old) => Object.assign({}, set(old, name, value)))
    }

    const textarea = ({ name, onChange = () => {} }) => ({
        onChange: (e) => {
            const value = e.target.value

            updateModel(name, value)

            onChange(e)
        },
        value: getModel(name) || "",
        name,
    })

    const input = ({ name, type = "text", onChange = () => {} }) => ({
        onChange: (e) => {
            let value = null

            //primitive values
            if (has(e, "value")) {
                value = e.value
            }

            //normal value
            if (has(e, "target")) {
                value = e.target.value
            }

            updateModel(name, value)

            onChange(e)
        },
        value: getModel(name) || "",
        name,
        type,
    })

    const radio = ({ name, value = null, onChange = () => {} }) => ({
        onChange: (e) => {
            if (e.target.checked) {
                updateModel(name, value)
            }

            onChange(e)
        },
        checked: getModel(name) === value,
        type: "radio",
        name,
        value,
    })

    const checkbox = ({
        name,
        truevalue = true,
        falsevalue = false,
        onChange = () => {},
    }) => ({
        onChange: (e) => {
            const value = e.target.checked ? truevalue : falsevalue

            updateModel(name, value)

            onChange(e)
        },
        checked: getModel(name) === truevalue,
        type: "checkbox",
        name,
        value: truevalue,
    })

    return {
        models,
        register: {
            input,
            textarea,
            radio,
            checkbox,
        },
        updateModel,
        setModels,
    }
}

export default useModels