cloud_bbb/ts/Manager/EditableValue.tsx

58 lines
1.2 KiB
TypeScript
Raw Normal View History

2020-06-04 14:01:31 +02:00
import React, {useState} from 'react';
import { SubmitInput } from './SubmitInput';
type EditableValueProps = {
value: string;
setValue: (key: string, value: string | number) => Promise<void>;
field: string;
type: 'text' | 'number';
options?: {
min?: number;
max?: number;
disabled?: boolean;
};
2020-06-04 14:01:31 +02:00
}
const EditableValue: React.FC<EditableValueProps> = ({ setValue, field, value: currentValue, type, options }) => {
2020-06-04 14:01:31 +02:00
const [active, setActive] = useState<boolean>(false);
const submit = (value: string | number) => {
if (value === currentValue) {
setActive(false);
return;
}
setValue(field, value).then(() => {
setActive(false);
});
};
if (active) {
return <SubmitInput
name={field}
autoFocus={true}
onSubmitValue={(value) => submit(type === 'number' ? parseInt(value) : value)}
onClick={event => event.stopPropagation()}
initialValue={currentValue}
type={type}
focus={true}
min={options?.min}
max={options?.max}
2020-06-04 14:01:31 +02:00
/>;
}
function onClick(ev) {
ev.stopPropagation();
setActive(true);
}
if (options?.disabled) {
return <span>{currentValue}</span>;
}
2020-06-04 14:01:31 +02:00
return <a className="action-rename" onClick={onClick}>{currentValue}</a>;
};
export default EditableValue;