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
| import { useCallback, useEffect, useState } from 'react'
| import { useBoolean } from 'ahooks'
| import { uniqueId } from 'lodash'
| import type { KeyValue } from '../types'
|
| const UNIQUE_ID_PREFIX = 'key-value-'
| const strToKeyValueList = (value: string) => {
| return value.split('\n').map((item) => {
| const [key, ...others] = item.split(':')
| return {
| id: uniqueId(UNIQUE_ID_PREFIX),
| key: key.trim(),
| value: others.join(':').trim(),
| }
| })
| }
|
| const useKeyValueList = (value: string, onChange: (value: string) => void, noFilter?: boolean) => {
| const [list, doSetList] = useState<KeyValue[]>(value ? strToKeyValueList(value) : [])
| const setList = (l: KeyValue[]) => {
| doSetList(l.map((item) => {
| return {
| ...item,
| id: item.id || uniqueId(UNIQUE_ID_PREFIX),
| }
| }))
| }
| useEffect(() => {
| if (noFilter)
| return
| const newValue = list.filter(item => item.key && item.value).map(item => `${item.key}:${item.value}`).join('\n')
| if (newValue !== value)
| onChange(newValue)
|
| // eslint-disable-next-line react-hooks/exhaustive-deps
| }, [list, noFilter])
| const addItem = useCallback(() => {
| setList([...list, {
| id: uniqueId(UNIQUE_ID_PREFIX),
| key: '',
| value: '',
| }])
| }, [list])
|
| const [isKeyValueEdit, {
| toggle: toggleIsKeyValueEdit,
| }] = useBoolean(true)
|
| return {
| list: list.length === 0 ? [{ id: uniqueId(UNIQUE_ID_PREFIX), key: '', value: '' }] : list, // no item can not add new item
| setList,
| addItem,
| isKeyValueEdit,
| toggleIsKeyValueEdit,
| }
| }
|
| export default useKeyValueList
|
|
