@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
29 lines • 2.06 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const formik_1 = require("formik");
const React = tslib_1.__importStar(require("react"));
const pencil_alt_icon_1 = require("@patternfly/react-icons/dist/js/icons/pencil-alt-icon");
const InputField_1 = tslib_1.__importDefault(require("./InputField"));
const react_core_1 = require("@patternfly/react-core");
require("./PencilEditField.css");
const useFieldErrorMsg_1 = tslib_1.__importDefault(require("../../../hooks/useFieldErrorMsg"));
const InputFieldFocus = ({ name, isRequired, onBlur, showErrorMessage, }) => {
const textInputRef = React.useRef();
React.useEffect(() => { var _a; return (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, []);
return (React.createElement(InputField_1.default, { name: name, isRequired: isRequired, onBlur: onBlur, ref: textInputRef, showErrorMessage: showErrorMessage }));
};
const PencilEditField = ({ name, isRequired, showErrorMessage }) => {
const [edit, setEdit] = React.useState(false);
const [field] = (0, formik_1.useField)({ name });
const errrMsg = (0, useFieldErrorMsg_1.default)({ name });
return (React.createElement(React.Fragment, null,
edit ? (React.createElement(InputFieldFocus, { name: name, isRequired: isRequired, onBlur: () => setEdit(false), showErrorMessage: showErrorMessage })) : (React.createElement(React.Fragment, null,
React.createElement(react_core_1.Split, null,
React.createElement(react_core_1.SplitItem, { className: "ai-pencil-field__text" }, field.value),
React.createElement(react_core_1.SplitItem, null,
React.createElement(pencil_alt_icon_1.PencilAltIcon, { onClick: () => setEdit(true) }))))),
React.createElement("div", { className: "pf-v5-c-form__helper-text pf-m-error" }, errrMsg)));
};
exports.default = PencilEditField;
//# sourceMappingURL=PencilEditField.js.map