@kadconsulting/dry
Version:
KAD Reusable Component Library
25 lines • 1.64 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, forwardRef } from 'react';
import Button from '../Button/Button';
import { TextInput } from '../TextInput';
import classnames from 'classnames';
// import * as Utils from "./EditableField.utils.js";
import './EditableField.scss';
const EditableField = forwardRef(({ id, className, passProps, label, value, onUpdate, ...props }, ref) => {
const [isEditing, setIsEditing] = useState(false);
const [newValue, setNewValue] = useState(value);
const handleEdit = () => {
setIsEditing(true);
};
const handleCancel = () => {
setIsEditing(false);
setNewValue(value);
};
const handleSubmit = () => {
onUpdate(newValue);
setIsEditing(false);
};
return (_jsx("div", { id: id, ref: ref, className: classnames(className, 'dry-editablefield'), children: !isEditing ? (_jsxs("div", { className: 'dry-editablefield__main', children: [_jsx("p", { className: 'user-story__p', children: `${label}: ${value}` }), _jsx(Button, { text: 'Edit', onClick: handleEdit, width: 'fit-content' })] })) : (_jsxs("div", { className: 'dry-editablefield__mainEdit', children: [_jsx(TextInput, { ...props, inputType: 'text', value: newValue, onChange: (e) => setNewValue(e.target.value) }), _jsxs("div", { className: 'dry-editablefield__mainEditActions', children: [_jsx(Button, { text: 'Cancel', width: 'fit-content', onClick: handleCancel }), _jsx(Button, { text: 'Submit', width: 'fit-content', onClick: handleSubmit })] })] })) }));
});
export default EditableField;
//# sourceMappingURL=EditableField.js.map