qwc2
Version:
QGIS Web Client
231 lines (230 loc) • 11.1 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 _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 2018-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 PropTypes from 'prop-types';
import Icon from '../Icon';
import './style/NumberInput.css';
var NumberInput = /*#__PURE__*/function (_React$Component) {
function NumberInput() {
var _this;
_classCallCheck(this, NumberInput);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, NumberInput, [].concat(args));
_defineProperty(_this, "state", {
propValue: "",
value: "",
changed: false,
valid: false
});
_defineProperty(_this, "onChange", function (ev) {
var len = ev.target.value.length;
var value = ev.target.value.substring(_this.props.prefix.length, len - _this.props.suffix.length);
_this.setState({
value: value,
changed: true
});
});
_defineProperty(_this, "currentFloatValue", function () {
var floatValue = parseFloat(_this.state.value);
return isNaN(floatValue) ? null : floatValue;
});
_defineProperty(_this, "startStep", function (delta) {
if (_this.props.disabled || _this.props.readOnly) {
return;
}
_this.props.onChange(_this.constrainValue(_this.currentFloatValue() + delta));
var stepInterval = null;
var stepTimeout = setTimeout(function () {
stepInterval = setInterval(function () {
_this.props.onChange(_this.constrainValue(_this.currentFloatValue() + delta));
}, 50);
}, 500);
document.addEventListener('pointerup', function () {
clearTimeout(stepTimeout);
clearInterval(stepInterval);
}, {
once: true
});
});
_defineProperty(_this, "onKeyDown", function (ev) {
if (ev.key === 'Enter') {
_this.commit();
}
// Ensure prefix/suffix isn't changed
var selStart = ev.target.selectionStart;
var selEnd = ev.target.selectionEnd;
var len = ev.target.value.length;
var startOffset = ev.key === 'Backspace' && selStart === selEnd ? 1 : 0;
var endOffset = ev.key === 'Delete' && selStart === selEnd ? 1 : 0;
if (selStart < _this.props.prefix.length + startOffset || selEnd > len - _this.props.suffix.length - endOffset) {
ev.preventDefault();
}
});
_defineProperty(_this, "commit", function () {
if (_this.state.changed) {
var value = _this.constrainValue(_this.currentFloatValue());
_this.setState({
value: value === null ? "" : value.toFixed(_this.props.decimals)
});
_this.props.onChange(value);
}
});
_defineProperty(_this, "constrainValue", function (value) {
if (value === null) {
return null;
}
if (_this.props.min !== undefined) {
value = Math.max(_this.props.min, value);
}
if (_this.props.max !== undefined) {
value = Math.min(_this.props.max, value);
}
var k = Math.pow(10, _this.props.decimals);
return Math.round(value * k) / k;
});
_defineProperty(_this, "setupSelectionListener", function (event) {
var input = event.target;
var selectionHandler = function selectionHandler(ev) {
if (ev.target === input) {
// Ensure prefix/suffix isn't selected
var len = input.value.length;
var prefixLen = _this.props.prefix.length;
var suffixLen = _this.props.suffix.length;
var selStart = Math.min(Math.max(input.selectionStart, prefixLen), len - suffixLen);
var selEnd = Math.max(Math.min(input.selectionEnd, len - suffixLen), prefixLen);
if (selStart !== input.selectionStart || selEnd !== input.selectionEnd) {
input.setSelectionRange(selStart, selEnd);
}
}
};
document.addEventListener("selectionchange", selectionHandler);
input.addEventListener("blur", function () {
document.removeEventListener("selectionchange", selectionHandler);
}, {
once: true
});
});
return _this;
}
_inherits(NumberInput, _React$Component);
return _createClass(NumberInput, [{
key: "render",
value: function render() {
var _this$props$step,
_this2 = this;
var className = classNames({
"number-input": true,
"number-input-mobile": this.props.mobile && !this.props.hideArrows,
"number-input-normal": !this.props.mobile && !this.props.hideArrows,
"number-input-noarrows": this.props.hideArrows,
"number-input-disabled": this.props.disabled || this.props.readOnly,
"number-input-invalid": this.props.required && !this.state.value
});
var style = {};
if (!this.props.fitParent) {
var paddingLength = (this.props.mobile ? 4 : 1.5) + 'em';
var prefixSuffixLength = this.props.prefix.length + this.props.suffix.length + 'ch';
var numberLength = 2 + Math.max((this.props.min || 0).toFixed(this.props.decimals).length, (this.props.max || 0).toFixed(this.props.decimals).length) + "ch";
style.minWidth = "calc(".concat(paddingLength, " + ").concat(prefixSuffixLength, " + ").concat(numberLength, ")");
}
var step = (_this$props$step = this.props.step) !== null && _this$props$step !== void 0 ? _this$props$step : Math.pow(10, -this.props.decimals);
var plusIcon = this.props.mobile ? "plus" : "chevron-up";
var minusIcon = this.props.mobile ? "minus" : "chevron-down";
return /*#__PURE__*/React.createElement("div", {
className: className + " " + this.props.className
}, /*#__PURE__*/React.createElement("input", {
disabled: this.props.disabled,
inputMode: "numeric",
onBlur: this.commit,
onChange: this.onChange,
onFocus: this.setupSelectionListener,
onKeyDown: this.onKeyDown,
placeholder: this.props.placeholder,
readOnly: this.props.readOnly,
required: this.props.required,
style: style,
type: "text",
value: this.props.prefix + this.state.value + this.props.suffix
}), /*#__PURE__*/React.createElement("input", {
name: this.props.name,
required: this.props.required,
type: "hidden",
value: this.state.value
}), !this.props.hideArrows ? [/*#__PURE__*/React.createElement(Icon, {
icon: plusIcon,
key: "ArrowPlus",
onPointerDown: function onPointerDown() {
return _this2.startStep(+step);
}
}), /*#__PURE__*/React.createElement(Icon, {
icon: minusIcon,
key: "ArrowMinus",
onPointerDown: function onPointerDown() {
return _this2.startStep(-step);
}
})] : null);
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, state) {
if (state.propValue !== nextProps.value) {
return {
propValue: nextProps.value,
value: typeof nextProps.value === "number" ? nextProps.value.toFixed(nextProps.decimals) : "",
changed: false
};
}
return null;
}
}]);
}(React.Component);
_defineProperty(NumberInput, "propTypes", {
className: PropTypes.string,
decimals: PropTypes.number,
disabled: PropTypes.bool,
fitParent: PropTypes.bool,
hideArrows: PropTypes.bool,
max: PropTypes.number,
min: PropTypes.number,
mobile: PropTypes.bool,
name: PropTypes.string,
onChange: PropTypes.func,
placeholder: PropTypes.string,
prefix: PropTypes.string,
readOnly: PropTypes.bool,
required: PropTypes.bool,
step: PropTypes.number,
style: PropTypes.object,
suffix: PropTypes.string,
value: PropTypes.number
});
_defineProperty(NumberInput, "defaultProps", {
className: "",
decimals: 0,
mobile: false,
prefix: "",
suffix: ""
});
export { NumberInput as default };