/
edit.tsx
52 lines (47 loc) · 1.71 KB
/
edit.tsx
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
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import React, { useState, memo, useEffect } from 'react'
import { Input, FormGroup, InputGroup, FormMessage, Button, Icon } from '@admin-bro/design-system'
import { EditPropertyProps } from '../base-property-props'
import { recordPropertyIsEqual } from '../record-property-is-equal'
import { PropertyLabel } from '../../app/property-label'
const Edit: React.FC<EditPropertyProps> = (props) => {
const { property, record, onChange } = props
const propValue = record.params[property.path]
const [value, setValue] = useState(propValue)
const error = record.errors && record.errors[property.path]
const [isInput, setIsInput] = useState(false)
useEffect(() => {
if (value !== propValue) {
setValue(propValue)
}
}, [propValue])
return (
<FormGroup error={!!error}>
<PropertyLabel property={property} />
<InputGroup>
<Input
type={isInput ? 'input' : 'password'}
className="input"
id={property.path}
name={property.path}
onChange={event => setValue(event.target.value)}
onBlur={() => onChange(property.path, value)}
onKeyDown={e => e.keyCode === 13 && onChange(property.path, value)}
value={value ?? ''}
disabled={property.isDisabled}
{...property.props}
/>
<Button
variant={isInput ? 'primary' : 'text'}
type="button"
size="icon"
onClick={() => setIsInput(!isInput)}
>
<Icon icon="View" />
</Button>
</InputGroup>
<FormMessage>{error && error.message}</FormMessage>
</FormGroup>
)
}
export default memo(Edit, recordPropertyIsEqual)