@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
79 lines • 4.32 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from "react";
import { Classes as BlueprintClassNames, InputGroup as BlueprintInputGroup, } from "@blueprintjs/core";
import { Definitions as IntentDefinitions } from "../../common/Intent/index.js";
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
import Icon from "../Icon/Icon.js";
import { useTextValidation } from "./useTextValidation.js";
/**
* Text input field.
*/
export var TextField = function (_a) {
var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? true : _c, leftIcon = _a.leftIcon, invisibleCharacterWarning = _a.invisibleCharacterWarning, _d = _a.escapeToBlur, escapeToBlur = _d === void 0 ? false : _d, intent = _a.intent, otherBlueprintInputGroupProps = __rest(_a, ["className", "fullWidth", "leftIcon", "invisibleCharacterWarning", "escapeToBlur", "intent"]);
var inputRef = React.useRef(null);
var handleLabelEscape = React.useCallback(function () {
var _a;
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
if (otherBlueprintInputGroupProps.inputRef) {
var otherInputRef = otherBlueprintInputGroupProps.inputRef;
if (otherInputRef.current) {
otherInputRef.current.blur();
}
}
}, []);
var onKeyDown = React.useCallback(function (event) {
var _a;
if (escapeToBlur && event.key === "Escape") {
event.preventDefault();
handleLabelEscape();
return false;
}
return (_a = otherBlueprintInputGroupProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(otherBlueprintInputGroupProps, event);
}, [otherBlueprintInputGroupProps.onKeyDown, escapeToBlur]);
var iconIntent;
switch (intent) {
case "edited":
iconIntent = IntentDefinitions.INFO;
break;
case "removed":
iconIntent = IntentDefinitions.DANGER;
break;
default:
iconIntent = intent;
break;
}
var maybeWrappedOnChange = useTextValidation(__assign(__assign({}, otherBlueprintInputGroupProps), { invisibleCharacterWarning: invisibleCharacterWarning }));
if ((otherBlueprintInputGroupProps.readOnly || otherBlueprintInputGroupProps.disabled) &&
!!otherBlueprintInputGroupProps.value &&
!otherBlueprintInputGroupProps.title) {
otherBlueprintInputGroupProps["title"] = otherBlueprintInputGroupProps.value;
}
return (React.createElement(BlueprintInputGroup, __assign({ inputRef: inputRef, className: "".concat(eccgui, "-textfield") +
(intent ? " ".concat(eccgui, "-intent--").concat(intent) : "") +
(className ? " ".concat(className) : ""), intent: intent && !["info", "edited", "removed", "neutral"].includes(intent)
? intent
: undefined, fill: fullWidth }, otherBlueprintInputGroupProps, { leftElement: leftIcon != null && leftIcon !== false ? (typeof leftIcon === "string" ? (React.createElement(Icon, { name: leftIcon, className: BlueprintClassNames.ICON, intent: iconIntent })) : (React.createElement("span", { className: BlueprintClassNames.ICON }, leftIcon))) : undefined, dir: "auto", onChange: maybeWrappedOnChange, onKeyDown: otherBlueprintInputGroupProps.onKeyDown || escapeToBlur ? onKeyDown : undefined })));
};
export default TextField;
//# sourceMappingURL=TextField.js.map