zent
Version:
一套前端设计语言和基于React的实现
138 lines (137 loc) • 5.68 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import reactCSS from '../helpers/reactcss';
import { addEventListener } from '../../utils/component/event-handler';
var EditableInput = (function (_super) {
__extends(EditableInput, _super);
function EditableInput(props) {
var _this = _super.call(this, props) || this;
_this.inputRef = createRef();
_this.eventCancelList = [];
_this.handleBlur = function (e) {
var blurValue = _this.state.blurValue;
if (blurValue) {
_this.setState({ value: blurValue, blurValue: null });
}
_this.props.onBlur && _this.props.onBlur(e);
};
_this.handleChange = function (e) {
var _a;
var label = !!_this.props.label;
if (label) {
_this.props.onChange((_a = {}, _a[_this.props.label] = e.target.value, _a), e);
}
else {
_this.props.onChange(e.target.value, e);
}
_this.setState({ value: e.target.value });
};
_this.handleKeyDown = function (e) {
var _a, _b;
var val = Number(e.target.value);
if (isNaN(val)) {
return;
}
var amount = _this.props.arrowOffset || 1;
var key = e.key;
if (key === 'ArrowUp') {
if (_this.props.label !== null) {
_this.props.onChange((_a = {}, _a[_this.props.label] = val + amount, _a), e);
}
else {
_this.props.onChange(val + amount, e);
}
_this.setState({ value: val + amount });
}
if (key === 'ArrowDown') {
if (_this.props.label !== null) {
_this.props.onChange((_b = {}, _b[_this.props.label] = val - amount, _b), e);
}
else {
_this.props.onChange(val - amount, e);
}
_this.setState({ value: val - amount });
}
if (key === 'Enter') {
_this.props.onPressEnter && _this.props.onPressEnter(e);
}
};
_this.handleDrag = function (e) {
var _a;
if (_this.props.dragLabel) {
var newValue = Math.round(_this.props.value + e.movementX);
if (newValue >= 0 && newValue <= _this.props.dragMax) {
_this.props.onChange((_a = {}, _a[_this.props.label] = newValue, _a), e);
}
}
};
_this.handleMouseDown = function (e) {
if (_this.props.dragLabel) {
e.preventDefault();
_this.handleDrag(e);
_this.eventCancelList.push(addEventListener(window, 'mousemove', _this.handleDrag));
_this.eventCancelList.push(addEventListener(window, 'mouseup', _this.handleMouseUp, {
passive: true,
}));
}
};
_this.handleMouseUp = function () {
_this.unbindEventListeners();
};
_this.unbindEventListeners = function () {
_this.eventCancelList.forEach(function (cancel) { return cancel(); });
_this.eventCancelList = [];
};
_this.state = {
value: String(props.value).toUpperCase(),
blurValue: String(props.value).toUpperCase(),
};
return _this;
}
EditableInput.prototype.componentDidUpdate = function (prevProps) {
var input = this.inputRef.current;
var val = this.props.value;
if (prevProps.value !== val && val !== this.state.value) {
if (input === document.activeElement) {
this.setState({ blurValue: String(val).toUpperCase() });
}
else {
this.setState({ value: String(val).toUpperCase() });
}
}
};
EditableInput.prototype.componentWillUnmount = function () {
this.unbindEventListeners();
};
EditableInput.prototype.render = function () {
var styles = reactCSS({
default: {
wrap: {
position: 'relative',
},
},
'user-override': {
wrap: this.props.style && this.props.style.wrap
? this.props.style.wrap
: {},
input: this.props.style && this.props.style.input
? this.props.style.input
: {},
label: this.props.style && this.props.style.label
? this.props.style.label
: {},
},
'dragLabel-true': {
label: {
cursor: 'ew-resize',
},
},
}, {
'user-override': true,
}, this.props);
return (_jsxs("div", __assign({ style: styles.wrap, "data-zv": '10.0.17' }, { children: [_jsx("input", { style: styles.input, ref: this.inputRef, value: this.state.value, onKeyDown: this.handleKeyDown, onChange: this.handleChange, onBlur: this.handleBlur, placeholder: this.props.placeholder, "data-zv": '10.0.17' }, void 0), this.props.label ? (_jsx("span", __assign({ style: styles.label, onMouseDown: this.handleMouseDown, "data-zv": '10.0.17' }, { children: this.props.label }), void 0)) : null] }), void 0));
};
return EditableInput;
}(Component));
export default EditableInput;