const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let _pisell_materials = require("@pisell/materials");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let _pisell_icon_es_Edit05 = require("@pisell/icon/es/Edit05");
_pisell_icon_es_Edit05 = require_runtime.__toESM(_pisell_icon_es_Edit05);
require("./index.less");
//#region src/components/workSpaceList/components/EditableString/index.tsx
/**
* 可编辑string
* @param props
* @constructor
*/
const EditableString = (props) => {
	const { text, style, onChange, editable, editing: editingProps, maxLength, className, ellipsis } = props;
	const [editing, setEditing] = (0, react.useState)(false);
	const [originText, setOriginText] = (0, react.useState)(text);
	const [temporaryValue, setTemporaryValue] = (0, react.useState)(text);
	const inputRef = (0, react.useRef)(null);
	const textRef = (0, react.useRef)(null);
	(0, react.useEffect)(() => {
		setOriginText(text);
		setTemporaryValue(text);
	}, [text]);
	(0, react.useEffect)(() => {
		(0, _pisell_utils.isBoolean)(editingProps) && setEditing(editingProps);
	}, [editingProps]);
	(0, react.useEffect)(() => {
		if (editing) setTimeout(() => {
			var _inputRef$current;
			(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
		});
	}, [editing]);
	(0, react.useEffect)(() => {
		if (textRef.current) textRef.current.style.webkitLineClamp = ellipsis === null || ellipsis === void 0 ? void 0 : ellipsis.row;
	}, [ellipsis, editing]);
	const handleChangeText = () => {
		if (!temporaryValue) return;
		onChange === null || onChange === void 0 || onChange(temporaryValue);
		setEditing(false);
	};
	const handleEdit = () => {
		setEditing(true);
	};
	return (0, react.useMemo)(() => {
		if (editing) return /* @__PURE__ */ react.default.createElement("span", { style }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Input, {
			ref: inputRef,
			value: temporaryValue,
			onChange: (e) => setTemporaryValue(e.target.value),
			onPressEnter: handleChangeText,
			onBlur: handleChangeText,
			maxLength
		}));
		return /* @__PURE__ */ react.default.createElement("div", {
			style,
			size: 16,
			className: (0, classnames.default)(className, "edit-wrap")
		}, /* @__PURE__ */ react.default.createElement("span", {
			className: "text",
			ref: textRef
		}, temporaryValue), editable && temporaryValue && /* @__PURE__ */ react.default.createElement(_pisell_icon_es_Edit05.default, {
			className: "edit-icon",
			onClick: handleEdit
		}));
	}, [
		editing,
		temporaryValue,
		ellipsis
	]);
};
//#endregion
exports.default = EditableString;
