@nodeject/ui-components
Version:
UI library for non-trivial components
162 lines (161 loc) • 6.58 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditableLabel = void 0;
var antd_1 = require("antd");
var classcat_1 = require("classcat");
var React = require("react");
var react_1 = require("react");
var icons_1 = require("../icons");
var styles_module_less_1 = require("./styles.module.less");
var EditableLabel = function (props) {
var _a;
var className = props.className, setCursorOnFocus = props.setCursorOnFocus;
var _b = react_1.useState(props.initialValue), value = _b[0], setValue = _b[1];
var _c = react_1.useState(false), editing = _c[0], setEditing = _c[1];
var _d = react_1.useState(false), saving = _d[0], setSaving = _d[1];
var _e = react_1.useState(false), cancelChange = _e[0], setCancelChange = _e[1];
var focusOnMount = props.focusOnMount !== undefined ? props.focusOnMount : false;
var stopCancelPropagation = props.stopCancelPropagation !== undefined
? props.stopCancelPropagation
: true;
var stopEnterPropagation = props.stopEnterPropagation !== undefined
? props.stopEnterPropagation
: true;
var domElm = react_1.useRef();
react_1.useEffect(function () {
if (focusOnMount) {
edit();
}
}, []);
react_1.useEffect(function () {
setValue(props.initialValue);
}, [props.initialValue]);
react_1.useEffect(function () {
domElm.current.focus();
if (isValueChanged() && !editing && !cancelChange) {
var val = domElm.current.textContent.toString().trim();
setValue(val);
props.onSave(val);
setSaving(false);
}
else {
domElm.current.textContent = props.initialValue;
setCancelChange(false);
return;
}
}, [editing]);
var toggleEdit = function (e) {
e.stopPropagation();
props.onBeforeEdit && props.onBeforeEdit();
if (!editing) {
edit();
}
};
var onFocus = function (e) {
//console.log(domElm)
//domElm.current.
};
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != 'undefined' &&
typeof document.createRange != 'undefined') {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
else if (typeof document.body.createTextRange != 'undefined') {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
var selectElementContents = function (el) {
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
};
var edit = function () {
setEditing(true);
if (setCursorOnFocus !== undefined) {
domElm.current.onfocus = function (e) {
requestAnimationFrame(function () {
if (setCursorOnFocus === 'selectAll') {
selectElementContents(domElm.current);
}
else if (setCursorOnFocus === 'endOfSelection') {
placeCaretAtEnd(domElm.current);
}
});
};
}
};
var save = function () {
setEditing(false);
setSaving(true);
};
var cancel = function () {
setCancelChange(true);
setEditing(false);
};
var isValueChanged = function () {
return (value.toString().trim() !==
domElm.current.textContent.toString().trim());
// return props.initialValue !== domElm.current.textContent
};
var handleKeyDown = function (e) {
var key = e.key;
switch (key) {
case 'Enter':
save();
if (stopEnterPropagation) {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
}
break;
case 'Escape':
cancel();
if (stopCancelPropagation) {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
}
break;
}
};
var editOnClick = true;
if (props.editOnClick !== undefined) {
editOnClick = props.editOnClick;
}
if (props.initialValue.trim() === '') {
editOnClick = false;
}
var editableLabelClassName = editing
? styles_module_less_1.default.editableLabelWriteMode
: styles_module_less_1.default.editableLabelReadMode;
var editClassName = props.editClassName === undefined ? styles_module_less_1.default.edit : props.editClassName;
var editDisabledClassName = props.labelClassName === undefined
? editOnClick
? styles_module_less_1.default.editDisabledInline
: styles_module_less_1.default.editDisabled
: props.labelClassName;
var editIcon = editing ? (React.createElement(icons_1.EnterIcon, { className: styles_module_less_1.default.editIcon, onClick: save })) : (React.createElement(antd_1.Tooltip, { title: 'Click to edit' },
React.createElement(icons_1.EditIcon, { className: styles_module_less_1.default.editIcon, onClick: toggleEdit })));
var onBlur = function () {
window.setTimeout(function () {
!saving && cancel();
}, 100);
};
var classNameEditableLabel = classcat_1.default((_a = {},
_a[editableLabelClassName] = true,
_a[className] = Boolean(className),
_a));
return (React.createElement("span", { className: classNameEditableLabel },
React.createElement(props.htmlTag, { className: editing ? editClassName : editDisabledClassName, style: editing ? props.editStyle : props.labelStyle, suppressContentEditableWarning: true, contentEditable: editing, ref: domElm, onBlur: editOnClick ? save : onBlur, onKeyDown: handleKeyDown, onFocus: onFocus, onClick: editOnClick ? toggleEdit : undefined }, value),
!editOnClick && editIcon));
};
exports.EditableLabel = EditableLabel;