@kadconsulting/dry/dist/src/components/EditableField/EditableField.js

KAD Reusable Component Library

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