@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
315 lines • 13.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useEffect, useRef } from "react";
import HUDIcon from "./HUDIcon.js";
function HUDLabelEditor(_ref) {
var _ref$labelEditorConta = _ref.labelEditorContainerConfigurationSettings,
labelEditorContainerConfigurationSettings = _ref$labelEditorConta === void 0 ? {} : _ref$labelEditorConta,
_ref$confirmationMess = _ref.confirmationMessageConfigurationSettings,
confirmationMessageConfigurationSettings = _ref$confirmationMess === void 0 ? {} : _ref$confirmationMess,
_ref$inputContainerCo = _ref.inputContainerConfigurationSettings,
inputContainerConfigurationSettings = _ref$inputContainerCo === void 0 ? {} : _ref$inputContainerCo,
_ref$editContainerCon = _ref.editContainerConfigurationSettings,
editContainerConfigurationSettings = _ref$editContainerCon === void 0 ? {} : _ref$editContainerCon,
_ref$labelHoveredConf = _ref.labelHoveredConfigurationSettings,
labelHoveredConfigurationSettings = _ref$labelHoveredConf === void 0 ? {} : _ref$labelHoveredConf,
_ref$cancelButtonConf = _ref.cancelButtonConfigurationSettings,
cancelButtonConfigurationSettings = _ref$cancelButtonConf === void 0 ? {} : _ref$cancelButtonConf,
_ref$saveButtonConfig = _ref.saveButtonConfigurationSettings,
saveButtonConfigurationSettings = _ref$saveButtonConfig === void 0 ? {} : _ref$saveButtonConfig,
_ref$labelConfigurati = _ref.labelConfigurationSettings,
labelConfigurationSettings = _ref$labelConfigurati === void 0 ? {} : _ref$labelConfigurati,
_ref$inputConfigurati = _ref.inputConfigurationSettings,
inputConfigurationSettings = _ref$inputConfigurati === void 0 ? {} : _ref$inputConfigurati,
_ref$focusConfigurati = _ref.focusConfigurationSettings,
focusConfigurationSettings = _ref$focusConfigurati === void 0 ? {} : _ref$focusConfigurati,
_ref$blurConfiguratio = _ref.blurConfigurationSettings,
blurConfigurationSettings = _ref$blurConfiguratio === void 0 ? {} : _ref$blurConfiguratio,
_ref$cancelButtonConf2 = _ref.cancelButtonConfigurations,
cancelButtonConfigurations = _ref$cancelButtonConf2 === void 0 ? {} : _ref$cancelButtonConf2,
_ref$saveButtonConfig2 = _ref.saveButtonConfigurations,
saveButtonConfigurations = _ref$saveButtonConfig2 === void 0 ? {} : _ref$saveButtonConfig2,
_ref$confirmationMess2 = _ref.confirmationMessage,
confirmationMessage = _ref$confirmationMess2 === void 0 ? "Saved!" : _ref$confirmationMess2,
_ref$initialText = _ref.initialText,
initialText = _ref$initialText === void 0 ? "Click to edit" : _ref$initialText,
dynamicConfirmationMessage = _ref.dynamicConfirmationMessage,
_ref$editTriggers = _ref.editTriggers,
editTriggers = _ref$editTriggers === void 0 ? ["click"] : _ref$editTriggers,
_ref$autosaveTimeout = _ref.autosaveTimeout,
autosaveTimeout = _ref$autosaveTimeout === void 0 ? 2000 : _ref$autosaveTimeout,
_ref$displayConfirmat = _ref.displayConfirmation,
displayConfirmation = _ref$displayConfirmat === void 0 ? true : _ref$displayConfirmat,
_ref$allowBlurActions = _ref.allowBlurActions,
allowBlurActions = _ref$allowBlurActions === void 0 ? true : _ref$allowBlurActions,
_ref$enableAutosave = _ref.enableAutosave,
enableAutosave = _ref$enableAutosave === void 0 ? false : _ref$enableAutosave,
_ref$showButtons = _ref.showButtons,
showButtons = _ref$showButtons === void 0 ? false : _ref$showButtons,
_ref$enableUndo = _ref.enableUndo,
enableUndo = _ref$enableUndo === void 0 ? false : _ref$enableUndo,
_ref$loading = _ref.loading,
loading = _ref$loading === void 0 ? false : _ref$loading,
_ref$saveHotkeys = _ref.saveHotkeys,
saveHotkeys = _ref$saveHotkeys === void 0 ? ["Enter"] : _ref$saveHotkeys,
_ref$onEditing = _ref.onEditing,
onEditing = _ref$onEditing === void 0 ? function () {} : _ref$onEditing,
_ref$onCancel = _ref.onCancel,
onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
_ref$onSave = _ref.onSave,
onSave = _ref$onSave === void 0 ? function () {} : _ref$onSave,
onChange = _ref.onChange,
value = _ref.value;
var _useState = useState(value !== undefined ? value : initialText),
_useState2 = _slicedToArray(_useState, 2),
labelText = _useState2[0],
setLabelText = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
labelHovered = _useState4[0],
setLabelHovered = _useState4[1];
var _useState5 = useState(null),
_useState6 = _slicedToArray(_useState5, 2),
previousText = _useState6[0],
setPreviousText = _useState6[1];
var _useState7 = useState(labelText),
_useState8 = _slicedToArray(_useState7, 2),
tempText = _useState8[0],
setTempText = _useState8[1];
var _useState9 = useState(null),
_useState10 = _slicedToArray(_useState9, 2),
editAction = _useState10[0],
setEditAction = _useState10[1];
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
editing = _useState12[0],
setEditing = _useState12[1];
var _useState13 = useState(false),
_useState14 = _slicedToArray(_useState13, 2),
saved = _useState14[0],
setSaved = _useState14[1];
var autosaveRef = useRef(null);
var handleEditAction = function handleEditAction() {
if (editAction === "cancel") {
handleCancel();
return;
}
handleSave();
};
var handleSave = function handleSave() {
if (onChange) {
onChange(tempText);
}
if (value === undefined) {
setLabelText(tempText);
}
setLabelHovered(false);
setEditing(false);
setSaved(true);
onSave(tempText);
if (dynamicConfirmationMessage) {
setSaved(dynamicConfirmationMessage(tempText));
}
setTimeout(function () {
return setSaved(false);
}, 1500);
setEditAction(null);
};
var handleCancel = function handleCancel() {
setTempText(labelText);
setEditing(false);
onCancel();
setEditAction(null);
};
var handleUndo = function handleUndo() {
if (enableUndo && previousText) {
setTempText(previousText);
if (onChange) {
onChange(previousText);
}
if (value === undefined) {
setLabelText(previousText);
}
}
};
var handleChange = function handleChange(e) {
setTempText(e.target.value);
if (onChange) {
onChange(e.target.value);
}
setSaved(false);
if (enableAutosave) {
setEditAction("save");
clearTimeout(autosaveRef.current);
autosaveRef.current = setTimeout(handleSave, autosaveTimeout);
}
};
var startEditing = function startEditing() {
setEditing(true);
setPreviousText(labelText);
onEditing();
};
var triggerEvents = function triggerEvents(eventType) {
if (editTriggers.includes(eventType)) {
startEditing();
}
};
var handleKeyDown = function handleKeyDown(e) {
var key = e.key;
if (saveHotkeys.includes(key)) {
setEditAction("save");
e.preventDefault();
handleSave();
}
};
useEffect(function () {
if (value !== undefined) {
setTempText(value);
}
}, [value]);
useEffect(function () {
if (initialText) {
setLabelText(initialText);
setTempText(initialText);
}
}, [initialText]);
useEffect(function () {
if (editing) {
window.addEventListener("keydown", handleKeyDown);
} else {
window.removeEventListener("keydown", handleKeyDown);
}
return function () {
window.removeEventListener("keydown", handleKeyDown);
};
}, [editing, saveHotkeys]);
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
display: "inline-block",
fontFamily: "Poppins, sans-serif",
fontSize: "0.9rem",
width: "auto"
}, labelEditorContainerConfigurationSettings)
}, editing ? /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
alignItems: "center",
gap: "6px"
}, inputContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement("input", {
style: _objectSpread(_objectSpread({
transition: "all 0.269s ease",
outline: "none",
fontWeight: "500",
fontSize: "0.9rem",
border: "1px solid #ccc",
borderRadius: "4px",
background: "#f9f9f9",
padding: "6px 8px"
}, editing ? _objectSpread({
border: "1px solid #1A73E8",
boxShadow: "0 0 5px #1A73E8"
}, focusConfigurationSettings) : blurConfigurationSettings), inputConfigurationSettings),
onChange: handleChange,
onBlur: (!showButtons || allowBlurActions) && !editAction !== "cancel" ? handleEditAction : undefined,
value: tempText,
autoFocus: true,
type: "text"
}), showButtons && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
gap: "6px"
}, editContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement(HUDIcon, _extends({
style: _objectSpread({
pointerEvents: loading ? "none" : undefined,
cursor: loading ? "not-allowed" : "pointer",
transition: "background-color 0.369s, transform 0.269s",
fontSize: "0.8rem",
border: "none",
borderRadius: "4px",
background: loading ? "#ccc" : "linear-gradient(135deg, rgba(247, 247, 247, 1), rgba(247, 247, 247, 1))",
color: "rgba(69, 169, 69, 1)",
padding: "4px 8px"
}, saveButtonConfigurationSettings),
onMouseEnter: function onMouseEnter(e) {
setEditAction("save");
!loading && (e.target.style.transform = "scale(1.05)");
},
onMouseLeave: function onMouseLeave(e) {
setEditAction(null);
!loading && (e.target.style.transform = "scale(1)");
},
onClick: function onClick() {
setEditAction("save");
handleEditAction();
},
name: "edit"
}, saveButtonConfigurations)), /*#__PURE__*/React.createElement(HUDIcon, _extends({
style: _objectSpread({
cursor: "pointer",
transition: "background-color 0.369s, transform 0.269s",
fontSize: "0.8rem",
border: "none",
borderRadius: "4px",
background: "linear-gradient(135deg, rgba(247, 247, 247, 1), rgba(247, 247, 247, 1))",
color: "rgba(169, 69, 69, 1)",
padding: "4px 8px"
}, cancelButtonConfigurationSettings),
onMouseEnter: function onMouseEnter(e) {
setEditAction("cancel");
e.target.style.transform = "scale(1.05)";
},
onMouseLeave: function onMouseLeave(e) {
setEditAction(null);
e.target.style.transform = "scale(1)";
},
onClick: function onClick() {
setEditAction("cancel");
handleEditAction();
},
name: "close"
}, cancelButtonConfigurations)))) : /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread({
display: "inline-flex",
alignItems: "center",
cursor: "pointer",
transition: "color 0.369s ease, border-bottom-color 0.369s ease, transform 0.269s",
transform: labelHovered ? "scale(1.02)" : undefined,
fontWeight: "600",
fontSize: "0.9rem",
borderRadius: "4px",
borderBottom: labelHovered ? "#1A73E8" : "1px dashed transparent",
background: "#f5f5f5",
color: labelHovered ? "#1A73E8" : "#333",
padding: "6px 8px"
}, labelConfigurationSettings), labelHovered ? labelHoveredConfigurationSettings : {}),
onDoubleClick: function onDoubleClick() {
return triggerEvents("doubleClick");
},
onClick: function onClick() {
return triggerEvents("click");
},
onMouseEnter: function onMouseEnter(e) {
setLabelHovered(true);
},
onMouseLeave: function onMouseLeave(e) {
setLabelHovered(false);
}
}, value !== undefined ? value : labelText), saved && displayConfirmation && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "absolute",
animation: "fade-in-out 1.569s",
fontWeight: "500",
fontSize: "0.85rem",
width: "calc(100%)",
color: "#43E97B",
marginTop: "7.69px"
}, confirmationMessageConfigurationSettings)
}, confirmationMessage));
}
export default HUDLabelEditor;