qwc2
Version:
QGIS Web Client
315 lines (314 loc) • 14.4 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
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; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* Copyright 2024 Sourcepole AG
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import classNames from 'classnames';
import DOMPurify from 'dompurify';
import PropTypes from 'prop-types';
import LocaleUtils from '../../utils/LocaleUtils';
import MiscUtils from '../../utils/MiscUtils';
import Icon from '../Icon';
import './style/TextInput.css';
var TextInput = /*#__PURE__*/function (_React$Component) {
function TextInput(props) {
var _this;
_classCallCheck(this, TextInput);
_this = _callSuper(this, TextInput, [props]);
_defineProperty(_this, "state", {
focus: false,
value: "",
valueRev: 0,
curValue: "",
changed: false
});
_defineProperty(_this, "setDefaultValue", function (value, valueRev, prevValueRef) {
if (valueRev > prevValueRef) {
_this.input.innerHTML = DOMPurify.sanitize(value.replaceAll('\n', _this.props.multiline ? '<br />' : ''));
}
});
_defineProperty(_this, "onCopy", function (ev, cut) {
ev.preventDefault();
var selection = window.getSelection();
var plainText = selection.toString();
if (ev.clipboardData) {
ev.clipboardData.setData('text/plain', plainText);
}
if (cut) {
_this.clear();
}
});
_defineProperty(_this, "clear", function () {
var clearValue = _this.props.clearValue;
_this.props.onChange(clearValue);
_this.setState(function (state) {
return {
curValue: _this.props.clearValue,
changed: state.value !== clearValue
};
});
_this.input.innerHTML = clearValue;
});
_defineProperty(_this, "onChange", function (ev) {
var curValue = DOMPurify.sanitize(ev.target.innerText.replace(/<br\s*\/?>$/, '').replace(/\n$/, ''));
if (!_this.props.multiline) {
curValue = curValue.replace('\n', '');
}
_this.setState({
curValue: curValue,
changed: true
});
});
_defineProperty(_this, "onBlur", function () {
_this.setState({
focus: false
});
if (!_this.skipNextCommitOnBlur) {
_this.commit();
}
});
_defineProperty(_this, "onFocus", function (ev) {
_this.setState({
focus: true
});
window.setTimeout(function () {
if (window.getSelection && document.createRange) {
var range = document.createRange();
range.selectNodeContents(ev.target);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.body.createTextRange) {
var _range = document.body.createTextRange();
_range.moveToElementText(ev.target);
_range.select();
}
}, 1);
});
_defineProperty(_this, "onMouseDown", function (ev) {
var el = document.elementFromPoint(ev.clientX, ev.clientY);
if ((el === null || el === void 0 ? void 0 : el.nodeName) === 'A' && ev.ctrlKey) {
window.open(el.href, el.target);
}
});
_defineProperty(_this, "onMouseMove", function (ev) {
var isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
clearTimeout(_this.tooltipTimeout);
var editable = !_this.props.disabled && !_this.props.readOnly;
if (!isTouch && editable && ev.target.nodeName === 'A') {
var rect = ev.target.getBoundingClientRect();
var left = rect.left + window.scrollX;
var bottom = rect.bottom + window.scrollY + 2;
_this.tooltipTimeout = setTimeout(function () {
if (!_this.tooltipEl) {
_this.tooltipEl = document.createElement("span");
_this.tooltipEl.className = "text-input-link-tooltip";
_this.tooltipEl.innerHTML = LocaleUtils.tr("misc.ctrlclickhint");
_this.tooltipEl.style.position = 'absolute';
_this.tooltipEl.style.zIndex = 10000000000;
document.body.appendChild(_this.tooltipEl);
}
_this.tooltipEl.style.left = left + 'px';
_this.tooltipEl.style.top = bottom + 'px';
_this.tooltipTimeout = null;
}, 250);
} else if (_this.tooltipEl) {
document.body.removeChild(_this.tooltipEl);
_this.tooltipEl = null;
}
});
_defineProperty(_this, "onMouseLeave", function () {
clearTimeout(_this.tooltipTimeout);
if (_this.tooltipEl) {
document.body.removeChild(_this.tooltipEl);
_this.tooltipEl = null;
}
});
_defineProperty(_this, "onKeyDown", function (ev) {
if (ev.key === 'Enter' && !_this.props.multiline) {
ev.preventDefault();
_this.commit();
} else if (ev.key === 'Escape') {
_this.setState(function (state) {
return {
value: _this.props.value,
valueRev: state.valueRev + 1,
curValue: _this.props.value || "",
changed: false
};
});
_this.skipNextCommitOnBlur = true;
ev.target.blur();
}
});
_defineProperty(_this, "commit", function () {
if (_this.state.changed) {
if (_this.props.addLinkAnchors) {
var valueWithLinks = MiscUtils.addLinkAnchors(_this.state.curValue);
_this.props.onChange(valueWithLinks);
} else {
_this.props.onChange(_this.state.curValue);
}
}
});
_defineProperty(_this, "storeInitialHeight", function (el) {
if (el) {
_this.initialHeight = el.offsetHeight;
}
});
_defineProperty(_this, "startResize", function (ev) {
var container = ev.target.parentElement;
if (!container) {
return;
}
var startHeight = container.offsetHeight;
var startMouseY = ev.clientY;
var resizeInput = function resizeInput(event) {
container.style.height = Math.max(_this.initialHeight, startHeight + (event.clientY - startMouseY)) + 'px';
};
document.body.style.userSelect = 'none';
ev.view.addEventListener("pointermove", resizeInput);
ev.view.addEventListener("pointerup", function () {
document.body.style.userSelect = '';
ev.view.removeEventListener("pointermove", resizeInput);
}, {
once: true
});
});
_this.skipNextCommitOnBlur = false;
_this.focusEnterClick = false;
_this.initialHeight = null;
_this.input = null;
_this.tooltipEl = null;
_this.tooltipTimeout = null;
return _this;
}
_inherits(TextInput, _React$Component);
return _createClass(TextInput, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
this.setDefaultValue(this.state.value, this.state.valueRev, prevState.valueRev);
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var wrapperClassName = classNames({
"TextInput": true,
"text-input-wrapper": true,
"text-input-wrapper-multiline": this.props.multiline,
"text-input-wrapper-focused": this.state.focus
});
var preClassName = classNames({
"text-input": true,
"text-input-disabled": this.props.disabled,
"text-input-readonly": this.props.readOnly || !this.state.curValue,
"text-input-invalid": this.props.required && !this.state.curValue
});
var showClear = this.props.showClear && this.state.focus && !this.props.multiline && !this.props.disabled && !this.props.readOnly && this.state.curValue;
var style = _objectSpread({}, this.props.style);
if (showClear) {
style.marginRight = '1.5em';
}
return /*#__PURE__*/React.createElement("div", {
className: wrapperClassName + " " + (this.props.className || ""),
ref: this.storeInitialHeight
}, this.props.name ? /*#__PURE__*/React.createElement("textarea", {
className: "text-input-form-el",
name: this.props.name,
onChange: function onChange() {},
required: this.props.required,
tabIndex: "-1",
value: this.state.curValue
}) : null, /*#__PURE__*/React.createElement("pre", {
className: preClassName,
contentEditable: !this.props.disabled && !this.props.readOnly,
dangerouslySetInnerHTML: {
__html: this.state.value.replaceAll('\n', this.props.multiline ? '<br />' : '')
},
onBlur: this.onBlur,
onChange: this.onChange,
onCopy: function onCopy(ev) {
return _this2.onCopy(ev, false);
},
onCut: function onCut(ev) {
return _this2.onCopy(ev, true);
},
onFocus: this.onFocus,
onInput: this.onChange,
onKeyDown: this.onKeyDown,
onMouseDown: this.onMouseDown,
onMouseLeave: this.onMouseLeave,
onMouseMove: this.onMouseMove,
ref: function ref(el) {
_this2.input = el;
},
style: style
}), !this.state.curValue ? /*#__PURE__*/React.createElement("div", {
className: "text-input-placeholder"
}, this.props.placeholder) : null, this.props.multiline ? /*#__PURE__*/React.createElement("div", {
className: "text-input-resize-handle",
onPointerDown: this.startResize
}) : null, showClear ? /*#__PURE__*/React.createElement("div", {
className: "text-input-clear-icon"
}, /*#__PURE__*/React.createElement(Icon, {
icon: "clear",
onClick: this.clear,
onMouseDown: MiscUtils.killEvent
})) : null);
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, state) {
if (state.value !== nextProps.value) {
return {
value: nextProps.value,
valueRev: state.valueRev + 1,
curValue: DOMPurify.sanitize(nextProps.value || ""),
changed: false
};
}
return null;
}
}]);
}(React.Component);
_defineProperty(TextInput, "propTypes", {
addLinkAnchors: PropTypes.bool,
className: PropTypes.string,
clearValue: PropTypes.string,
disabled: PropTypes.bool,
multiline: PropTypes.bool,
name: PropTypes.string,
onChange: PropTypes.func,
placeholder: PropTypes.string,
readOnly: PropTypes.bool,
required: PropTypes.bool,
showClear: PropTypes.bool,
style: PropTypes.object,
value: PropTypes.string
});
_defineProperty(TextInput, "defaultProps", {
clearValue: "",
placeholder: "",
showClear: true
});
export { TextInput as default };